Come creare un menu di navigazione verticale (o intestazione) per il tuo sito Web Divi

I menu di navigazione verticale possono tornare utili per alcuni siti Web che richiedono più voci di menu in prima linea. I menu orizzontali possono essere difficili da adattare a tutti i collegamenti di menu necessari, specialmente su browser di larghezza ridotta. In questo tutorial, ti mostreremo come creare un menu di navigazione verticale personalizzato utilizzando Divi Theme Builder. Ciò ti consentirà di avere più spazio per mostrare le voci del menu di WordPress. E avrai tutta la potenza per aggiungere moduli Divi aggiuntivi all'intestazione verticale e progettarli con Divi builder.

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 caricare il modello, vai al Divi Theme Builder nel backend del tuo sito Web WordPress.

Carica il modello di sito Web predefinito globale

Quindi, nell'angolo in alto a destra, vedrai un'icona con due frecce. Fare clic sull'icona.

Passa alla scheda di importazione, carica il file JSON che sei stato in grado di scaricare in questo post e fai clic su "Importa modelli Divi Theme Builder".

Salva le modifiche al generatore di temi Divi

Una volta caricato il file, noterai una nuova intestazione e un piè di pagina globali nel modello di sito Web predefinito. Salva le modifiche di Divi Theme Builder non appena desideri che il modello venga attivato.

Passiamo al tutorial, vero?

Parte 1: Costruire una nuova intestazione globale

Per questo tutorial, creeremo il menu di navigazione verticale in un'intestazione globale utilizzando Divi Theme Builder. Tuttavia, ti mostreremo come aggiungere lo stesso menu al corpo di un modello di pagina alla fine del post, nel caso in cui desideri utilizzarlo in aggiunta al menu principale del tuo sito.

Per iniziare, vai alla dashboard di WordPress e vai a Divi > Theme Builder.

Quindi fai clic sull'area "Aggiungi intestazione globale" del modello di sito Web predefinito e seleziona "Crea intestazione globale" dal menu a discesa.

Quindi seleziona l'opzione "Costruisci da zero".

Parte 2: Progettazione del layout della sezione verticale

All'interno dell'editor del layout dell'intestazione globale, apri le impostazioni della sezione normale già presente e aggiorna quanto segue.

• Larghezza (desktop): 300 px
• Larghezza (tablet e telefono): 100%

• Altezza (scrivania): 100vh
• Altezza (tablet e telefono): auto

• Imbottitura (desktop): 4vh in alto, 0px in basso
• Imbottitura (tablet e telefono): 0px in alto, 0px in basso

Continua il disegno aggiungendo un'ombra a scatola come segue:

• Box Shadow: vedi screenshot
• Posizione verticale dell'ombra del riquadro: 0px
• Forza sfocatura ombra scatola: 20 px
• Forza di diffusione dell'ombra della scatola: -10px
• Colore ombra: rgba(0,0,0,0.3)

Per assicurarti che il menu di navigazione verticale rimanga visibile a sinistra mentre l'utente scorre, aggiorna la posizione su fissa e aggiorna l'indice z come segue:

• Posizione: fissa
• Indice Z: 9999

Per assicurarci che saremo in grado di vedere la navigazione del sottomenu che si estenderà al di fuori della sezione, aggiungi il seguente CSS personalizzato all'elemento principale:

overflow: visible !important;

Ora la tua sezione è in un layout verticale sul lato sinistro del modello.

Parte 3: Progettazione del menu verticale

Con la sezione in atto, siamo pronti per progettare il menu verticale. Per fare ciò utilizzeremo un modulo di menu con alcuni CSS personalizzati per modellare la navigazione da visualizzare verticalmente.

Useremo anche l'unità di lunghezza vh in modo che il menu si ridimensioni bene con diverse altezze del browser.

Aggiunta della riga

Per iniziare, aggiungi una riga a una colonna alla sezione.

Quindi aggiorna le impostazioni della riga come segue:

Dimensioni e imbottitura

• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 80%
• Imbottitura (desktop): 3vh sopra, 3vh sotto
• Imbottitura (tablet e telefono): 0px in alto, 0px in basso

Frontiera

• Larghezza bordo: 1px
• Colore del bordo: #eeeeee

Aggiunta del modulo menu

All'interno della riga a una colonna, aggiungi un nuovo modulo menu.

Seleziona un menu da visualizzare sotto l'interruttore del contenuto.

Quindi aggiungi il logo del tuo sito come contenuto dinamico sotto l'interruttore Logo.

Nella scheda Progettazione, aggiorna quanto segue:

• Stile: centrato
• Carattere del menu: Nunito Sans
• Colore del testo del menu: #535b7c
• Dimensione del testo del menu: 18px (desktop), 14px (tablet e telefono)
• Altezza riga menu: 2em
• Colore linea menu a discesa: #535b7c
• Colore collegamento attivo menu a discesa: #535b7c

• Colore icona carrello: #535b7c
• Colore icona di ricerca: #535b7c
• Colore icona menu hamburger: #535b7c

• Imbottitura (desktop): 2vh in alto, 2vh in basso
• Imbottitura (desktop): 10px in alto, 10px in basso

Parte 4: aggiunta del CSS personalizzato per il menu

Il menu ha bisogno di alcuni CSS personalizzati per ottenere la navigazione verticale che stiamo cercando di ottenere. Per iniziare, vai nella scheda Avanzate e aggiungi il seguente CSS personalizzato al collegamento al menu e al logo del menu.

Collegamento al menu CSS (desktop):

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

Collegamento al menu CSS (tablet):

width: auto;
border:none;

Menu Logo CSS:

margin-bottom: 20px;

Quindi, aggiungi una classe CSS personalizzata al modulo menu come segue:

Classe CSS: et-vert-menu

Verrà utilizzato per indirizzare questo particolare menu nel nostro CSS personalizzato esterno che aggiungeremo utilizzando un modulo di codice.

Aggiunta di CSS personalizzati con modulo di codice

Sotto il modulo menu, aggiungi un nuovo modulo di codice.

Quindi incolla il seguente codice nella casella del codice (assicurati di inserirlo tra i tag di stile):

/*Style Vertical Navigation Menu*/  
.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px !important;
  margin-right: 0px !important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px 0 !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block !important;
  padding: 0px !important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px !important;
    top: 0px !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100% - 1px) !important;
  top:0px !important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5" !important; /*change arrow icon for submenu*/
  right: 20px !important;
  }
.et-vert-menu .nav li ul {
    left: calc(100% - 1px) !important; /*align submenu to the right of menu link*/
  }
@media all and (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/  
#et-main-area { 
  width: calc(100% - 300px); 
  margin-left: 300px;
}
}

Parte 5: Progettazione del pulsante e delle icone Follow sui social media

Ora che il menu è completo, possiamo aggiungere un pulsante e alcuni social media seguono i collegamenti per completare l'intestazione verticale.

Aggiunta della riga

Aggiungi una nuova riga a una colonna sotto la riga corrente.

Aggiunta del pulsante

Quindi aggiungi un nuovo modulo pulsante alla riga.

Aggiorna le impostazioni del pulsante come segue:

• Allineamento dei pulsanti: centro
• Dimensione del testo del pulsante: 18 px (desktop), 14 px (tablet e telefono)
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #535b7c
• Larghezza bordo pulsante: 0px

Quindi vai alla scheda Avanzate e incolla il seguente CSS personalizzato nell'Elemento principale:

Elemento principale CSS (desktop)

display:block;
width: 100%;

Elemento principale CSS (tablet)

display:inherit;

Aggiunta delle icone Follow dei social media

Sotto il pulsante, aggiungi un modulo Segui social media.

Aggiungi i social network che desideri nella scheda dei contenuti.

Nella scheda Progettazione, aggiorna quanto segue:

• Allineamento del modulo: Centro
• Colore icona: #535b7c

Quindi apri le impostazioni di ciascuna delle reti ed elimina il colore di sfondo.

Quindi aggiungi un piccolo margine superiore come segue:

• Margine: 3vh in alto

Aggiorna impostazioni riga

Dopo che le icone di follow sui social media sono state completate, apri le impostazioni della riga e regola quanto segue:

• Larghezza grondaia: 1
• Imbottitura (desktop): 3vh in alto, 0px in basso
• Imbottitura (tablet e telefono): 10px in alto

Salva layout e modello

Una volta fatto, salva il layout e il modello.

Risultato finale

Ecco il risultato finale su una pagina live.

Come aggiungere il menu di navigazione verticale all'area del corpo di un modello di pagina

Se desideri aggiungere il menu di navigazione verticale a un layout di pagina (invece dell'intestazione globale), devi prima salvare il layout della sezione nella libreria Divi.

Per fare ciò, apri il Global Header Layout Editor e salva la sezione verticale (contenente il menu) nella tua libreria Divi.

Quindi esci dall'editor di layout e crea un nuovo modello e assegnalo alle pagine che desideri. Il clic per creare un corpo personalizzato per il modello di pagina.

Seleziona per costruirlo da zero.

Aggiungi una nuova sezione a tutta larghezza al layout.

Quindi aggiungi un modulo di contenuto del post a larghezza intera alla sezione.

Elimina la sezione normale predefinita nella parte superiore della pagina, quindi apri le impostazioni per la sezione a larghezza intera e aggiungi il seguente CSS personalizzato all'elemento principale:

Elemento principale CSS (desktop)

width: calc(100% - 300px);
margin-left:300px !important;

Elemento principale CSS (tablet)

width: 100%;

Nella sezione normale, fai clic per aggiungere una nuova sezione e, nella scheda Aggiungi da libreria, seleziona la sezione del menu verticale che hai precedentemente salvato nella libreria.

Poiché non vogliamo che la sezione venga visualizzata sul cellulare, apri le impostazioni della sezione e disabilita la visibilità della sezione su tablet e telefono.

Quindi apri il modulo di codice all'interno del layout della sezione e sostituisci questo frammento di codice...

#et-main-area { 
width: calc(100% - 300px); 
margin-left: 300px;
}

Con questo…

#main-header, #main-footer { 
width: calc(100% - 300px); 
margin-left: 300px;
}

Questo sposterà l'intestazione e il piè di pagina principali per adattarli al menu verticale fisso a sinistra del modello di pagina. Ecco come appare su una pagina live utilizzando l'intestazione e il piè di pagina predefiniti di Divi.

Pensieri finali

Al menu di navigazione verticale qui presentato è stata assegnata una posizione fissa. Tuttavia, se hai bisogno di più spazio per voci di menu o contenuti aggiuntivi, puoi modificare la posizione della sezione in assoluta. Puoi anche modificare l'overflow verticale per scorrere per dare all'utente la possibilità di scorrere le voci del menu (nota solo che non sarai in grado di vedere/usare i sottomenu con questa impostazione di overflow).

La configurazione della sezione verticale apre le porte alla creazione anche di alcune barre laterali personalizzate. Spero che questo sia utile per i progetti futuri.

Non vedo l'ora di sentirti nei commenti.

Saluti!