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

Un pulsante del menu a discesa può davvero tornare utile quando si progetta un sito web. A parte il menu principale, ci sono aree di un sito che potrebbero richiedere un menu a discesa di elementi secondari. Li vediamo utilizzati per cose come categorie di post di blog, elenchi e input di moduli. Ma possono anche essere usati per un invito all'azione principale.

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. Quindi utilizzeremo il modulo menu a larghezza intera di Divi per visualizzare quel 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.

Iniziamo.

Sbirciata

Ecco una rapida occhiata al pulsante del menu a discesa che creeremo in questo tutorial.

Desktop (menu a discesa al passaggio del mouse)

Tablet e telefono (menu a discesa al clic)

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!

Iscriviti al nostro canale Youtube

Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder. Il CSS personalizzato è stato aggiunto a un modulo di codice in una sezione separata nella parte inferiore del layout.

Andiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, se non lo hai ancora fatto, installa e attiva il tema Divi installato (o il plug-in Divi Builder se non utilizzi il tema Divi). Utilizzeremo il generatore Divi sul front-end per progettare il pulsante del menu a discesa.

Questo è tutto!

Creazione di 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 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, immettendo un nome per il menu e facendo clic sul pulsante "Crea menu".

Per ora puoi creare alcuni collegamenti personalizzati con "#" come segnaposto dell'URL insieme al testo del collegamento.

Struttura le voci di menu in modo che la voce di menu di livello superiore abbia il testo del collegamento "Ulteriori informazioni" con tre voci di sottomenu sotto di essa.

Dopodiché assicurati di salvare il menu.

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

Una volta creato il menu, possiamo iniziare a progettare il pulsante del menu a discesa con Divi. Per iniziare, crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Creazione del contenuto fittizio

Innanzitutto, aggiungi una riga di una colonna alla sezione normale predefinita.

Modulo Aggiungi testo

Quindi aggiungi un modulo di testo alla riga con il seguente contenuto:

<h1>Dropdown Menu Button</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Successivamente, aggiorna le impostazioni di progettazione come segue:

Imbottitura della sezione

Successivamente, aggiorna l'impostazione della sezione con quanto segue:

• Imbottitura: 0px in basso

Spaziatura e bordo delle righe

Dopo che il riempimento della sezione è stato aggiornato, apri le impostazioni della riga e assegna alla riga un po' di riempimento e un leggero bordo.

• Imbottitura: 10vw in alto, 10vw in basso, 5vw a sinistra, 5vw a destra
• Larghezza 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 che abbiamo creato in precedenza.

Aggiunta del menu a larghezza intera

Per creare il modulo del menu a larghezza intera, aggiungi una nuova sezione a larghezza intera sotto la sezione normale corrente.

Quindi aggiungi un modulo di menu a larghezza intera alla riga.

Nel popup delle impostazioni del menu a larghezza intera (sotto il 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 chiamato "menu del pulsante a discesa".

Quindi elimina il colore di sfondo bianco predefinito per il menu.

Dopo aver aggiunto il menu con il modulo menu a larghezza intera, salvare le impostazioni. Torneremo tra un po' su questo modulo per completare il progetto. Ma per ora, aggiungeremo uno sfondo alla sezione a larghezza intera.

Aggiorna il design della sezione a larghezza intera

Apri le impostazioni della sezione a larghezza intera e aggiorna quanto segue:

• Colore sfondo sfumato sinistro: #0047d6
• Colore di sfondo sfumato a destra: # 45b2ff

• Larghezza massima: 240 px
• Allineamento della sezione: centro

Sto impostando la larghezza massima della sezione su 240 px perché corrisponderà alla larghezza della larghezza del menu a discesa predefinita in Divi. È anche di buone dimensioni per un pulsante su desktop e dispositivi mobili.

• Angoli arrotondati: 5px

Nella scheda Avanzate, aggiungi la seguente Classe CSS, overflow e Indice Z.

• Classe CSS: pulsante a discesa
• Overflow orizzontale: visibile
• Overflow verticale: visibile
• Indice Z: 14

La classe CSS è necessaria in modo che possiamo indirizzare il nostro CSS esterno a questa sezione solo in seguito. L'overflow deve essere impostato su visibile in modo che possiamo vedere il menu a discesa. E l'indice Z aiuterà a mantenere il menu a discesa in primo piano rispetto a qualsiasi altro contenuto della pagina.

Progetta il menu Fullwidth

Ora siamo pronti per progettare il modulo menu fullwidth. Apri le impostazioni del modulo del menu a larghezza intera e aggiorna quanto segue:

• Crea collegamenti al menu a larghezza intera: S
• Colore del testo del menu a discesa: #ffffff
• Colore testo menu mobile: #ffffff
• Allineamento del testo: Centro
• Colore di sfondo del menu a discesa: #45b2ff
• Colore linea menu a discesa: #ffffff
• Colore di sfondo del menu mobile: #45b2ff

• Carattere del menu: codifica senza semicondensato
• Peso del carattere del menu: semi grassetto
• Colore del testo del menu: #ffffff
• Dimensione del testo del menu: 16px
• Spaziatura delle lettere del menu: 2px
• Animazione del menu a discesa: Espandi

Posizionamento del pulsante a discesa

Per fare in modo che il pulsante si sovrapponga al bordo inferiore, dobbiamo aggiungere un margine superiore negativo esattamente la metà dell'altezza del pulsante.

• Margine: -40.5px in alto

Quasi lì

Ecco il risultato fino ad ora...

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 alcuni CSS personalizzati.

Aggiunta di CSS personalizzati

Prima di aggiungere il CSS personalizzato, assicurati di aver aggiunto il "pulsante a discesa" dell'ID CSS alla sezione a larghezza intera (non al modulo).

Senza l'ID CSS, il seguente CSS non funzionerà.

Per aggiungere il CSS personalizzato, apri le impostazioni della pagina e incolla il seguente codice nell'area di input CSS personalizzato.

.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav > ul {
  padding-top: 0px !important;
}

.dropdown-button .fullwidth-menu li > a {
  padding-bottom: 0px;
  line-height: 81px;
}

.dropdown-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, .dropdown-button .fullwidth-menu a:hover {
  opacity: 1;
}

.dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {
  padding: 0 0 !important;
}

.dropdown-button .fullwidth-menu li {
  display: block;
}

.dropdown-button .fullwidth-menu .menu-item-has-children > a:first-child:after {  
  right: 20px;
}

Questo è il risultato finale

Personalizzazione del menu sul cellulare

In questo momento il menu ricorrerà alla versione mobile con l'icona dell'hamburger cliccabile che apre e chiude il menu mobile. Ecco come appare.

Per correggere il menu in modo che corrisponda alla versione desktop, dobbiamo aggiungere alcuni CSS personalizzati. Apri le impostazioni della pagina e aggiungi il seguente CSS personalizzato proprio sotto il css che abbiamo aggiunto attualmente.

@media (max-width: 981px){
  .dropdown-button .et_pb_fullwidth_menu .et_pb_row {
    width: 100%;
    }
  .dropdown-button .mobile_menu_bar {
    height: 81px;
  }
  .dropdown-button .mobile_menu_bar:before {
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #ffffff!important;
    letter-spacing: 2px !important;
    content: "Learn More";
    line-height: 81px;
    top: 0px;
}
  .dropdown-button .mobile_menu_bar:after{
    position: absolute;
    line-height: 81px;
    font-family: ETmodules;
    font-size: 20px;
    font-weight: 800;
    content: "3";
    padding-left: 20px;
    color: #ffffff;
}   
  .dropdown-button .et_first_mobile_item > a {
    display: none;
  }

}

Il CSS sopra fa sì che l'area cliccabile occupi l'intera larghezza e altezza della sezione/pulsante. Sostituisce anche l'icona dell'hamburger con del testo e un'icona a forma di freccia che corrisponde alla versione desktop. Questo viene fatto usando gli pseudo-elementi :before e :after. In questo modo riusciamo a mantenere attiva la funzionalità predefinita del menu mobile.

In questo momento, il contenuto del testo per il pulsante a discesa mobile recita "Ulteriori informazioni". Ma possiamo cambiarlo aggiornando la seguente riga di CSS sotto lo pseudo-elemento :before per la barra dei menu mobile:

content: "Learn More";

Ad esempio, se volessi leggere "Menu", cambieresti la riga del CSS come segue:

content: "Menu";

Risultato finale

Questo è il risultato finale.

Desktop (menu a discesa al passaggio del mouse)

Tablet e telefono (menu a discesa al clic)

Articoli secondari aggiuntivi

E puoi anche aggiungere voci di sottomenu! Basta aggiornare il menu nella pagina dell'editor del menu e tutto è pronto.

Pensieri finali

La creazione di un pulsante del menu a discesa utilizzando il modulo del menu a larghezza intera di Divi richiede alcuni passaggi chiave. Innanzitutto, creiamo il menu in WordPress che vogliamo inserire nel modulo. Quindi usiamo il Divi builder per modellare il modulo del menu a larghezza intera a nostro piacimento. Quindi aggiungiamo alcuni CSS personalizzati per perfezionare il design sia su desktop che su dispositivi mobili. Il risultato è un bellissimo (e utile) menu a discesa che viene distribuito al passaggio del mouse per desktop e al clic per dispositivi mobili. Si spera che troverai questa utile aggiunta alla tua cassetta degli attrezzi di progettazione.

Non vedo l'ora di sentirti nei commenti.

Saluti!