Evidenziazione del plug-in Divi: Divi MadMenu

Divi Madmenu è un plug-in di terze parti per Divi che aggiunge nuove funzionalità di menu al Divi Theme Builder. Aggiungi pulsanti, un carrello degli acquisti Woocommerce, un'opzione di ricerca e regola il posizionamento di ciascun elemento. Progetta menu indipendenti per desktop, tablet e telefoni e imposta i punti di interruzione. Imposta l'intestazione come fissa e aggiungi animazioni. Ogni elemento è personalizzabile. In questo articolo, daremo un'occhiata a Divi Madmenu e vedremo cosa può fare.

Divi Madmenu con Divi Theme Builder

Divi Madmenu è stato progettato specificamente per funzionare con Divi Theme Builder. Una volta installato il plug-in, vai a Divi Theme Builder, fai clic su Aggiungi intestazione globale e seleziona Crea intestazione globale per creare l'intestazione personalizzata.

Vedrai un nuovo modulo aggiunto a Divi Builder chiamato MadMenu. Questo è l'unico modulo che dovrai usare, ma puoi usarne altri se vuoi aggiungere ancora più funzionalità.

Contenuto

Il modulo mostra un menu e fornisce molte opzioni per personalizzarlo. Elements ti consente di abilitare funzionalità come il menu per desktop e dispositivi mobili, logo, ricerca, carrello e due pulsanti. Possono essere disposti in modo diverso e stilizzati in modo indipendente.

Il menu desktop consente di scegliere il menu da visualizzare, impostare il punto di interruzione per determinare quando cambia in un menu mobile e impostare l'animazione e la durata del sottomenu.

Il menu Mobile ti consente di selezionare un menu diverso per i dispositivi mobili e aggiunge opzioni per comprimere i sottomenu, rendere cliccabili i collegamenti principali e scegliere la modalità a fisarmonica. Include le stesse opzioni di animazione del menu del desktop.

Mobile Menu Toggle include opzioni di icone ed etichette tra cui il formato di commutazione, le etichette chiuse e aperte e la posizione dell'etichetta.

Se Logo è abilitato, vedrai un'opzione per scegliere il logo, fornire un URL di collegamento e decidere se si aprirà nella stessa finestra.

Se la ricerca è abilitata, puoi scegliere un'icona o un'immagine.

Per Carrello , puoi mostrare l'icona, i contenuti o l'icona e i contenuti, selezionare un'immagine o mostrare il logo, scegliere le opzioni di visibilità, un aggiornamento in tempo reale, ecc.

Il pulsante 1 e il pulsante 2 vengono regolati indipendentemente, ma hanno le stesse opzioni. Aggiungi testo, un'icona, scegli il posizionamento dell'icona, la visibilità, il link e seleziona come si apre. Nell'esempio sopra, ho aggiunto del testo a entrambi i pulsanti e ho aggiunto un'icona al primo pulsante.

Design

La scheda Design aggiunge opzioni per il testo, le voci di menu, i menu desktop e mobile, i sottomenu desktop e mobile, il logo, la ricerca, il carrello, i pulsanti e molto altro. Ecco alcuni di loro.

Layout Generale consente di scegliere l'allineamento. Impostalo su destra, sinistra, centro, spazio intorno, spazio tra e spazio uniformemente. Scegli la direzione del menu a discesa e imposta l'ordine dei menu sia per desktop che per dispositivi mobili. In questo esempio, ho impostato l'allineamento a destra e impostato il menu a discesa diretto dei sottomenu verso l'alto.

Elementi di layout consente di controllare l'allineamento, la larghezza, ecc. di menu, logo, ricerca, carrello, pulsante 1 e pulsante 2.

Ciascuno degli elementi ha un'opzione di progettazione del testo che include le impostazioni sia per il menu normale che per quello fisso. Regola il colore del collegamento attivo, il colore del collegamento normale, il carattere, il peso del carattere, la dimensione, la spaziatura, ecc. L'esempio sopra è Testo: Menu del desktop. Ho cambiato i colori, le dimensioni dei caratteri e la spaziatura.

Testo

Questo è Testo: Sottomenu Desktop . Ho cambiato i colori, le dimensioni dei caratteri e ho reso il testo maiuscolo.

Questo è il testo: Commutatore menu mobile . Fornisce personalizzazioni del testo per il testo di apertura e chiusura. Ho cambiato il colore del carattere e aumentato la dimensione e la spaziatura delle lettere.

Questo è Testo: Menu Mobile . Ho cambiato i colori dei caratteri e reso il testo maiuscolo.

Testo: il sottomenu Mobile controlla i caratteri per il menu a discesa. Ho cambiato i colori, selezionato il testo maiuscolo con una prima lettera più grande per ogni parola, aumentato la dimensione del carattere e centrato il testo.

Testo: Pulsante 1 e Testo: Pulsante 2 ha le stesse opzioni e controlla i rispettivi pulsanti in modo indipendente. Ho aumentato la dimensione del carattere per entrambi i pulsanti e ho ingrandito il pulsante 1. Ho anche cambiato i loro colori. Per il pulsante 2, ho selezionato un carattere diverso.

Testo: il carrello controlla il carattere per il testo del contenuto del carrello. Ho cambiato il colore del carattere, aumentato le dimensioni, reso il carattere corsivo, sottolineato il carattere con uno stile ondulato e cambiato il colore della sottolineatura.

Menù

Le voci del menu del desktop ti danno il controllo su sfondi, margine, riempimento, angoli, bordi, ombra della scatola, ecc. Ho cambiato il colore di sfondo, aggiunto margine e riempimento per aggiungere spazio tra le voci di menu, angoli aggiunti, bordi e ombra della scatola.

Gli elementi del sottomenu del desktop ti danno lo stesso controllo degli elementi del menu. Ho cambiato il colore di sfondo, aggiunto un bordo nella parte superiore di ogni elemento e aggiunto un'ombra di riquadro.

Mi piace che ciascuno degli elementi possa essere abbinato individualmente. Ho aggiunto le ombre della casella al menu principale, alle voci di menu e alla ricerca e ho arrotondato gli angoli. Ho anche cambiato i colori dei caratteri e degli sfondi.

Eccone uno che ho creato per il mio sito di prova. Ho aggiunto il logo con l'ombra della casella, il menu principale, la ricerca, il carrello ed entrambi i pulsanti. I pulsanti sono caratterizzati da sfondi bianchi e bordi neri. Ho anche aggiunto un bordo inferiore utilizzando i colori del layout.

Possiamo avere un'idea migliore di cosa si può fare con i menu scavando nelle demo.

Divi Madmenu Demo

Il plugin viene fornito con 10 demo Madmenu che puoi caricare su Divi Library. Molte delle demo hanno immagini all'interno delle loro cartelle. Dovrai caricarli nella libreria multimediale.

Per utilizzare una demo con Theme Builder, fai clic per creare un'intestazione globale. Fare clic per inserire una sezione e scegliere Aggiungi da libreria . Ora puoi scegliere una qualsiasi delle demo da utilizzare.

Usa le demo come punto di partenza per creare design o semplicemente aggiungere il tuo logo e menu. Fanno buon uso dei colori di sfondo, delle opzioni del logo, delle opzioni di ricerca e dei pulsanti CTA. Diamo un'occhiata ad alcune delle demo con il mio sito di prova. Includono diversi design per le intestazioni del desktop, del tablet e del telefono.

Dimostrazione 1

La demo 1 utilizza il titolo del sito, il menu e il pulsante 1. Il menu utilizza l'allineamento al centro. Il sottomenu include lo stile con un'ombra di riquadro e bordi per separare i collegamenti. Sto passando il mouse sul secondo link.

Mobile aumenta la dimensione dei caratteri e utilizza lo stesso stile per il menu principale e il sottomenu. Utilizza anche il testo con un'icona per il pulsante di apertura e chiusura e sostituisce il titolo del sito con il logo.

Dimostrazione 2

Demo 2 aggiunge un logo, cerca con un'icona cerchiata con un bordo su un lato, menu centrato, carrello e pulsanti. Entrambi i pulsanti mostrano i loghi dei social media. Le voci del sottomenu sono di stile indipendentemente dallo sfondo.

Il menu mobile centra tutte le icone, sostituisce il testo del menu con un'icona aperta e aggiunge l'azzurro per il menu.

Dimostrazione 3

La demo 3 fa un uso interessante dei pulsanti. Il pulsante 1 include il testo per accedere o registrarsi e ha un effetto al passaggio del mouse che rimuove lo sfondo al passaggio del mouse. Il pulsante 2 utilizza l'immagine di un cuore disegnato da una linea.

Per i dispositivi mobili, il pulsante di apertura/chiusura include l'icona e il testo sotto l'icona. Le icone dei pulsanti sono equamente distanziate nell'intestazione utilizzando lo spazio tra. Il titolo del sito viene sostituito con il logo, che viene spostato a destra.

Dimostrazione 5

La demo 5 utilizza lo spazio tra per il layout e visualizza i pulsanti come CTA. Entrambi i pulsanti utilizzano sfondi colorati diversi per distinguersi.

Il menu mobile posiziona i pulsanti all'estrema destra e sinistra e aggiungono icone. Il logo e il pulsante apri/chiudi con testo e icona sono posizionati al centro.

Dimostrazione 7

Demo 7 posiziona i pulsanti su entrambi i lati dell'intestazione con il menu al centro. Il logo è posizionato sopra il nome del sito. Il menu include l'icona di apertura e chiusura con il testo. Gli elementi nel menu a discesa sono separati l'uno dall'altro in modo che parti dello sfondo possano essere visualizzate.

La versione mobile mantiene i pulsanti al loro posto e sostituisce il testo con le icone. Anche il titolo del sito viene rimosso.

Dimostrazione 8

La demo 8 include un giallo in grassetto con un menu a discesa e un titolo a sinistra e il menu con pulsanti a destra. Ciascuno dei pulsanti include la grafica.

Il menu mobile posiziona i pulsanti a sinistra e il logo e l'icona del menu a destra.

Dimostrazione 10

La demo 10 utilizza un gradiente per lo sfondo e posiziona uno sfondo più scuro dietro ciascuna delle icone. I pulsanti includono testo e icone. Ciascuno dei collegamenti nel menu a discesa è separato l'uno dall'altro e il collegamento attivo è più scuro. Il logo è posizionato a sinistra.

Il menu mobile rimuove tutte le icone tranne l'icona di ricerca. Il menu è sostituito dalle icone di apertura/chiusura e il logo è posizionato al centro. Il menu a discesa ha lo stesso aspetto.

Acquista Divi Madmenu

Divi Madmenu può essere acquistato nel Divi Marketplace per $ 39 all'anno per un utilizzo illimitato e un anno di aggiornamenti e supporto.

Pensieri finali

Divi Madmenu per Divi Theme Builder ha molte funzionalità e personalizzazioni, che semplificano la progettazione di qualsiasi tipo di intestazione di cui potresti aver bisogno. La grande quantità di regolazioni nella scheda di progettazione può essere fonte di confusione all'inizio, ma sono semplici da usare e non ci vuole molto per capire cosa controlla cosa. L'uso dei due pulsanti insieme all'aggiunta di immagini e icone ai pulsanti di ricerca e carrello apre molte possibilità di design. Se sei interessato a creare menu interessanti con un singolo modulo, vale la pena dare un'occhiata a Divi Madmenu.

Vogliamo sentire da voi. Hai provato Divi Madmenu? Fateci sapere cosa ne pensate nei commenti qui sotto.

Immagine in primo piano via venimo / shutterstock.com