In questo tutorial, ti mostreremo come creare un pulsante del menu a discesa utilizzando il modulo del menu a larghezza intera di Divi. Per fare ciò, creeremo prima un menu in WordPress. Utilizzeremo quindi il modulo di menu a larghezza intera di Divi per visualizzare questo menu con stili personalizzati utilizzando il generatore Divi e un po 'di CSS personalizzato. Il risultato è un pulsante del menu a discesa pratico ed elegante.
Cominciamo.
Panoramica
Ecco una panoramica del pulsante del menu a discesa che integreremo in questo tutorial.
Cosa ti serve per iniziare
Per iniziare, se non l'hai già fatto, installa e attiva il Tema Divi installato (o il plug-in Divi Builder se non stai utilizzando il Tema Divi). Utilizzeremo il builder Divi all'inizio per progettare il pulsante del menu a discesa.
Questo è tutto !
Crea un menu in WordPress
Prima di iniziare a creare il menu a discesa con Divi Builder, dobbiamo prima creare un menu WordPress che vorremmo utilizzare per il modulo del menu a larghezza intera. Per fare ciò, vai alla dashboard di WordPress e vai su Aspetto> Menu. Quindi creare un nuovo menu facendo clic sul collegamento crea un nuovo menu, inserendo un nome di menu e facendo clic sul pulsante "Crea menu".
Per ora, puoi creare collegamenti personalizzati con "#" come segnaposto per l'URL insieme al testo del collegamento.
Strutturare le voci di menu in modo che la voce di menu di primo livello abbia il collegamento "Ulteriori informazioni" con tre voci di sottomenu.
Successivamente, assicurati di salvare il menu.
Come creare un pulsante del menu a discesa con il modulo di menu a larghezza intera Divi
Una volta creato il menu, possiamo iniziare a progettare il pulsante del menu a discesa con Divi. Per avviare il progetto, crea una nuova pagina in WordPress e utilizza Divi Builder per modificare la pagina sul front-end (visual builder).
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Crea contenuti falsi
Innanzitutto, aggiungi una riga di una colonna alla sezione standard predefinita.
Aggiungi un modulo di testo
Quindi aggiungere un modulo di testo alla riga con il seguente contenuto:
Menu Divi Il tuo contenuto va qui. Modifica o rimuovi questo testo in linea o nelle impostazioni del contenuto del modulo. Puoi anche modellare ogni aspetto di questo contenuto nelle impostazioni di progettazione del modulo e persino applicare CSS personalizzati a questo testo nelle impostazioni avanzate del modulo.
Quindi aggiornare i parametri di progettazione come segue:
Sezione imbottitura
Quindi, aggiorna l'impostazione della sezione con i seguenti elementi:
- Imbottitura: 0px verso il basso
Interlinea e bordo
Dopo aver aggiornato il riempimento della sezione, apri le impostazioni della linea e assegnagli un riempimento e un leggero bordo.
- Tappezzeria: 10vw in alto, 10vw in basso, 5vw a sinistra, 5vw a destra
- Larghezza del bordo: 1px
Creazione del pulsante del menu a discesa
Per creare il pulsante del menu a discesa, utilizzeremo un modulo di menu a larghezza intera. Questo ci permetterà di aggiungere il menu creato in precedenza.
Aggiunta del menu a larghezza intera
Per creare il modulo di menu a larghezza intera, aggiungere una nuova sezione a larghezza intera nella sezione standard corrente.
Quindi aggiungere un modulo di menu a larghezza intera alla linea.
Nella finestra a comparsa delle impostazioni del menu a larghezza intera (sotto Contenuto), utilizzare il menu a discesa per selezionare il menu che si desidera visualizzare. Questo dovrebbe essere lo stesso menu che abbiamo creato in precedenza denominato "menu a discesa del pulsante".
Quindi, rimuovere il colore di sfondo bianco predefinito per il menu.
Dopo aver aggiunto il menu con il modulo di menu a larghezza intera, salvare le impostazioni. Torneremo tra un po 'su questo modulo per finire il design. Ma per ora, aggiungeremo uno sfondo alla sezione a tutta larghezza.
Aggiorna il design della sezione a larghezza intera
Aprire le impostazioni per la sezione a larghezza intera e aggiornare quanto segue:
- Sfumatura dello sfondo a sinistra: # 0047d6
- Gradiente di sfondo destro Colore: # 45b2ff
- Larghezza massima: 240px
- Allineamento di sezione: centro
Ho impostato la larghezza massima della sezione su 240 px, poiché questa è la larghezza della larghezza del menu a discesa predefinita in Divi. È anche una buona dimensione per un pulsante su desktop e dispositivi mobili.
- Angoli arrotondati: 5px
Nella scheda Avanzate, aggiungi la seguente Classe CSS, Overflow e Z Index.
- Classe CSS: pulsante a discesa
- Straripamento orizzontale: visibile
- Straripamento verticale: visibile
- Indice Z: 14
La classe CSS è necessaria in modo da poter indirizzare il nostro CSS esterno su questa sezione in seguito. L'overflow deve essere impostato su visibile in modo da poter vedere il menu a discesa. E l'indice Z ti aiuterà a mantenere il menu a discesa sopra tutti gli altri contenuti della pagina.
Progetta il menu Fulwidth
Siamo ora pronti per progettare il modulo di menu Fulwidth. Apri le impostazioni del modulo del menu a larghezza intera e aggiorna quanto segue:
- Creare collegamenti di menu a larghezza intera: SÌ
- Colore testo a discesa: #ffffff
- Colore del testo del menu mobile: #ffffff
- Allineamento del testo: centro
- Colore di sfondo del menu a discesa: # 45b2ff
- Colore della riga del menu a discesa: #ffffff
- Colore di sfondo del menu: #45b2ff
- Menu Font: codifica senza semi-condensato
- Peso del menu Font: Semi grassetto
- Colore testo menu: #ffffff
- Dimensione del testo del menu: 16px
- Spaziatura menu: 2px
- Animazione del menu a discesa: Espandi
Posiziona il pulsante a discesa
Affinché il pulsante si sovrapponga al bordo inferiore, è necessario aggiungere un margine superiore negativo esattamente pari alla metà dell'altezza del pulsante.
- Margine: -40.5px alto
Come puoi vedere, lo spazio al passaggio del mouse non occupa ancora l'intera area dei pulsanti e il menu a discesa è ancora sulla destra. Per risolvere questo problema, possiamo aggiungere CSS personalizzati.
Aggiunta di CSS personalizzati
Prima di aggiungere il CSS personalizzato, assicurati di aggiungere l'ID CSS "a discesa" alla sezione a larghezza intera (non al modulo).
Senza l'ID CSS, il CSS riportato di seguito non funzionerà.
Per aggiungere il CSS personalizzato, apri le impostazioni della pagina e incolla il seguente codice nella casella di input CSS personalizzato.
.drop-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! important; } .drop-button .fullwidth-menu li> a {padding-bottom: 0px; line-height: 81px; } .drop-button .fullwidth-menu li li a {padding: 6px 0px; line-height: 1.6em; } .dropdown-button .et_mobile_menu li a: hover, .nav ul li a: hover, .drop-button .fullwidth-menu a: hover {opacity: 1; } .dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {padding: 0 0! important; } .drop-button .fullwidth-menu li {display: block; } .drop-button .fullwidth-menu .menu-item-has-children> a: first-child: after {right: 20px; }
Ecco il risultato finale
Considerazioni finali
La creazione di un pulsante del menu a discesa utilizzando il modulo del menu a larghezza intera di Divi comporta alcuni passaggi chiave. Per prima cosa creiamo il menu in WordPress che vogliamo integrare nel modulo. Quindi utilizziamo il generatore Divi e definiamo il modulo del menu a larghezza intera a nostro piacimento. Quindi aggiungiamo CSS personalizzati per lucidare il design sia sul desktop che sul cellulare. Il risultato è un bellissimo (e utile) menu a discesa implementato per il passaggio del mouse sul desktop e il clic da dispositivo mobile. Spero che questa sia un'utile aggiunta al tuo kit di strumenti di progettazione.
