Divi tutorial: Cum se utilizează modulul de navigare în articole

Înainte de a putea adăuga un modul Divi de navigare a articolelor pe pagina dvs., trebuie mai întâi să accesați Divi Builder. Odata ce Divi tema instalat pe site-ul dvs., veți observa un buton Utilizați Divi Builder deasupra editorului de postare ori de câte ori creați o pagină nouă. Faceți clic pe acest buton pentru a activa Divi Builder și pentru a accesa 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 îți răsfoiești site-ul în prim plan dacă ești conectat la tabloul de bord WordPress.

După ce ați intrat în Visual Builder, puteți face clic pe butonul plus gri 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.

Găsiți modulul de navigare î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 tasta și cuvântul „post navigare” și apoi faceți clic pe Enter pentru a găsi și adăuga automat modulul de navigare. Odată adăugat modulul, veți fi întâmpinat de lista de opțiuni a modulului. Aceste opțiuni sunt separate în trei grupuri principale: Conținut , Concepție et avansat .

Exemplu de caz de utilizare: adăugarea de legături de navigare personalizate în partea de jos a unei postări pe blog

A avea linkuri de navigare către articolele următoare și anterioare în partea de jos a articolului dvs. este o modalitate excelentă de a vă păstra vizitatori implicat cu conținutul dvs. În acest exemplu, vă voi arăta cum să utilizați numele real al titlului postării pentru link-urile dvs. de navigare în locul numelor generale ale linkurilor „anterioare” și „următoare”. De asemenea, vă voi arăta cum să adăugați un chenar în jurul link-urilor pentru a le oferi mai mult efect.

Să începem.

Utilizați constructorul vizual pentru a adăuga o secțiune standard cu un aspect cu lățime completă (1 coloană) în partea de jos a postării. Apoi adăugați un modul de navigare după linie.

Actualizați setările de navigare pentru publicare după cum urmează:

Fila Conținut

Textul linkului anterior:% title (această variabilă introduce titlul articolului)
Textul următorului link:% title (această variabilă introduce titlul articolului)

Fila Design

Link-uri de font: PT Sans
Linkuri Dimensiune font: 20px
Linkuri Culoare text: # 5e95c1
Utilizați marginea: YES
Culoarea de frontieră: # 5e95c1
Lățimea marginii: 1px
Tapițerie personalizată: 20px Top, 20px dreapta, 20px Partea inferioară, 20px Stânga

Asta e tot ! Acum aveți titluri de postări pe linkurile de navigare

Opțiuni de conținut pentru modulul de navigare

Î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 găsit în această filă.

Textul linkului anterior

Definiți text personalizat pentru linkul anterior. Puteți utiliza variabila% title pentru a include titlul articolului. Lăsați necompletat pentru implicit.

Textul următorului link

Definiți text personalizat pentru următorul link. Puteți utiliza variabila% title pentru a include titlul postării. Lăsați necompletat pentru implicit.

În aceeași categorie

Puteți defini aici dacă articolele anterioare și următoare ar trebui să fie în același termen de taxonomie ca articolul curent.

Denumirea taxonomiei personalizate

Lăsați această opțiune necompletată dacă utilizați acest modul pentru un proiect sau articol. În caz contrar, tastați numele taxonomiei pentru ca opțiunea „În aceeași categorie” să funcționeze corect.

Ascundeți linkul anterior

Aici puteți alege să ascundeți sau să afișați linkul anterior.

Ascundeți următorul link

Aici puteți alege să ascundeți sau să afișați următorul link.

Admin Label

Aceasta va schimba eticheta modulului din constructor pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete apar în blocul de module din interfața Divi Builder.

Opțiuni de proiectare după navigare

În fila Proiectare, veți găsi toate opțiunile de stilare a modulului, cum ar fi fonturile, culorile, dimensionarea și spațiul. Aceasta este fila pe care o veți utiliza pentru a schimba aspectul modulului dvs. Fiecare modul Divi are o listă lungă de setări de proiectare pe care le puteți utiliza pentru a schimba orice.

Linkuri pentru linkuri

Puteți modifica fontul textului linkurilor dvs. selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave 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. utilizând opțiuni aldine, cursive, litere mari și opțiuni de subliniere.

Dimensiunea fontului de legătură

Aici puteți regla dimensiunea textului linkului. Puteți trage glisorul de raza de acțiune pentru a mări sau micșora dimensiunea textului sau introduceți 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 valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Culoarea textului legăturilor

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

Spațierea literelor de linkuri

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul linkurilor dvs., utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu 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 valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei de legături

Înălțimea liniei afectează spațiul dintre fiecare linie a textului legăturii 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. intrare î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 valoarea mărimii 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ăsură personalizate acceptate, ceea ce înseamnă că puteți schimba unitatea implicită din „px” în altceva precum em, vh, vw etc.

Stilul de frontieră

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

Marja personalizata

Marja este spațiul adăugat în exteriorul modulului dvs., între modul și următorul element de deasupra, dedesubt sau la stânga și la dreapta acestuia. Puteți adăuga valori de marjă personalizate la oricare dintre cele patru laturi ale modulului. Pentru a elimina marja personalizată, eliminați valoarea adăugată din câmpul de introducere. În mod implicit, aceste valori sunt măsurate în pixeli, dar puteți introduce unități de măsură personalizate în câmpurile de intrare.

Căptușeală personalizată

Completarea este spațiul adăugat în interiorul modulului dvs., între marginea modulului și elementele sale interne. Puteți adăuga valori de umplere personalizate la oricare dintre cele patru laturi ale modulului. Pentru a elimina marja personalizată, eliminați valoarea adăugată din câmpul de introducere. În mod implicit, aceste valori sunt măsurate în pixeli, dar puteți introduce unități de măsură personalizate în câmpurile de intrare.

Opțiuni avansate pentru modulul de navigare

În fila avansată, veți găsi opțiuni pe care designerii web mai experimentați le-ar putea 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 un stil CSS personalizat. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi utilizate în tema copilului Divi sau în foaia de stil CSS personalizată pe care o adăugați la pagina dvs. sau la 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ărui intern al modulului. În secțiunea CSS personalizată, veți găsi un câmp de text în care puteți adăuga foi de stil CSS personalizate direct la fiecare element. Intrările CSS din aceste setări sunt deja înfășurate în etichetele de stil. Deci, introduceți regulile 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 de pe pagină.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCĂRCĂ TEMA DIVI [/vcex_button][/vc_column][vc_column] width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARCĂ ȘABLOANELOR DIVI[/vcex_button][/vc_column][/vc_row]

Divi tutorial: Cum se utilizează modulul de navigare în articole

Exemplu de caz de utilizare: adăugarea de legături de navigare personalizate în partea de jos a unei postări pe blog