I mega menu sono un elemento di design popolare che può dare il tuo sito web un'esplosione di eleganza mentre offre Visitatori un ulteriore livello di navigazione. Esistono diversi modi per aggiungere mega-menu a Divi. Uno dei metodi più semplici che ho usato è quelloun plug-in di terze parti chiamato Divi Mega Pro .

Divi Mega Pro semplifica la creazione di mega menu utilizzando Divi Builder. Ogni menu può essere aggiunto a qualsiasi elemento utilizzando una classe CSS. Ciò significa che puoi aggiungere un layout Divi a qualsiasi collegamento nel menu, ma puoi andare anche oltre e aggiungerli a qualsiasi elemento di un layout Divi semplicemente aggiungendo una classe CSS.

È ideale per creare menu e popup con moduli negozio, immagini, cursori, portfolio, icone, blurb, video, blog, ecc. Funziona anche con Extra.

Crea un Mega Pro Mega Menu

crea un mega menu divi con divi mega.png

Il menu Divi Mega Pro viene aggiunto al menu del dashboard. Qui puoi inserire la tua chiave di licenza, vedere i menu che hai creato e creare un nuovo menu. Quando fai clic per aggiungere un nuovo menu, vedrai un editor per il tipo di post del menu. Lo schermo è semplice, ma c'è molto da fare qui.

progettazione di un menu Mega Pro.png

editore - puoi creare il mega-menu o un suggerimento utilizzando Divi Builder.

cambia lo sfondo di mega menu.png

Sfondo Mega Pro - puoi selezionare lo sfondo ei colori dei caratteri.

scegli la posizione del menu.png

Visualizza posizioni - scegli tutte le pagine o assegna un nome a pagine specifiche, quindi inserisci le eccezioni.

scegli l'animazione del menu.png

Mega Pro Animation - seleziona un'animazione. Scegli tra offset, offset, prospettiva, dissolvenza o scala.

scegli trigger css.png

Mega Pro Trigger - aggiungi un trigger come selettore CSS. Una volta salvato, vedrai la classe CSS che incollerai nel campo della classe CSS di una voce di menu, modulo, riga o sezione. Questo è ciò su cui si fa clic o si passa con il mouse per visualizzare il menu. Tutto può essere utilizzato come trigger e non solo come voce di menu. Ciò significa che puoi anche utilizzare Divi Mega Pro per creare popup o suggerimenti.

menu di configurazione style divi.png

Impostazioni di visualizzazione Mega Pro : scegli la direzione di visualizzazione (superiore o inferiore), inserisci i margini superiore e inferiore in pixel, scegli una percentuale di larghezza e attiva una freccia. L'attivazione della freccia rivela ulteriori personalizzazioni in cui è possibile scegliere il tipo di freccia (triangolo o tondo), scegliere il colore, impostare la larghezza e l'altezza e visualizzare in anteprima la freccia.

personalizzazione dei pulsanti divi.png

personalizzazioni il pulsante di chiusura: attiva il pulsante di chiusura sul desktop o sul cellulare e personalizza il pulsante di chiusura. Se lo abiliti, vengono visualizzate in anteprima le personalizzazioni per il colore del testo, il colore di sfondo, la dimensione del carattere, il raggio del bordo, il riempimento e la visualizzazione.

configurazione aggiuntiva divi mega pro.png

Parametri aggiuntivi Mega Pro - scegli il tipo di trigger (hovered o cliccato), il tipo di output (hovered o cliccato) e inserisci il ritardo di uscita.

Modelli Divi Mega Pro

diversi modelli disponibili divi mega pro.png

Lo sviluppatore ha fornito diversi modelli per Divi Mega Pro. Quando acquisti il ​​plug-in, questi modelli sono disponibili nel tuo account, nella scheda Modelli di layout plug-in. Sono ottimi per aiutarti a iniziare a progettare i tuoi mega menu. Ne userò alcuni nei miei esempi.

Divi Mega Pro Menu

divi mega pro.png menu

Una volta creato un mega menu, apparirà nell'elenco. Qui puoi modificare, modificare o eliminare rapidamente i menu. Puoi anche cercare, filtrare per data, visualizzare per stato, ecc. Fornisce inoltre l'esclusiva classe Mega Pro in modo da poterli copiare da qui invece di aprirli per ottenere la classe.

Quando copi la classe, assicurati di incollarla senza spazi aggiuntivi. Altrimenti, tutti i mega-menu sulla pagina non funzioneranno più.

Sono sicuro che non sarebbe facile da aggiungere, ma una funzione di copia e modifica sarebbe utile. Puoi salvare i layout Divi nella tua libreria per riutilizzarli, ma ciò non include le impostazioni circostanti.

Aggiunta di un trigger

scegli il selettore divi.png

Nel campo Mega Pro Triggers, vedrai una singola classe Mega Pro. Copialo e incollalo nel campo Classe CSS dell'elemento che desideri utilizzare come trigger.

classi css.jpg

Per aggiungere il campo Classe CSS a una voce di menu, è necessario abilitare le classi CSS. Nella schermata del menu selezionare Opzioni schermo e abilitare le classi CSS.

aggiungi un menu css di classe divi.png

Incolla la classe CSS nel campo del menu. Ora questa voce di menu mostrerà il mega menu al passaggio del mouse e ti porterà alla pagina al clic.

divi mega menu design pro.png

Noterai che Divi Mega Pro è anche un'opzione nelle opzioni di collegamento del menu. Sono ottimi per aggiungere una voce di menu al menu che in realtà non va da nessuna parte. Aggiungi la classe CSS come qualsiasi altra voce di menu.

Sezione contatti sul mega menu

sezione contatti mega menu pro.png

Il menu si apre al passaggio del mouse. Posso sempre fare clic sul collegamento Contatto per aprire la pagina dei contatti, se lo desidero. Se volessi solo visualizzare il mega menu, potrei semplicemente utilizzare il collegamento del menu principale di contatto e rinominarlo (come nell'esempio sopra).

In questo, ho modificato leggermente i colori utilizzando lo sfondo e le impostazioni di visualizzazione anziché utilizzare Divi Builder. Aggiunge una barra nella parte inferiore del menu.

Semplice invito all'azione con colonne di menu

design contact section divi mega pro.png

Questo è uno dei modelli che aggiungono più colonne. Apporto modifiche allo sfondo e ai colori dei caratteri. Ho anche aggiunto una freccia e ho reso la larghezza del 75%.

cambia colore di sfondo divi mega pro.png

Il colore di sfondo e le opzioni del carattere aggiungono un po 'di più per farlo risaltare. Ho lasciato l'allineamento predefinito, che posiziona il menu a destra dello schermo. È possibile regolare il posizionamento nelle impostazioni.

schede

menu design con schede mega menu divi.png

Il modello di scheda include un modulo di codice con jQuery per creare l'effetto hover.

menu demo con tab divi mega pro.png

Ho aggiunto contenuti alle schede e li ho adattati al sito. Ciascuno dei collegamenti a sinistra mostra una scheda diversa nella maggior parte del menu.

Info Bubbles configurazioni

demo infobulles divi.png

Per questo, ho aggiunto la classe CSS a qualche blurb in modo che apra un piccolo pop-up hover. Il popup è solo un'immagine con un'ombra sotto.

Nell'immagine sopra il mio mouse passa sopra le parole LIVE WEBSITE. Non ho ancora regolato il posizionamento, ma è facile farlo apparire ovunque tu voglia.

informazioni sulla progettazione bull divi mega pro.png

Per questo, ho creato un popup per mostrare un'immagine con del testo. Ho impostato la direzione del display su Bassa e, per farla apparire accanto all'immagine a cui voglio aggiungere, ho aggiunto un margine di -300.

risultato info bubble divi.png

Il pop-up ora appare a sinistra e nella parte superiore dell'immagine quando ci passo sopra con il mouse. Ho aggiunto il colore di sfondo trasparente, il colore del bordo, il riempimento e il contorno arrotondato.

Licenza e documentazione

licenza e dimostration.png

Hai la possibilità di scegliere tra quattro licenze:

  • Sito singolo - $ 15 all'anno
  • Tre siti - $ 29 all'anno
  • Siti illimitati - $ 59 all'anno
  • Vita illimitata - $ 129 una volta

Documentazione viene fornito da una dimostrazione video e un articolo sul sito spiega le funzionalità e spiega, passo dopo passo, come utilizzare il plugin.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA IL MODELLI DIVI[/vcex_button][/vc_column][/vc_row]

Altri tutorial di Divi