Divi Toolbox è un plugin che aggiunge molti nuovi effetti a Divi che normalmente richiedono CSS, JavaScript, PHP o molti plugin individuali. Gli effetti sono facili da usare, personalizzare e dare il tuo sito web Dai quello scintillio 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, Presentazioni Divi in nuove posizioni, personalizzazione della schermata di accesso, popup, ecc. Molte funzionalità possono essere personalizzate 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 customizer.
Le impostazioni generale include lo stile delle intestazioni globali, la pagina di accesso personalizzata, i progetti nascosti, l'autorizzazione a caricare i tipi di file SVG, la barra di scorrimento del browser personalizzata, le impostazioni della pagina 404 (scegli il layout e nascondi intestazione e piè di pagina) e icone social (attiva stile, apri file). nuova scheda e aggiungi altre icone).
L'aggiunta di icone social apre un campo in cui è possibile inserire l'URL di 9 social network aggiuntivi.
Ecco la scheda generale del customizer, dove posso regolare le impostazioni che ho abilitato. Le impostazioni includono intestazioni e caratteri, barra di scorrimento del browser e schermata di accesso. In questo esempio, ho apportato alcune modifiche al testo e al corpo h1 e ho aggiunto uno stile alla barra di scorrimento. Ho anche aggiunto altre icone social.
Per la schermata di accesso, è necessario apportare le modifiche e quindi disconnettersi o visualizzare la schermata in un altro browser.
Ecco la mia schermata di accesso dopo aver aggiunto un'immagine di sfondo, un logo e modificato la dimensione e il colore dei campi e del testo. Ci vuole un po 'di ritocco perché non puoi vedere lo schermo mentre apporti le modifiche.
Impostazioni dell'intestazione di Divi Toolbox
Le impostazioni Top della mente aggiungere uno stile al menu, attivare un menu a discesa personalizzato, aggiungere un pulsante del menu CTA, cambiare il logo sulla finestra mobile, attivare il logo in sovrimpressione e aggiungere un layout Divi prima di navigare nella home page, nonché 'una formattazione 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 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 d'ombra. Ho cambiato la dimensione del logo da 200 a 140 e ho spostato le icone social nel menu principale. Passo il mouse sulla voce di menu Servizi in modo da poter vedere l'effetto CSS.
Impostazioni piè di pagina nella casella degli strumenti Divi
Le impostazioni del piè di pagina includono un piè di pagina appiccicoso, visualizza piè di pagina, personalizza menu e widget, personalizza il pulsante Torna all'inizio (che aggiunge un'opzione di collegamento pulsante personalizzata) e aggiungi layout prima e dopo il piè di pagina.
In questo esempio, ho cambiato i caratteri dell'intestazione e 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. Questo utilizza un piè di pagina rivelato (motivo per cui il testo si trova dietro il modulo di testo sopra).
Ho disegnato il pulsante della parte superiore della pagina per mostrare 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, movimento su, giù, oscillazione, battito cardiaco, gelatina e impulso).
Impostazioni per Divi Toolbox Mobile
Le impostazioni mobile includere 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 sull'icona dell'hamburger , comprimi il sottomenu nidificato e attiva. diverse classi CSS. Le classi CSS consentono di invertire le colonne e centrare il testo, i moduli e i pulsanti.
Ecco un'anteprima della pagina in Google Chrome con Responsive selezionato. Non appena ho ridotto le dimensioni dello schermo a 980 pixel, è cambiato nell'icona del cellulare che ho selezionato e ho aggiunto il menu dell'hamburger con un'animazione da me scelta.
In questa schermata, definisco il colore di sfondo, il colore di sfondo al passaggio del mouse e il menu hamburger del menu mobile. Ho cambiato il testo delle 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 le dimensioni delle icone.
Impostazioni blog Divi Toolbox
I parametri di blog consentono di personalizzare la barra laterale e i widget, postare meta, pagine di archivio e di categoria, scegliere un layout (tra 6 opzioni), nascondere la barra laterale di archivio e personalizzare il testo del pulsante Leggi di più.
Per i singoli post, puoi scegliere il layout della barra laterale, nascondere il titolo del post, aggiungere la casella dell'autore, aggiungere collegamenti precedenti e successivi, aggiungere post correlati e personalizzare il forma di commenti. Puoi anche aggiungere layout post-navigazione personalizzati 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 lo stile, ho definito lo stile della casella di ricerca e aumentato la dimensione del bordo. Utilizza un layout alternativo e ho personalizzato il testo per il pulsante Leggi altro.
Questo esempio è il layout 6. Ho personalizzato di nuovo i colori dei caratteri per la meta sezione e ho aggiunto un colore al passaggio del mouse. Ho anche personalizzato lo sfondo per il pulsante Ulteriori informazioni.
I singoli post del blog ti consentono di personalizzare ciascuno degli elementi che hai aggiunto nelle impostazioni del blog. In questa schermata, personalizzo gli articoli associati, i collegamenti successivi e precedenti, nonché l'area dell'autore. Tu controlli tutto il testo, i colori, le ombre, ecc.
In questo esempio, sto personalizzando il file forma di commenti. Puoi controllare i colori del campo (attivo e non attivo), il bordo, il testo, i colori, il pulsante, ecc. Ho cambiato il colore di sfondo del pulsante, il colore di messa a fuoco del campo, ho aggiunto un bordo al campo e cambiato il raggio.
Licenza Divi Toolbox
Puoi scegliere tra due licenze :
- Licenza regolare (da utilizzare su un progetto) - € 49,00
- Licenza estesa (per l'utilizzo su progetti illimitati) - € 169,00
Cosa ricordare
Sono impressionato dalla quantità di funzionalità e impostazioni in questo plugin. Mi piace particolarmente il fatto che possa aggiungere articoli simili, collegamenti precedenti e successivi e un'area autore ai post del blog che non vengono creati con il generatore Divi. Anche la barra di scorrimento è un bel tocco.
Puoi accedere ad alcune impostazioni nei moduli Divi, come il testo dell'intestazione, ma fornisce maggiori dettagli per tali impostazioni. Vorrei aggiungere qualche altra modifica (ad esempio effetti ombra per l'area dei commenti, più opzioni per il logo, posizioni delle icone dei social media, ecc.).
Se vuoi aggiungere una tonnellata di nuovi effetti a Divi nel modo più semplice possibile, Divi Toolbox vale la deviazione.
