Divi Plugin Highlight: Divi Toolbox

Divi Toolbox este un plugin terță parte care adaugă o mulțime de efecte noi la Divi care ar necesita în mod normal CSS, JavaScript, PHP sau o mulțime de pluginuri individuale. Efectele sunt ușor de utilizat și personalizat și oferă site-ului Divi un plus de strălucire pentru a se distinge din mulțime.

Efectele includ modificări la nivel de site, noi meniuri mobile, fundaluri de particule, subsoluri, widget-uri, stil, animații, anteturi, navigare, noi machete de blog, machete Divi în locații noi, personalizare ecran de conectare, ferestre pop-up și multe altele. Multe dintre caracteristici pot fi stilizate cu noi adăugiri la personalizatorul temei. Divi Toolbox nu funcționează cu Extra sau cu pluginul Divi Builder.

Setări generale Divi Toolbox

Ecranul de opțiuni Divi Toolbox este adăugat la meniul tabloului de bord Divi. Setările sunt activate aici, dar ajustările se fac în personalizator.

Setările generale includ stilul global de anteturi, personalizează pagina de conectare, ascund proiecte, permit încărcarea tipului de fișier SVG, bara de defilare personalizată a browserului, 404 setări de pagină (alegeți un aspect și ascundeți antetul și subsolul) și setările de pictograme sociale (activați stilul, deschideți în o filă nouă și adăugați mai multe pictograme).

Adăugarea mai multor pictograme sociale deschide un câmp în care puteți introduce adresa URL pentru încă 9 rețele sociale.

Iată fila General din personalizator, unde pot regla setările pe care le-am activat. Setările includ titluri și fonturi, bara de derulare a browserului și ecranul de conectare. În acest exemplu, am făcut câteva ajustări la textul h1 și al corpului și am adăugat stilul în bara de derulare. Am adăugat, de asemenea, mai multe pictograme sociale.

Pentru ecranul de conectare, va trebui să faceți modificările și apoi să vă deconectați sau să vizualizați ecranul într-un alt browser.

Iată ecranul meu de conectare după ce am adăugat o imagine de fundal, o siglă și am schimbat dimensiunea și culorile câmpurilor și ale textului. Este nevoie de puține modificări, deoarece nu puteți vedea ecranul în timp ce efectuați modificările.

Setări antet casetă de instrumente Divi

Setările antet adaugă stil la meniu, activează un meniu vertical personalizat, adaugă un buton de meniu CTA, schimbă sigla în meniul fix, activează sigla suprapusă și adaugă un aspect Divi înainte de navigarea pe pagina de pornire și un aspect înainte și după navigare pe alte pagini.

Butonul de meniu CTA vă permite să aplicați CTA la primul sau ultimul element de meniu sau să aplicați o clasă personalizată. Acesta oferă CSS și instrucțiuni despre unde să îl adăugați.

Iată personalizatorul pentru antet. Am adăugat un aspect deasupra meniului (în acest exemplu este doar un modul text, dar puteți adăuga un aspect complet dacă doriți). Logo-ul suprapus are o cutie pătrată cu efecte de umbră. Am schimbat dimensiunea siglei de la 200 la 140 și am mutat pictogramele sociale în meniul principal. Plasez cursorul peste elementul de meniu Servicii, astfel încât să puteți vedea efectul CSS.

Setări subsol pentru caseta de instrumente Divi

Setările subsolului includ un subsol lipicios, dezvăluirea subsolului, personalizarea meniurilor și widgeturilor, personalizarea butonului înapoi la partea de sus (care adaugă o opțiune de legătură a butonului personalizat) și adăugarea aspectelor înainte și după subsol.

În acest exemplu, am schimbat fontul antetului și al meniului cu toate majusculele și am mărit spațiul. De asemenea, am ajustat culorile cu hover-ul și am adăugat o pictogramă lângă textul de pe hover. Am adăugat un aspect după aspectul subsolului. Acesta folosește un subsol dezvăluit (motiv pentru care textul se află în spatele modulului de text de deasupra acestuia).

Am stilat butonul din spate sus pentru a afișa text. Are un efect de umbră și i-am ajustat locația. Am lăsat culorile în mod implicit. Am centrat textul de jos și pictogramele sociale. Pentru efectul de hover, am ales Grow (include și micșorare, mișcare în sus, mișcare în jos, mișcare, bătăi ale inimii, jello și puls). Plac peste pictograma Facebook, astfel încât să puteți vedea efectul.

Setări mobile Divi Toolbox

Setările pentru mobil includ un câmp pentru a introduce punctul de întrerupere al meniului mobil (lățimea exactă a ecranului atunci când meniul se schimbă de la desktop la mobil), stiluri personalizate, modificați sigla, alegeți efectul de clic pe pictograma hamburger, restrângeți submeniul imbricat și activați mai multe clase CSS. Clasele CSS vă permit să inversați coloanele și să centrați textul, modulele și butoanele.

Iată o privire la pagina din Google Chrome cu funcția Responsive selectată. De îndată ce am luat dimensiunea ecranului mai mică de 980 pixeli, s-a schimbat în pictograma mobilă pe care am selectat-o ​​și a adăugat meniul hamburger cu animația pe care am ales-o.

În acest ecran, desenez culoarea de fundal a meniului mobil, culoarea de fundal a cursorului și meniul hamburger. Am schimbat textul pentru elementele din meniul principal cu toate majusculele și am lăsat standardul de text CTA. De asemenea, am schimbat fundalul pentru elementul de meniu CTA. De asemenea, puteți regla dimensiunea meniului și a pictogramei.

Setări blog Divi Toolbox

Setările Blogului vă permit să personalizați bara laterală și widget-urile, meta-ul postării, arhiva și paginile categoriei, să alegeți un aspect (din 6 opțiuni), să ascundeți bara laterală a arhivelor și să personalizați textul butonului citiți mai multe.

Pentru postările individuale puteți alege aspectul barei laterale, ascunde titlul postării, adăugați o casetă de autor, adăugați linkuri anterioare și următoare, adăugați postări conexe și personaliza formularul de comentarii. De asemenea, puteți adăuga aspecte personalizate după navigare la postări individuale, arhive, categorii, pagini de autor și pagini cu rezultate ale căutării.

Pentru pagina blogului, am adăugat un efect de umbră în bara laterală, am schimbat fonturile și stilul lor și am stilizat caseta de căutare și am mărit dimensiunea chenarului. Folosește un aspect alternativ și am personalizat textul butonului de citire mai mult.

Acest exemplu este aspectul 6. Am personalizat din nou culorile meta fontului și am adăugat o culoare de plecare. De asemenea, am personalizat fundalul butonului de citire mai mult.

Postările individuale de pe blog vă permit să personalizați fiecare dintre elementele pe care le-ați adăugat în setările blogului. În acest ecran, personalizez postările aferente, linkurile următoare și anterioare și caseta de autor. Aveți control asupra tuturor textelor, culorilor, umbrelor etc.

În acest exemplu, personalizez formularul de comentarii. Aveți control asupra culorilor câmpului (atât focalizate, cât și non-focalizate), chenarului, textului, culorilor, butonului etc. rază.

Setări module Divi Toolbox

Fila Module oferă setări pentru a adăuga un efect de trecere după mouse, pentru a adăuga o opțiune de e-mail subțire (oferă CSS pentru trei opțiuni diferite), butoane secundare (care adaugă un nou strat de personalizare) și o mulțime de modificări.

Modificările includ o pictogramă animată triunghi pentru modulele de acordeon și comutare, eliminarea marginii inferioare orizontale și căptușeala pentru tabelele de tarifare, mutarea imaginii portretului sub conținut în mărturii, ascunderea barelor de derulare orizontale și adăugarea CSS pentru a alinia vertical coloanele și pentru a schimba înălțimea a oricărui element până la 100% din înălțimea ferestrei sale.

Iată o privire asupra activității de e-mail subțiri. Plasează toate câmpurile pe o singură linie. Acest exemplu folosește și butonul secundar. Numai butoanele la care am adăugat clasa CSS vor primi aceste modificări. Utilizarea clasei CSS înseamnă că am acum două stiluri globale de butoane.

Setări Extras pentru Divi Toolbox

Fila Extras include preîncărcători, ferestre pop-up, fundal de particule, efect de înclinare 3D și defilare în paralelă pentru module.

Există 12 preîncărcătoare din care să alegeți. Le puteți face să apară pe pagina de pornire numai dacă doriți și să le selectați tipul de tranziție și viteza. Ecranul selector afișează animațiile preîncărcătorului. Le puteți personaliza în continuare în personalizatorul temei.

Declanșați ferestrele pop-up cu orice link dintr-un element de meniu, buton, link în text etc. Creați câte doriți. Alegeți orice aspect premade pentru pop-up. Personalizați fundalul și butonul de închidere din personalizator.

Aceasta este particulele în mișcare. Aveți control deplin asupra culorii, formei, numărului de particule, vitezei, dimensiunii, dimensiunii liniei, opacității și interactivității. Există două ID-uri CSS pentru particule, permițându-vă să aveți două modele diferite.

Iată o privire la caracteristica de înclinare. Puteți regla înclinarea, perspectiva, scala, viteza și strălucirea. Adăugați-l la orice secțiune, rând sau modul.

Licență Divi Toolbox

Există două licențe dintre care puteți alege:

• Licență obișnuită (pentru utilizare într-un singur proiect) - 49,00 €
• Licență extinsă (pentru utilizare în proiecte nelimitate) - 169,00 €

Gânduri de sfârșit

Sunt impresionat de cantitatea de funcții și setări pe care le are acest plugin. Îmi place mai ales că adaugă postări conexe, linkuri anterioare și următoare și o casetă de autor la postările de blog care nu sunt create cu constructorul Divi. Bara de defilare este, de asemenea, o atingere plăcută.

Există câteva setări la care puteți accesa în modulele Divi, cum ar fi textul antetului, dar acest lucru oferă mai multe detalii pentru acele setări. Aș dori să mai văd câteva ajustări adăugate (de exemplu, efecte de umbră pentru caseta de comentarii, mai multe opțiuni pentru sigle, plasări de pictograme în rețelele sociale etc.).

Dacă sunteți interesat să adăugați o mulțime de efecte noi la Divi în cel mai simplu mod posibil, Divi Toolbox merită privit.

Vrem sa auzim de la tine. Ați încercat Divi Toolbox? Spuneți-ne despre experiența dvs. în comentariile de mai jos.

Imagine prezentată prin vasabii / shutterstock.com