Come aggiungere un logo reattivo al modulo menu a larghezza intera in Divi

Sapevi che oltre il 50 percento del traffico Internet proviene da dispositivi mobili? Ciò significa che la versione mobile del tuo sito Web è estremamente importante e potrebbe anche essere il modo principale in cui qualcuno visiterà la tua pagina. Assicurarsi che il tuo sito Web sia reattivo e ottimizzato per i dispositivi mobili è un passaggio essenziale nella progettazione di un sito Web. In questo tutorial, ti mostreremo come aggiungere un logo reattivo al modulo del menu a larghezza intera utilizzando le opzioni reattive integrate di Divi. Ciò ti consentirà di aggiungere un logo più grande o più complesso che apparirà su schermi più grandi e un logo più piccolo o più semplice che apparirà su schermi più piccoli.

Immergiamoci!

Iscriviti al nostro canale Youtube

Sbirciata

Ecco un'anteprima di ciò che progetteremo. La versione desktop del sito Web avrà un logo esaurito con testo aggiuntivo e la versione mobile del logo avrà solo il marchio del logo di base.

Perché hai bisogno di un logo reattivo

Prima di iniziare il tutorial, esaminiamo perché potresti aver bisogno di un logo reattivo sul tuo sito web.

Innanzitutto, cos'è un logo reattivo? Un logo reattivo è una variazione del tuo logo che può essere più piccolo, più semplice, abbreviato o riorganizzato per essere più visibile e leggibile a dimensioni più piccole. Se il tuo logo ha troppi elementi dettagliati, potrebbero non essere visualizzati bene con una dimensione inferiore. Anche le dimensioni dei caratteri piccole e la tipografia extra in un logo reattivo possono essere difficili da leggere su uno schermo piccolo. Implementando un logo reattivo sul tuo sito web su misura per le dimensioni dello schermo dell'utente, puoi assicurarti che l'identità del tuo marchio sia chiaramente rappresentata, qualunque cosa accada. Per alcuni ottimi esempi di loghi reattivi, dai un'occhiata a questo sito Web!

Cosa ti serve per iniziare

Innanzitutto, installa e attiva il tema Divi e assicurati di avere l'ultima versione di Divi sul tuo sito web. Quindi, assicurati di avere almeno due versioni del tuo logo: una per la visualizzazione desktop del tuo sito e una per la visualizzazione mobile. Infine, scarica il modello di intestazione e piè di pagina per il pacchetto di layout della scuola superiore di Divi.

Ora sei pronto per iniziare!

Come aggiungere un logo reattivo al modulo menu a larghezza intera in Divi

Importa il layout di intestazione e piè di pagina

Passa a Theme Builder dal menu Divi nella barra laterale. Importa il layout dell'intestazione e del piè di pagina della scuola superiore selezionando l'icona della portabilità. Seleziona la scheda Importa e scegli il file di layout. Quindi seleziona Importa modelli Divi Theme Builder.

Modificheremo l'intestazione e aggiungeremo il nostro logo reattivo nel generatore di temi. Fare clic sull'icona a forma di matita per modificare l'intestazione.

Crea il modulo Menu a larghezza intera

Aggiungi una sezione a larghezza intera

Poiché il menu originale è costruito con un modulo menu standard, dovremo modificare il layout per aggiungere un modulo menu a larghezza intera. Innanzitutto, aggiungi una sezione a larghezza intera all'intestazione globale sotto il menu esistente.

Nelle impostazioni della sezione a larghezza intera, vai su Avanzate, quindi Scorri effetti.

• Posizione appiccicosa: resta in alto

Quindi, aggiungi il colore di sfondo.

• Colore di sfondo: #f5f0eb

Aggiungi un colore diverso per lo sfondo appiccicoso.

• Colore di sfondo appiccicoso: #ffffff

Aggiungi un modulo menu a larghezza intera

Ora aggiungiamo il modulo menu a larghezza intera.

Apri le impostazioni del modulo e rimuovi lo sfondo.

Per replicare facilmente l'aspetto del menu originale, possiamo utilizzare la funzione di copia stili per copiare alcune delle impostazioni personalizzate. Apri le impostazioni per il menu originale, quindi fai clic con il pulsante destro del mouse su Stili di testo del menu e seleziona Copia stili di testo del menu.

Una volta copiato, fai clic sui tre punti per il modulo del menu a larghezza intera, quindi seleziona Incolla stili di testo del menu.

Ora ripeteremo gli stessi passaggi con le impostazioni del menu a discesa. Apri le impostazioni per il menu originale, quindi fai clic con il pulsante destro del mouse su Stili menu a discesa e seleziona Copia stili menu a discesa. Fai clic sui tre punti per il modulo del menu a larghezza intera, quindi seleziona Incolla stili di menu a discesa.

Ripetere ancora una volta per gli stili delle icone. Apri le impostazioni per il menu originale, quindi fai clic con il pulsante destro del mouse su Stili icona e seleziona Copia stili icona. Fai clic sui tre punti per il modulo del menu a larghezza intera, quindi seleziona Incolla stili icona.

Imposta l'allineamento del testo a destra.

• Allineamento del testo: a destra

Imposta l'altezza massima del logo in Design, quindi Dimensioni.

• Altezza massima del logo: 50 px

Aggiungi il seguente CSS alla sezione Menu Link sotto Custom CSS.

padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;

Infine, imposta l'imbottitura superiore e inferiore.

• Imbottitura-Top: 10px
• Imbottitura-fondo: 10px

Ora elimina la sezione del menu originale.

Aggiungi un logo reattivo

Ora aggiungeremo il logo reattivo. Per fortuna Divi rende tutto più semplice con le opzioni reattive integrate.

In Generale, apri le impostazioni del logo e carica la versione desktop del tuo logo.

Seleziona l'icona del telefono per utilizzare le opzioni reattive, quindi sostituisci il logo mobile con il tuo logo reattivo.

Crea una nuova pagina con un layout predefinito

Per vedere il menu a larghezza intera con il logo responsive in azione, creiamo una nuova pagina con un layout predefinito dalla libreria Divi. Per questo design, utilizzeremo la home page della scuola superiore del pacchetto di layout della scuola superiore per abbinare l'intestazione e il piè di pagina.

Aggiungi una nuova pagina al tuo sito web e assegnagli un titolo, quindi seleziona l'opzione Usa Divi Builder. Poiché abbiamo importato il layout dell'intestazione e del piè di pagina come intestazione e piè di pagina globali, utilizzare il layout predefinito per questa pagina.

Utilizzeremo un layout predefinito dalla libreria Divi per questo esempio, quindi seleziona Sfoglia layout.

Cerca e seleziona il layout della Home Page della scuola superiore.

Seleziona Usa questo layout per aggiungere il layout alla tua pagina.

Risultato finale

Ora diamo un'occhiata al nostro progetto finale.

Pensieri finali

Avere un sito web mobile friendly e reattivo è più importante che mai. E grazie alle opzioni reattive integrate di Divi, costruirne uno è più facile che mai! Con un logo reattivo, l'identità del tuo marchio sarà sempre chiara, indipendentemente dalle dimensioni dello schermo. Se sei interessato a saperne di più sulle opzioni reattive di Divi, dai un'occhiata a questo tutorial sul contenuto delle testimonianze reattive. Come hai implementato i design reattivi nel tuo sito web? Ci piacerebbe sentire i tuoi pensieri nei commenti!