Evidenziazione del plug-in Divi: Divi Mobile

Divi Mobile è un plug-in di terze parti per Divi che semplifica la creazione di menu mobili personalizzati per i siti Web Divi. Tutte le impostazioni si trovano nel personalizzatore del tema, quindi puoi vedere un'anteprima dal vivo dei design del tuo menu mobile. È un plugin facile da usare e può creare praticamente qualsiasi tipo di menu di cui potresti aver bisogno. In questo momento saliente del plug-in Divi, esamineremo le funzionalità di Divi Mobile per aiutarti a decidere se ne hai bisogno nella tua casella degli strumenti Divi.

Menu Divi Mobile predefinito

Per fare un confronto, ecco il menu mobile predefinito di Divi. Il menu cambia automaticamente per mostrare un menu di hamburger. Facendo clic sul menu viene visualizzato un menu a discesa con tutti i collegamenti. Questo non è regolabile separatamente dal menu standard.

Personalizzatore di temi

Un nuovo menu viene aggiunto al personalizzatore del tema chiamato Divi Mobile. È blu scuro con testo verde in modo che risalti. Tutte le regolazioni vengono eseguite all'interno di questo menu. Sto usando il pacchetto di layout del consulente finanziario.

In una visualizzazione mobile, come la visualizzazione tablet nell'esempio sopra, il menu viene impostato automaticamente sulle impostazioni predefinite di Divi Mobile. Include un menu di hamburger in bianco all'interno di un cerchio blu scuro. Sto passando con il mouse sul menu Divi Mobile, che ora ha cambiato colore.

Facendo clic sul menu dell'hamburger si apre il menu, che scorre lateralmente e copre l'intero lato dello schermo. Ho aperto il menu nel personalizzatore del tema per mostrare le schede. Altri elementi appariranno in base alle selezioni scelte. Vediamo le principali regolazioni.

Stile e impostazioni del menu

Stile menu e impostazioni ha diverse opzioni per la selezione dei menu. Le opzioni di layout includono il menu che appare dall'esterno dello schermo (la visualizzazione predefinita), l'espansione da una forma e la navigazione in basso. Lo stile del menu dello schermo esterno aggiunge animazioni aperte e stili completamente aperti al menu. Ciascuno dei tre layout include diverse opzioni.

L'esempio sopra mostra lo stesso menu dell'esempio precedente, ma ho selezionato Schermo intero per lo stile del menu. Una modalità Anteprima imposta quale modalità viene mostrata per impostazione predefinita. Mi piace questo perché rende lo sfondo chiaro.

L'espansione da una forma copre l'intero schermo a partire dall'angolo in alto a destra. Può anche espandersi dall'alto come un allungamento verso il basso. Questo aggiunge icone sullo sfondo e posiziona i collegamenti fuori dallo sfondo come ho nell'esempio sopra. Puoi regolare i colori e le icone in altre impostazioni in un altro menu chiamato Impostazioni allungamento cerchio.

Navigazione in basso visualizza le icone nella parte inferiore dello schermo. Questo viene regolato in un altro menu chiamato Impostazioni di navigazione in basso.

Regolando il punto di interruzione puoi farlo visualizzare il menu mobile sul desktop.

Intestazione personalizzata

L'intestazione personalizzata ti dà il controllo completo sull'intestazione. La prima sezione è l'aspetto dell'intestazione. Aggiungi un nuovo logo, regola le sue dimensioni, regola il colore di sfondo, la lunghezza dell'ombra, il raggio di sfocatura, il colore dell'ombra, ecc. Ho aggiunto un nuovo logo e cambiato il colore di sfondo in questo esempio.

La sezione successiva è Aspetto dell'intestazione sullo scorrimento. Imposta il menu su fisso, regola l'altezza, le dimensioni del logo, la posizione dell'icona dell'hamburger e il colore di sfondo. Ho apportato modifiche a ciascuna di queste impostazioni.

Gli elementi dell'intestazione ti consentono di aggiungere elementi all'intestazione e di regolarne la posizione, le dimensioni e il colore. Ho spostato il logo a destra e l'ho impostato leggermente più basso del normale (puoi impostarlo più in basso che vuoi per sovrapporre l'intestazione o il contenuto). Ho anche aggiunto il carrello degli acquisti di WooCommerce, abilitato l'icona di ricerca, li ho posizionati a sinistra, li ho cambiati in rosso e ne ho aumentato le dimensioni.

Scegli Menu Hamburger

Scegli Menu hamburger ti offre molte opzioni sull'icona del menu dell'hamburger. Imposta a destra o a sinistra, seleziona da tre icone (tre linee, due linee o tre punti), scegli gli stili di animazione e scegli la direzione dell'animazione. L'ho posizionato a sinistra e selezionato due righe.

Burger Menu General ti consente di regolare l'altezza del menu, impostare la distanza dell'icona dell'hamburger dal bordo e dalla parte superiore e regolarne l'opacità al passaggio del mouse. Ho modificato ciascuna di queste regolazioni in questo esempio.

Le regolazioni dell'icona del menu dell'hamburger ti consentono di regolare la dimensione e il colore delle linee o dei punti sull'icona dell'hamburger sia per la posizione chiusa che per quella aperta. Puoi anche controllare l'altezza della linea, il raggio del bordo e l'interlinea. Questa è la posizione chiusa. Ho impostato il colore delle linee su rosso.

Ho impostato il colore dell'icona aperta su oro.

Per questo, ho posizionato l'icona del menu a destra e selezionato tre righe. Ho regolato i colori, l'altezza della linea, il raggio del bordo e la posizione delle tre linee.

Puoi anche aggiungere del testo. Ti dà il pieno controllo sul testo, inclusa la posizione orizzontale e verticale, la dimensione del carattere, il colore e lo stile. Questo esempio include l'opzione con tre punti.

Sfondo del menu Burger e Ombra dello sfondo del menu Burger forniscono impostazioni simili ai pulsanti Divi. Includono il colore, la larghezza, l'altezza, il raggio del bordo, la lunghezza orizzontale e verticale dell'ombra, il raggio di sfocatura e il colore di sfocatura. Ho regolato la maggior parte delle impostazioni in questo esempio, rendendo l'icona un quadrato anziché un cerchio.

Inietta layout

Inject Layouts ti consente di selezionare layout dalla tua libreria Divi per iniettare in varie posizioni sull'intestazione. Posiziona i layout sopra il menu, sotto il menu o sopra l'intestazione personalizzata per dispositivi mobili.

Per questo esempio, ho aggiunto sezioni dal pacchetto di layout che sto utilizzando per posizionare un modulo di contatto sopra il menu e le informazioni di contatto sotto il menu. Ho fatto il menu a schermo intero così è più facile da vedere.

Aspetto del menu

L'aspetto del menu consente di modificare il colore di sfondo, la posizione del collegamento, la dimensione del carattere, la famiglia, il colore, il colore al passaggio del mouse, il lato dello schermo in cui appare e la larghezza dell'area del menu. Ho spostato il menu a sinistra, cambiato lo sfondo, aumentato la dimensione del carattere, cambiato la posizione dall'alto rispetto a dove appaiono i collegamenti e centrato i collegamenti.

Per questo, ho ristretto l'area del menu, sollevato i collegamenti, giustificato a destra i collegamenti e regolato il colore del carattere al passaggio del mouse.

In questo, ho spostato il menu di nuovo a destra, l'ho reso più ampio, giustificato a sinistra il testo, cambiato il colore e inserito un modulo di contatto sotto il menu.

Aspetto del sottomenu

Esistono diversi stili per la visualizzazione dei sottomenu. Questo è lo stile annidato di collasso. Ho lasciato le impostazioni di default. Puoi anche regolare l'aspetto, rimuovere il bordo e cambiare l'icona.

Questo è Sovrapponi Slide In. Puoi regolare la dimensione del carattere, il colore, l'altezza, il colore al passaggio del mouse, l'area del contenuto, ecc. Ho regolato la maggior parte di queste impostazioni per questo esempio.

Questo è lo stile del sottomenu Side By Side. Posiziona un'icona a forma di freccia, che punta alle voci del sottomenu. È possibile regolare l'altezza, la posizione, il colore, ecc. sia per l'icona di apertura che di chiusura. Ho modificato le impostazioni per l'icona di apertura.

Smetti di impilare

Uno dei problemi con l'iniezione di layout è che i moduli si impileranno. Divi Mobile include un modulo Divi che puoi aggiungere al layout per evitare che si sovrapponga. L'esempio sopra è un layout con elementi che si sovrappongono.

Basta aggiungere il modulo alla riga. Non serve altro.

Le colonne non si accumulano più. A seconda del layout, potrebbe essere necessario regolare la larghezza del menu per adattare tutto nel modo desiderato. Funziona anche con gli altri layout e design dei menu. Questo è un ottimo modo per creare un mega menu.

Dove acquistare

Divi Mobile è disponibile dal sito Web dello sviluppatore. Ci sono più licenze tra cui scegliere:

Annuale

• 1 sito £ 12
• 2 – 5 siti £ 36
• Illimitato £ 64

Tutta la vita

• 1 sito £ 40
• Illimitato £ 196

Include 1 anno di assistenza. Riceverai aggiornamenti per tutto il tempo in cui la licenza è attivata sul tuo sito web.

Pensieri finali

Questo è il nostro sguardo al plugin Divi Mobile. È un ottimo plugin per la progettazione di menu mobili. Ho solo scalfito la superficie di ciò che si può fare con esso. È facile da usare e ha molte regolazioni tra cui scegliere. Mi piace che utilizzi il personalizzatore del tema per vedere le modifiche dal vivo.

Ci sono state alcune volte in cui ho dovuto salvare e ricaricare la pagina per vedere le modifiche, ma quello avrebbe potuto essere il mio server. Mi piacerebbe vedere un pulsante di ripristino predefinito in modo da poter tornare facilmente alle impostazioni predefinite come è possibile con i controlli Divi standard. Questo potrebbe non essere necessario, però.

Sono rimasto impressionato da quello che potevo fare con Divi Mobile. Se sei interessato a un plug-in Divi per creare menu mobili personalizzati, vale la pena dare un'occhiata a Divi Mobile.

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

Immagine in primo piano via venimo / shutterstock.com