Evidenziazione del plug-in Divi: Divi MadMenu

Divi MadMenu è un modulo di terze parti che aggiunge due nuovi moduli a Divi Builder per creare design di menu interessanti ed eleganti. I moduli includono molte funzionalità per aggiungere inviti all'azione, creare moduli di accesso popup e menu a scorrimento ed è possibile creare menu verticali. In questo post, daremo un'occhiata più da vicino a Divi MadMenu, vedremo cosa può fare e quanto è facile. Spero che questo ti aiuti a decidere se questo è il prodotto giusto per le tue esigenze.

Moduli Divi MadMenu

MadMenu aggiunge due nuovi moduli a Divi Builder. Ecco una descrizione di ciascun modulo:

• Divi MadMenu è il modulo originale con le caratteristiche principali. Include pulsanti, opzioni popup, opzioni slide-in e molte opzioni di layout.
• Divi MadMenu Vertical Menu Module è un nuovo modulo che aggiunge opzioni di menu verticali.

Caratteristiche Divi MadMenu

Per prima cosa, diamo un'occhiata al modulo originale. Il modulo Divi MadMenu aggiunge molte funzionalità. Ecco uno sguardo alla scheda Contenuto e agli strumenti che include.

Elementi

Gli elementi sono tutte le cose che puoi aggiungere al menu. Ciò include la scelta del menu desktop o mobile, l'abilitazione del logo, la ricerca, il carrello, il pulsante uno e il pulsante due. Ogni elemento viene selezionato e regolato nelle proprie sezioni nella scheda Contenuto. Dovresti abilitarli qui e poi impostarli sotto questo.

Menù da scrivania

Scegli il menu da visualizzare, imposta il punto di interruzione che cambia nella versione del menu mobile del tuo menu, scegli l'animazione del sottomenu e la durata dell'animazione.

Menù cellulare

Il menu mobile ti consente di modellare la versione mobile del menu separatamente dalla versione desktop. Scegli il menu mobile da visualizzare, imposta il punto di interruzione, scegli se sono compressi, chiudi al clic esterno, scegli il posizionamento del menu a discesa e regola le impostazioni di animazione.

Comprimi sottomenu rende i sottomenu chiusi per impostazione predefinita. Se li comprimi, avrai la possibilità di scegliere come si aprono quando vengono cliccati. Scegli tra Espandi, Scorri a destra o Scorri a sinistra. Ciò aggiunge anche l'opzione Usa testo intestazione sottomenu, che consente di scegliere tra testo elemento principale, testo personalizzato e nessun testo.

Scorri a destra e Scorri a sinistra puntano le frecce a destra oa sinistra. Facendo clic su di essi, il menu scorre in quella direzione. Questo è Scorri a destra. Mostra il sottomenu aperto e le frecce che indicano che si tratta di un sottomenu. Utilizza il testo dell'elemento principale per il testo dell'intestazione del sottomenu.

Attiva/disattiva menu cellulare

Abilita questa opzione per visualizzare solo un'icona, regolare un'etichetta o l'icona e l'etichetta. Scegli il formato, l'etichetta aperta e chiusa e la posizione dell'etichetta. La posizione posiziona l'etichetta sul lato destro o sinistro dell'icona del menu.

Logo

Seleziona il logo, aggiungi l'URL e scegli se il collegamento si apre nella stessa finestra o in un'altra finestra.

Ricerca

Scegli tra un'icona o un'immagine e inserisci il testo segnaposto. Il testo segnaposto viene visualizzato all'interno della casella di ricerca visualizzata quando si fa clic sull'icona di ricerca.

Carrello

Seleziona il formato del carrello e scegli tra un'icona o un'immagine. Questo è compatibile con WooCommerce e mostrerà il numero di articoli nel carrello.

L'opzione immagine aggiunge un selettore di immagini del carrello in cui è possibile scegliere qualsiasi immagine nella libreria multimediale come collegamento al carrello. È ridimensionato per corrispondere al menu, ma puoi modificarlo nelle impostazioni di Design se lo desideri.

Pulsante uno e pulsante due

Divi MadMenu aggiunge due pulsanti al menu che funzionano come CTA. Puoi aggiungere uno o entrambi i pulsanti. Aggiungi il testo del pulsante, attiva un'icona e scegli tra un URL o un popup. Il pulsante uno e il pulsante due funzionano allo stesso modo.

Per l'icona del pulsante, puoi scegliere tra un'icona o un'immagine. Puoi anche impostarlo per visualizzare l'icona o semplicemente mostrarla al passaggio del mouse.

Selezionare la scheda Auth per abilitare il contenuto dell'utente autenticato. L'abilitazione del contenuto utente apre una nuova serie di opzioni in cui è possibile selezionare il tipo di autorizzazione tra un URL e un modulo di accesso. Impostare il tipo di collegamento e l'URL di reindirizzamento della disconnessione.

Impostazioni del costruttore

Mostra contorni crea un contorno attorno a ciascun elemento. Puoi scegliere il colore del contorno. Abilita modalità di accesso evidenzia il pulsante uno e cambia il testo in modo che mostri Disconnetti, a indicare che l'utente ha effettuato l'accesso.

Opzioni di layout Divi MadMenu

La scheda Design include molte impostazioni specializzate per personalizzare il layout del menu.

Divi MadMenu Layout Generale

Le impostazioni includono l'allineamento degli elementi, la direzione del menu a discesa, l'ordine dei menu, l'ordine del logo, l'ordine di ricerca, l'ordine del carrello e l'ordine dei pulsanti. Mescolandoli fornisce molte opzioni di layout.

Elementi di layout

Queste impostazioni consentono di apportare modifiche individualmente a ciascuno degli elementi. Modifica l'allineamento verticale e orizzontale, personalizza la larghezza e personalizza la larghezza massima. Utilizzati in combinazione, possono creare alcuni layout interessanti.

Opzioni di stile

Le impostazioni di Mad Menu Design includono tutte le opzioni che ti aspetteresti da un modulo Divi. Ho aggiunto diverse impostazioni di progettazione in questo esempio.

Modulo menu verticale Divi MadMenu

Il modulo menu verticale Divi MadMenu sembra semplice all'inizio. Include una sezione Menu in cui è possibile scegliere il menu da visualizzare e abilitare Comprimi sottomenu.

Comprimi sottomenu

L'abilitazione di Comprimi sottomenu aggiunge opzioni per lo stile del sottomenu, rendendo selezionabili i collegamenti principali, abilitando la modalità a fisarmonica, scegliendo l'icona principale e animando l'icona principale.

Sottomenu Stile

La casella a discesa Stile sottomenu consente di selezionare tra Espandi, Scorri a destra e Scorri a sinistra.

Questo esempio mostra l'opzione Scorri a sinistra. Ho anche cambiato il testo dell'intestazione in Testo personalizzato.

Opzioni di layout del menu verticale Divi MadMenu

La scheda Design include tutte le impostazioni standard di Divi per modellare il menu. Ho aggiunto alcune opzioni di colore, modificato lo stile e l'allineamento del carattere, modificato gli angoli arrotondati dei sottomenu e aggiunto un'ombreggiatura al sottomenu.

Divi MadMenu Demo Tredici

Divi MadMenu viene fornito con 13 demo per iniziare. Per vedere meglio cosa può fare Divi MadMenu, diamo un'occhiata alla demo numero tredici per vedere cosa può fare. Ho selezionato questo a caso, ma è buono. Utilizza più moduli Divi MadMenu per creare un design interessante. Vedremo le versioni desktop e telefono.

Divi MadMenu Demo Tredici Wireframe

La demo tredici utilizza due moduli Divi MadMenu, un modulo di accesso e un modulo di ricerca per le impostazioni principali. Ecco il wireframe che mostra i moduli.

Include anche altri cinque moduli Divi MadMenu per creare gli elementi slide-in e un modulo di social follow.

Demo Tredici Desktop

Ecco uno sguardo alla demo sul frontend. I menu in basso sono aperti dal menu dell'hamburger. Questo è normalmente chiuso e si chiuderà automaticamente quando vengono selezionati gli altri menu.

L'icona dell'account apre un menu a scorrimento da destra. Include un pulsante di chiusura e un pulsante di disconnessione, nonché collegamenti alle pagine dell'account della persona.

L'icona dei social media apre un menu a scorrimento da sinistra. L'icona di ricerca apre una casella di ricerca sotto l'intestazione. Questi sono gli unici due elementi del menu che si apriranno contemporaneamente.

Demo tredici telefono

La versione per telefono mostra lo stesso formato con il menu hamburger che apre i link della home page e della pagina. Tutti i sottomenu hanno uno stile che corrisponde alla barra superiore e includono sottomenu espandibili.

L'icona dell'account apre il menu a scorrimento da destra.

Tutte le icone social si aprono nel menu a scorrimento a sinistra. Come l'intestazione del desktop, si aprirà contemporaneamente agli uomini di ricerca, ma la ricerca ha un aspetto migliore se aperta da sola.

La casella di ricerca si apre sotto l'intestazione.

Dove acquistare Divi MadMenus

Divi MadMenus è disponibile nel Divi Marketplace per $ 39. Include l'utilizzo illimitato del sito Web, una garanzia di rimborso di 30 giorni e un anno di supporto e aggiornamenti.

Pensieri finali

Questo è il nostro sguardo a Divi MadMenu per Divi. Ho solo scalfito la superficie in questo post. Entrambi i moduli sono facili da usare e offrono molte opzioni di design e layout per i menu Divi. Le opzioni slide-in sono fantastiche e l'opzione popup semplifica la creazione di accessi univoci. Aggiungi fino a due pulsanti per modulo per creare inviti all'azione. Crea più layout con un singolo modulo o aggiungi ancora più moduli Divi MadMenu per creare intestazioni uniche. Le demo sembrano fantastiche e forniscono un buon modello per iniziare con i tuoi progetti o usarli così come sono.

Vogliamo sentire da voi. Hai provato Divi MadMenu? Fateci sapere cosa ne pensate di questo modulo Divi nei commenti.