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

preview blog divi modul blog.png

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

Înainte de a putea adăuga un modul de blog pe pagina dvs., trebuie mai întâi să accesați Divi Builder. Odată ce tema Divi este instalată pe site-ul dvs. web, veți observa un buton Utilizați Divi Builder deasupra editorului de postare ori de câte ori creați o pagină nouă. Făcând clic pe acest buton, veți putea activa Divi Builder, care vă va oferi acces la toate modulele Divi Builder. Apoi faceți clic pe buton 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 navighezi pe site-ul tău din amonte dacă ești conectat la tabloul de bord WordPress.

buton divi builder modul blog divi.png

Odată introdus în Visual Builder, puteți face clic pe butonul gri plus pentru a adăuga un nou modul la pagina dvs. Modulele noi pot fi adăugate numai în rânduri. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi un rând la pagina dvs. Avem tutoriale minunate despre utilizarea elementelor LIGNES și secțiuni de Divi.

adăugați modul blog divi builder.png

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

Utilizați cazul modulului de blog cu un aspect de grilă într-o secțiune specializată cu o bară laterală dreaptă

Pentru acest exemplu, voi adăuga un modul de blog pe o pagină de blog. Această pagină de blog are un antet complet cu un modul de căutare de mai jos. Sub modulul de căutare voi adăuga o secțiune specializată cu modulul blog pe partea stângă și o secțiune cu bara laterală în partea dreaptă. Bara laterală din dreapta conține un widget de postare recent, un modul de optimizare a e-mailurilor și un modul persoană.

Așa arată pagina de exemplu.

exemplu de pagină divi.jpg

Rețineți că modulul blogului se află într-un aspect grilă în partea stângă a secțiunii speciale.

Să începem.

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

specialitate layout divi.png

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

zona de selecție divi builder.png

Apoi adăugați modulul de blog la linie.

utilizați modulul blog.png

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

Opțiuni de conținut

Număr mesaje: 6
Aflați mai multe Buton: ON
Afișare paginare: NU
Culoarea fundalului rețelei: #ffffff

Opțiuni de proiectare

Layout: Grilă
Utilizați Dropshadow: ON
Pictograma de culoare suprapusă: #ffffff
Hover Overlay Color: rgba (224,153,0,0.51) Antet
Poliția:
Antetul mărimii fontului: 21px
Antet Culoare text: # 333333
Spațiuarea literelor: 1px
Înălțimea rândului antet: 1.2 em
Frontieră: DA
Culoarea frontierei: # f0f0f0
Lățimea marginii: 1px
Stilul de frontieră: Solid

Opțiuni avansate

CSS personalizat (butonul Citește mai mult):

culoare: # e09900;
bloc de vizualizare;
text-align: centru;
margin-top: 10px;
frontieră: 1px solid #ccc;
padding: 5px;
Transformarea textului: valorificați;
distanța dintre litere: 1px;

setările blogului divi.png

Butonul CSS personalizat avansat pentru butonul Citește mai mult creează un aspect personalizat care se potrivește designului.

articole de design de bloc divi.jpg

În secțiunea din bara laterală din dreapta a aspectului secțiunii specializate, va trebui să adăugați un modul al barei laterale care să insereze 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ă.

blog module divi.png

Număr articol (Număr articole)

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

Selectați categoriile pe care doriți să le includeți în feedul de postări. Toate categoriile de mesaje create de dvs. vor apărea aici pentru a fi selectate / deselectate.

Categorii incluse

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

Format meta-data

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

Conținut

Afișarea conținutului complet nu va trunchia postările dvs. pe pagina index. Afișați fragmentul va afișa doar textul fragmentului dvs.

Numărul compensat

Alegeți numărul de mesaje pe care doriți să le compensați. Dacă compensați cu 3 postări, de exemplu, primele trei postări din fluxul dvs. de blog nu vor apărea.

Afișați imaginea prezentată

Această opțiune vă permite să alegeți dacă doriți sau nu să apară miniaturi în modulul dvs. de blog.

Citiți mai mult butonul

Aici puteți seta dacă afișați linkul „citiți mai multe” 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 meta-caseta postării de sub titlul postării.

Afișați data

Alegeți dacă doriți sau nu să afișați data când fiecare articol a fost creat în caseta Meta element sub titlul mesajului.

elemente pentru afișarea modulului divi blog.png

Afișați categoriile

Alegeți dacă doriți să afișați sau nu categoriile de postări în zona meta meta de sub titlul publicației.

Vizualizați numărul de comentarii

Alegeți dacă doriți sau nu să afișați numărul de comentarii în caseta meta a postării 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țiunile 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.

opțiune de proiectare divi builder module blog.png

Dispoziţie

Puteți alege să afișați postările blogului dvs. într-o grilă sau într-un aspect cu lățime completă.

Imagine suprapusă

Dacă această opțiune este activată, o culoare și o pictogramă de suprapunere sunt afișate atunci când un vizitator trece peste imaginea selectată a unui mesaj.

Culoarea pictogramei suprapuse

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

Acoperiți culoarea

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

Hover Icon Picker

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

Culoarea textului

Dacă blogul dvs. este plasat pe un fundal deschis, culoarea textului ar trebui să fie setată la „Întunecat”. Visa, dacă blogul dvs. este plasat pe un fundal întunecat, culoarea textului ar trebui să fie setată la „Light”.

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 regla dimensiunea textului antetului. Puteți trage glisorul de interval pentru a mări sau micșora dimensiunea textului sau puteți introduce direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de dimensiunea dvs. pentru a-i 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 literelor 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 regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de intrare din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de dimensiunea dvs. pentru a-i schimba tipul de unitate.

configurație antet spațiu divi.png

Înălțimea rândului antet

Înălțimea rândului afectează spațiul dintre fiecare rând al textului antetului dvs. Dacă doriți să măriți spațiul dintre fiecare rând, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de intrare din dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de dimensiunea dvs. pentru a-i schimba 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 regla dimensiunea textului corpului. Puteți trage glisorul de interval pentru a mări sau micșora dimensiunea textului sau puteți introduce direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de dimensiunea dvs. pentru a-i 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 literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă a textului corpului dvs., utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de intrare din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de dimensiunea dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei corpului

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

Fontul Metas

Puteți modifica fontul meta-textului 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.

secțiunea meta date diiv builder.png

Dimensiunea fontului Metas

Aici puteți ajusta dimensiunea meta textului dvs. Puteți trage glisorul de interval pentru a mări sau micșora dimensiunea textului sau puteți introduce direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de dimensiunea dvs. pentru a-i 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 literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă a meta-textului dvs., utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de intrare din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de dimensiunea dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei Meta

Înălțimea liniei afectează spațiul dintre fiecare linie a meta-textului dvs. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmp în dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de dimensiunea dvs. pentru a-i 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 de 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.

secțiune avansată a modulului blog.png

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 un stil CSS personalizat. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi folosite în tema Divi Child sau în CSS personalizate pe care le adăugați la pagina sau site-ul dvs. web 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.

10 acțiuni
acțiune4
tweet2
Registru4