Cum se folosește împreună Divi 5 Bucan Builder & Pagination Modul

Listele statice ale conținutului postului sunt în regulă dacă afișați un set selectat și limitat al acestor postări. Dar de multe ori, doriți ca utilizatorii să acceseze mai mult conținut decât arată bucla originală. Doriți să decideți cât de mult se încarcă conținutul inițial și să oferiți cititorilor o modalitate clară de a vă deplasa între loturi. Acolo este o pereche perfectă.

Această postare vă va parcurge cum funcționează fiecare, apoi vă va arăta cum să le conectați. Până la sfârșit, veți ști cum să construiți machete bucle cu paginare adecvată.

Faceți cunoștință cu constructorul de bucle Divi 5

Buca Builder este una dintre cele mai mari upgrade -uri ale Divi 5. Îți oferă libertate pe care vechiul modul de blog nu ar putea -o niciodată. Orice element poate deveni un container „buclat”. Aceasta înseamnă că Divi îl va repeta automat pentru fiecare postare, produs sau tip de post personalizat care se potrivește cu întrebarea dvs.

În loc să fiți blocat cu o listă de postări pre-proiectată, proiectați un element „șablon” ca buclă. Divi îl folosește pentru fiecare rezultat, schimbând conținut dinamic din interogarea buclei. Acesta ar putea fi:

• Titluri trase din datele postului
• Imagini prezentate
• Câmpuri personalizate
• Link -uri către postări sau produse complete

Puteți utiliza orice modul pentru a afișa aceste date, nu doar una specifică blogului. Doriți un modul Fancy Blurb care să vă arate ultimele înregistrări de curs? Făcut. Aveți nevoie de un aspect personalizat al cardului de produse pentru articolele WooCommerce? De asemenea.

Este flexibil pentru că construiți singur designul și structura de conținut. Divi gestionează repetarea.

Trecerea de la modulul blogului la Bucla Builder înseamnă trecerea de la un șablon standard la un sistem de aspect complet personalizabil. Mi -a plăcut foarte mult să construiesc cu ea și știu că și tu!

Faceți cunoștință cu modulul de paginare

Paginarea este o modalitate fantezistă de a spune „împărțiți rezultatele în pagini”. În loc să aruncați toate articolele pe o singură pagină, le împărțiți în seturi mai mici. Asta ajută cu:

• Timpuri de încărcare a paginii
• Lizibilitate
• Scanabilitate

Modulul Pagination din Divi 5 face exact asta, dar cu o oarecare integrare inteligentă. Nu este legat doar de postările de pe blog. În schimb, se poate conecta la orice buclă pe care ați construit -o pe pagină.

Funcționează adăugând două elemente de navigație - legături preconizate și următoare - ale cărei etichete puteți personaliza. Dacă există elemente mai vechi pe lângă setul actual, „mai vechi” (sau textul ales) va fi activ. Dacă există articole mai noi, „mai nou” va fi activ.

Construirea unei bucle + aspectul de paginare

Să trecem prin configurarea completă. Acest exemplu presupune că doriți o buclă personalizată cu paginare sub el. Iată aspectul flex pe care l -am creat care ne va afișa bucla. Puteți descărca aspectul complet construit mai jos.

Rețineți că cardul este setat la ~ 50% lățime și o creștere flexibilă, astfel încât atunci când o carte buclă se află într-un rând flexibil, va deveni lățimea completă în interiorul containerului său.

Pasul 1: Creați containerul buclă

Adăugați o secțiune la pagina dvs. În interiorul său, adăugați modulul (modulele) pe care doriți să le repetați. Acesta ar putea fi un singur modul (precum un blurb) sau un aspect mai complex al mai multor module într -o coloană sau grup.

Cu containerul dvs. selectat, deschideți setările sale și activați opțiunea Buclă .

Alegeți sursa de date. Aceasta este „interogarea” bucla va rula.

Mai întâi, alegeți tipul de interogare. În funcție de configurația site -ului dvs. web, puteți vedea aceste opțiuni:

• Tip de postare (cum ar fi postările dvs. de blog sau tipurile de postări personalizate, cum ar fi „Proiecte”)
• Termeni (categorii și taxonomii)
• Utilizatori (returnează o listă de utilizatori ai site -ului, precum autorii)
• Câmp repeater (un câmp personalizat creat de un plugin pentru crearea unei bucle într -o buclă)

În continuare, în funcție de tipul de interogare pe care l -ați ales mai sus, veți avea șansa de a fi mai specific. Selectarea „Tip de postare” vă poate permite să utilizați astfel de tipuri de postare precum:

• Postări pe blog
• Proiecte
• Produse
• Orice CPT ai construit personalizat pentru tine

De acolo, puteți obține și mai specific cu ceea ce ar trebui să apară în bucla dvs. Puteți:

• Includeți articole cu o anumită categorie sau etichetă
• Excludeți elementele cu o anumită categorie sau etichetă
• Includeți elemente specifice (prin ID post)
• Excludeți anumite articole (prin ID post)
• Construiți -vă propria meta interogare (utilă pentru crearea incluziunilor/excluderilor pe baza datelor de câmp personalizate)
• Setați ordinea de potrivire a întrebărilor (cum ar fi alfabetic și descendent)
• Elemente pe pagină Valoarea controlează câți apar în buclă
• Post Offset, în cazul în care doriți să începeți bucla mai târziu în ciclu
• Ignorați postările lipicioase

Așa arată exemplul nostru în acest punct. Am creat bucla și am atribuit -o tipului nostru de postare pe blog. Am setat limita de afișare la 3.

Acum, trebuie să atribuim diferitele câmpuri de text și elemente pe care dorim să le hiperlink cu conținut de buclă dinamică.

Pasul 2: Adăugați conținut dinamic în buclă

Următoarea noastră sarcină este să faceți clic pe fiecare module ale buclei și să înlocuiți textul static sau imagini cu câmpuri de conținut dinamic. De exemplu:

• Într -un modul de text, alegeți „Post Title” din Dynamic Conținut Picker
• Într -un modul de imagine, puteți alege „Imagine prezentată”
• Într -un modul de buton, setați linkul la „URL -ul POST”
• Pe întregul container buclat, setați și link -ul la „URL -ul post”

Acest lucru îi spune lui Divi să tragă conținutul potrivit pentru fiecare element buclat.

Amintiți -vă - orice în interiorul buclei se repetă pentru fiecare rezultat. Păstrați conținut non-buclă (cum ar fi rubrici, reclame sau CTA) în afara acestuia. Dacă aveți o bucată de conținut în buclă care nu este conectată cu date dinamice, fiecare element din buclă va afișa asta așa cum este (cum ar fi textul „citit →” din partea dreaptă jos a cărții de exemplu).

Pasul 3: Adăugați modulul de paginare

Sub secțiunea buclă, adăugați un nou rând. Introduceți modulul de paginare . În setările modulului, localizați câmpul țintă . Utilizați -o pentru a selecta bucla dvs. dintr -o listă derulantă a buclelor de pe pagină. Aceasta leagă controalele de paginare la acea buclă specifică. Sfat Pro: Dacă utilizați etichete de administrare, este mai ușor să selectați ținta potrivită. Acest lucru este valabil și pentru interacțiuni.

Personalizați etichetele pentru „anterior” și „următorul”. Puteți utiliza „postări mai vechi / postări mai noi”, „înapoi / înainte” sau chiar „← / →” pentru un stil minim.

Cheia este că modulul de paginare trebuie să stea în afara buclei pe care o controlează. Asta și asigurați -vă că este atribuit la ținta potrivită (dacă aveți mai multe bucle pe aceeași pagină/șablon).

Pasul 4: Testați interacțiunea

Salvați -vă pagina și previzualizați -o. Faceți clic pe „Mai vechi” pentru a merge la următorul set de articole cu buclă.

Rețineți cum se schimbă adresa URL cu un parametru de interogare care identifică pagina buclei. Rețineți, de asemenea, că doar se schimbă/modificările conținutului de buclă - capete, subsoluri și bare laterale ar trebui să rămână la fel.

Obțineți acest aspect de buclă

Doriți să disecați acest aspect și să vedeți cum se construiesc lucrurile pentru dvs.? Descărcați -l aici!

După ce vă dezarhivați folderul, navigați la biblioteca Divi pentru a încărca fișierul. Odată încărcat, veți putea adăuga secțiunea la orice pagină la care lucrați.

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!

Bucurați -vă de un Divi mai dinamic

Divi 5's Loop Builder și modulul de paginare sunt un salt mare înainte în flexibilitate. Builder Loop vă eliberează de proiectele rigide ale modulelor mai vechi, permițându -vă să vă construiți propriile machete repetate cu conținut dinamic. Modulul Pagination menține acele machete rapide și gestionabile prin ruperea lor în bucăți ușor de utilizat.

Modulul Buclă Builder și Pagination, asociat cu alte caracteristici DIVI 5 noi (FlexBox, Interacțiuni, HSL Color Controls), este la fel de puternic ca întotdeauna. Puteți face câteva modele incredibile de pagini cu toate acestea.

După ce ați construit prima buclă PAGINAT, veți vedea cât de ușor este să reutilizați abordarea pe bloguri, rețele de produse, portofolii sau orice tip de conținut pe care trebuie să îl organizați.