Come ottimizzare il modulo menu di Divi con 5 preset globali (download GRATUITO)

I menu sono una parte vitale di qualsiasi sito, quindi ha senso dedicare un po' di tempo e sforzi extra per assicurarsi che vengano visualizzati correttamente. In Divi, possiamo creare rapidamente menu personalizzati utilizzando il modulo Menu di Divi, che fornisce molte delle opzioni di stile di cui abbiamo bisogno. Ma aiuta sempre a semplificare il processo di progettazione dell'intestazione del sito Web preparando in anticipo alcuni preset globali del menu. Ciò ti consentirà di implementare un framework di stile di menu personalizzato con un clic di un pulsante in modo da poter dedicare più tempo a modificare il design in modo che corrisponda al marchio del tuo sito web. Ad esempio, se desideri un menu centrato con un logo e collegamenti che assomiglino a pulsanti, puoi utilizzare un predefinito globale per distribuire quel framework con un solo clic. Ciò consente di risparmiare tempo prezioso ed energia.

In questo tutorial, condivideremo 5 preset globali del modulo di menu che puoi utilizzare quando crei le tue intestazioni Divi personalizzate. A parte il download gratuito che include tutti e 5 i preset, ti guideremo attraverso il processo di creazione di quei preset da zero.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, 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!

Per utilizzare questi preset globali di menu sulla tua intestazione globale, devi prima importare il layout (con i suoi preset) nella libreria Divi come segue:

1. Vai a Divi > Libreria Divi.
2. Fare clic sul pulsante di importazione/esportazione nella parte superiore della pagina.
3. Seleziona la scheda Importa nel popup di portabilità
4. Scegli il file JSON di layout da importare
5. Seleziona Importa preset
6. Fare clic sul pulsante Importa

Quindi vai al generatore di temi e modifica l'intestazione globale. Aggiungi un modulo menu dove vuoi che sia il logo e usa i preset per modellare e posizionare il menu di conseguenza.

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Creazione di 5 preset globali del modulo menu in Divi

#1 – Collegamenti a pulsanti centrati con logo

Per il nostro primo preset globale in stile menu, progetteremo un menu con collegamenti ai pulsanti di uguale larghezza in modo che il menu appaia simmetrico. Includeremo anche stati al passaggio del mouse che corrispondono allo stato attivo dei collegamenti dei pulsanti del menu.

Per creare questo primo preset globale del menu, aggiungi una riga di una colonna alla sezione normale.

Quindi aggiungi un modulo di menu alla riga.

Apri le impostazioni del menu e aggiungi un menu al modulo.

Quindi aggiungi anche il logo del sito come contenuto dinamico al modulo.

Nella scheda Progettazione, aggiorna quanto segue:

• Stile: centrato

• Carattere del menu: Poppins
• Peso del carattere del menu: grassetto
• Stile del carattere del menu: TT
• Dimensione del testo del menu: 14px (desktop), 24px (tablet e telefono)
• Spaziatura delle lettere del menu: 0.15em
• Altezza riga menu: 1.3 em (desktop), 1.8 em (tablet e telefono)

• Altezza massima logo: 60 px

• Margine: 0px in basso

Nella scheda Avanzate, aggiungeremo alcuni stili di collegamento del menu personalizzati in modo che appaiano come pulsanti.

Collegamento al menu CSS

Aggiungi il seguente CSS personalizzato al collegamento al menu:

Sul desktop...

min-width: 10em;
padding: 1em !important;
justify-content:center;
background: #f8f8f8;
border-radius: 10px;

Al passaggio del mouse...

background: #333333;
color: #ffffff;
opacity: 1;

Collegamento al menu attivo CSS

background: #333333;
color: #ffffff;
opacity: 1;

Menu Logo CSS

margin-bottom: 10px;

Stile 1 Risultato

Questo è il risultato finale…

Aggiunta dello stile di menu 1 come preset globale

Sezione duplicata

Prima di aggiungere lo stile del menu come predefinito globale, duplica l'intera sezione contenente il modulo del menu in modo da poter utilizzare gli stili del menu per avviare il progetto successivo.

Crea nuovo preset dagli stili correnti

Per aggiungere il preset globale, apri le impostazioni del modulo di menu originale che abbiamo creato e fai clic sul collegamento a discesa Preset.

Seleziona Crea nuovo preset dagli stili correnti.

Assegna un nome al nuovo preset ("Collegamenti pulsanti centrati con logo"), quindi salva il preset.

#2 – Logo centrato in linea con collegamenti ai pulsanti

Per creare il secondo menu predefinito globale, apri le impostazioni del modulo menu duplicato dal design precedente.

Nella scheda Design, aggiorna lo stile:

• Stile: logo centrato in linea

A causa del CSS personalizzato ereditato dallo stile del modulo precedente, i collegamenti del menu mantengono il design del pulsante mentre il logo rimane perfettamente al centro. Lo stile del collegamento del pulsante personalizzato consente ai collegamenti del menu di mantenere un bel design simmetrico.

Nella scheda Avanzate, aggiorna il menu Logo CSS come segue:

margin-bottom: 0px;

Risultato stile 2

Questo è il risultato finale.

Aggiunta dello stile di menu 2 come preset globale

Sezione duplicata

Prima di aggiungere lo stile del menu come predefinito globale, duplica l'intera sezione contenente il modulo del menu (stile 2) in modo da poter utilizzare gli stili del menu per avviare il progetto successivo.

Crea nuovo preset dagli stili correnti

Per aggiungere il preset globale, apri le impostazioni del modulo di menu originale per lo stile 2 che abbiamo creato e fai clic sul collegamento a discesa Preset.

Seleziona Crea nuovo preset dagli stili correnti.

Assegna un nome al preset ("Logo centrato in linea con collegamenti ai pulsanti") e salva il preset.

#3 – Menu distanziato VW centrato completo con etichetta mobile

Per questo prossimo stile di menu, progetteremo un menu centrato su tutta la larghezza senza un logo con un testo di menu dimensionato e distanziato con un'unità di lunghezza vw in modo che si adatti alla larghezza del browser. Avrà anche un'etichetta "menu" sopra l'icona dell'hamburger sul cellulare.

Per creare il terzo preset globale del menu, avremo bisogno di una riga a larghezza intera. Apri le impostazioni della riga che contiene il menu duplicato e aggiorna quanto segue:

• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Apri le impostazioni del modulo menu ed elimina il logo.

Nella scheda Design, aggiorna lo stile:

• Stile: centrato

Quindi aggiorna la dimensione del testo con la seguente unità di lunghezza VW in modo che la dimensione del testo si adatti alla larghezza del browser.

• Dimensione del testo del menu: 1.5vw (desktop)

Per creare un'etichetta "menu" per il menu mobile, possiamo aggiungere alcuni CSS personalizzati all'elemento Before Psuedo sul display Tablet come segue:

Prima del CSS

content: "MENU";
font-family: poppins;
font-size:12px;
position: absolute;
top:0;
left:50%;
transform: translate(-50%, -100%);

Si noti che la famiglia di caratteri è impostata su "poppins" per corrispondere al carattere utilizzato dai collegamenti del menu. Dovrai aggiornarlo se stai usando un font diverso.

NOTA: questo può essere visualizzato o meno nel visual builder. Potrebbe essere necessario caricare la pagina live per vedere il risultato.

Successivamente, aggiungeremo alcuni spazi aggiuntivi e bordi del collegamento al menu al passaggio del mouse. Continua ad aggiungere il seguente CSS personalizzato:

Collegamento al menu CSS (desktop):

min-width: 10em;
justify-content:center;
text-align:center;
padding: .3em;
margin-bottom: 8px;
border: 1px solid transparent;

Collegamento al menu CSS (passa il mouse):

color: #333;
border: 1px solid #333;
opacity:1;

Collegamento al menu attivo CSS:

color: #333;
border: 1px solid #333;
opacity:1;

Risultato stile 3

Aggiunta dello stile di menu 3 come preset globale

Sezione duplicata

Prima di aggiungere lo stile del menu come predefinito globale, duplica l'intera sezione contenente il modulo del menu (stile 3) in modo da poter utilizzare gli stili del menu per avviare il progetto successivo.

Crea nuovo preset dagli stili correnti

Per aggiungere lo stile 3 come predefinito globale, apri le impostazioni del modulo di menu originale per lo stile 3 che abbiamo creato e fai clic sul collegamento a discesa Predefinito.

Seleziona Crea nuovo preset dagli stili correnti.

Assegna un nome al preset ("Menu spaziato VW centrato completo con etichetta mobile") e salva il preset.

#4 – Menu distanziato a destra con etichetta mobile

Per creare il quarto preset globale del menu, dovremo aggiornare il layout delle colonne della riga con un layout 0ne-quarto tre quarti. Questo imiterà un layout di intestazione personalizzato che includerà un modulo di menu a destra e uno spazio separato per l'immagine del logo nella colonna di sinistra.

Assicurati che il menu sia nella colonna di destra. Quindi apri le impostazioni del menu e aggiorna le opzioni di Elements per mostrare l'icona del carrello e l'icona di ricerca.

Nella scheda Design, aggiorna lo stile:

• Stile: allineato a sinistra

Successivamente aggiorna i seguenti stili di collegamento e allineamento del testo:

• Colore collegamento attivo: #ac3cf7
• Dimensione del testo del menu (desktop): 14px
• Allineamento del testo: a destra

Ora che la nostra icona dell'hamburger sul cellulare sarà sul lato destro, dovremo regolare il posizionamento dell'etichetta del menu sul cellulare. Quindi aggiungeremo alcuni link di menu CSS per assicurarci che i collegamenti siano distanziati e posizionati a filo sul lato destro della colonna/riga.

Aggiungi il seguente CSS personalizzato:

Prima di CSS (tablet)

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
right:6px;
transform: translateY(-100%);

Collegamento al menu CSS:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

Stile 4 Risultato

Ecco il risultato finale del nostro menu allineato a destra. Ho aggiunto uno sfondo grigio chiaro alla riga in modo da poter vedere meglio l'allineamento.

Aggiunta dello stile di menu 4 come preset globale

Sezione duplicata

Prima di aggiungere lo stile del menu come predefinito globale, duplica l'intera sezione contenente il modulo del menu (stile 4) in modo da poter utilizzare gli stili del menu per avviare il progetto successivo.

Crea nuovo preset dagli stili correnti

Per aggiungere lo stile 4 come predefinito globale, apri le impostazioni del modulo di menu originale per lo stile 4 che abbiamo creato e fai clic sul collegamento a discesa Predefinito.

Seleziona Crea nuovo preset dagli stili correnti.

Assegna un nome al preset ("Menu distanziato a destra con etichetta mobile") e salva il preset.

#4 – Menu distanziato a sinistra con etichetta mobile

Per creare questo quarto preset globale del menu, dovremo aggiornare il layout delle colonne della riga con un layout 0ne-quarto tre quarti. Questo imiterà un layout di intestazione personalizzato che includerà un modulo di menu a sinistra e uno spazio separato per un'immagine del logo (o CTA) nella colonna di destra.

Apri le impostazioni per il menu e aggiorna l'allineamento del testo per i collegamenti del menu:

• Allineamento del testo: a sinistra

Quindi dobbiamo regolare l'etichetta del menu mobile in modo che si trovi sopra il navigatore per hamburger sul lato sinistro. E aggiungendo la "direzione: rtl" sul tablet, ci assicureremo che le icone del cellulare si allineino a sinistra anche sul cellulare.

Nella scheda Avanzate, aggiorna il seguente CSS personalizzato:

Prima di CSS (tablet):

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
left:6px;
transform: translateY(-100%);

Elemento principale (compressa):

direction:rtl;

Collegamento al menu CSS:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

Questo è il risultato finale.

Risultati finali

Pensieri finali

Sebbene lo stile esterno di questi moduli di menu sia di base, il design della struttura interna del layout del menu è estremamente utile per avviare il processo creativo. Inoltre, avere un preset globale con questi framework accelererà ulteriormente il processo. Sentiti libero di esplorare altri modi per personalizzare il modulo menu e aggiungere preimpostazioni uniche per i tuoi prossimi progetti.

Non vedo l'ora di sentirti nei commenti.

Saluti!