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

Se stai cercando un modo per creare un'intestazione globale per il tuo sito Web che non occupi molto spazio, adorerai questo tutorial. Ti mostreremo come creare un'intestazione globale a schermo intero usando Divi's Theme Builder. Mentre scorri la pagina, le uniche due cose aggiuntive che noterai sul tuo post/pagina sono 1) un'icona dell'hamburger cliccabile nell'angolo in alto a sinistra e 2) un logo nell'angolo in alto a destra. Questi due elementi seguiranno i tuoi visitatori durante tutto il loro processo di navigazione e, una volta cliccata sull'icona dell'hamburger, si aprirà un menu a schermo intero personalizzato che consentirà ai visitatori di accedere ad altre pagine del tuo sito web. Il risultato di questo design è altamente reattivo e potrai anche scaricare il file JSON gratuitamente!

Andiamo ad esso.

Anteprima

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

Desktop

Mobile

Scarica GRATUITAMENTE il modello di intestazione globale a schermo intero

Per mettere le mani sul modello di intestazione globale a schermo intero, 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!

1. Vai a Divi Theme Builder e inizia a creare un'intestazione globale

Vai a Divi Theme Builder

Inizia andando al Divi Theme Builder.

Inizia a creare un'intestazione globale

Quindi, fai clic su "Aggiungi intestazione globale" e procedi a fare clic su "Crea intestazione globale".

2. Dedica la sezione n. 1 alla navigazione a schermo intero

Impostazioni della sezione

Colore di sfondo

È ora di iniziare a creare! Apri le impostazioni della sezione che puoi notare all'interno dell'editor del modello e cambia il colore di sfondo in uno completamente trasparente.

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

Spaziatura

Successivamente, rimuovi l'imbottitura superiore e inferiore predefinita della sezione.

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

Classe CSS

Continua aggiungendo una classe CSS alla sezione. Più avanti in questo post, avremo bisogno di questa classe CSS per trasformare il menu a schermo intero.

• Classe CSS: section-transform

Visibilità predefinita

Quindi, vai alle impostazioni di visibilità e nascondi gli overflow. Assicurati di aumentare anche l'indice z della sezione, questo assicurerà che la sezione rimanga in cima a tutta la pagina e al contenuto del post.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto
• Indice Z: 999999

Visibilità al passaggio del mouse

Dopo aver aggiunto l'indice z, abilita l'opzione al passaggio del mouse e assicurati che lo stesso indice z sia applicato anche lì.

• Indice Z: 999999

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una prima riga alla sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo.

• 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 di testo alla colonna

Aggiungi contenuto

L'unico modulo di cui abbiamo bisogno in questa riga è un modulo di testo. Aggiungi un simbolo di menu a tua scelta alla casella del contenuto. In questo tutorial, stiamo usando '≡'.

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:

• Carattere del testo: Abril Fatface
• Colore del testo: #000000
• Dimensione del testo: 3vw (desktop), 5vw (tablet), 7vw (telefono)
• Altezza riga di testo: 1em

Spaziatura

Successivamente, modifica i valori di spaziatura tra le diverse dimensioni dello schermo.

• Imbottitura superiore: 2vw (Desktop), 3.5vw (Tablet), 5vw (Telefono)
• Imbottitura inferiore: 2vw (desktop), 3.5vw (tablet), 5vw (telefono)
• Imbottitura sinistra: 3vw (Desktop), 4vw (Tablet), 7vw (Telefono)
• Imbottitura destra: 3vw (Desktop), 4vw (Tablet), 7vw (Telefono)

ID CSS

Questo modulo di testo fungerà da trigger per il menu a schermo intero. Ecco perché dovremo assegnare un ID CSS al modulo di testo. Più avanti nel tutorial, utilizzeremo l'ID CSS nel nostro codice.

• ID CSS: menu-open

Aggiungi riga #2

Struttura della colonna

Continua aggiungendo una seconda riga alla sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:

• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Modifica anche i valori di spaziatura.

• Margine superiore: 2vw (desktop), 4vw (tablet), 6vw (telefono)
• Margine inferiore: 2vw (desktop), 4vw (tablet), 6vw (telefono)
• Imbottitura sinistra: 19vw
• Imbottitura destra: 19vw

Aggiungi modulo di testo alla colonna

Aggiungi contenuto

Quindi, aggiungi un nuovo modulo di testo alla colonna. Questo modulo di testo rappresenta la tua prima voce di menu.

Aggiungi collegamento

Assicurati di aggiungere un collegamento corretto al modulo successivo.

• URL collegamento modulo: #

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Poppins
• Peso del carattere del testo: semi grassetto
• Colore del testo: #000000
• Dimensioni del testo: 3vw (desktop), 7vw (tablet), 8vw (telefono)
• Spaziatura delle lettere del testo: -0.1vw
• Altezza riga di testo: 1em

Spaziatura

Successivamente, modifica le impostazioni di spaziatura del modulo.

• Margine superiore: 1vw
• Imbottitura inferiore: 2vw
• Imbottitura sinistra: 3vw

Frontiera

Aggiungi anche un bordo inferiore.

• Larghezza bordo inferiore: 1px
• Colore bordo inferiore: #333333

Classe CSS

E completa le impostazioni del modulo aggiungendo una classe CSS personalizzata. Dovrai aggiungere questa classe CSS a ogni voce di menu che inserisci nella tua sezione.

Clona modulo di testo tre volte

Una volta completato il primo modulo di testo, puoi clonarlo tutte le volte che vuoi (a seconda delle voci di menu che vuoi mostrare nel tuo menu). Tuttavia, assicurati che i moduli non superino l'altezza dello schermo.

Modifica contenuto e collegamento di ogni duplicato

Dovrai modificare il contenuto e il collegamento di ciascun duplicato.

Aggiungi il modulo Segui sui social media

Aggiungi social network di scelta

Il prossimo e ultimo modulo di cui abbiamo bisogno in questa riga è un modulo di follow sui social media. Aggiungi tutti i social network che desideri visualizzare.

Ripristina stili di social network individuali

Continua reimpostando gli stili di ogni social network individualmente.

Impostazioni icona

Quindi, vai alla scheda di progettazione del modulo e modifica le impostazioni dell'icona come segue:

• Colore icona: #000000
• Usa dimensione icona personalizzata: Sì
• Dimensione carattere icona: 1vw (desktop), 2vw (tablet), 3vw (telefono)

Spaziatura

Aggiungi anche un po' di imbottitura a sinistra.

• Imbottitura sinistra: 3vw

Classe CSS

Completa le impostazioni del modulo aggiungendo una classe CSS.

Aggiungi riga #3

Struttura della colonna

L'ultima riga di cui abbiamo bisogno in questa sezione contiene la seguente struttura di colonne:

Spaziatura

Limita lo spazio occupato da questa riga rimuovendo tutto il riempimento superiore e inferiore predefinito.

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

Aggiungi modulo codice alla colonna

Inserisci codice JQuery e CSS

Quindi, aggiungi un modulo di codice e inserisci del codice CSS e JQuery per rendere la funzione del menu a schermo intero. Assicurati di inserire manualmente il codice JQuery tra i tag di script e il codice CSS tra i tag di stile come puoi notare nella schermata di stampa qui sotto.

jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});

.section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #FFFFFF !important; 
}   
.section-transform {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

3. Dedicare la sezione n. 2 al logo nell'angolo in alto a destra

Impostazioni della sezione

Colore di sfondo

Alla prossima sezione! Questa sezione conterrà il logo nell'angolo in alto a destra. Apri le impostazioni della sezione e cambia il colore di sfondo in uno completamente trasparente.

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

Spaziatura

Successivamente, rimuovi l'imbottitura superiore e inferiore predefinita della sezione.

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

Visibilità predefinita

Aumenta anche l'indice z della sezione.

• Indice Z: 99999

Visibilità al passaggio del mouse

Abilita l'opzione al passaggio del mouse sull'indice z e assicurati che lo stesso valore si applichi anche al passaggio del mouse.

• Indice Z: 99999

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:

• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Rimuovi anche l'imbottitura superiore e inferiore predefinita della riga.

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

Aggiungi modulo immagine alla colonna

Carica immagine logo PNG

L'unico modulo di cui abbiamo bisogno in questa riga e sezione è un modulo immagine. Carica il file immagine del tuo logo semitrasparente.

Dimensionamento

Vai alle impostazioni di dimensionamento del modulo e forza la larghezza intera.

• Forza intera larghezza: Sì

Spaziatura

Completa le impostazioni del modulo aggiungendo del riempimento personalizzato su schermi di diverse dimensioni.

• Imbottitura superiore: 2.5vw (desktop), 3.5vw (tablet), 5vw (telefono)
• Imbottitura inferiore: 2.5vw (desktop), 3.5vw (tablet), 5vw (telefono)
• Imbottitura sinistra: 3vw (Desktop), 4vw (Tablet), 7vw (Telefono)
• Imbottitura destra: 3vw (Desktop), 4vw (Tablet), 7vw (Telefono)

4. Impostazioni della sezione aggiuntiva

Sezione 1

Dimensionamento

Dopo aver completato entrambe le sezioni e tutti i moduli in esse contenuti, è il momento di cambiarne le dimensioni. Apri la prima sezione e applica i seguenti valori di larghezza e altezza:

• Larghezza: 8vw (desktop), 11vw (tablet), 18vw (telefono)
• Altezza: 7vw (desktop), 11vw (tablet), 18vw (telefono)

Elemento principale predefinito

Quindi, vai alla scheda Avanzate della sezione e aggiungi le seguenti righe di codice CSS:

position: fixed;
top: 0;

Elemento principale al passaggio del mouse

Assicurati che le stesse righe di codice CSS si applichino al passaggio del mouse.

position: fixed;
top: 0;

Sezione 2

Dimensionamento

Continua aprendo le impostazioni della seconda sezione e modifica la larghezza su diverse dimensioni dello schermo.

• Larghezza: 13vw (desktop), 21vw (tablet), 30vw (telefono)

Elemento principale predefinito

Quindi, vai alla scheda Avanzate e aggiungi le seguenti righe di codice CSS:

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

Elemento principale al passaggio del mouse

Assicurati che le stesse righe di codice CSS si applichino al passaggio del mouse.

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

5. Salva le modifiche del generatore e visualizza il risultato

Una volta completati tutti i passaggi precedenti, puoi salvare il modello di intestazione globale e visualizzare il risultato sul tuo sito web!

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 tutorial, ti abbiamo mostrato come creare un'intestazione globale a schermo intero utilizzando Divi's Theme Builder. Abbiamo aggiunto due elementi fissi al nostro design; un'icona dell'hamburger nell'angolo in alto a sinistra e un logo nell'angolo in alto a destra. Al clic, l'icona dell'hamburger apre un menu a schermo intero creato utilizzando gli elementi integrati di Divi. Sei libero di usare Divi per progettare questo menu a schermo intero come vuoi! All'inizio di questo tutorial, sei stato anche in grado di scaricare gratuitamente il file JSON. Se hai domande, 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.