Cum se folosește funcția de conținut dinamic Divi pentru a proiecta un aspect dinamic de postare

Noua funcție de conținut dinamic Divi ne oferă posibilitatea de a construi machete dinamice pentru postările de blog (și multe altele). Și există motive întemeiate pentru care ați putea lua în considerare acest lucru. Un motiv este designul. Puteți proiecta câteva planuri de post uimitoare cu Divi folosind generatorul vizual, mai ales atunci când utilizați aspectele premade disponibile ca punct de plecare. Un alt motiv este comoditatea. Odată ce aspectul postării este proiectat cu toate elementele de conținut dinamic (cum ar fi categoriile, imaginile prezentate, etichetele postărilor, câmpurile personalizate etc.), procesul de creare și actualizare a postărilor de blog este mult simplificat. În afară de conținutul real al postării, toate celelalte date ale postărilor pot fi actualizate fără a fi nevoie să implementați vreodată constructorul vizual.

În acest tutorial, vă voi arăta cum să construiți un aspect dinamic al postării în Divi. Începând cu un aspect prefabricat, vă voi îndruma prin procesul de adăugare a conținutului dinamic pe tot aspectul și apoi proiectarea acelui conținut pentru a se potrivi. Voi introduce chiar un mod simplu de a utiliza câmpuri personalizate ca conținut dinamic.

Să începem.

Trage cu ochiul

Ce trebuie să începeți

Pentru acest tutorial, veți avea nevoie de următoarele:

• Tema Divi
• Pachetul de aspect personal pentru antrenor. Acest pachet de aspect este accesibil din Divi Builder. Vom folosi aspectul de pagină al serviciului de antrenor personal pentru a iniția proiectarea aspectului postării noastre.

De asemenea, vă voi arăta cum să profitați de câmpurile personalizate pentru a crea o secțiune de antrenament recomandată utilizând funcționalitatea tipului de post personalizat. Câmpurile personalizate sunt încorporate în WordPress și nu necesită pluginuri suplimentare sau altceva. Deci aveți deja ceea ce aveți nevoie.

Partea 1: Adăugarea aspectului premade la postare

Pentru a începe lucrurile, mergeți mai departe și creați o nouă postare (nu o pagină), dați titlului postării dvs., apoi faceți clic pe butonul Utilizați Divi Builder. Nu implementați încă constructorul vizual, deoarece mai întâi trebuie să ne personalizăm setările de postare din ecranul implicit al editorului WordPress.

Întrucât dorim să adăugăm aspectul nostru premade pentru a extrage imaginile din aspect (avem nevoie de acesta pentru imaginea prezentată). Faceți clic pe butonul Încărcare aspect situat în meniul Divi Builder.

Din fereastra pop-up Încărcare din bibliotecă, selectați aspectul paginii Serviciului de antrenor personal și implementați-l în postarea dvs. făcând clic pe butonul „Utilizați acest aspect”.

Apoi, publicați-vă postarea pentru a salva setările.

Partea 2: Actualizarea setărilor pentru pagina Divi, Post Data Meta și imagine recomandată

Setări pagină Divi

Este important să actualizăm setările paginii Divi, astfel încât noul nostru aspect să se potrivească designului. De asemenea, trebuie să ascundem afișajul implicit al titlului postării, deoarece vom folosi în schimb modulul titlului postării.

În partea dreaptă sus a paginii, localizați caseta Setări pagină Divi și actualizați următoarele:

Aspect pagină: lățime completă
Afișați titlul postării: Ascundeți

Dacă nu vedeți Setările paginii Divi, probabil că nu aveți Divi Builder activat, deci asigurați-vă că faceți acest lucru mai întâi.

Adăugați categorii

Sub caseta categorii, adăugați o nouă categorie numită „Antrenament de forță” și asigurați-vă că este singura categorie selectată.

Adaugă etichete

În caseta de etichete, adăugați următoarele trei etichete: Viteză, Antrenament și Antrenamente.

Imagine prezentată

Apoi, adăugați o imagine prezentată care se potrivește cu imaginea de fundal utilizată în antetul layout-ului, așa cum se arată în captura de ecran de mai jos.

Partea 3: Adăugarea câmpurilor personalizate pentru conținutul de antrenament dinamic

Câmpurile personalizate sunt încorporate în WordPress. Acestea permit autorilor postării să adauge informații suplimentare (numite meta-date) la o postare în plus față de meta-datele implicite, cum ar fi categoriile, autorul postării, data postării etc. La un nivel de bază, câmpurile personalizate pot fi utilizate pentru a afișa vremea sau starea de spirit a autorului atunci când scrie o postare. Dar există multe modalități diferite de a utiliza câmpuri personalizate pentru a crea conținut dinamic pentru site-ul dvs. web. Simțiți-vă liber să citiți mai multe despre cum să adăugați câmpuri personalizate pe site-ul dvs. web. Dar pentru acest caz de utilizare, cred că veți înțelege conceptul de bază al câmpurilor personalizate construind câteva pentru dvs.

Pentru acest exemplu, vă voi arăta cum să adăugați câteva câmpuri personalizate care pot fi utilizate pentru a adăuga conținut dinamic la postarea dvs. Conținutul dinamic pentru acest exemplu este un antrenament recomandat. Odată ce câmpurile personalizate sunt la locul lor, tot ce ar trebui să facă autorul postării este să completeze valorile câmpurilor personalizate, iar conținutul va fi actualizat (dinamic) la postare fără a fi nevoie să încărcați Visual Builder.

Pentru aceasta, derulați în jos până la partea de jos a postării și găsiți caseta Câmpuri personalizate. Dacă din anumite motive nu este afișat, asigurați-vă că îl selectați din opțiunile ecranului din partea de sus a paginii.

Apoi faceți clic pe meniul drop-down câmpuri personalizate (dacă este restrâns) pentru a adăuga un nou câmp personalizat și introduceți următoarele:

Nume: titlul antrenamentului
Valoare: antrenament recomandat

Apoi faceți clic pe butonul Adăugați câmp personalizat.

Numele este modul în care identificați câmpul personalizat din Divi. Valoarea este conținutul care va fi adăugat în mod dinamic la pagină folosind funcția de conținut dinamic Divi (mai multe despre aceasta mai târziu).

Continuați acest proces pentru a adăuga următoarele câmpuri personalizate pe site-ul dvs. web.

Nume: încălzire
Valoare: 800m alergare

Nume: durata
Valoare: 30min

Nume: ridicarea greutăților
Valoare:

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

Nume: raceste-te
Valoare: 400m alergare

Notă: Aceste câmpuri personalizate vor fi adăugate la tema Divi și vor fi disponibile pentru orice postare nouă pe care o creați în viitor. Cu alte cuvinte, nu se limitează la această singură postare.

Nu uitați să vă actualizați postarea!

Partea 4: Adăugarea de conținut dinamic la aspectul postării folosind Visual Builder

Acum, că avem setările postării și meta date, este timpul să începem să adăugăm conținut dinamic postării noastre. Pentru aceasta, implementați Visual Builder.

Pentru a face lucrurile puțin mai ușor de localizat și editat pentru acest design avansat de layout, deschideți meniul de setări și setați modul de interacțiune implicit al constructorului pe modul Click.

În secțiunea antet, ștergeți modulul buton (nu avem nevoie de el).

Înlocuirea imaginii de fundal cu conținutul dinamic al imaginii recomandate

Pentru prima parte a conținutului nostru dinamic, vom înlocui imaginea de fundal utilizată în coloana 1 a rândului nostru din secțiunea de antet de sus cu imaginea prezentată utilizată pentru postare. Pentru aceasta, deschideți setările rândului și găsiți setările de fundal pentru coloana 1 și faceți clic pe fila imagine de fundal. Apoi ștergeți imaginea care se află în prezent și treceți cu mouse-ul peste caseta de previzualizare a imaginii de fundal. Veți vedea pictograma conținut dinamic în colțul din dreapta sus al casetei. Faceți clic pe acesta pentru a deschide opțiunile de conținut dinamic. Apoi selectați din listă opțiunea Conținut dinamic pentru imagini recomandate.

Aspectul dvs. va arăta exact la fel, deoarece utilizăm aceeași imagine. Singura diferență este acum că imaginea de fundal este extrasă din orice imagine este setată ca imagine recomandată a postării. Aceasta este frumusețea conținutului dinamic!

Hai sa continuăm.

Adăugarea titlului postării cu un modul de titlu a postării

Sub modulul text care deține în prezent titlul paginii, adăugați un modul Titlu postare. Există, de asemenea, o opțiune de a utiliza adăugați titlul postării la un modul folosind conținut dinamic, dar din moment ce modulul Titlul postării funcționează deja ca un conținut dinamic și păstrează eticheta de titlu h1 pentru SEO, este perfect pentru că îl folosiți pentru aspectul dvs. personalizat de postare .

Apoi actualizați setările modulului titlului postului după cum urmează:

Afișați Meta: NU
Afișați imaginea prezentată: NU

Acum mergeți la modulul text de mai sus și copiați stilurile de titlu h2 făcând clic dreapta pe fila h2 și selectând opțiunea din această listă.

Apoi lipiți stilurile de titlu h2 în modulul titlului postării făcând clic dreapta pe modul și selectând opțiunea din listă.

După aceea, reveniți din nou la modulul de text de mai sus și copiați stilurile de spațiere și lipiți-le în modulul de titlu al postării. Apoi schimbați culoarea textului titlului postării în lumină pentru a obține culoarea albă.

Acum, titlul postării dvs. trebuie să se potrivească cu designul titlului aspectului original.

Acum puteți șterge modulul text care conține titlul original.

Utilizarea conținutului dinamic pentru a crea un rând de meta-date

Treceți la a doua secțiune a aspectului. Apoi scoateți căptușeala superioară a secțiunii trăgând-o în constructorul vizual sau setând-o la 0 px în setările secțiunii.

În primul rând al celei de-a doua secțiuni a machetei, veți observa un modul text (are conținutul „Despre antrenamentul personal”) cu un divizor sub el. Aici vom construi rândul nostru personalizat de meta-date folosind conținut dinamic.

Vrem ca dimensiunea acestui rând să se potrivească cu dimensiunea rândului din secțiunea de sus. Pentru a face acest lucru, deschideți setările rândului din rândul din secțiunea de sus și copiați stilurile de dimensionare. Apoi lipiți-le în primul rând al celei de-a doua secțiuni. Apoi actualizați jgheabul rândului cu 2. Noul dimensionare ar trebui să arate ca următoarea captură de ecran.

De asemenea, va trebui să adăugați spațiu personalizat după cum urmează:

Împletire personalizată: 1% stânga, 1% dreapta

Apoi salvați setările rândului.

Acum actualizați structura coloanei rândului într-un aspect cu patru coloane.

Acum suntem gata să adăugăm conținutul nostru dinamic. Pentru a face acest lucru, deschideți acum setările modulului text în coloana din stânga și treceți cu mouse-ul peste caseta de conținut. Veți vedea pictograma conținut dinamic în colțul din dreapta sus al casetei. Faceți clic pe acesta pentru a deschide opțiunile de conținut dinamic.

Apoi selectați opțiunea: Postează data publicării.

Apoi modificați formatul de dată în consecință.

Aceasta va adăuga data publicării postării ca conținut dinamic.

Pentru a stiliza modulul text cu conținutul dinamic al datei, copiați stilurile modulului modulului text în coloana din stânga a rândului direct de mai jos.

Apoi lipiți stilurile modulului în modulul text cu conținutul dinamic al datei și schimbați culoarea textului textului în alb.

Apoi, copiați modulul text și divizorul de sub acesta și lipiți-l în coloana 2. Apoi schimbați conținutul dinamic la Categorii de postări.

Va trebui să actualizați culoarea textului linkului în alb pentru a se potrivi cu designul aspectului.

Acum copiați modulul text pentru categoriile de postări cu divizorul peste în coloana 3. Apoi schimbați conținutul dinamic la Postați numărul de comentarii. În fereastra popup Post Comment Count, introduceți următoarele în caseta de introducere Înainte:

Înainte: Comentarii:

Casetele de intrare înainte și după disponibile în ferestrele pop-up de conținut dinamic sunt o opțiune convenabilă pentru adăugarea de text înainte și / sau după conținutul dinamic. Acest lucru este util pentru adăugarea de etichete, simboluri de preț și alte elemente atunci când este necesar.

Acum, să continuăm să adăugăm conținutul nostru dinamic. Copiați modulul de text și divizorul din coloana 3 și lipiți în coloana 4. Această ultimă coloană va conține miniatura autorului postului și numele autorului. Deci, schimbați conținutul dinamic al modulului text la Post Author. În fereastra popup Post Author, actualizați următoarele:

Înainte: de:
Format nume: prenume și prenume

Deasupra modulului de text cu conținutul autorului postării, adăugați un nou modul de imagine. Deschideți setările modulului de imagine și ștergeți imaginea implicită. Așa cum am făcut-o, faceți clic pe pictograma conținut dinamic din caseta de previzualizare a imaginii și adăugați poza de profil a postării autorului ca conținut dinamic.

Apoi reglați setările de proiectare pentru a trage imaginea în sus și pentru a oferi o lățime personalizată după cum urmează:

Lățime: 80 px
Marjă personalizată (desktop): -82px Sus
Marjă personalizată (tabletă): 0 px Top

Notă: numele autorului postării va afișa autorul care a fost atribuit postării curente. Și poza de profil a autorului postării este tot ceea ce a fost setat pentru profilul de utilizator din Tabloul de bord WordPress sub Utilizatori> Profilul dvs.

Partea 5: Adăugarea câmpurilor personalizate ca conținut dinamic pentru a adăuga un antrenament recomandat la postare

Vă amintiți cum am adăugat acele câmpuri personalizate mai devreme în tutorial? Acum vom folosi acele câmpuri personalizate ca conținut pentru un antrenament prezentat în postarea noastră.

Pentru a adăuga conținutul nostru dinamic de antrenament, mai întâi duplicați rândul cu două coloane direct sub rândul cu patru coloane cu toate metadatele noastre dinamice. Apoi ștergeți modulele din ambele coloane și adăugați un modul blurb în coloana din stânga.

Vom folosi module blurb pentru a adăuga conținutul dinamic pentru secțiunea de antrenament. Pentru a începe, adăugați un nou modul blurb în coloana din stânga.

Pentru titlu, adăugați câmpul personalizat numit „Titlu de antrenament” ca conținut dinamic. Apoi, pentru conținutul blurb, adăugați câmpul personalizat denumit „Durata” ca conținut dinamic.

Pentru a continua lucrurile, nu voi trece în detaliu stilul acestor module. Dar, va trebui să adăugați o pictogramă blurb plasată în stânga titlului și să actualizați designul pentru a se potrivi cu aspectul.

Apoi, adăugați un al doilea modul blurb mai jos. Introduceți textul „Încălzire” ca titlu. Și apoi adăugați câmpul personalizat numit „Încălzire” ca conținut dinamic.

Adăugați un al treilea modul de blurb sub acesta, cu titlul „Ridicarea greutății” și câmpul personalizat „Ridicarea greutății” ca conținut dinamic. Deoarece folosim html pentru această valoare personalizată a câmpului, va trebui să activați html brut în fereastra pop-up de ridicare a greutăților.

Adăugați un ultim modul de blurbare cu „Cool Down” ca titlu și câmpul personalizat „Cool Down” ca conținut dinamic.

Acum aveți o secțiune dinamică pentru adăugarea antrenamentelor la postarea dvs.!

Tot ce trebuie să faceți este să actualizați valorile câmpurilor personalizate din editorul de pagini implicit din WordPress, iar acel conținut va fi adăugat automat la aspectul postării fără a fi nevoie să intrați în constructorul Divi.

Partea 6: Proiectarea unei secțiuni „Subiecte conexe” folosind conținut dinamic pentru etichete postate

Puteți utiliza conținut dinamic pentru a afișa etichetele de postare și pentru a crea o secțiune „subiecte conexe” cu aspect interesant pentru postarea dvs. Pentru a face acest lucru, creați un nou rând cu o coloană și adăugați un modul text la rând.

Apoi pentru caseta de conținut, adăugați Post Tag-uri ca conținut dinamic. Apoi actualizați următoarele opțiuni Post Tag-uri:

Înainte: Subiecte conexe:
Separator de etichete: //

Notă: puteți folosi aproape orice set de caractere pe care îl doriți pentru separatorul de etichete, așa că nu ezitați să experimentați cu altele diferite pentru modele creative.

Pentru a stiliza conținutul, actualizați următoarele setări de proiectare:

Font text: Oswald
Greutatea fontului textului: semi-aldinată
Culoarea textului textului: # ff4c00
Dimensiune text text: 30 px
Link Font: Oswald
Link Greutate font: Semi îndrăzneț
Culoare text link: # 262d3f
Dimensiune text link: 50 px
Spațiere scrisoare link: 2 px
Înălțimea liniei de legătură: 1.6em

Iată designul final.

Partea 7: Adăugarea unei secțiuni de biografie a autorului și a unui comentariu

În acest moment, veți fi bine echipat să adăugați conținut dinamic și să ajustați designul aspectului postării dvs. cu o ușoară cantitate de ușurință, așa că nu voi intra în prea multe detalii cu privire la aceste două ultime elemente.

Adăugarea unei secțiuni Bio de autor folosind conținut dinamic

Pentru a adăuga o secțiune de biografie de autor în partea de jos a conținutului postării, puteți utiliza conținutul dinamic Autor de postare, Poza de profil a postării autorului și Biografia de autor. După cum puteți vedea în captura de ecran de mai jos, am creat un rând de coloane 1/4 3/4. Apoi am adăugat poza de profil a autorului postării în coloana din stânga. În coloana din dreapta, am adăugat autorul postării cu biografia autorului dedesubt. Am adăugat, de asemenea, conținutul dinamic al imaginii prezentate ca imagine de fundal pentru secțiune (și o suprapunere în gradient). Iată un exemplu de cum ar arăta asta.

Adăugarea unei secțiuni de comentarii utilizând modulul Comentarii

Întrucât folosim un aspect personalizat de postare, este posibil să folosim un modul de comentarii, astfel încât să putem potrivi designul secțiunii de comentarii cu aspectul. Pur și simplu adăugați modulul de comentarii la un nou rând de secțiune care să corespundă stilurilor butoanelor și fonturilor cu aspectul curent. Iată un exemplu de cum ar arăta asta.

Designul final

Iată designul final al întregului post după ce a fost ajustat tot designul.

Actualizarea conținutului postării și salvarea aspectului pentru postările viitoare

Deoarece utilizăm Divi Builder pentru a crea aspectul postării, va trebui în continuare să actualizați conținutul real al postării pentru postarea dvs. utilizând modulele Divi. Dar, cu orice altceva dinamic acum, acest lucru face procesul mult mai ușor înainte. Va trebui să salvați aspectul postării în biblioteca dvs., astfel încât atunci când creați o postare nouă, tot ce trebuie să faceți este să adăugați aspectul salvat la postarea dvs. și să actualizați conținutul postării.

Gânduri finale

Conținutul dinamic al lui Divi este o caracteristică puternică care facilitează adăugarea și actualizarea datelor de postare. Deci, dacă doriți să proiectați un aspect personalizat pentru postările dvs. de pe blog (sau alte tipuri de postări personalizate, cum ar fi Proiecte) utilizând Divi Builder, conținutul dinamic este calea de urmat. Desigur, conținutul dinamic nu se limitează la postări. Puteți profita de conținut dinamic și câmpuri personalizate pe întregul site web. Sper că această postare vă va ajuta să înțelegeți unele dintre posibilități și vă va inspira să utilizați conținut dinamic în moduri minunate.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!