Divi Plugin Highlight - Divi Portfolio Grid

Divi include un modul de portofoliu care afișează portofoliul dvs. în lățime completă sau un aspect al grilei și include toate funcțiile de bază pe care le-ați aștepta de la un modul Divi - fundaluri, fonturi, culori, chenare, suprapuneri, pictograme etc. Ce se întâmplă dacă doriți un aspect diferit, cum ar fi un design cu mai multe coloane sau caracteristici noi, cum ar fi un buton personalizabil? S-ar putea să vă intereseze un plugin terță parte numit Divi Portfolio Grid.

Divi Portfolio Grid este un plugin terță parte din Magazinul de teme Divi. Nu numai că vă oferă caracteristicile standard ale modulului Divi, dar oferă și un aspect de 2, 3 și 4 coloane cu noi caracteristici de stil, astfel încât să puteți crea portofolii unice. De asemenea, adaugă un buton cu text și efecte de cursor pentru a schimba culorile.

În această prezentare generală vom arunca o privire la Divi Portfolio Grid folosind un exemplu de portofoliu pe care l-am creat. Toate imaginile utilizate în portofolii și fundaluri au fost preluate de pe Unsplash.com.

Instalarea pluginului Divi Portfolio Grid

Înainte de a putea încărca pluginul, va trebui să dezarhivați fișierul descărcat. În fișierul comprimat veți găsi fișierul plugin comprimat împreună cu un ghid rapid PDF. Ghidul rapid este un document care vă va ajuta să instalați și o prezentare generală a modului de utilizare a modulului. Încărcați fișierul plugin care se află în fișierul de descărcare, instalați și activați în mod normal.

Caracteristici ale modulului de portofoliu personalizat

Pluginul adaugă un nou modul în Divi Builder numit Custom Portfolio Module. Modulul funcționează ca orice alt modul Divi Builder din backend - astfel încât să îl puteți trage și plasa în orice rând și să ajustați conținutul, designul și setările avansate.

Personalizați culoarea de fundal, alegeți o imagine de fundal, selectați un aspect, creați textul butonului personalizat, alegeți numărul de postări de afișat, selectați categoria, afișați meta, alegeți culori etc.

Toate caracteristicile de design standard sunt și aici. Reglați culorile, fonturile, butoanele, pictogramele, suprapunerile și multe altele.

Exemple - Utilizarea modulului Divi Custom Portfolio

Pentru exemplele mele, am creat o pagină, am adăugat un fundal pentru a-i oferi o claritate vizuală, am făcut rândul pe toată lățimea și am adăugat modulul Portfolio Grid. Înainte să ne uităm la el, aruncăm o privire rapidă spre modulul portofoliului standard Divi Building pentru comparație.

Modul standard de portofoliu Divi

Iată o privire la pagină folosind modulul portofoliului standard Divi. L-am setat la aspectul grilei și am setat culoarea fontului la lumină. Toate celelalte caracteristici sunt setate la valorile implicite. De asemenea, include suprapuneri cu hover cu pictograme (în modul grilă), chenare, fundal, meta și stil de font.

Imaginea prezentată a proiectului este afișată cu titlul și categoria proiectului sub imagine. Dând clic pe titlu te duce la proiect. Dând clic pe titlul categoriei se deschide o pagină a categoriei pentru acea categorie. De asemenea, include efecte de deplasare cu opțiuni de culoare și pictogramă de suprapunere atunci când utilizați aspectul grilei.

Exemple de module de portofoliu personalizate

Acesta include trei machete din care puteți alege, astfel încât să vă puteți seta portofoliile în 2, 3 sau 4 coloane. Să ne uităm la fiecare dintre machete cu diverse personalizări și caracteristici.

Iată o privire asupra aspectului cu 2 coloane. Afișează imaginea prezentată a proiectului, include titlul și categoria pe care se poate face clic într-o bară sub imagine și plasează un buton cu text deasupra imaginii și barei. Aceasta este caracteristicile și culorile implicite.

Imaginea include aceleași efecte de hover ca modulul portofoliu standard, dar butonul include și efecte de hover. Puteți vedea în acest exemplu setările implicite ale butonului pentru a schimba fundalul violet în roșu.

Puteți vedea, de asemenea, un efect frumos de hover care creează o umbră în spatele cărții pe care plasați. Titlul este afișat ca o descriere. Suprapunerea cu mouse-ul este, de asemenea, o caracteristică implicită, deci nu trebuie activată. Tranziția efectului de hover afișează o umbră mai grea până la finalizarea tranziției.

Iată o privire asupra aspectului cu 3 coloane. În acest exemplu, am schimbat culoarea fundalului și textului butonului și am schimbat textul pentru a afișa propriul mesaj.

Butonul include, de asemenea, efectul de trecere pe umbră. În acest exemplu, plutesc doar deasupra butonului, astfel încât imaginea nu afișează efectul său de plutire. Fundalul butonului și textul și-au schimbat culoarea.

Acest exemplu folosește aspectul cu 4 coloane. Am setat raza butonului la 0 și am schimbat toate stilurile de font.

Efectul hover plasează o suprapunere albastră cu 47% opacitate (îmi pare rău pentru numărul impar, dar acolo s-a oprit mouse-ul, așa că am mers cu el), și o pictogramă casetă de selectare în roșu. Butonul se schimbă de la gri închis, cu text deschis la filă, la alb murdar, cu text gri închis.

În acest exemplu am adăugat un fundal care arată în spatele titlului și meta. Am adăugat o margine roșie cu o lățime de 2 pixeli (deci este ușor de văzut în imagine). Am ajustat toate fonturile și culorile și am schimbat culoarea de fundal a butonului, culoarea cu mouse-ul și culoarea pictogramei. Am lăsat culoarea de suprapunere implicită pentru a arăta contrastul dintre zona de imagine prezentată și imaginea de fundal din spatele titlului și meta secțiunii.

Butonul se afișează numai dacă afișați titlul. Acest exemplu afișează doar categoria.

Acest exemplu afișează doar titlul proiectului. Deoarece afișează titlul, se afișează și butonul.

În acest exemplu, am plasat o suprapunere roșie cu o opacitate de 66. Am schimbat pictograma hover și am personalizat butonul și efectele sale hover. O imagine de fundal (a unui cer gri) este plasată în spatele titlului. Acesta folosește diferite categorii de proiecte. Raza butonului este setată la 10.

Grila portofoliului Divi - receptivă

Pluginul este receptiv. Iată aspectul cu 3 coloane de pe un iPad (emulat în Chrome’s Developer Tools) în modul portret. Pentru a afla mai multe despre instrumentele pentru dezvoltatori Google Chrome, consultați articolul De ce ar trebui să începeți să utilizați instrumentele pentru dezvoltatori Chrome chiar acum.

Acesta este același aspect în modul peisaj.

Acesta este același aspect pe un Galaxy S5 în modul portret.

Și iată aspectul folosind un Galaxy S5 este modul peisaj.

Licență, actualizări și documentație

Licența acoperă utilizarea nelimitată și include actualizări pe toată durata vieții. Documentația este furnizată în fișierul PDF care vine în dosarul zip. Este un document scurt și oferă o prezentare generală cu imagini pentru a începe. Este un plugin ușor de utilizat și am găsit totul intuitiv. Dacă sunteți obișnuiți să utilizați module Divi, ar trebui să vă simțiți ca acasă cu acest modul.

Portofoliul Divi Grid poate fi achiziționat de la magazinul tematic Divi.

Gânduri finale

Divi Portfolio Grid este ușor de utilizat și oferă suficiente caracteristici suplimentare față de modulul standard de portofoliu Divi, pe care mulți utilizatori îl vor găsi esențial. Include aspecte de 2, 3 și 4 coloane, adaugă un buton cu efecte de hover, suprapuneri cu pictograme și toate stilurile modulului la care v-ați aștepta, inclusiv funcții CSS avansate, astfel încât să puteți personaliza stilul cu propriul cod. Dacă doriți un portofoliu cu funcții dincolo de modulul standard de portofoliu Divi, Divi Portfolio Grid ar putea fi modulul de care aveți nevoie.

Am vrea să aflăm de la dvs.! Ați încercat Divi Portfolio Grid? Spuneți-ne despre experiența dvs. în comentariile de mai jos.

Imagine prezentată prin 2RAL / shutterstock.com