Cum se construiește o grilă de portofoliu cu Divi 5's Loop Builder

O grilă de portofoliu este o modalitate simplă, eficientă de a vă prezenta munca. Cu BOOL BUILDER DIVI 5, puteți proiecta un aspect reutilizabil al cardului și îl puteți lăsa auto-populați din conținutul dvs. direct în Visual Builder.

Spre deosebire de modulele cu un singur scop, bucla Builder vă permite să utilizați orice element Divi, să setați o interogare pentru postări sau tipuri de posturi personalizate și să ieșiți o grilă receptivă care moștenește stilurile globale. În acest tutorial, vom construi o grilă de portofoliu pas cu pas folosind tipul de post personalizat al proiectelor.

Înțelegerea constructorului de bucle Divi 5

Builder Loop 5 al DIVI 5 este o caracteristică nouă care vă permite să creați cu ușurință machete dinamice, bucle de conținut. Spre deosebire de modulele de blog sau portofoliu, Loop Builder vă permite să buclați cu ușurință orice element Divi pentru a afișa postări, termeni sau utilizatori. Acest lucru înseamnă că puteți construi un singur șablon care populează automat cu conținut de pe site -ul dvs. WordPress.

Loop Builder acceptă diverse tipuri de conținut, inclusiv tipuri de posturi personalizate (CPT), produse WooCommerce și câmpuri personalizate avansate (ACF), permițându -vă să afișați portofoliul exact cum doriți.

Beneficiile cheie ale constructorului de bucle

Datorită opțiunilor sale robuste de personalizare, Loop Builder este o potrivire perfectă pentru crearea de grile de portofoliu. Iată caracteristicile sale deosebite:

• Flexibilitatea pentru a proiecta șabloane de buclă personalizate: cu bucla Builder, nu vă limitați la machete predefinite. Puteți utiliza orice modul Divi pentru a proiecta un șablon unic pentru fiecare articol de portofoliu.
• Întrebări personalizabile: bucla Builder vă permite să reglați bine ce conținut apare în grila. Filtru după categorie, tip de postare sau câmpuri personalizate pentru a afișa doar elementele dorite în comanda preferată.
• Integrare dinamică a conținutului: trageți perfect în date dinamice de conținut, cum ar fi titluri de proiect, imagini prezentate, descrieri sau metadate personalizate pentru a face fiecare element de portofoliu să se implice.

Aceste caracteristici fac ca Divi 5's Loop Builder să fie un instrument ideal pentru crearea unui portofoliu șlefuit, profesionist, care este complet personalizabil și ușor de navigat.

Construirea unui portofoliu cu Loop Builder

Vom folosi tipul de post personalizat (CPT) de proiecte încorporate Divi pentru a crea un portofoliu cu Bucla Builder. Proiectele CPT sunt concepute pentru a prezenta conținut în stil portofoliu, ceea ce îl face o alegere ideală pentru aspectul nostru. În timp ce Divi oferă un modul de portofoliu, vom folosi Bucla Builder, deoarece ne oferă opțiuni nelimitate pentru crearea unui portofoliu unic.

Începeți prin a adăuga un nou rând pe pagina dvs. Pentru aceasta, vom folosi un aspect cu 3 coloane .

Vom adăuga un modul de rubrică la prima coloană .

Introduceți un titlu sau utilizați Divi AI pentru a genera unul pentru dvs.

Navigați la fila Design , alegeți Inter pentru fontul cu titlu , lumină pentru greutatea fontului de rubrică , setați dimensiunea textului la 2 și alocați o înălțime de linie de titlu 1.3EM .

Acum, să ne construim bucla. Navigați la a doua coloană a rândului nostru.

Localizați fila Buclă , extindeți -o și activați comutarea elementului buclă .

Apoi, alegeți tipul de interogare . Pentru acest tutorial, vom folosi proiectele CPT încorporate de Divi. Sub tipul de post , selectați proiecte . Vrem să prezentăm toate proiectele, așa că vom lăsa totul așa cum este.

Puteți alege comanda prin setări, postări pe pagină și postare . Deoarece prima noastră coloană conține un modul de rubrică , vom seta postările pe pagină la 8 . În acest fel, ieșirea va fi chiar pe rândul nostru cu trei coloane .

Veți observa că bucla noastră încearcă să stiveze toate coloanele. Pentru a remedia acest lucru, trebuie să mergem la setările de rând. Navigați la rândul cu 3 coloane , faceți clic pe fila Design și localizați setările de aspect .

Extindeți fila Setări de aspect . Localizați setarea de ambalare a aspectului și selectați Wrap . Acest lucru ne va rambursa bucla înapoi în 3 coloane.

Stilând coloana buclei

Acum, că setările buclei sunt în vigoare, este timpul să ne stilurăm coloanele. Setările de stil pe care le alegem aici vor afecta coloanele rămase din buclă. În rândul cu 3 coloane , faceți clic pe a doua coloană și faceți clic pe fila Design . Navigați la dropdown -ul de frontieră și alocați o rază de frontieră de 15px coloanei. Sub stiluri de frontieră , adăugați o lățime de 1px de frontieră și utilizați #000000 ca culoare de frontieră .

Adăugați conținut la buclă

Putem începe să adăugăm conținut la buclă cu stilurile coloanei alocate. Faceți clic pentru a adăuga un modul de imagine în a doua coloană . Odată adăugat, fiecare coloană din buclă va afișa un loc de loc.

Vom folosi puterea dinamică a conținutului Divi 5 pentru a trage imaginea prezentă a proiectului nostru. Treceți deasupra imaginii pentru a dezvălui pictogramele. Faceți clic pe pictograma conținut dinamic pentru a continua.

Alegeți bucla Imagine prezentată când apar opțiunile.

Bucla noastră va plasa imaginea prezentată a fiecărui proiect direct în bucla noastră de portofoliu.

Apoi, adăugați un modul de rubrică la a doua coloană sub imaginea prezentată . Aceasta va fi utilizată pentru titlul proiectului . Repetați pașii de mai sus pentru a adăuga titlul . Cu toate acestea, alegeți Bucla Post Title de data aceasta.

În fila Design , selectați H3 pentru nivelul de rubrică , Inter pentru fontul de rubrică , centru pentru alinierea textului și 20px pentru dimensiunea textului.

În cele din urmă, vom adăuga un buton care se leagă la fiecare proiect . Adăugați un modul de buton la a doua coloană de sub titlul postării . Faceți clic pe pictograma conținut dinamic din URL -ul linkului butonului și selectați Link Loop .

Treceți la fila de proiectare și setați alinierea la centru .

Extindeți setările derulante ale butonului și activați utilizarea stilurilor personalizate pentru buton . Introduceți următoarele setări de proiectare:

• Fundal buton: #000000
• Raza de frontieră cu buton: 15px
• Lățimea frontierei butonului: 0px
• Font buton: inter
• Culoarea textului butonului: #ffffff
• Dimensiunea textului butonului: 16px
• Marja: 15px fund
• Padding: 15px sus și jos, 35px stânga și dreapta

Asta este! După cum puteți vedea, crearea unei bucle cu Divi 5 este un proces simplu.

Schimbarea stilurilor cu bucla constructor

Editarea stilurilor buclei dvs. este la fel de simplă ca crearea buclei în sine. Să zicem că doriți să schimbați de la o temă de lumină la o temă întunecată pentru bucla dvs. Realizarea modificărilor de proiectare durează doar câteva secunde. Puteți schimba culoarea de fundal a secțiunii și apoi puteți face modificări la elementele de buclă individuale cu câteva clicuri.

Nu este nevoie să editați elemente de buclă individual. Deoarece toate sunt conectate, trebuie să editați module o singură dată, iar Divi 5 va aplica automat stilurile actualizate pe fiecare modul din buclă.

Puteți adăuga mai multe module la buclă, cum ar fi extrasul de proiect , data publică, numărul de comentarii , bio -ul autorului , câmpurile personalizate și multe altele.

Dacă doriți să strângeți spațiul din jurul articolelor din bucla dvs., puteți regla decalajul vertical în setările de rând și coloană . Aceasta controlează cantitatea de spațiu dintre fiecare rând și module individuale folosind sistemul de aspect FlexBox Divi 5, permițându -vă să perfecționați cum arată bucla dvs.

Testarea și rafinarea buclei de portofoliu

După ce ați construit un portofoliu, este timpul să îl testați pentru a vă asigura că totul funcționează așa cum este prevăzut. Începeți prin previzualizarea rețelei de pe partea frontală folosind linkul de previzualizare din bara de sus a constructorului vizual.

Verificați dacă titlul fiecărui proiect, imaginea prezentată , extrasul și legătura cu buclă se trag corect din proiectele CPT. Asigurați -vă că niciun loc nu este elemente rupte care apar.

Înapoi în Visual Builder, verificați pentru a vă asigura că aspectul se adaptează corect folosind punctele de întrerupere responsabile ale Divi 5. În mod implicit, Divi 5 oferă 3 puncte de întrerupere - unul pentru desktop , tabletă și telefon - dar puteți activa până la 7 făcând clic pe meniul Elipsis din mijlocul barei de sus a constructorului vizual.

Navigați prin fiecare punct de întrerupere , verificați aspectul și efectuați ajustări după cum este necesar.

Pentru a face aspectul mai potrivit pentru mobil, puteți utiliza setarea structurii coloanelor de schimbare a Divi 5 pentru a schimba numărul de coloane afișate pe dispozitive mai mici.

Cele mai bune practici și sfaturi

Pentru a vă asigura că veți beneficia la maxim de Divi 5 și de bucla Builder, iată câteva cele mai bune practici de urmat atunci când vă construiți portofoliul.

1. Asigurați -vă consistența proiectării cu variabilele de proiectare

Funcția Variabilele de design Divi 5 vă permite să definiți o tipografie, culori și distanțare consecvente pe pagina dvs. de portofoliu. În Visual Builder, setați variabile globale pentru fonturi, culori și căptușeală/marje pentru a vă asigura că fiecare articol de portofoliu arată uniform. Pentru a crea variabile , faceți clic pe pictograma Manager Variable din meniul din stânga din Visual Builder.

De acolo, puteți atribui fonturi globale , culori și multe altele, asigurându -vă că design -urile dvs. sunt consecvente pe întregul site web, nu doar pe pagina dvs. de portofoliu.

2. Luați în considerare accesibilitatea

Accesibilitatea asigură că toți utilizatorii, inclusiv cei cu dizabilități, pot naviga și se va bucura de munca dvs. Asigurați -vă că adăugați text alternativ pentru imagini pe măsură ce le încărcați în galeria media. Acest lucru îi ajută pe cititorii de ecran să transmită conținutul utilizatorilor cu deficiențe de vedere.

De asemenea, este bine să selectați culori cu raporturi de contrast suficiente pentru a asigura lizibilitatea utilizatorilor cu deficiențe de vedere.

3. Salvați și reutilizați șabloane

După perfecționarea șablonului dvs. de constructor de bucle, salvați-l în biblioteca DIVI făcând clic dreapta pe secțiunea de portofoliu și selectând Salvare la bibliotecă . Dă -i un nume descriptiv pentru o referință ușoară. Acest lucru vă permite să reutilizați șablonul pe alte pagini fără a reconstrui de la zero.

Pentru a utiliza șablonul de pe alte site -uri web, îl puteți salva în Divi Cloud și îl puteți importa în alte proiecte web cu un singur clic.

Economisirea șabloanelor simplifică fluxul de lucru și vă asigură că puteți implementa rapid rețele profesionale de portofoliu pentru proiecte viitoare.

Descărcați fișierele

Descărcați gratuit

Alăturați -vă buletinului informativ Divi și vă vom trimite prin e -mail o copie a pachetului de aspect final al paginii Divi Divi, plus tone de alte resurse, sfaturi și trucuri Divi uimitoare și gratuite. Urmați -vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, introduceți pur și simplu adresa de e -mail de mai jos și faceți clic pe Descărcare pentru a accesa pachetul de aspect.

Descărcare

V -ați abonat cu succes. Vă rugăm să verificați adresa de e -mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de aspect Divi gratuit săptămânal!

Încercați astăzi constructorul de bucle din Divi 5

Divi 5's Loop Builder facilitează crearea de grile dinamice de portofoliu, permițându -vă să vă prezentați munca cu stil și eficiență. Utilizând proiectele încorporate CPT și funcțiile puternice ale Bucan Builder, puteți crea rețele flexibile și complet personalizabile, care trag dinamic conținutul proiectului dvs. Flexibilitatea sa vă permite să proiectați machete unice folosind orice modul DIDI, să configurați întrebări pentru a afișa proiecte specifice și creați rețele responsive care strălucesc pe orice dispozitiv.

Sunteți gata să vă aduceți portofoliul la viață? Scufundați -vă în cea mai recentă lansare publică Alpha Divi 5 și experimentați cu aspectul portofoliului. Indiferent dacă sunteți un freelancer care prezintă proiecte sau o afacere care evidențiază munca cu clientul, Loop Builder vă permite să creați cu ușurință un afișaj profesional, dinamic.