È necessario creare un'intestazione globale per il tuo sito web con Divi?
Un'intestazione globale apparirà ovunque sul tuo sito web, a meno che tu non abbia assegnato un'intestazione diversa a una pagina o a un post.
Cominciamo!
Panoramica
Ecco un'anteprima dell'intestazione globale che andremo a progettare.
Configura il tuo menu principale
Inizia creando il tuo menu nelle impostazioni di aspetto del tuo sito WordPress.
Accedi all'opzione Theme Builder in Divi
Nelle opzioni di Tema Divi, fai clic su Generatore di temi. Una volta lì, noterai a modello di sito web Predefinito.
Aggiungi e crea un'intestazione globale
Le modello di sito web default è dove puoi iniziare a creare la tua intestazione globale personalizzata, il corpo globale e il piè di pagina globale. Fai clic su "Aggiungi intestazione globale" e continua facendo clic su "Crea intestazione globale" per iniziare il processo.
Impostazioni della sezione
dimensionamento
Apri le impostazioni della sezione che troverai nella pagina, nella scheda Stile, modifica le dimensioni su diverse dimensioni dello schermo.
- Larghezza massima: 100%
- Larghezza massima: 1280px (per PC e tablet), 100% (per dispositivi mobili)
spaziatura
Rimuovi tutti i margini interni superiore e inferiore
- Vertice del margine interno: 0px
- Margine interno inferiore: 0px
confine
Ora aggiungi un raggio di bordo agli angoli in basso a sinistra ea destra della sezione.
- In basso a sinistra: 50px
- In basso a destra: 50px
Scatola delle ombre
Aggiungiamo anche un'ombra sottile.
- Intensità sfocatura ombra scatola: 60px
- Colore carattere sottotitoli: rgba(0,0,0,0.13)
visibilità
- Overflow orizzontale: visibile
- Troppopieno verticale: Visibile
Dedica una nuova riga all'intestazione
Ora che abbiamo completato le impostazioni generali della sezione, possiamo iniziare ad aggiungere righe. In totale, avremo bisogno di due linee; uno dedicato all'intestazione e uno che consente la visualizzazione delle voci di menu. Inizieremo con l'intestazione aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Impostazioni linea
Impostazioni di sfondo
Senza aggiungere moduli alla linea, apri le impostazioni della linea e cambia il colore di sfondo.
- Sfondo: #38383F
dimensionamento
Quindi modificare i parametri di dimensionamento della linea.
- Usa larghezza grondaia personalizzata: SÌ
- Spaziatura delle colonne: 1
- Larghezza massima: 100%
- Larghezza massima: 100%
Visualizzazione
Ora assicuriamoci che le colonne appaiano una accanto all'altra su schermi più piccoli aggiungendo questa riga di codice CSS all'elemento della riga principale.
01
display: flex;
Aggiungi il modulo immagine nella colonna 1
Scarica il logo
Una volta completate le impostazioni della riga, è ora di iniziare ad aggiungere moduli. Aggiungi un modulo immagine alla colonna 1 e carica il tuo logo.
allineamento
Vai alla scheda Stile e allinea l'immagine a sinistra.
dimensionamento
Modificare anche la Larghezza del modulo.
spaziatura
Aggiungi anche valori di margine personalizzati.
Aggiungi il modulo di monitoraggio dei social media nella colonna 2
Aggiungi social network
Passiamo alla seconda colonna. Lì avremo bisogno di un modulo di monitoraggio dei social media. Aggiungi i social network di tua scelta. Puoi aggiungere tutti i social media che vuoi.
Colore di sfondo della rete sociale
Quindi, apri ogni social network individualmente e cambia il colore di sfondo in un colore completamente trasparente.
- Colore di sfondo: rgba (0,0,0,0)
allineamento
Torna alle normali impostazioni del modulo e quindi modifica l'allineamento completo del modulo.
icona
Modifica anche le impostazioni dell'icona.
- Colore icona: #FFFFFF
- Usa la dimensione dell'icona personalizzata: Sì
- Dimensione carattere icona: 16px (PC e tablet), 12px (telefono)
spaziatura
Aggiungi un margine superiore.
Aggiungi il modulo Button nella colonna 3
Passa alla terza colonna e aggiungi un modulo Button contenente un testo a tua scelta.
allineamento
Modificare l'allineamento del pulsante nella scheda Stile.
Impostazioni dei pulsanti
Personalizza le impostazioni dei pulsanti come segue:
- Usa stili personalizzati per il pulsante: Sì
- Dimensione testo pulsante: 12px (desktop), 10px (tablet), 8px (telefono)
- Colore testo pulsante: #ffffff
- Pulsante sfondo: #ffae25
- Larghezza bordo pulsante: 0 pixel
- Pulsante Raggio bordo: 0 pixel
- Spaziatura delle lettere dei pulsanti: 5 px (desktop), 3 px (tablet e telefono)
- Pulsante Font: Apri Nessuno
- Pulsante Luce soffusa: testo in grassetto
- Copia stile pulsante: TT
spaziatura
Personalizza i valori dei margini.
Dedica una nuova riga alla barra dei menu
Dopo aver compilato la riga dedicata all'intestazione globale, puoi aggiungere un'altra riga appena sotto.
Impostazioni linea
dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della linea e modifica le impostazioni di ridimensionamento nella scheda Stile.
spaziatura
Quindi rimuovere tutti i margini inferiore e superiore.
Aggiungi un modulo Menu alla colonna
Seleziona Menù
Quindi, aggiungi un modulo Menu alla colonna e seleziona il menu che hai creato nella prima parte di questo tutorial.
Fornitura
Passa alla scheda Stile e modifica le impostazioni del layout come segue:
Liens
Cambia anche il colore del collegamento attivo nella scheda Stile.
- Colore collegamento attivo: #ffae25
menu di navigazione
Fai lo stesso per il colore della linea del menu a discesa nelle impostazioni del menu a discesa.
- Colore riga a discesa: #ffae25
icona
- Colore icona menu hamburger: #ffae25
Testo del menu
Con le impostazioni del testo del menu.
- Carattere del menu: Prata
- Colore testo menu: #000000
Fai in modo che l'intestazione e la barra dei menu rimangano in primo piano
Apri le impostazioni della sezione
Una volta completata la seconda riga, tutto ciò che devi fare è assicurarti che la sezione rimanga in cima alle nostre pagine e post. Per fare ciò, apriremo nuovamente le impostazioni della sezione.
Aggiungi CSS personalizzato all'elemento principale
Successivamente, andremo alla scheda avanzate e aggiungeremo alcune righe di codice CSS all'elemento principale della sezione.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Salva le opzioni globali di intestazione e generatore di temi
Dopo aver completato l'intero design dell'intestazione globale, assicurati di salvare il design prima di uscire dal layout del modello. Una volta che sei fuori dal layout del modello, salva tutte le modifiche al generatore di temi e il gioco è fatto!
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata al risultato.
Conclusione
In questo articolo, ti abbiamo mostrato come creare un'intestazione globale personalizzata con il nuovo generatore di temi di Divi. Questo tutorial mostra quanto sia facile creare bellissime intestazioni e applicarle al tuo intero sito web o tipi di post personalizzati specifici.
Ci auguriamo che ti aiuti a personalizzare il tuo sito Web con Theme Builder.
Se hai domande o suggerimenti, lasciaci un commento nel sezione commenti qui di seguito.
...
