Evidenziazione del plug-in Divi: Divi Toolbox

Divi Toolbox è un plug-in di terze parti che aggiunge molti nuovi effetti a Divi che normalmente richiederebbero CSS, JavaScript, PHP o molti plug-in individuali. Gli effetti sono facili da usare e personalizzare e danno al tuo sito web Divi un tocco di brillantezza in più per distinguerti dalla massa.

Gli effetti includono modifiche a livello di sito, nuovi menu mobili, sfondi di particelle, piè di pagina, widget, stili, animazioni, intestazioni, navigazione, nuovi layout di blog, layout Divi in ​​nuove posizioni, personalizzazione della schermata di accesso, popup e molto altro. Molte delle funzionalità possono essere modificate con nuove aggiunte al personalizzatore del tema. Divi Toolbox non funziona con Extra o con il plug-in Divi Builder.

Impostazioni generali di Divi Toolbox

La schermata delle opzioni Divi Toolbox viene aggiunta al menu del dashboard Divi. Le impostazioni sono abilitate qui, ma le regolazioni vengono effettuate nel personalizzatore.

Le impostazioni generali includono lo stile delle intestazioni globali, personalizzare la pagina di accesso, nascondere i progetti, consentire il caricamento di tipi di file SVG, la barra di scorrimento del browser personalizzata, le impostazioni della pagina 404 (scegliere un layout e nascondere l'intestazione e il piè di pagina) e le impostazioni delle icone social (abilitare lo stile, aprire in una nuova scheda e aggiungere altre icone).

L'aggiunta di altre icone social apre un campo in cui è possibile inserire l'URL per altri 9 social network.

Ecco la scheda Generale nel personalizzatore, dove posso regolare le impostazioni che ho abilitato. Le impostazioni includono titoli e caratteri, la barra di scorrimento del browser e la schermata di accesso. In questo esempio, ho apportato alcune modifiche a h1 e al corpo del testo e ho aggiunto uno stile alla barra di scorrimento. Ho anche aggiunto più icone social.

Per la schermata di accesso, dovrai apportare le modifiche e quindi disconnetterti o visualizzare la schermata in un altro browser.

Ecco la mia schermata di accesso dopo aver aggiunto un'immagine di sfondo, un logo e aver modificato le dimensioni e i colori dei campi e del testo. Ci vuole un po' di ritocco dal momento che non puoi vedere lo schermo mentre apporti le modifiche.

Impostazioni intestazione Divi Toolbox

Le impostazioni dell'intestazione aggiungono uno stile al menu, abilitano un menu a discesa personalizzato, aggiungono un pulsante del menu CTA, cambiano il logo nel menu fisso, abilitano il logo sovrapposto e aggiungono un layout Divi prima della navigazione nella home page e un layout prima e dopo navigazione su altre pagine.

Il pulsante del menu CTA ti consente di applicare il CTA alla prima o all'ultima voce di menu o di applicare una classe personalizzata. Fornisce il CSS e le istruzioni su dove aggiungerlo.

Ecco il personalizzatore per l'intestazione. Ho aggiunto un layout sopra il menu (in questo esempio è solo un modulo di testo, ma puoi aggiungere un layout completo se lo desideri). Il logo sovrapposto ha un riquadro quadrato con effetti ombra. Ho cambiato la dimensione del logo da 200 a 140 e spostato le icone social nel menu principale. Sto passando il mouse sopra la voce di menu Servizi in modo da poter vedere l'effetto CSS.

Impostazioni piè di pagina Divi Toolbox

Le impostazioni del piè di pagina includono un piè di pagina appiccicoso, la rivelazione del piè di pagina, la personalizzazione di menu e widget, la personalizzazione del pulsante Torna in alto (che aggiunge un'opzione di collegamento del pulsante personalizzata) e l'aggiunta di layout prima e dopo il piè di pagina.

In questo esempio, ho cambiato l'intestazione e i caratteri del menu in maiuscolo e ho aumentato la spaziatura. Ho anche regolato i colori al passaggio del mouse e aggiunto un'icona accanto al testo al passaggio del mouse. Ho aggiunto un layout dopo il layout del piè di pagina. Questo usa un piè di pagina rivelato (motivo per cui il testo è dietro il modulo di testo sopra di esso).

Ho disegnato il pulsante Torna in alto in modo che visualizzi il testo. Ha un effetto ombra e ho regolato la sua posizione. Ho lasciato i colori di default. Ho centrato il testo in basso e le icone social. Per l'effetto hover ho scelto Grow (include anche restringimento, spostamento in alto, spostamento in basso, oscillazione, battito cardiaco, gelatina e pulsazione). Sto passando il mouse sull'icona di Facebook in modo da poter vedere l'effetto.

Impostazioni mobili Divi Toolbox

Le impostazioni Mobile includono un campo per inserire il punto di interruzione del menu mobile (la larghezza esatta dello schermo quando il menu cambia da desktop a mobile), stili personalizzati, modificare il logo, scegliere l'effetto clic dell'icona dell'hamburger, comprimere il sottomenu nidificato e abilitare diverse classi CSS. Le classi CSS consentono di invertire le colonne e centrare il testo, i moduli e i pulsanti.

Diamo uno sguardo alla pagina in Google Chrome con Responsive selezionato. Non appena ho preso la dimensione dello schermo inferiore a 980 pixel, è passata all'icona del cellulare che ho selezionato e ho aggiunto il menu dell'hamburger con l'animazione che ho scelto.

In questa schermata, sto modellando il colore di sfondo del menu mobile, il colore di sfondo al passaggio del mouse e il menu dell'hamburger. Ho cambiato il testo per le voci del menu principale in maiuscolo e ho lasciato lo standard di testo CTA. Ho anche cambiato lo sfondo per la voce di menu CTA. Puoi anche regolare il menu e la dimensione dell'icona.

Impostazioni del blog di Divi Toolbox

Le impostazioni del blog ti consentono di personalizzare la barra laterale e i widget, il meta dei post, l'archivio e le pagine delle categorie, scegliere un layout (tra 6 opzioni), nascondere la barra laterale degli archivi e personalizzare il testo del pulsante Leggi altro.

Per i singoli post puoi scegliere il layout della barra laterale, nascondere il titolo del post, aggiungere una casella dell'autore, aggiungere collegamenti precedenti e successivi, aggiungere post correlati e personalizzare il modulo dei commenti. Puoi anche aggiungere layout personalizzati dopo la navigazione a singoli post, archivi, categorie, pagine degli autori e pagine dei risultati di ricerca.

Per la pagina del blog, ho aggiunto un effetto ombra alla barra laterale, ho cambiato i caratteri e il loro stile, ho dato uno stile alla casella di ricerca e ho aumentato le dimensioni del bordo. Utilizza un layout alternativo e ho personalizzato il testo del pulsante Leggi altro.

Questo esempio è il layout 6. Ho personalizzato di nuovo i colori dei meta font e ho aggiunto un colore al passaggio del mouse. Ho anche personalizzato lo sfondo del pulsante Leggi altro.

I singoli post del blog ti consentono di personalizzare ciascuno degli elementi che hai aggiunto nelle impostazioni del blog. In questa schermata, sto personalizzando i post correlati, i collegamenti precedenti e successivi e la casella dell'autore. Hai il controllo su tutto il testo, i colori, le ombre, ecc.

In questo esempio, sto personalizzando il modulo dei commenti. Hai il controllo sui colori del campo (sia attivo che non attivo), bordo, testo, colori, pulsante, ecc. Ho cambiato il colore di sfondo del pulsante, il colore di messa a fuoco del campo, aggiunto un bordo al campo e cambiato il raggio.

Impostazioni dei moduli Divi Toolbox

La scheda Moduli fornisce le impostazioni per aggiungere un effetto al passaggio del mouse, aggiungere un opt-in e-mail sottile (fornisce CSS per tre diverse opzioni), pulsanti secondari (che aggiunge un nuovo livello di personalizzazione) e molte modifiche.

Le modifiche includono un'icona triangolare animata per i moduli a fisarmonica e a levetta, la rimozione del bordo inferiore orizzontale e il riempimento per le tabelle dei prezzi, lo spostamento dell'immagine verticale sotto il contenuto nelle testimonianze, il nascondere le barre di scorrimento orizzontali e l'aggiunta di CSS per allineare verticalmente le colonne e per modificare l'altezza di qualsiasi elemento al 100% della sua altezza della finestra.

Ecco uno sguardo al sottile opt-in per l'e-mail. Posiziona tutti i campi su un'unica riga. Questo esempio utilizza anche il pulsante secondario. Solo i pulsanti a cui ho aggiunto la classe CSS otterranno queste modifiche. L'uso della classe CSS significa che ora ho due stili di pulsanti globali.

Impostazioni extra di Divi Toolbox

La scheda Extra include preloader, popup, particelle di sfondo, effetto di inclinazione 3D e scorrimento parallasse per i moduli.

Ci sono 12 precaricatori tra cui scegliere. Puoi farli apparire solo sulla home page, se lo desideri, e selezionare il tipo e la velocità di transizione. La schermata di selezione mostra le animazioni dei preloader. Puoi personalizzarli ulteriormente nel personalizzatore del tema.

Attiva i popup con qualsiasi collegamento da una voce di menu, pulsante, collegamento nel testo, ecc. Crea quanti ne vuoi. Scegli un layout predefinito per il popup. Personalizza lo sfondo e chiudi il pulsante nel personalizzatore.

Si tratta di particelle in movimento. Hai il pieno controllo su colore, forma, numero di particelle, velocità, dimensione, dimensione della linea, opacità e interattività. Ci sono due ID CSS per le particelle, che ti consentono di avere due design diversi.

Ecco uno sguardo alla funzione di inclinazione. È possibile regolare l'inclinazione, la prospettiva, la scala, la velocità e l'abbagliamento. Aggiungilo a qualsiasi sezione, riga o modulo.

Licenza Divi Toolbox

Ci sono due licenze tra cui scegliere:

• Licenza regolare (per l'uso su un progetto) – € 49,00
• Licenza estesa (per l'utilizzo su progetti illimitati) – € 169,00

Pensieri finali

Sono impressionato dalla quantità di funzionalità e impostazioni di questo plugin. Mi piace particolarmente il fatto che aggiunga post correlati, collegamenti precedenti e successivi e una casella dell'autore ai post del blog che non sono stati creati con Divi builder. Anche la barra di scorrimento è un bel tocco.

Ci sono alcune impostazioni a cui puoi accedere nei moduli Divi, come il testo dell'intestazione, ma questo fornisce maggiori dettagli per tali impostazioni. Vorrei vedere alcune altre modifiche aggiunte (ad esempio, effetti ombra per la casella dei commenti, più opzioni per il logo, posizionamenti delle icone sui social media, ecc.).

Se sei interessato ad aggiungere un sacco di nuovi effetti a Divi nel modo più semplice possibile, vale la pena dare un'occhiata a Divi Toolbox.

Vogliamo sentire da voi. Hai provato Divi Toolbox? Facci sapere la tua esperienza nei commenti qui sotto.

Immagine in evidenza via vasabii / shutterstock.com