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
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.
editore - puoi creare il mega-menu o un suggerimento utilizzando Divi Builder.
Sfondo Mega Pro - puoi selezionare lo sfondo ei colori dei caratteri.
Visualizza posizioni - scegli tutte le pagine o assegna un nome a pagine specifiche, quindi inserisci le eccezioni.
Mega Pro Animation - seleziona un'animazione. Scegli tra offset, offset, prospettiva, dissolvenza o scala.
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.
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.
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.
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
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
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
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.
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.
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.
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
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
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%.
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
Il modello di scheda include un modulo di codice con jQuery per creare l'effetto hover.
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
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.
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.
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
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
- siti 5 che utilizzano Divi ristorante a tema
- Come aggiungere testo su un prodotto Divi WooCommerce
- Come cambiare il colore del menu tra le pagine Divi
- Come personalizzare le griglie di un blog con Divi
- Come utilizzare il ruolo di Editor Divi su WordPress
- Come creare un dispositivo di scorrimento Divi a schermo intero
- Come cambiare il colore dei menu tra le pagine di Divi
- Funzionalità che probabilmente non conosci su Divi
- Come usare Divi Builder su WordPress
- Come usare il modulo di scorrimento video Divi
- Come utilizzare il modulo Divi Builder Flip
- Come aggiungere un modulo di testimonianza su Divi Builder
- Come usare il modulo di testo Divi
- Come creare un dispositivo di scorrimento su Divi
- Come modificare un ruolo utente Divi
- Come usare il modulo Divi Social Media
- Come utilizzare il modulo negozio sul tema WordPress Divi
- Come utilizzare il modulo barra laterale Divi
- Come utilizzare il modulo Tabella prezzi Divi
- Come utilizzare il modulo del titolo delle pubblicazioni Divi
- Come aggiungere un modulo video di Divi
- Come utilizzare il modulo di navigazione dell'articolo
- Come usare il modulo di ricerca Divi
- Come utilizzare il modulo portafoglio Divi
- Come usare il modulo persona su Divi Builder
- Come usare il modulo portafoglio con filtro Divi
- Come utilizzare il modulo di scorrimento a larghezza piena
- Come utilizzare il modulo immagine Divi Builder
- Come utilizzare il modulo di navigazione a larghezza intera di Divi Builder
- Come utilizzare il modulo della galleria di immagini
- Come utilizzare il modulo Divi Builder Full-Width Card
- Come utilizzare il modulo Divi Full Width Portfolio
- Come utilizzare il modulo di intestazione a tutta larghezza Divi
- Come utilizzare il modulo contatore Divi
- Come utilizzare il dispositivo di scorrimento degli articoli su Divi Builder
- Come utilizzare il modulo Divi Email Optin
Buongiorno:
Dove posso vedere come viene creata una finestra pop-up?
Non ho modo di ottenerlo. Sono stato in grado di creare solo un mega menu, ma i popup che ho collegato non si aprono.
Mi sono imbattuto in alcune e-mail con Divi Life ma non mi hanno chiarito nulla.
Grazie mille.
Optin Monster: https://optinmonster.com