Divi Builder Plugin Documentation

Cum să adăugați, să configurați și să personalizați modulul de blog Divi.

Cu Divi, chiar și blogurile sunt un modul, iar „blogul” dvs. poate fi plasat oriunde pe site-ul dvs. web și în diferite formate. Puteți combina modulele blog și sidebar pentru a crea modele clasice de bloguri. Bloguri cu 1 coloană, 2 coloane sau 3 coloane, toate pot fi construite cu ajutorul modulelor de blog și sidebar.

Vezi o demonstrație live a acestui modul

Cum să adaugi un modul de blog la pagina ta

Înainte de a putea adăuga un modul de blog la pagina ta, va trebui mai întâi să intri în Divi Builder. Odată ce tema Divi a fost instalată pe site-ul dvs. web, veți observa un buton Use Divi Builder deasupra editorului de postări de fiecare dată când construiți o pagină nouă. Dacă faceți clic pe acest buton, veți activa Divi Builder, oferindu-vă acces la toate modulele Divi Builder. În continuare, faceți clic pe butonul Use Visual Builder pentru a lansa constructorul în Visual Mode. De asemenea, puteți face clic pe butonul Use Visual Builder (Utilizați constructorul vizual) atunci când navigați pe site-ul dvs. în partea frontală, dacă sunteți conectat la tabloul de bord WordPress.

După ce ați intrat î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 doar în interiorul Rândurilor. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi un rând la pagina dvs. Avem câteva tutoriale grozave despre cum să folosiți elementele de rând și secțiune ale Divi.

Localizați modulul de blog în cadrul listei de module și faceți clic pe el pentru a-l adăuga la pagina dvs. Lista de module 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 de blog! Odată ce modulul a fost adăugat, veți fi întâmpinat cu lista de opțiuni a acestuia. Aceste opțiuni sunt separate în trei grupuri principale: Content, Design și Advanced.

Exemplu de utilizare: Adăugarea unui modul Blog cu un layout Grid într-o secțiune de specialitate cu o bară laterală dreaptă

Pentru acest exemplu, voi adăuga un modul Blog la o pagină de blog. Această pagină de blog are un antet fullwidth cu un modul de căutare sub el. Sub modulul de căutare, voi adăuga o secțiune de specialitate cu modulul Blog în partea stângă și o secțiune sidebar în partea dreaptă. Bara laterală din dreapta are un widget de postări recente, un Modul Email Optin și un Modul Persoană.

Iată cum arată pagina de exemplu.

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

Să începem.

Utilizați constructorul vizual pentru a adăuga o secțiune de specialitate cu următoarea dispunere:

Vă va fi solicitat să adăugați fie un rând cu 1 coloană, fie unul cu 2 coloane pentru partea stângă. Alegeți rândul cu 1 coloană.

Apoi adăugați modulul Blog la rândul respectiv.

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

Opțiuni de conținut

Numărul postărilor: 6
Botonul Read More: ON
Show Pagination: ON
Show Pagination: NO
Grid Tile Background Color: #ffffff

Opțiuni de design

Layout: Grid
Utilizați Dropshadow: ON
Culoarea pictogramei de suprapunere: ON
Overlay Icon Color: #ffffff
Culoare suprapunere suprapunere: rgba(224,153,0,0.51)
Fontul antetului: #ffffff
Culoare suprapunere: rgba(224,153,0,0,0.51)
Fontul antetului: Default
Header Font Size: 21px
Header Text Color: #33333333
Spațierea literelor din antet: 1px
Înălțime linie antet: 1.2em
Utilizați Border: YES
Border Color: #f0f0f0f0
Border Width: 1px
Border Style: Solid

Opțiuni avansate

Custom CSS (butonul Read More):

Custom CSS avansat pentru butonul Read More creează un aspect personalizat care se potrivește bine cu designul.

În secțiunea de bară laterală dreaptă a layout-ului Specialty Section va trebui să adăugați un modul de bară laterală care să atragă widgetul de postări recente. Sub acesta va trebui să adăugați un modul Email Optin. Și apoi sub Email Optin va trebui să adăugați Modulul Persoană cu informații despre autor.

Asta este!

Opțiuni conținut blog

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

Numărul de postări

Definiți numărul de postări pe care doriți să le afișați. Va trebui să aveți postări făcute pentru ca ceva să se afișeze în interiorul acestui modul.

Selectați categoriile pe care doriți să le includeți în fluxul de postări. Orice categorii 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.

Meta Date Format

Definiți aici formatul de dată pe care doriți să îl afișați în postările blogului dvs. Aspectul implicit este un format M j, Y (6 ianuarie 2014) Consultați Codexul WordPress privind formatele de dată pentru mai multe opțiuni.

Content

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

Numărul de decalare

Alegeți cu câte postări doriți să decalați. Dacă decalați cu 3 postări, de exemplu, primele trei postări din fluxul blogului dvs. nu vor fi afișate.

Show Featured Image

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

Read More Button

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

Show Author

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

Show Date

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

Show Categories

Alegeți dacă doriți sau nu să afișați categoriile postării în cadrul zonei post meta de sub titlul postării.

Show Comment Count

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

Show Pagination

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.

Admin Label

Acest lucru va schimba eticheta modulului în constructor pentru o identificare ușoară. Atunci când folosiți vizualizarea WireFrame în Visual Builder, aceste etichete vor apărea în cadrul blocului modulului din interfața Divi Builder.

Blog Design Options

În fila de design veți găsi toate opțiunile de stilizare ale modulului, cum ar fi fonturile, culorile, dimensionarea și spațierea. Aceasta este fila pe care o veți folosi pentru a schimba modul în care arată modulul dumneavoastră. Fiecare modul Divi are o listă lungă de setări de design pe care le puteți folosi pentru a schimba aproape orice.

Layout

Puteți alege fie să afișați postările de pe blogul dvs. într-o grilă, fie într-un layout pe toată lățimea.

Featured Image Overlay

Dacă este activat, o culoare și o pictogramă de suprapunere vor fi afișate atunci când un vizitator trece pe deasupra imaginii recomandate a unei postări.

Overlay Icon Color

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

Hover Overlay Color

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

Hover Icon Picker

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

Text Color

Dacă blogul dvs. este plasat pe un fundal deschis, culoarea textului trebuie să fie setată la „Dark”. Visa invers, dacă blogul dvs. este plasat pe un fundal întunecat, Culoarea textului ar trebui să fie setată la ‘Light’.

Header Font

Puteți schimba fontul textului din antet selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi utilizează fontul Open Sans pentru toate textele de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiunile bold, italic, all-caps și underline.

Header Font Size

Aici puteți ajusta dimensiunea textului din antet. Puteți glisa cursorul de gamă pentru a mări sau micșora dimensiunea textului sau puteți introduce valoarea dorită pentru dimensiunea textului direct în câmpul de introducere din dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” după valoarea dimensiunii dvs. pentru a schimba tipul de unitate.

Culoarea textului din antet

În mod implicit, toate culorile textului din Divi vor apărea ca fiind albe sau gri închis. Dacă doriți să schimbați culoarea textului din antet, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Header Letter Spacing

Letter spacing afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul antetului, utilizați cursorul 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 intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” după valoarea mărimii pentru a schimba tipul său de unitate.

Header Line Height

Line height afectează spațiul dintre fiecare rând din textul antetului dvs. Dacă doriți să măriți spațiul dintre fiecare rând, utilizați cursorul de interval pentru a ajusta spațiul sau introduceți dimensiunea dorită de spațiere în câmpul de intrare din dreapta cursorului. Câmpurile de introducere suportă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” după valoarea dimensiunii dvs. pentru a schimba tipul de unitate.

Fontul corpului

Puteți schimba fontul textului corpului dvs. selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi utilizează fontul Open Sans pentru tot textul din pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiunile bold, italic, all-caps și underline.

Body Font Size

Aici puteți ajusta dimensiunea textului din corpul paginii. Puteți glisa cursorul de gamă pentru a mări sau a micșora dimensiunea textului sau puteți introduce valoarea dorită pentru dimensiunea textului direct în câmpul de introducere din dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” după valoarea dimensiunii dvs. pentru a schimba tipul de unitate.

Culoarea textului din corp

În mod implicit, toate culorile textului din Divi vor apărea ca fiind albe sau gri închis. Dacă doriți să schimbați culoarea textului din corp, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Body Letter Spacing

Letter spacing afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din corpul textului dvs. de text, utilizați cursorul 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 intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” după valoarea mărimii pentru a schimba tipul de unitate.

Înălțimea liniei corpului

Înălțimea liniei afectează spațiul dintre fiecare linie din corpul textului dvs. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați cursorul de interval pentru a ajusta spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de intrare din dreapta cursorului. Câmpurile de intrare suportă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” după valoarea dimensiunii dvs. pentru a schimba tipul de unitate a acesteia.

Meta Font

Puteți schimba fontul metatextului dvs. selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi utilizează fontul Open Sans pentru toate textele de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiunile bold, italic, all-caps și underline.

Mărimea fontului meta

Aici puteți ajusta dimensiunea textului meta. Puteți glisa cursorul de gamă pentru a mări sau micșora dimensiunea textului sau puteți introduce valoarea dorită pentru dimensiunea textului direct în câmpul de introducere din dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” după valoarea dimensiunii dvs. pentru a schimba tipul de unitate.

Culoarea textului meta

În mod implicit, toate culorile textului din Divi vor apărea ca fiind albe sau gri închis. Dacă doriți să schimbați culoarea metatextului dumneavoastră, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Meta Letter Spacing

Letter spacing afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din metatext, utilizați cursorul 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 intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” după valoarea mărimii dvs. pentru a schimba tipul de unitate.

Înălțimea liniei meta

Înălțimea liniei afectează spațiul dintre fiecare linie a metatextului dvs. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați cursorul de interval pentru a ajusta spațiul sau introduceți dimensiunea de spațiere 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” după valoarea dimensiunii dvs. pentru a schimba tipul de unitate.

Use Border

Activarea acestei opțiuni va plasa o margine în jurul modulului dvs. Această bordură poate fi personalizată folosind următoarele setări condiționale.

Border Color

Această opțiune afectează culoarea bordurii dumneavoastră. Selectați o culoare personalizată din selectorul de culori pentru a o aplica la marginea dvs..

Border Width

În mod implicit, marginile au o lățime de 1 pixel. Puteți mări această valoare glisând cursorul de interval sau introducând o valoare personalizată în câmpul de introducere din dreapta cursorului. Sunt acceptate unitățile de măsură personalizate de măsură, ceea ce înseamnă că puteți schimba unitatea implicită din „px” în altceva, cum ar fi em, vh, vw etc.

Border Style

Borders suportă opt stiluri diferite, inclusiv: solid, dotted, dashed, double, groove, ridge, inset și outset. Selectați stilul dorit din meniul derulant pentru a-l aplica la bordură.

Blog Advanced Options

În fila Advanced, veți găsi opțiuni pe care designerii web mai experimentați le-ar putea găsi utile, cum ar fi CSS personalizat și atribute HTML. Aici puteți aplica CSS personalizat la oricare 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 cadrul fișierului style.css al temei dvs. copil.

CSS ID

Introduceți un ID CSS opțional care să fie utilizat pentru acest modul. Un ID poate fi folosit pentru a crea o stilizare CSS personalizată sau pentru a crea legături către anumite secțiuni ale paginii.

Classe CSS

Introduceți clasele CSS opționale care vor fi folosite pentru acest modul. O clasă CSS poate fi utilizată pentru a crea stilizări CSS personalizate. Puteți adăuga mai multe clase, separate prin câte un spațiu. Aceste clase pot fi utilizate în tema Divi Child Theme sau în cadrul CSS-ului personalizat pe care îl adăugați paginii sau site-ului dvs. web utilizând Divi Theme Options sau Divi Builder Page Settings.

Custom CSS

Custom CSS poate fi, de asemenea, aplicat modulului și oricărui element intern al acestuia. În cadrul secțiunii Custom CSS, veți găsi un câmp de text în care puteți adăuga CSS personalizat direct la fiecare element. CSS introduse în aceste setări sunt deja înfășurate în etichete de stil, astfel încât trebuie doar să introduceți reguli CSS separate prin punct și virgulă.

Vizibilitate

Această opțiune vă permite să controlați pe ce dispozitive apare modulul dumneavoastră. Puteți alege să dezactivați modulul dvs. pe tablete, telefoane inteligente sau computere desktop în mod individual. Acest lucru este util dacă doriți să utilizați module diferite pe dispozitive diferite sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente din pagină.

.

Lasă un răspuns

Adresa ta de email nu va fi publicată.