Divi Plugin Highlight: DTS Filterable Portfolio Grid Pro

Modulul de portofoliu filtrabil Divi vă permite să creați un portofoliu fie pe ecran complet, fie într-o grilă. Ce se întâmplă dacă doriți un aspect diferit care să adauge un buton și opțiuni pentru 3 sau 4 coloane în grilă? Este exact ceea ce face un plugin terță parte numit DTS Filterable Portfolio Grid Pro.

DTS Filterable Portfolio Grid Pro adaugă un nou modul Divi Builder. Pluginul oferă portofoliului dvs. un aspect nou și are opțiuni pentru 3 sau 4 coloane într-o grilă. Afișează tipurile de postări ale proiectului. Include textul butonului personalizat și opțiuni avansate personalizate.

Pluginul este disponibil de pe site-ul dezvoltatorului.

În acest punct de evidențiere a pluginului, vom arunca o privire la DTS Filterable Portfolio Grid Pro și vom vedea ce poate face. Imaginile sunt preluate de pe Unsplash.com.

Instalarea DTS Filterable Portfolio Grid Pro

Încărcați și activați pluginul în mod normal. După ce ați activat pluginul, navigați la Setări în tabloul de bord și selectați Activare DTS Filterable Portfolio Grid Pro . Introduceți cheia API și adresa de e-mail și salvați modificările.

Setări modul

Pluginul adaugă un nou modul Divi Builder. Este albastru, deci e greu să ratezi.

Setările de conținut includ numărul de postări, selectarea categoriilor, afișarea titlului, categoriilor, paginarea, fundalul și textul butoanelor personalizate.

Fila de proiectare include setări pentru aspect, culori, fonturi, pictograme, suprapuneri, chenare și animație.

Exemple - Grilă

Setările implicite utilizează o grilă cu 3 coloane. Puteți vedea animația cu mouse-ul în dala centrală. Plăcile includ imaginea cu secțiunea de titlu și un buton plasat în centru. Partea de jos arată categoria. Plăcile afișează o umbră care se îndepărtează pe plan. După cum puteți ghici, fiecare dintre aceste elemente este personalizabil.

În acest exemplu, am schimbat grila în 4 coloane și am ajustat culoarea de fundal a butonului, culoarea butonului de fundal și culoarea fontului butonului. Aspectul celor patru coloane modifică dimensiunile imaginii pentru a se potrivi.

În aceasta, am redus raza butonului, am mărit dimensiunea fontului butoanelor, am schimbat pictograma de deplasare și culoarea acesteia și am schimbat culoarea de suprapunere. Toate aceste ajustări sunt simple și intuitive.

În acest exemplu, am luat raza chenarului la 0 pentru a crea colțuri pătrate pentru buton. Am mărit dimensiunile fontului pentru textul butonului, textul titlului și am schimbat stilurile fontului. De asemenea, am făcut negru suprapunerea hover cu suficientă opacitate pentru ca imaginea să fie afișată și am schimbat pictograma hover.

Acesta scade înălțimea liniei pentru titlu. De asemenea, am întunecat culoarea fontului și am mărit distanța dintre litere. Am setat din nou fontul categoriei la valorile implicite și l-am setat la cursiv. Raza butonului este setată la 100 și am adăugat propriul text al butonului. De asemenea, am schimbat culoarea suprapunerii și am selectat o altă pictogramă și i-am schimbat culoarea în alb. Acest exemplu folosește, de asemenea, o margine, care este setată la roșu și la 2 pixeli lățime. Opțiunile de margine includ culoare, lățime și stil.

Modulul are o opțiune de culoare text pentru lumină și întuneric, în cazul în care utilizați un fundal întunecat în spatele titlului, dar în prezent nu există o opțiune pentru a schimba fundalul din spatele titlului. Bănuiesc că aceasta este o caracteristică viitoare.

Setările de fundal (culoarea standard, gradientul, imaginea și videoclipul) se aplică în spatele modulului. Cardurile ating marginea culorii de fundal și nu există ajustări de umplere în modul.

Acest lucru ar face ca fundalul să pară incomod, dar există câteva soluții ușoare. Puteți adăuga padding la secțiune sau rând, așa cum am făcut în toate imaginile din acest articol, sau puteți utiliza CSS pentru a adăuga padding la modul.

Iată CSS pe care l-am adăugat la fila Advanced din secțiunea Element principal pentru modul. Pur și simplu îi spune lui Divi să adauge căptușeală în toate cele 4 locații. Valorile se aplică în aceeași ordine ca și câmpurile de umplere a rândurilor și modulelor: sus, dreapta, jos, stânga. Aceasta înseamnă că am dat umpluturii de sus o valoare de 40, umpluturii din dreapta o valoare de 30, umpluturii de jos este 20, iar umpluturii din stânga 30.

Rezultatul este exact ceea ce îmi doream - diferite niveluri de căptușire pe toate cele patru fețe. Acest lucru face ca caracteristica de fundal să fie mai utilizabilă și este ușor de implementat.

Exemple - Filtru

Deoarece acesta este un portofoliu filtrabil, este firesc că filtrul ar putea fi, de asemenea, personalizabil. Așa cum era de așteptat, există ajustări pentru stilul fontului, dimensiunea, alinierea, culoarea, distanța și înălțimea. Până în acest moment am văzut filtrul cu setările implicite.

Acest exemplu folosește fontul roșu Amatic SC. Am mărit dimensiunea fontului, dar am lăsat spațiul și înălțimea la valorile implicite.

Acesta folosește un font numit Bevan. Folosesc un roșu mai închis. Dimensiunea fontului este aceeași cu fontul anterior.

Acesta folosește Arvo. Am redus dimensiunea fontului și am selectat o culoare gri închis.

Animații

Animațiile Divi sunt disponibile și în setările modulului. Alegeți niciuna, decolorați, glisați, săriți, măriți, răsturnați, pliați și rotiți. De asemenea, puteți regla animația pentru a repeta o singură dată sau a face o buclă, puteți alege direcția, durata, întârzierea, intensitatea, opacitatea de pornire și curba de viteză.

Acest exemplu folosește Roll. Am lăsat toate celelalte în mod implicit.

Utilizarea grilei de portofoliu într-un aspect

Portofoliul DTS Filterable Grid Pro arată minunat într-un aspect. Iată un exemplu de aspect fotografic cu blog, portofoliu și formular de contact. Folosesc setările implicite pentru grila portofoliului și se amestecă frumos.

Utilizarea grilei de portofoliu cu Extra

Portofoliul DTS Filterable Grid Pro este, de asemenea, compatibil cu Extra. Iată o privire la un aspect similar cu aspectul Divi de mai sus. Aceasta folosește și setările implicite. Folosesc o grilă cu 3 coloane cu dimensiuni de imagine nepotrivite. Aceasta este o soluție ușoară - pur și simplu utilizați imagini de aceeași dimensiune.

Licență

Există două opțiuni de licență din care puteți alege: site unic și extins. Ambele includ actualizări pe viață și 6 luni de asistență.

Gânduri finale

Portofoliul DTS Filterable Grid Pro este ușor de utilizat și oferă o mulțime de stiluri elegante pentru a face portofoliul să iasă în evidență. Există câteva funcții pe care aș dori să le adaug, cum ar fi titlul și culorile de fundal meta, dar oferă în continuare suficiente caracteristici pe care este ușor de recomandat. Dacă sunteți interesat de un modul de grilă de fundal filtrabil cu stil care depășește modulul standard Divi, DTS Filterable Portfolio Grid Pro merită o privire.

Vrem sa auzim de la tine! Ați încercat DTS Filterable Portfolio Grid Pro? Spuneți-ne ce părere aveți despre asta în comentarii.

Imagine prezentată prin AF studio / shutterstock.com