Creazione del menu a discesa dei temi eleganti avanzati con Divi's Theme Builder

Da quando è uscito Divi's Theme Builder, il modo in cui progettiamo intestazioni e piè di pagina nei nostri siti Web con Divi è diventato più semplice che mai. Tutto è personalizzabile e puoi ottenere esattamente il menu che hai in mente senza mai dover uscire dall'intuitivo ambiente Divi. Ora, a un certo punto, potresti esserti imbattuto nel menu a tendina Temi eleganti sul nostro sito web. Questo menu a discesa è un tipo più avanzato di mega menu che combina in modo creativo icone, testo e CTA. Ciò consente ai visitatori di navigare visivamente tra i diversi prodotti forniti. Si traduce anche in un bellissimo menu nidificato su schermi di dimensioni più piccole.

In questo tutorial, ti mostreremo come ricreare questo menu a discesa avanzato di Temi eleganti all'interno di Divi's Theme Builder. Uniremo il meglio di entrambi i mondi; useremo gli elementi Divi integrati per creare le basi dei nostri menu a discesa e combinarli con del codice che posiziona i menu a discesa all'interno del menu di WordPress. Potrai anche scaricare gratuitamente il file JSON!

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 layout dell'intestazione del menu a discesa dei temi eleganti avanzati

Per mettere le mani sul layout dell'intestazione 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!

Come caricare il file JSON

Decomprimi la cartella compressa che sei riuscito a scaricare sopra. Quindi, vai al tuo sito Web WordPress> Divi> Libreria Divi e carica il JSON.

Una volta salvato il layout nella libreria Divi, puoi accedere al Divi Theme Builder e importare il layout salvato facendo clic su "Aggiungi intestazione globale" o "Aggiungi intestazione personalizzata" e selezionando "Crea intestazione globale/personalizzata". Vai alla scheda "I tuoi layout salvati" nella libreria Divi, seleziona il layout che hai caricato nel passaggio precedente e salva tutte le modifiche di Divi Theme Builder.

Per avere un menu funzionante subito, ti verrà richiesto di seguire la prima parte di questo tutorial di seguito; aggiungendo le classi CSS alle voci di menu a livello individuale. Dovrai anche abilitare una delle classi CSS all'interno del Modulo Codice come mostrato nella parte 5 di questo tutorial.

1. Aggiungi classi CSS alle voci di menu

Vai a Menu in Aspetto

La prima parte di questo tutorial si concentra sull'impostazione delle voci di menu di WordPress con le classi CSS appropriate. Per farlo, vai alla dashboard di WordPress > Menu > Crea un nuovo menu o aprine uno esistente.

Abilita opzione classe CSS

Quindi, nell'angolo in alto a destra dello schermo, noterai le "Opzioni schermo". Attiva o disattiva questa opzione e abilita "Classi CSS" nelle proprietà del menu avanzato. Questo ci consentirà di aggiungere classi CSS a voci di menu specifiche a livello individuale.

Aggiungi classi CSS consecutive alle voci di menu che richiedono un menu a discesa

Durante questo tutorial, creeremo tre diversi menu a discesa e assegneremo ciascuno di essi a una voce di menu specifica. Per far funzionare questo processo, dovremo assegnare due diverse classi CSS alle tre voci di menu che vogliamo contenere un menu a discesa.

• Prima voce di menu a cui si desidera assegnare un menu a discesa: primo livello primo livello-1
• Seconda voce di menu a cui si desidera assegnare un menu a discesa: primo livello primo livello-2
• Terza voce di menu a cui si desidera assegnare un menu a discesa: primo livello primo livello-3

2. Crea un'intestazione personalizzata con Divi's Theme Builder

Vai a Divi Theme Builder

Una volta che la voce di menu Classi CSS è a posto, è il momento di passare a Divi. Vai a Divi Theme Builder e seleziona "Aggiungi intestazione globale/personalizzata".

Inizia a creare un'intestazione globale

Quindi, seleziona "Crea intestazione globale" per essere reindirizzato all'editor del modello.

Impostazioni della sezione

Colore di sfondo

All'interno del modello, noterai una sezione. Apri quella sezione e cambia il colore di sfondo.

• Colore di sfondo: #ffffff

Spaziatura

Successivamente, rimuovi tutto il riempimento predefinito della sezione superiore e inferiore.

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

Scatola ombra

E includi anche un'ombra sottile della scatola.

• Posizione verticale dell'ombra del riquadro: 0px
• Forza sfocatura ombra scatola: 30 px
• Colore ombra: rgba (103,151,255,0.17)

Aggiungi nuova riga

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 modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza massima: 1440px

Spaziatura

Modificare i valori di riempimento superiore e inferiore nelle impostazioni di spaziatura successiva.

• Imbottitura superiore: 10px
• Imbottitura inferiore: 10px

Aggiungi modulo menu alla riga

Seleziona Menu

Quindi, aggiungi un modulo menu alla colonna della tua riga e seleziona il menu WordPress che hai modificato nella prima parte di questo tutorial.

Carica logo

Carica un logo successivo.

Menu Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo del menu di conseguenza:

• Carattere del menu: Lato
• Peso del carattere del menu: grassetto
• Stile del carattere del menu: maiuscolo
• Colore del testo del menu: rgba (32,41,47,0.62)
• Dimensione del testo del menu: 13px
• Spaziatura delle lettere del menu: 3px
• Allineamento del testo: a destra

Impostazioni del menu a discesa

Successivamente, apporta alcune modifiche alle impostazioni del menu a discesa.

• Colore di sfondo del menu a discesa: #ffffff
• Colore linea menu a discesa: rgba(0,0,0,0)
• Colore del testo del menu a discesa: #000000
• Colore di sfondo del menu mobile: #f2f4f5
• Colore testo menu mobile: #000000

Impostazioni icona

Così come le impostazioni delle icone.

• Colore icona carrello: #000000
• Colore icona di ricerca: #000000
• Colore icona menu hamburger: #ff4a9e

Dimensionamento

E completa le impostazioni del modulo assegnando un'altezza massima del logo alle impostazioni di dimensionamento.

• Altezza massima logo: 64 px

3. Crea elementi a discesa

Aggiungi nuova riga alla sezione

Struttura a colonne (necessario il numero corrispondente di menu a discesa)

Una volta che il menu predefinito è a posto, è il momento di creare i menu a discesa. Per fare ciò, aggiungeremo una nuova riga contenente tre colonne di uguali dimensioni. Il numero di colonne corrisponde al numero di menu a discesa che creeremo.

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento di conseguenza:

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

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Classe CSS

E assegna una classe CSS alla riga.

• Classe CSS: riga del menu a discesa

Tutte le classi CSS di colonna

Una volta completate le impostazioni generali delle righe, apri ciascuna colonna singolarmente e assegna la seguente classe CSS:

• Classe CSS: colonna-menu a discesa

Aggiungi il modulo Blurb n. 1 alla colonna 1

Aggiungi contenuto

È ora di aggiungere moduli! Inizieremo creando il primo menu a discesa nella prima colonna. Per visualizzare tutti i diversi prodotti, utilizzeremo il modulo Blurb di Divi. Aggiungi alcuni contenuti a tua scelta.

Seleziona icona

Quindi, seleziona un'icona corrispondente.

Aggiungi collegamento

Aggiungi anche un link al modulo.

Impostazioni icona

Passa alla scheda Design e modella le impostazioni dell'icona come segue:

• Colore icona: #8f42ec
• Posizionamento immagine/icona: a sinistra
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 30px

Impostazioni del testo del titolo

Quindi, modella il testo del titolo.

• Carattere del titolo: Lato
• Peso del carattere del titolo: grassetto
• Stile carattere del titolo: maiuscolo
• Colore del testo del titolo: #8f42ec
• Dimensione del testo del titolo: 16px
• Spaziatura delle lettere del titolo: 2px

Impostazioni del corpo del testo

Insieme al corpo del testo.

• Carattere del corpo: Lato
• Colore del corpo del testo: #999999

Dimensionamento

Ci stiamo assicurando che anche la larghezza del contenuto sia "100%".

• Larghezza contenuto: 100%

Spaziatura

Quindi, andremo alle impostazioni di spaziatura e utilizzeremo alcuni valori di riempimento diversi su diverse dimensioni dello schermo.

• Imbottitura superiore: 15px
• Imbottitura inferiore: 15px
• Imbottitura sinistra: 6% (Desktop), 2% (Tablet), 3% (Telefono)
• Imbottitura destra: 6% (Desktop), 2% (Tablet), 3% (Telefono)

Passa il mouse:

• Imbottitura superiore: 15px
• Imbottitura inferiore: 15px
• Imbottitura sinistra: 8%
• Imbottitura destra: 4%

Animazioni

Successivamente rimuoveremo l'animazione dell'icona predefinita nelle impostazioni dell'animazione.

• Animazione immagine/icona: nessuna animazione

Classe CSS

Quindi, passeremo alla scheda Avanzate e assegneremo una classe CSS al nostro modulo. Ogni modulo nel tuo menu a discesa necessita della stessa classe CSS assegnata ad esso per essere incluso nel menu a discesa.

• Classe CSS: voce del menu a discesa

Elemento principale CSS

Ultimo ma non meno importante, completeremo le impostazioni del modulo modificando il cursore utilizzando una riga di codice CSS nell'elemento principale.

cursor: pointer;

Clona modulo Blurb x3

Una volta completato il primo modulo Blurb, clonalo tre volte.

Cambia contenuto e icone

Modifica tutti i contenuti e le icone per ogni duplicato.

Cambia link

Insieme ai link.

Clona l'ultimo modulo Blurb una volta

Continua clonando l'ultimo modulo Blurb nella colonna una volta.

Aggiungi colore di sfondo

Apri le impostazioni del modulo Blurb duplicato e cambia il colore di sfondo.

• Colore di sfondo: #f9f9f9

Modifica le impostazioni dell'icona

Modifica anche le impostazioni dell'icona.

• Colore icona: #3b45eb
• Dimensione carattere icona: 22 px

Modifica le impostazioni del testo del titolo

Insieme alle impostazioni del testo del titolo.

• Colore del testo del titolo: #3b45eb
• Dimensione del testo del titolo: 14px

Modifica contenuto e collegamento

E, naturalmente, il contenuto e il collegamento.

Disattiva su tablet e telefono

Il secondo tipo di modulo Blurb che abbiamo in questo menu a discesa sarà visibile solo su schermi di dimensioni maggiori. Questo ci aiuterà a garantire che il menu a discesa non diventi troppo opprimente su schermi di dimensioni più piccole. Per nascondere il modulo su schermi di dimensioni inferiori, vai alla scheda Avanzate e disabilita il modulo su tablet e telefono.

Clona modulo Blurb x3

Una volta completato il secondo tipo di modulo Blurb, puoi clonarlo tre volte.

Cambia contenuto e icone

Assicurati di modificare il contenuto e le icone per ogni duplicato.

Cambia link

Insieme ai link.

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

L'ultimo modulo di cui abbiamo bisogno nel nostro menu a discesa è un modulo di testo. Utilizziamo un modulo di testo invece di un modulo a pulsanti perché il modulo di testo si adatterà più facilmente all'ambiente a discesa. Aggiungi una copia a tua scelta.

Colore di sfondo

Quindi, cambia il colore di sfondo.

• Colore di sfondo: #3776ff

Impostazioni testo

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

• Carattere del testo: Lato
• Peso del carattere del testo: grassetto
• Stile del carattere del testo: maiuscolo
• Colore del testo: #ffffff
• Spaziatura delle lettere del testo: 3px
• Allineamento del testo: Centro

Spaziatura

Aggiungi anche alcuni valori di spaziatura personalizzati.

• Margine superiore: 20px
• Margine inferiore: 20 px
• Margine sinistro: 4%
• Margine destro: 4%
• Imbottitura superiore: 15px
• Imbottitura inferiore: 15px

Frontiera

Quindi, aggiungi angoli arrotondati alle impostazioni del bordo.

• Tutti gli angoli: 100 px

Scatola ombra

Abilita un'ombra sottile della scatola.

• Posizione verticale dell'ombra del riquadro: 14px
• Colore ombra: rgba (0,0,0,0) (predefinito), rgba (0,0,0,0.09) (al passaggio del mouse)

Trasforma Traduci

Al passaggio del mouse, vogliamo che il pulsante si alzi leggermente. Per aggiungere quell'effetto, utilizzeremo alcune impostazioni di traduzione di trasformazione personalizzate al passaggio del mouse.

• Destra: -3px (Hover)

Classe CSS

Come tutti gli altri moduli nel nostro menu a discesa, questo modulo necessita della seguente classe CSS:

• Classe CSS: voce del menu a discesa

Elemento principale CSS

E completeremo le impostazioni del modulo cambiando il cursore usando una riga di codice CSS nell'elemento principale.

cursor: pointer;

Elimina colonna 2 e 3

Una volta completata la prima colonna del menu a discesa, puoi aprire le impostazioni della riga e rimuovere le due colonne vuote nella riga.

Clona la prima colonna due volte

Clona la prima colonna due volte.

Personalizza gli articoli

E personalizza tutti gli elementi negli altri due menu a discesa come preferisci.

4. Aggiungi codice CSS e JQuery

Aggiungi nuovo modulo di codice alla colonna della riga n. 1

Ora che abbiamo tutte le voci del menu a discesa in posizione, è il momento di trasformarle in un menu a discesa e posizionare il menu a discesa all'interno di una voce di menu corrispondente. Aggiungi un modulo codice alla tua prima riga, proprio sotto il modulo menu.

Inserisci codice CSS

E inserisci il seguente codice CSS:

<style>
  
/* Enable class below once you're done editing the menu */
  
/*
.dropdown-menu-row {
display: none;
}*/
  
</style>
<style>
  
.et_pb_menu__menu [class*="dropdown-menu-container"] {
position: absolute;
top: 75px;
left: -195px;
background-color: white;
width: 464px;
-webkit-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
-moz-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
border-radius: 20px;
padding-top: 20px;
padding-bottom: 5px;
visibility: hidden;
opacity: 0;
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);     
}
  
.et_pb_menu__menu ul>li:hover [class*="dropdown-menu-container"] {
visibility: visible;
opacity: 1;
}
  
.et_pb_menu__menu [class*="dropdown-menu-container"]:before  {
position: absolute;
left: 195px;
top: -20px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}    
.et_mobile_menu [class*="dropdown-menu-container"] {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   
.et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF4A9E;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.et_mobile_menu [class*="dropdown-menu-container"] {
display: none;
}
  
.et_mobile_menu [class*="dropdown-menu-container"].reveal-items {
display: block;
}
  
.et_mobile_menu {
width: 130%;
margin-left: -15% !important;
min-height: 100vh;
}
</style>

Inserisci codice JQuery

Stiamo usando anche del codice JQuery. Assicurati di inserire questo codice tra i tag di script come puoi vedere nella schermata di stampa qui sotto.

jQuery(function($){
$(document).ready(function(){
  
$('.dropdown-menu-column').each(function(i){
  
i = i + 1;
  
var $dropdownMenuItems = $(this).find('.dropdown-menu-item');
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdownMenuItems.wrapAll('<div class="dropdown-menu-container-' + i + '" />');
var $dropdownContainer = $('.dropdown-menu-container-' + i);
$dropdownContainer.insertAfter($mainMenuItem);
  
});
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu [class*="dropdown-menu-container"]');
$firstLevel.off('click').click(function() {
$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 
$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');
var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();
var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  
});    
    
$(".dropdown-menu-row").css('visibility','hidden');
     
$(window).load(function() {
$(".dropdown-menu-row").fadeIn(1000);
});
  
});
});

5. Abilita la classe CSS una volta che hai finito di personalizzare il menu

Non appena hai finito di personalizzare tutti gli elementi a discesa, ti rimane una cosa da fare: nascondere l'intera riga contenente gli elementi del menu a discesa. Questo, in combinazione con una funzione di caricamento all'interno del nostro codice, impedirà la visualizzazione dei menu a discesa durante il caricamento della pagina. Una volta abilitata questa classe CSS, non vedrai più la seconda riga all'interno di Visual Builder, ma potrai accedervi in ​​modalità wireframe e/o disabilitare temporaneamente la classe CSS quando apporti modifiche ai menu a discesa. Per abilitare la classe, rimuovi le parentesi '/* */' all'inizio e alla fine della classe CSS.

• Classe CSS: riga del menu a discesa

6. Creazione di più di 3 menu a discesa

Aggiungi classi CSS alle voci di menu in Aspetto

Se stai cercando un modo per aggiungere più di 3 menu a discesa al tuo menu, dovrai tornare al menu e aggiungere classi CSS consecutive alla quarta voce di menu.

• Quarta voce di menu a cui si desidera assegnare un menu a discesa: primo livello primo livello-4

Clona colonna alla fine della riga

Quindi, torna alla tua intestazione e clona l'ultima colonna.

Assicurati che le classi CSS di colonne e moduli siano a posto

Assicurati che le classi CSS della colonna e del modulo siano a posto per il nuovo menu a discesa e il gioco è fatto! È importante dedicare sempre una nuova colonna a un nuovo menu a tendina e seguire l'ordine delle colonne della riga. Ciò significa che la colonna 1 sarà l'elenco a discesa 1, la colonna 2 sarà l'elenco a discesa 2, ecc.

• Classe CSS colonna: colonna-menu a discesa
• Classe CSS del modulo: voce del menu a discesa

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 ricreare il menu a discesa Temi eleganti usando Divi's Theme Builder. Abbiamo combinato il meglio di entrambi i mondi e utilizzato gli elementi integrati di Divi per modellare tutti gli elementi nel nostro menu a discesa, quindi abbiamo utilizzato del codice per posizionare tutti i menu a discesa all'interno della voce di menu corrispondente all'interno del menu di WordPress. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, 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.