Cu Divi, chiar și blogurile sunt un modul și „blogul” dvs. poate fi plasat oriunde pe dvs site-ul web și în diferite formate. Puteți combina modulele blog și bara laterală pentru a crea modele clasice de blog. 1 coloană, 2 coloane sau 3 coloane pot fi create folosind modulul blog și bară laterală.

Cum să adăugați un modul de blog pe pagina dvs

Înainte de a putea adăuga un modul de blog la pagina ta, trebuie să accesezi mai întâi Divi Builder. Odata ce Divi tema instalat pe dvs site-ul web, veți observa un buton Utilizați Divi Builder deasupra editorului de postări de fiecare dată când creați o pagină nouă. Făcând clic pe acest buton, puteți activa Divi Builder, care vă va oferi acces la toate modulele Divi Builder. Apoi faceți clic pe butonul Utilizați Visual Builder pentru a porni generatorul în modul vizual. De asemenea, puteți face clic pe buton Utilizați Visual Builder când răsfoiți dvs site-ul web în amonte dacă sunteți conectat la tabloul de bord WordPress.

După ce intrați în Visual Builder, puteți face clic pe butonul gri plus pentru a adăuga un nou modul la pagina dvs. Noile module pot fi adăugate numai în interiorul liniilor. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi o linie la pagina dvs. Avem tutoriale grozave despre utilizarea elementelor de LIGNES și secțiuni de Divi.

Localizați modulul blogului în lista de module și faceți clic pe el pentru a-l adăuga pe pagina dvs. Lista de module poate fi căutată, ceea ce înseamnă că puteți introduce și cuvântul „blog”, apoi faceți clic pe Enter pentru a găsi și adăuga automat modulul de blog! Odată adăugat modulul, veți fi întâmpinat cu lista de opțiuni de modul. Aceste opțiuni sunt împărțite în trei grupuri principale: Conținut , Concepție et avansat .

Cazul de utilizare al modulului de blog cu un aspect grilă într-o secțiune specializată cu o bară laterală din dreapta

Pentru acest exemplu, voi adăuga un modul de blog la o pagină de blog. Această pagină de blog are un antet complet cu un modul de căutare dedesubt. Sub modulul de căutare, voi adăuga o secțiune specializată cu modulul blog în partea stângă și o secțiune din bara laterală în dreapta. Bara laterală din dreapta conține un widget Postare recentă, un modul Email Optin și un modul Persoană.

Așa arată pagina exemplu.

Rețineți că modulul de blog este într-un aspect grilă în partea stângă a secțiunii speciale.

Să începem.

Utilizați generatorul vizual pentru a adăuga o secțiune specializată cu următorul aspect:

Vi se va solicita să adăugați o coloană sau un rând cu două coloane pentru partea stângă. Alegeți rândul cu 1 coloană.

Apoi adăugați modulul blog la linie.

Actualizați setările blogului după cum urmează:

Opțiuni de conținut

Numărul postului: 6
Aflați mai multe Buton: ON
Arată paginarea: NR
Culoarea de fundal a grilei: #ffffff

Opțiuni de proiectare

Aspect: Grilă
Utilizați Dropshadow: ON
Culoare pictogramă suprapusă: #ffffff
Hover Overlay Culoare: rgba (224,153,0,0.51) Antet
Poliția:
Dimensiunea fontului antet: 21px
Culoare text antet: #333333
Spațiere dintre litere din antet: 1px
Înălțimea liniei antetului: 1.2 em
Graniță: DA
Culoare chenar: #f0f0f0
Lățimea marginii: 1px
Stil chenar: Solid

Opțiuni avansate

CSS personalizat (buton Citiți mai multe):

culoare: #e09900;
bloc de vizualizare;
text-align: centru;
margine-sus: 10px;
chenar: 1px solid #ccc;
umplutură: 5px;
Transformare text: scriere cu majuscule;
spațiere între litere: 1px;

CSS personalizat avansat pentru butonul Citiți mai multe creează un aspect personalizat care se potrivește bine cu designul.

În secțiunea barei laterale din dreapta a aspectului secțiunii specializate, va trebui să adăugați un modul din bara laterală care inserează widgetul de postări recente. Mai jos va trebui să adăugați un modul Email Optin. Și apoi, sub Email Optin, trebuie să adăugați modulul Persoană cu informații despre autor.

Asta este!

Opțiuni de conținut blog

În fila Conținut, veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Toate acestea controlează ce apare în modulul dvs. va fi întotdeauna în această filă.

Numărul poziției (număr de articole)

Setați numărul de mesaje pe care doriți să le afișați. Va trebui să aveți mesaje pentru tot ce apare în acest modul.

Selectați categoriile pe care doriți să le includeți în fluxul de postări. Toate categoriile de postări pe care le-ați creat vor apărea aici pentru a le selecta/deselecta.

Categorii incluse

Alegeți categoriile pe care doriți să le includeți în feed.

Format metadata

Setați aici formatul de dată pe care doriți să îl afișați în postările de pe blog. Aspectul implicit este formatul M j, Y (6 ianuarie 2014). Consultați Codex WordPress pe formate de dată pentru mai multe opțiuni.

Conținut

Afișarea conținutului complet nu va trunchia postările dvs. de pe pagina de index. Afișare extras va afișa doar textul extrasului dvs.

Număr de compensare

Alegeți numărul de mesaje pe care doriți să le compensați. Dacă compensezi cu 3 postări, de exemplu, primele trei postări din feedul blogului tău nu vor fi afișate.

Afișați imaginea prezentată

Această opțiune vă permite să alegeți dacă doriți sau nu ca imaginile în miniatură să apară în modulul blogului dvs.

butonul Citiți mai multe

Aici puteți seta dacă să afișați linkul „citește mai mult” după fragment sau nu.

Arată autorul

Alegeți dacă doriți sau nu să afișați autorul fiecărei postări de blog în caseta meta post sub titlul postării.

Afișați data

Alegeți dacă doriți sau nu să afișați data la care a fost creată fiecare postare în meta caseta postării de sub titlul postării.

Afișați categoriile

Alegeți dacă doriți sau nu să afișați categorii de postări în meta caseta postării de sub titlul postării.

Afișează numărul de comentarii

Alegeți dacă doriți sau nu să afișați numărul de comentarii în meta caseta postării de sub titlul postării.

Vizualizați paginarea

Alegeți dacă doriți sau nu să afișați paginarea pentru acest flux. Pentru a activa paginarea numerotată, va trebui să instalați pluginul WP Page Navi .

Eticheta de administrare

Aceasta va schimba eticheta modulului din generator pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete vor apărea în blocul de module al interfeței Divi Builder.

Opțiuni de design pentru blog

În fila Proiectare, veți găsi toate opțiunile de stil pentru modul, cum ar fi fonturile, culorile, dimensiunea și spațiul. Această filă vă permite să modificați aspectul modulului dvs. Fiecare modul Divi are o listă lungă de setări de proiectare pe care le puteți utiliza pentru a modifica aproape orice.

Dispoziţie

Puteți alege să afișați postările de blog într-un aspect grilă sau pe lățime completă.

Imagine suprapusă

Dacă este activată, o pictogramă de culoare și de suprapunere sunt afișate atunci când un vizitator trece cu mouse-ul peste imaginea selectată a unei postări.

Culoarea pictogramei suprapuse

Aici puteți seta o culoare personalizată pentru pictograma de suprapunere.

Culoarea suprapunerii cu cursorul

Aici puteți seta o culoare personalizată pentru suprapunere.

Hover Icon Selector

Aici puteți seta o pictogramă personalizată pentru suprapunere.

Culoarea textului

Si blogul tău este plasat pe un fundal deschis, culoarea textului trebuie setată la „Întunecat”. Viza, da blogul tău este plasat pe un fundal întunecat, culoarea textului trebuie setată la „Lumină”.

Font antet

Puteți modifica fontul antetului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi minunate alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, cursive, majuscule și subliniate.

Dimensiunea fontului antetului

Aici puteți ajusta dimensiunea textului antetului. Puteți trage glisorul de interval pentru a mări sau micșora dimensiunea textului sau puteți introduce direct valoarea dorită a dimensiunii textului în câmpul de introducere din partea dreaptă a glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de înălțimea dvs. pentru a schimba tipul de unitate.

Culoare text antet

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea antetului, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea literelor antet

Spațierea dintre litere afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul antetului, utilizați glisorul de interval pentru a ajusta spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de introducere din dreapta cursorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de înălțimea dvs. pentru a schimba tipul de unitate.

Înălțimea rândului antet

Înălțimea liniei afectează spațiul dintre fiecare linie din textul antetului dvs. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul de interval pentru a ajusta spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de introducere din dreapta cursorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de înălțimea dvs. pentru a modifica tipul de unitate.

Font corp

Puteți schimba fontul corpului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi minunate alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, cursive, majuscule și subliniate.

Dimensiunea fontului corpului

Aici puteți ajusta dimensiunea textului corpului dvs. Puteți trage glisorul de interval pentru a mări sau micșora dimensiunea textului sau puteți introduce direct valoarea dorită a dimensiunii textului în câmpul de introducere din partea dreaptă a glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de înălțimea dvs. pentru a schimba tipul de unitate.

Culoarea textului corporal

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului corpului, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea literelor corporale

Spațierea dintre litere afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din corpul textului dvs., utilizați glisorul de interval pentru a ajusta spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de introducere din dreapta glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de înălțimea dvs. pentru a schimba tipul de unitate.

Înălțimea liniei corpului

Înălțimea liniei afectează spațiul dintre fiecare linie de text. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul de interval pentru a ajusta spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de introducere din dreapta cursorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de înălțimea dvs. pentru a schimba tipul de unitate.

Fontul Metas

Puteți schimba fontul metatextului dvs. selectând fontul dorit din meniul drop-down. Divi vine cu zeci de fonturi minunate alimentate de Fonturi Google. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina ta. De asemenea, puteți personaliza stilul textului folosind opțiunile aldine, cursive, majuscule și subliniere.

Mărimea fontului meta

Aici puteți ajusta dimensiunea meta-textului. Puteți trage glisorul de interval pentru a mări sau micșora dimensiunea textului sau puteți introduce direct valoarea dorită a dimensiunii textului în câmpul de introducere din partea dreaptă a glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de înălțimea dvs. pentru a schimba tipul de unitate.

Culoarea textului pentru meta

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea meta-textului, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațiuarea literelor meta

Spațierea dintre litere afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din meta textul dvs., utilizați glisorul de interval pentru a ajusta spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de introducere din dreapta glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de înălțimea dvs. pentru a schimba tipul de unitate.

Înălțimea liniei meta

Înălțimea liniei afectează spațiul dintre fiecare linie din meta textul dvs. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul de interval pentru a ajusta spațiul sau introduceți dimensiunea de spațiere dorită în câmpul introdus din partea dreaptă a cursorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de înălțimea dvs. pentru a schimba tipul de unitate.

Utilizați marginea

Activarea acestei opțiuni va plasa o margine în jurul modulului. Această margine poate fi personalizată utilizând următorii parametri condiționali.

Culoarea frontierei

Această opțiune afectează culoarea chenarului. Selectați o culoare personalizată din selectorul de culori pentru ao aplica la bordura dvs.

Lățimea frontierei

În mod implicit, marginile au o lățime de 1 pixel. Puteți crește această valoare trăgând glisorul de interval sau introducând o valoare personalizată în câmpul de introducere din dreapta glisorului. Unități de măsurare personalizate acceptate, ceea ce înseamnă că puteți schimba unitatea implicită de la „px” la altceva, de ex. Em, vh, vw etc.

Stilul de frontieră

Bordurile acceptă opt stiluri diferite, incluzând: solid, punctat, punctat, dublu, groove, creastă, inserare și start. Selectați stilul dorit din meniul derulant pentru a-l aplica la chenar.

Opțiuni avansate pentru blog

În fila Avansat, veți găsi opțiuni pe care designerii web mai experimentați le pot găsi utile, cum ar fi atributele CSS și HTML personalizate. Aici puteți aplica CSS personalizat oricăruia dintre numeroasele elemente ale modulului. De asemenea, puteți aplica clase și ID-uri CSS personalizate modulului, care pot fi utilizate pentru a personaliza modulul în fișierul style.css al temei copilului dvs.

Cod CSS

Introduceți un ID CSS opțional de utilizat pentru acest modul. Un ID poate fi folosit pentru a crea un stil CSS personalizat sau pentru a crea legături către anumite secțiuni ale paginii dvs.

CSS

Introduceți clasele CSS opționale de utilizat pentru acest modul. O clasă CSS poate fi utilizată pentru a crea stiluri CSS personalizate. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi folosite în dvs Divi tema Copil sau în CSS personalizat pe care îl adăugați la pagina sau site-ul dvs. utilizând Opțiunile temei Divi sau Setările paginii Divi Builder.

CSS personalizate

CSS personalizat poate fi de asemenea aplicat modulului și oricăruia dintre elementele interne ale modulului. În secțiunea CSS personalizată, veți găsi un câmp text unde puteți adăuga CSS direct la fiecare element. Intrările CSS din aceste setări sunt deja încorporate cu etichete de stil. Deci trebuie doar să introduceți reguli CSS separate prin punct și virgulă.

vizibilitate

Această opțiune vă permite să controlați dispozitivele pe care apare modulul dvs. Puteți alege să vă dezactivați modulul individual pe tablete, smartphone-uri sau desktop-uri. Acest lucru este util dacă doriți să utilizați moduri diferite pe diferite dispozitive sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente din pagină.

Gata pentru acest tutorial.