Cum se creează o buclă de postare personalizată cu Bucla Divi 5's Loop

Brandul dvs. nu ar trebui să fie constrâns de un aspect static, așa că ne propunem să vă oferim o flexibilitate deplină pe măsură ce Divi 5 continuă să se dezvolte. Noul constructor de bucle Divi 5 este un mare pas în această direcție; Vă permite să proiectați un articol o dată și să îl buclați în grile sau liste dinamice.

În acest tutorial, vă vom arăta cum să configurați o buclă de postare pe blog personalizată. Vom proiecta lista, vom conecta câmpurile dinamice, vom stabili interogarea și vom perfecționa aspectul pentru o grilă sau o listă curată. Hai să mergem la ea!

Ce este Divi 5's Loop Builder

Cu DIVI 5's Loop Builder, proiectați un singur aspect „card” în Visual Builder folosind tot atâtea module DIVI pe care doriți, apoi Divi îl buclă pentru fiecare element pe care alegeți să îl afișați.

Abonați -vă la canalul nostru YouTube

Activați elementul buclă pe o coloană, setați o interogare (postări, tipuri de postări personalizate precum proiecte, termeni sau utilizatori) și câmpuri dinamice MAP, cum ar fi titluri, imagini prezentate, categorii, câmpuri personalizate și butoane. Puteți reordona elemente, controla distanța și lăsați totul să moștenească stilurile dvs. globale.

Rezultatul este o listă receptivă, reutilizabilă, care se potrivește cu sistemul dvs. fără a fi nevoie de pluginuri suplimentare sau cod personalizat.

Cum funcționează constructorul de bucle

Puteți porni modul buclă în orice secțiune, rând, coloană sau modul prin deschiderea filai de conținut și activarea buclei.

Din acel moment, Divi repetă automat elementul pentru fiecare postare care se potrivește cu setările dvs.

Iată unde vine controlul real. În setările buclei, puteți:

• Tip de interogare: Alegeți între o interogare de bază sau o meta interogare, filtrarea pe categorii, etichete, câmpuri personalizate sau alte metadate.
• Tipul post: alegeți tipul de conținut de afișat, de la postări pe blog la produse la orice tip de postare personalizat.
• Includeți doar postări cu termeni specifici: Afișați doar postări care se potrivesc cu anumite categorii, etichete sau alți termeni de taxonomie.
• Excludeți postările cu termeni specifici: eliminați postările care se potrivesc cu categoriile, etichetele sau termenii selectați.
• Includeți numai postări specifice: selectați postări individuale pentru a include.
• Excludeți anumite postări: ascundeți postările individuale pe care nu le doriți în buclă.
• Meta interogare: Adăugați condiții de câmp personalizate pentru a controla ceea ce apare.
• Comandă de: Alegeți dacă rezultatele sunt sortate după dată, titlu, comandă de meniu sau o valoare personalizată a câmpului.
• Comandă: Afișați rezultate în ordine ascendentă sau descendentă.
• Postări pe pagină: decideți câte postări afișează înainte de paginare.
• Post offset: săriți un anumit număr de postări de la început, la îndemână pentru evitarea duplicatelor cu secțiuni prezentate.
• Ignorați postările lipicioase: alegeți dacă postările lipicioase primesc prioritate sau sunt tratate ca niște postări normale.

După ce v -ați definit interogarea, Divi completează automat fiecare carte poștală cu conținutul potrivit, păstrând aspectul și stilul de stil identic. Vă concentrați în întregime pe modul în care arată cardul, iar Divi gestionează populația și repetarea. Cu tot ceea ce este controlat de la un singur panou, câteva setări sunt tot ce este nevoie pentru a menține listarea blogului dvs. actualizată fără modificări manuale.

Aflați totul despre Divi 5's Loop Builder

Crearea unei bucle de postare pe blog personalizate cu Divi 5

Construirea unei bucle de postare personalizate cu bucla Builder are două părți. În primul rând, proiectați aspectul cărții poștale, alegând exact ce apare conținut și cum arată. Apoi, așezați acel design într -o buclă, astfel încât divi îl repetă automat pentru fiecare postare pe care doriți să o afișați.

Vom trece prin ea pas cu pas, începând cu aspectul cardului și apoi vom configura bucla.

Înainte de a începe

Dacă treceți de la modulul de blog la bucla Builder și aveți deja o pagină de listare a blogurilor, puteți săriți la crearea aspectului buclei. Dacă nu, iată configurarea rapidă:

1. Adăugați o pagină de blog

Din tabloul de bord WordPress, accesați paginile> Adăugați nou , numiți -l „Blog” și publicați -l.

Această pagină va fi principalul hub pentru postările dvs.

2. Setați pagina blogului dvs. în setările WordPress

În Setări> Citire , alegeți o pagină statică . Alocați -vă pagina de pornire acasă și noua pagină de blog pe pagina postărilor.

Acest lucru este necesar numai dacă utilizați o pagină de listare a paginii de pornire separate.

3. Creați un șablon de constructor de teme

În continuare, veți crea un nou șablon pentru pagina dvs. de listare a blogurilor. Dacă aveți deja unul, puteți personaliza asta. Asigurați -vă că utilizați cea mai recentă versiune DIVI 5 pentru a accesa bucla Builder.

În DIVI> Teme Builder , faceți clic pe Adăugare șablon nou> Construiți șablon nou.

Alocați -l pe pagina dvs. de blog și faceți clic pe Creați șablon.

Pentru a vă proiecta pagina de listare a postărilor pe blog, faceți clic pe Adăugare corp personalizat> Construiți corp personalizat.

Vei intra acum în Divi Builder, unde vom începe să construim aspectul buclei.

1. Importați un aspect

Începând cu un aspect vă poate economisi mult timp și vă poate ajuta să păstrați un design constant de la început. Pentru acest tutorial, folosesc aspectul paginii de blog al agenției de marketing pentru branding.

Puteți alege același lucru sau importa orice aspect care vă oferă o bază bună din care să lucrați. Odată ce este în șablonul dvs., veți avea o structură pregătită pe care o puteți adapta nevoilor dvs. în loc să construiți totul de la zero.

2. Proiectați o carte poștală pe blog

Aici trece cu adevărat flexibilitatea Loop Builder. În loc să fiți blocat în aspectul fix al modulului de blog, decideți exact ce se întâmplă pe cardul dvs. poștal și cum este aranjat.

Adăugați o nouă secțiune la șablonul dvs. Puteți alege din structurile pre-proiectate sau puteți crea propriul dvs. folosind opțiunea cu o singură coloană.

Pentru acest exemplu, să alegem o secțiune de structură a rândurilor cu trei coloane .

În prima coloană, ne vom crea cartea poștală. Vom folosi un grup de module pentru a deține toate elementele.

Apoi adăugați un modul de imagine pentru imaginea prezentată, un modul de rubrică pentru titlul postării și un modul de text pentru extras. Vom adăuga, de asemenea, meta informații și un buton Citește mai mult, astfel încât vizitatorii să poată face clic pe postarea completă.

Odată ce structura de bază este acolo, personalizați designul cardului, astfel încât să se potrivească mărcii dvs. Reduceți culorile, fonturile, distanțarea și orice detalii vizuale unice care le fac pe ale voastre.

3. Activați ambalarea rândurilor

Pentru a vă asigura că cardurile dvs. se afișează perfect în rânduri pe diferite dimensiuni ale ecranului, veți dori să activați împachetarea flexibilă. Selectați rândul principal și deschideți fila Design .

Mergeți la aspect. Asigurați -vă că stilul de aspect este setat pe flex.

Activați înfășurarea aspectului, astfel încât cărțile să se poată trece la o nouă linie atunci când este nevoie, apoi alegeți alinierea de ambalare care se potrivește cel mai bine designului dvs.

4. Porniți bucla

Acum vine pasul care face totul automat. Selectați coloana cardului.

Apoi, porniți opțiunea Buclă sub fila Conținut . Odată ce bucla este activată, DIVI va repeta designul cardului dvs. pentru fiecare postare care îndeplinește setările de interogare.

Pentru acest aspect, am setat:

• Tipul post: postări
• Postări pe pagină: 10
• Comandați până la: Data
• Ordine: Descendență (cea mai nouă primul)
• Post Offset: 0 (Afișați totul începând cu cele mai recente)
• Ignorați postările lipicioase: Da

Aceste mici ajustări se asigură că grila afișează exact postările pe care le doriți, în ordinea dorită. Puteți schimba aceste valori oricând pentru a adapta aspectul la diferite nevoi.

5. Adăugați conținut dinamic

Ultimul pas pentru a aduce bucla la viață este să conectați fiecare modul din cardul dvs. la datele de postare în direct. Aceasta este ceea ce transformă o carte statică într-o listă automată, mereu la curent. De exemplu:

• Conectați modulul de imagine la imaginea prezentată a postării.
• Conectați modulul de rubrică la titlul postării.
• Conectați modulul de text la extrasul de post.
• Conectați butonul Citește mai mult la adresa URL POST.

Când este buclă, DIVI va înlocui conținutul de localități cu datele corecte pentru fiecare postare din buclă.

Pentru a seta imaginea prezentată, deschideți modulul de imagine, treceți peste opțiunea Image și faceți clic pe pictograma conținut dinamic . Selectați bucla de imagine prezentată și toate imaginile relevante vor popula instantaneu.

Repetați acest lucru pentru titlul postării, data publicată, extrasul și orice alte câmpuri pe care doriți să le afișați.

Când faceți clic pe pictograma conținut dinamic pentru un modul, veți vedea întreaga gamă de opțiuni specifice buclei. Nu sunteți limitat la titluri și imagini; Puteți afișa, de asemenea, date de publicare, date modificate, nume de autor, număr de comentarii, categorii, etichete și chiar câmpuri personalizate.

Aceasta înseamnă că cartea dvs. poștală poate fi la fel de minimă sau la fel de detaliată pe care doriți. Construiți o grilă curată, orientată pe imagine, un aspect bogat în conținut sau chiar evidențiați câmpurile de tip postare personalizate de nișă. Proiectați -l o dată, iar Divi îl menține exact și consecvent pe întreaga buclă.

6. Salvați șablonul și previzualizarea

Odată ce totul pare corect, faceți orice modificări finale și salvați modificări atât în ​​Divi Builder, cât și în Teme Builder.

Previzualizați pagina dvs. pentru a vedea bucla în acțiune. Iată pagina de listare a blogurilor terminate:

Modulul de blog a avut limite, bucla Builder nu

Modulul de blog a funcționat bine, așa că de ce ne împingem pentru constructorul de bucle? Pentru că „bine” însemna fix. Modulul de blog te -a blocat în șablonul său, dar Bucla Builder vă oferă o pânză goală. Alegeți aspectul, comanda, stilul și DIVI -ul îl buclă automat.

Aceasta este adevărata schimbare: nu ajustați șablonul altcuiva, vă proiectați propriul. Să punem asta în practică încă o dată și să proiectăm un aspect diferit de structura tipică a modulului de blog.

În primul rând, adăugați un rând și o secțiune cu o coloană. Reglați dimensiunea și asigurați -vă că ambalajele Flex și Flex sunt activate pentru rând.

Acest rând va conține cărțile dvs. de blog. Acum, adăugați un alt rând cuibărit în interiorul coloanei pentru a crea structura cardului dvs., cu imaginea din stânga și metadatele postului din dreapta.

Proiectați -vă structura exact așa cum doriți, nu este nevoie să urmați secvența modulului de blog. Lăsați coloana din stânga goală deocamdată. Vom adăuga imaginea prezentată ca imagine de fundal a coloanei.

Personalizați -vă cardul de listare a blogurilor.

De asemenea, puteți modifica decalajul vertical al grupului de module din coloana din dreapta în proiectare> layout> opțiunea de decalaj vertical .

În continuare, activăm opțiunea Buclă . Selectați prima coloană din rândul părinte.

Din nou, buclăm conținutul dinamic. Începând cu imaginea, accesați opțiunea de fundal a coloanei din stânga, iar restul va fi același.

Aceasta este bucla dvs. de blog în stilul listei. Acum, dacă doriți să convertiți acest lucru într -o grilă, pur și simplu schimbați lățimea coloanei. Deoarece avem ambalajele Flex activate în rând, cărțile se vor înfășura pe cont propriu pe măsură ce le schimbăm dimensiunea.

Dacă acest lucru face ca imaginile dvs. să fie prea mari, puteți elimina extrasul, puteți schimba structura coloanei rândului și chiar puteți regla decalajul orizontal la zero.

Și la fel ca și că grila ta este gata.

Acest exemplu este doar o privire a ceea ce face posibilă Bucan Builder. Adevărata livrare este că nu vă mai limitați la o mână de machete prestabilite. Fiecare parte a cărții poștale este a ta pentru a aranja, stilul și reimagina, iar Divi are grijă să o repete automat. Această flexibilitate este ceea ce transformă o simplă listă de bloguri în ceva care se simte proiectat pentru site -ul dvs.

Folosiți modulul de pagină

Dacă limitați postările pe pagină în interogarea buclei dvs., veți dori probabil o modalitate pentru cititori să vadă restul. Adăugați modulul de pagină sub grila dvs. și setați bucla țintă la elementul în care ați activat bucla. Pentru un pas complet, consultați cum să utilizați împreună Divi 5 Bucan Builder & Pagination Module: Citiți tutorialul.

Descărcați șabloanele de blog

Dacă doriți să experimentați cu grilele din interiorul unui șablon de blog, descărcați șabloanele utilizate în acest tutorial de mai jos. Pentru a importa acestea, navigați la constructorul de teme Divi. Veți putea să le importați folosind pictograma Import/Export în colțul din dreapta.

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!

Construiește -ți astăzi bucla de postare personalizată în Divi 5

Înainte de Divi 5's Loop Builder, crearea unei bucle de postare cu adevărat personalizate a însemnat adesea lupta cu șabloane rigide sau scrierea codului personalizat pentru fiecare modificare mică. Acum, este un proces vizual de la început până la sfârșit. Proiectați o carte o dată, conectați modulele sale la datele de postare în direct și lăsați Divi să se ocupe de restul.

Dacă ați lucrat în jurul limitelor modulului blogului, Loop Builder este upgrade -ul pe care l -ați așteptat. Încercați -l în următorul dvs. proiect și vedeți cât de ușor este să creați un blog (sau un produs, un eveniment sau listare) care să arate exact cum doriți!