Come creare un'intestazione globale personalizzata con Divi's Theme Builder

Ora che il Theme Builder è qui, non vediamo l'ora di tuffarci in nuovi tutorial che ti aiuteranno a configurare il tuo sito Web dalla A alla Z. Ciò include la creazione di intestazioni personalizzate utilizzando l'opzione integrata di Divi. In questo tutorial, ci concentreremo sulla creazione di un'intestazione globale utilizzando Divi's Theme Builder. Un'intestazione globale verrà visualizzata ovunque sul tuo sito Web, a meno che tu non abbia assegnato un'intestazione diversa a quella pagina o post.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il design dell'intestazione personalizzato

Per mettere le mani sul design dell'intestazione globale personalizzato 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 i file

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.

SCARICA

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!

Iscriviti al nostro canale Youtube

1. Imposta il tuo menu principale

Inizia creando il tuo menu nelle impostazioni dell'aspetto del tuo sito Web WordPress.

2. Vai alle Opzioni del generatore di temi

Quindi, vai al Generatore di temi nelle Opzioni del tema di Divi. Una volta lì, noterai un modello di sito Web predefinito vuoto.

3. Aggiungi e crea intestazione globale

Il modello di sito Web predefinito è il punto in cui puoi iniziare a creare la tua intestazione globale personalizzata, il corpo globale e il piè di pagina globale. Fare clic su "Aggiungi intestazione globale" e continuare facendo clic su "Crea intestazione globale" per iniziare il processo.

Impostazioni della sezione

Dimensionamento

Apri la sezione che puoi notare sulla pagina, passa alla scheda Design e modifica la larghezza tra le diverse dimensioni dello schermo.

• Larghezza: 100%
• Larghezza massima: 1280 px (desktop), 100% (tablet e telefono)

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Frontiera

Aggiungi un raggio di bordo agli angoli in basso a sinistra e a destra della sezione successiva.

• In basso a sinistra: 50 px
• In basso a destra: 50 px

Scatola ombra

Stiamo anche aggiungendo un'ombra sottile della scatola.

• Forza sfocatura ombra scatola: 60 px
• Colore ombra: rgba(0,0,0,0.13)

Visibilità

Quindi, vai alla scheda Avanzate e nascondi gli overflow. Aumenta anche l'indice z, questo aiuterà a garantire che la sezione rimanga in cima a tutto il contenuto della pagina.

• Overflow orizzontale: visibile
• Overflow verticale: visibile
• Indice Z: 99999

4. 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 righe; uno dedicato all'intestazione e uno che consente di visualizzare le voci di menu. Inizieremo con l'intestazione aggiungendo una nuova riga utilizzando la seguente struttura a colonne:

Impostazioni riga

Colore di sfondo

Senza aggiungere moduli alla riga, apri le impostazioni della riga e cambia il colore di sfondo.

• Colore di sfondo: #38383f

Dimensionamento

Successivamente, modifica le impostazioni di dimensionamento della riga.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Schermo

E assicurati che le colonne appaiano una accanto all'altra anche su schermi di dimensioni più piccole aggiungendo una singola riga di codice CSS all'elemento principale della riga.

display: flex;

Aggiungi modulo immagine alla colonna 1

Carica logo

Una volta completate le impostazioni della riga, è il momento di iniziare ad aggiungere moduli. Aggiungi un modulo immagine alla colonna 1 e carica il tuo logo.

Allineamento

Passa alla scheda Progettazione e assicurati di utilizzare l'allineamento dell'immagine a sinistra.

• Allineamento immagine: a sinistra

Dimensionamento

Modifica anche la larghezza del modulo.

• Larghezza: 100 px

Spaziatura

E aggiungi alcuni valori di margine personalizzati su diverse dimensioni dello schermo.

• Margine superiore: 5px
• Margine sinistro: 50 pixel (desktop), 20 pixel (tablet e telefono)

Aggiungi il modulo Segui social media alla colonna 2

Aggiungi social network

Alla seconda colonna. Lì, avremo bisogno di un modulo di follow sui social media. Aggiungi i social network di tua scelta.

Colore di sfondo dei social network

Quindi, apri singolarmente ogni social network e cambia il colore di sfondo in uno completamente trasparente.

• Colore di sfondo: rgba(0,0,0,0)

Allineamento

Torna alle impostazioni normali del modulo e modifica l'intero allineamento del modulo successivo.

• Allineamento del modulo: Centro

Icona

Modifica anche le impostazioni dell'icona.

• Colore icona: #ffffff
• Usa dimensione icona personalizzata: Sì
• Dimensione carattere icona: 16 px (desktop e tablet), 12 px (telefono)

Spaziatura

E aggiungi un margine superiore.

• Margine superiore: 10px

Aggiungi modulo pulsante alla colonna 3

Aggiungi copia

Passa alla terza colonna e aggiungi un modulo pulsante con una copia a tua scelta.

Allineamento

Modificare l'allineamento del pulsante nella scheda Progettazione.

• Allineamento dei pulsanti: a destra

Impostazioni dei pulsanti

Stile le impostazioni del pulsante di conseguenza:

• Usa stili personalizzati per pulsante: Sì
• Dimensioni del testo del pulsante: 12 pixel (desktop), 10 pixel (tablet), 8 pixel (telefono)
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #ffae25
• Larghezza bordo pulsante: 0px

• Raggio bordo pulsante: 0px
• Spaziatura tra le lettere dei pulsanti: 5px (desktop), 3px (tablet e telefono)
• Carattere pulsante: Open Sans
• Peso del carattere del pulsante: grassetto
• Stile carattere pulsante: maiuscolo

Spaziatura

E aggiungi alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px
• Imbottitura sinistra: 50 pixel (desktop e tablet), 15 pixel (telefono)
• Imbottitura destra: 50 px (desktop e tablet), 15 px (telefono)

5. Dedica una nuova riga alla barra dei menu

Una volta completata la riga dedicata all'intestazione globale, puoi aggiungere un'altra riga subito sotto utilizzando la seguente struttura a colonne:

Impostazioni riga

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni di riga e modifica le impostazioni di dimensionamento nella scheda di progettazione.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi modulo menu alla colonna

Seleziona Menu

Quindi, aggiungi un modulo menu alla colonna e seleziona il menu che hai creato nella prima parte di questo tutorial.

Disposizione

Passa alla scheda Design e modifica le impostazioni del layout come segue:

• Stile: centrato
• Direzione del menu a discesa: verso il basso

Link

Modifica anche il colore del collegamento attivo nella scheda Progettazione.

• Colore collegamento attivo: #ffae25

Menu a discesa

Fai lo stesso per il colore della linea del menu a discesa nelle impostazioni del menu a discesa.

• Colore linea menu a discesa: #ffae25

Icone

Modifica il colore dell'icona del menu dell'hamburger in seguito.

• Colore icona menu hamburger: #ffae25

Testo del menu

Insieme alle impostazioni del testo del menu.

• Carattere del menu: Prata
• Colore del testo del menu: #000000

6. Mantieni l'intestazione e la barra dei menu in alto

Apri le impostazioni della sezione

Una volta completata la seconda riga, l'unica cosa che resta da fare è far aderire la sezione alla parte superiore delle nostre pagine e dei nostri post. Per farlo, riapriremo le impostazioni della sezione.

Aggiungi CSS personalizzato all'elemento principale

Quindi, andremo alla scheda Avanzate e aggiungeremo alcune righe di codice CSS all'elemento principale della sezione.

position: fixed;
top: 0;
left: 0;
right: 0;

7. Salva l'intestazione globale e le opzioni del 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 le modifiche dell'intero generatore di temi e il gioco è fatto!

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 creare un'intestazione globale personalizzata con il nuovo Theme Builder di Divi. Questo tutorial mostra quanto sia facile creare bellissime intestazioni e applicarle all'intero sito Web o a specifici tipi di post personalizzati. Speriamo che questo tutorial ti ispiri a iniziare subito con il Theme Builder! Se hai domande o suggerimenti, assicurati di 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.