Vorresti aggiungere un logo reattivo al tuo modulo Menu a larghezza intera di Divi in modo che si adatti alla vista sul cellulare?
Sapevi che oltre il 50% di traffico Internet arriva dai 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.
Assicurati che il tuo sito web che sia responsivo 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 tuo modulo 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.
Cominciamo!
Panoramica
Ecco un'anteprima di ciò che andremo a progettare. La versione desktop del sito Web avrà un logo ampliato con testo aggiuntivo e la versione mobile del logo avrà solo il marchio del logo di base.
Cosa ti serve per iniziare
Tutti per prima cosa, installa e attiva il tema Divi e assicurati di avere l'ultima versione di Divi sul tuo sito web. Successivamente, 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 Modelli di intestazione e piè di pagina per il pacchetto di layout delle scuole superiori di Divi.
Ora sei pronto per iniziare!
Come aggiungere un logo reattivo al modulo di intestazione a larghezza intera in Divi
Crea il modulo Intestazione a larghezza intera
Leggi anche: Divi: come visualizzare il modulo di intestazione a larghezza intera a schermo intero
Aggiungi una sezione a larghezza intera
Poiché il menu originale è costruito con un modulo di menu standard, dovremo modificare il layout per aggiungere un modulo di intestazione a larghezza intera.
Innanzitutto, aggiungi una sezione a larghezza intera (Intera Larghezza) all'intestazione globale nel menu esistente.
Nelle impostazioni della sezione a larghezza intera, vai a TecnologiaPoi Effetti di scorrimento.
- Posizione appiccicosa: resta in alto
Quindi, aggiungi il colore di sfondo.
- Sfondo: #f5f0eb
Aggiungi un colore diverso per lo sfondo nello stato appiccicoso.
- Sfondo (appiccicoso): #ffffff
Aggiungi un modulo di intestazione a larghezza intera
Ora aggiungiamo il modulo Fullwidth Header.
Apri le impostazioni del modulo e rimuovi lo sfondo.
Per replicare facilmente l'aspetto del menu originale, possiamo utilizzare la funzione Copia stili per copiare alcune delle impostazioni personalizzate.
Guarda anche: Divi: come modificare la sfumatura di uno sfondo al passaggio del mouse
Apri le impostazioni del menu principale, quindi fai clic con il pulsante destro del mouse su Testo del menu e selezionare Copia stili di testo del menu.
Una volta copiato, fai clic sui tre punti del modulo Intestazione a larghezza intera, quindi seleziona Stili di testo del menu passato.
Ora ripeteremo gli stessi passaggi con le impostazioni del menu a discesa.
Ripetere ancora una volta per le icone.
Imposta l'allineamento del testo a destra.
- Allineamento del testo: a destra
Imposta l'altezza massima del logo sotto DesignAllora dimensionamento.
- Altezza massima del logo: 50 px
Aggiungi il seguente CSS alla sezione Collegamento menu sotto CSS personalizzato.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Infine, regola 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. Fortunatamente, Divi lo rende facile con le opzioni reattive integrate.
sotto Contenuti, apri le impostazioni del logo e carica la versione desktop del tuo logo.
Seleziona l'icona della modalità mobile 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 tutta larghezza 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 di Pacchetto di layout per le scuole superiori 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 i layout.
Trova e seleziona il layout Pagina iniziale del liceo.
selezionare Usa questo layout per aggiungere il layout alla tua pagina.
Risultato finale
Ora diamo un'occhiata al nostro progetto finale.
Scarica DIVI ora!!!
Conclusione
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.
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
