Come fare in modo che il tuo logo attraversi le barre dei menu primarie e secondarie all'interno dell'intestazione Divi
Pubblicato: 2021-05-12Quando si tratta di creare un'intestazione, le possibilità sono infinite. Puoi includere qualsiasi cosa tu possa immaginare all'interno della tua intestazione Divi se usi Divi Theme Builder. Oggi aggiungiamo un altro tutorial sulla progettazione di intestazioni molto richiesto al tuo elenco di risorse. Ti mostreremo come fare in modo che il tuo logo attraversi le barre dei menu primarie e secondarie all'interno dell'intestazione. Potrai anche scaricare gratuitamente il file JSON!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica il modello di intestazione globale GRATUITAMENTE
Per mettere le mani sul modello di intestazione globale gratuito, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
1. Crea un nuovo modello di intestazione globale
Vai a Divi Theme Builder
Inizia andando al Divi Theme Builder nel backend del tuo sito Web WordPress. Una volta lì, fai clic su "Aggiungi intestazione globale".
Aggiungi nuova intestazione globale
Apparirà un menu a tendina. Per iniziare a costruire da zero, continua selezionando "Crea intestazione globale".
2. Costruisci il design dell'intestazione
Aggiungi sezione speciale
Per costruire questo design, useremo una sezione speciale.
Struttura della colonna
Questa è la struttura delle colonne che stiamo utilizzando per la nostra sezione specializzata:
Colore di sfondo della colonna 1
Dopo aver aggiunto la sezione specialità, apri le sue impostazioni e applica un colore di sfondo della colonna 1.
- Colore di sfondo della colonna 1: rgba(255,191,0,0.27)
Dimensionamento
Passa alla scheda Design e modifica le impostazioni di dimensionamento come segue:
- Equalizza le altezze delle colonne: Sì
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Larghezza interna: 100%
- Larghezza massima interna: 2580 px
Spaziatura
Modifica anche le impostazioni di spaziatura.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
- Imbottitura superiore della colonna 1: 0px
- Imbottitura inferiore colonna 1: 0px
- Imbottitura superiore colonna 2: 0px
- Imbottitura inferiore colonna 2: 0px
ID CSS di colonna
Quindi, vai alla scheda Avanzate e applica un ID CSS personalizzato a entrambe le colonne.
- ID CSS colonna 1: header-first-column
- ID CSS colonna 2: header-second-column
Aggiungi modulo immagine alla colonna 1
Carica immagine
È ora di aggiungere moduli, iniziando con un modulo immagine nella colonna 1. Carica il tuo logo.
Allineamento
Quindi, passa alla scheda Design e modifica l'allineamento dell'immagine.
- Allineamento immagine: centro
Dimensionamento
Applicare una larghezza massima anche alle impostazioni di dimensionamento.
- Larghezza massima: 100 px
Visibilità
E nascondi il modulo su schermi di dimensioni più piccole.
Aggiungi la riga n. 1 alla colonna 2
Struttura della colonna
Nella colonna 2 della nostra sezione specializzata, aggiungeremo una prima riga utilizzando la seguente struttura a colonne:
Colore di sfondo
Apri le impostazioni della riga e usa il seguente colore di sfondo:
- Colore di sfondo: #a163ff
Spaziatura
Passa alla scheda di progettazione della riga e modifica le impostazioni di spaziatura come segue:
- Imbottitura superiore: 10px
- Imbottitura inferiore: 10px
- Imbottitura sinistra: 5%
- Imbottitura destra: 5%
Frontiera
Successivamente, applica le seguenti impostazioni del bordo:
- Larghezza bordo inferiore: 3px
- Larghezza bordo sinistro:
- Desktop: 3px
- Tablet e telefono: 0px
- Colore bordo: #6c2eb9
Elemento principale CSS
E usa le seguenti righe di codice CSS all'interno dell'elemento principale della riga:
display: flex; justify-content: center; align-items: center;
Nascondi le colonne 1 e 2 su schermi di dimensioni inferiori
Per semplificare il design su schermi di dimensioni più piccole, apriremo le impostazioni della colonna 1 e 2 e le nasconderemo entrambe su tablet e telefono.
Aggiungi il modulo Segui social media alla colonna 1
Aggiungi social network
È ora di aggiungere moduli, iniziando con un modulo Segui social media nella colonna 1. Aggiungi i social network di tua scelta.
Colore di sfondo del singolo social network
Modifica individualmente il colore di sfondo di ogni social network.
- Colore di sfondo: #ffeeba
Impostazioni icona
Torna alle impostazioni generali del modulo e cambia il colore dell'icona.
- Colore icona: #6c2eb9
Frontiera
Aggiungi anche alcuni angoli arrotondati alle impostazioni del bordo.
- Tutti gli angoli: 100 px
Aggiungi modulo di testo alla colonna 2
Aggiungi contenuto
Quindi, aggiungi un modulo di testo alla colonna 2 con alcuni contenuti a tua scelta.
Impostazioni testo
Modificare le impostazioni del modulo come segue:
- Carattere del testo: Poppins
- Allineamento del testo: Centro
Aggiungi modulo pulsante alla colonna 3
Aggiungi copia
Nella colonna 3, l'unico modulo di cui abbiamo bisogno è un modulo pulsante. Aggiungi una copia a tua scelta.
Allineamento dei pulsanti
Passa alla scheda di progettazione del modulo e modifica l'allineamento dei pulsanti su diverse dimensioni dello schermo.
- Allineamento dei pulsanti:
- Desktop: destra
- Tablet e telefono: Centro
Impostazioni dei pulsanti
Modella il pulsante successivo.
- Usa stili personalizzati per pulsante: Sì
- Dimensione del testo del pulsante: 14px
- Colore del testo del pulsante: #6c2eb9
- Colore di sfondo del pulsante: #ffeeba
- Carattere pulsante: Poppins
- Peso del carattere del pulsante: grassetto
- Stile carattere pulsante: maiuscolo
- Mostra icona pulsante: Sì
- Posizionamento dell'icona del pulsante: a sinistra
Spaziatura
E applica i seguenti valori di riempimento:
- Imbottitura superiore: 10px
- Imbottitura inferiore: 10px
- Imbottitura sinistra: 50 px
- Imbottitura destra: 30px
Aggiungi la riga 2 alla colonna 2
Struttura della colonna
La riga successiva e l'ultima di cui abbiamo bisogno nella seconda colonna della nostra sezione utilizza la seguente struttura di colonne:
Colore di sfondo
Apri le impostazioni della riga e usa il seguente colore di sfondo:
- Colore di sfondo: rgba (161,99,255,0.1)
Spaziatura
Modifica successivamente le impostazioni di spaziatura della riga.
- Imbottitura superiore: 20px
- Imbottitura inferiore: 20px
- Imbottitura sinistra: 5%
- Imbottitura destra: 5%
Frontiera
Quindi, applica le seguenti impostazioni del bordo:
- Larghezza bordo sinistro:
- Desktop: 3px
- Tablet e telefono: 0px
- Colore bordo sinistro: #6c2eb9
Aggiungi modulo menu alla colonna
Seleziona Menu
Quindi l'unico modulo di cui abbiamo bisogno in questa riga è un modulo menu. Seleziona un menu a tua scelta.
Carica logo su tablet e telefono
Quindi, carica un logo solo su tablet e telefono.
Rimuovi colore di sfondo
Successivamente, rimuovi il colore di sfondo del modulo.
Menu Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo del menu come segue:
- Carattere del menu: Poppins
- Colore del testo del menu: #6c2eb9
- Dimensione del testo del menu: 16px
Impostazioni del menu a discesa
Applicare il seguente colore della linea del menu a discesa successivo:
- Colore linea menu a discesa: rgba(0,0,0,0)
Impostazioni icone
Quindi, modifica le impostazioni dell'icona.
- Colore icona carrello: #6c2eb9
- Colore icona di ricerca: #6c2eb9
- Colore icona menu hamburger: #6c2eb9
Dimensionamento
Applicare una larghezza massima del logo su tablet e telefono.
- Larghezza massima logo:
- Tablet: 70px
- Telefono: 50px
Aggiungi modulo codice alla colonna 1
Per cambiare le proporzioni del nostro design dell'intestazione, faremo alcune lievi modifiche CSS. Per includere il codice, aggiungi un Modulo codice sotto il Modulo immagine nella colonna 1.
Aggiungi tag di stile
Inserisci alcuni tag di stile all'interno della casella del codice.
Inserisci codice CSS tra i tag di stile
E inserisci le seguenti righe di codice CSS tra i tag di stile:
@media all and (min-width: 980px) {
#header-first-column {
width: 10% !important;
display: flex;
justify-content: center;
align-items: center;
}
#header-second-column {
width: 90% !important;
}
}
@media all and (max-width: 980px) {
#header-first-column {
display: none;
}
}
4. Salva le modifiche al generatore di temi Divi
Ora che tutto è a posto, l'unica cosa che resta da fare è salvare tutte le modifiche di Divi Theme Builder e visualizzare il risultato!
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Pensieri finali
In questo post, ti abbiamo mostrato come essere creativo con la tua intestazione Divi. Più specificamente, ti abbiamo mostrato come fare in modo che il tuo logo attraversi la barra dei menu principale e secondaria all'interno dell'intestazione. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.