Divi: come creare un menu di navigazione verticale

Desideri creare un menu di navigazione verticale in modo che presenti più elementi in primo piano in DIVI?

I menu di navigazione verticali possono essere utili per alcuni siti Web che necessitano di più voci di menu in primo piano. I menu orizzontali possono essere difficili da ridimensionare 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 utilizzando Divi Theme Builder. 

Questo ti darà più spazio per mostrare le tue voci di menu di WordPress.

Cominciamo!

Panoramica

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

Andiamo al tutorial.

Creazione di una nuova intestazione globale

Per questo tutorial, creeremo il menu di navigazione verticale in un'intestazione globale utilizzando il generatore di temi di Divi

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

Quindi fare clic sull'area "Aggiungi intestazione globale" del file modello di sito web predefinito e seleziona "Crea intestazione globale" dall'elenco a discesa.

Leggi anche: Come creare un'intestazione globale con Theme Builder in DIVI

Progettazione del layout della sezione verticale

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

• Larghezza massima: 300px
• Altezza: 100vh

• Margine interno: 4vh in alto, 0px in basso

Continua la personalizzazione aggiungendo una scatola d'ombra come segue:

• Casella ombra: vedi screenshot
• Posizione verticale dell'ombra del riquadro: 0px
• Intensità sfocatura ombra box: 20px
• Box Shadow Spread Forza: -10px
• Colore ombra: rgba(0,0,0,0.3)

Per garantire che il menu di navigazione verticale rimanga visibile sulla sinistra mentre l'utente scorre, aggiorna la scheda Avanzate in posizione fissa e aggiorna lo z-index come segue:

• Stazione fissa
• Indice Z: 9999

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

overflow: visible !important;

La tua sezione sarà ora in un layout verticale sul lato sinistro del modello.

Progetta il menu verticale

Con la sezione in atto, siamo pronti per progettare il menu verticale. Per fare ciò, utilizzeremo un modulo menu con CSS personalizzato per personalizzare la navigazione da visualizzare in verticale.

Utilizzeremo anche l'unità di lunghezza vh in modo che il menu si adatti bene alle diverse altezze del browser.

Aggiunta della linea

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

Quindi, aggiorna i parametri di linea come segue:

Dimensionamento e spaziatura

• Usa larghezza grondaia personalizzata: SÌ
• Spaziatura delle colonne: 1
• Larghezza massima: 100%
• Larghezza massima: 80%

• Margine interno: 3vh in alto, 3vh in basso

confine

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

Aggiunto modulo Menu

All'interno della riga di una colonna, aggiungi un nuovo modulo Menu.

Selezionare un menu da visualizzare nella scheda Contenuto.

Quindi aggiungi il logo del tuo sito web come contenuto dinamico sotto il pulsante Logo.

Nella scheda Stile aggiorna quanto segue:

• Stile: centrato

• Menù Font: Nunito Sans
• Colore del testo del menu: #535b7c

• Menu Dimensione testo: 18px (desktop), 14px (tablet e telefono)
• Altezza riga menu: 2 em

• Colore della riga a discesa: #535b7c
• Menu a discesa Colore collegamento attivo: #535b7c

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

• Margine interno: 2vh in alto, 2vh in basso

Aggiunto CSS personalizzato per il menu

Il menu necessita di CSS personalizzati per ottenere la navigazione verticale che stiamo cercando di ottenere. Per iniziare, vai alla scheda Avanzate e aggiungi il seguente CSS personalizzato al collegamento del 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 CSS logo:

margin-bottom: 20px;

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

Classe CSS: et-vert-menu

Questa classe verrà utilizzata per indirizzare questo particolare menu nel nostro CSS personalizzato esterno che aggiungeremo utilizzando un modulo Codice.

Aggiunta di CSS personalizzati con il modulo Codice

Sotto il modulo Menu, aggiungi un modulo Codice.

Quindi incolla il seguente codice nell'area del codice (assicurati di inserirlo tra i tag di stile):

/* Menu de Navigation Style Vertical*/

.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: 10px0!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 alland (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;

}

}

Progetta il pulsante e le icone segui dei 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 linea

Aggiungi una nuova riga una colonna sotto la riga corrente.

Aggiungere un pulsante

Quindi aggiungi un modulo Button alla linea.

Aggiorna le impostazioni dei pulsanti come segue:

• Allineamento pulsanti: centro

• Usa stili personalizzati per Button: SÌ
• Dimensione testo pulsante: 18px (desktop), 14px (tablet e telefono)
• Colore testo pulsante: #ffffff
• Colore di sfondo del pulsante: #535b7c
• Larghezza bordo pulsante: 0 pixel

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;

Aggiunte icone di follow dei social media

Sotto il pulsante, aggiungi un modulo Seguici sui social media.

Aggiungi i social network che desideri nella scheda contenuto.

Nella scheda Stile, aggiorna quanto segue:

• Allineamento modulo: centro

• Colore dell'icona: #535b7c

Quindi apri le impostazioni per ciascuno dei social network e rimuovi il colore di sfondo.

Quindi aggiungi un piccolo margine superiore come segue:

• Margine: 3vh Picco

Aggiorna i parametri della linea

Una volta terminate le icone di follow sui social media, apri le impostazioni della linea e regola quanto segue:

• Usa larghezza grondaia personalizzata: SÌ
• Spaziatura delle colonne: 1

• Margine interno: 3vh in alto, 0px in basso

Salva layout e modello

Una volta terminato, salva il layout e il modello.

Risultato finale

Ecco il risultato finale su una pagina live.

Scarica DIVI ora!!!

Conclusione

Al menu di navigazione verticale mostrato qui è 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

La configurazione della sezione verticale apre anche la porta alla creazione di barre laterali personalizzate. 

Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...