Vai al contenuto principale

Come creare un pulsante del menu a discesa utilizzando il modulo del menu a larghezza intera Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Un pulsante del menu a discesa può tornare molto utile durante la progettazione di un sito Web. Oltre al menu principale, alcune aree di un sito potrebbero richiedere un menu a discesa composto da sottovoci. Vediamo che vengono utilizzati per cose come categorie di post di blog, elenchi e voci di moduli. Ma possono anche essere utilizzati per un invito all'azione.

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.

Menu a discesa Panoramica

Cosa ti serve per iniziare

Per cominciare, 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). All'inizio utilizzeremo il generatore Divi 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".

Crea un menu su wordpress

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.

Organizzazione del menu di Wordpress

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 facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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

Sezione divi a basso margine

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

Configurazione della sezione del modulo Divi

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.

Crea una sezione Div Builder a tutta larghezza

Quindi aggiungere un modulo di menu a larghezza intera alla linea.

Menu divi a schermo intero

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

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.

Configurazione del colore di sfondo del menu a schermo interoDopo 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

Sezione di sfondo Divi

  • 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.

Impostazioni della sezione Divi

  • Angoli arrotondati: 5px

Configurazione delle impostazioni del bordo Divi

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.

Parametro sezione impostazioni diviProgetta 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

Impostazioni dei parametri di stile del modulo del menu a schermo intero

  • 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

Modulo menu a schermo intero dei caratteri divi

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.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

  • Margine: -40.5px alto

Impostazioni sezione menu a larghezza intera divi

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).

Modulo di regolazione classe sezione diviSenza 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; }

Css personalizza la pagina divi

Ecco il risultato finale

Animazione del menu a discesa Divi

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.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
1 azioni
quota1
Tweet
Enregistrer