Portofoliul filtrabil de pe Divi vă permite să afișați cele mai recente proiecte în modul Grid sau Standard. Portofoliul filtrabil arată ca modulul de portofoliu normal, cu excepția faptului că încarcă proiecte noi folosind o cerere Ajax și include opțiuni pentru a filtra lista proiectelor pe categorii. Când este selectată o anumită categorie, lista proiectelor este regenerată instantaneu cu o nouă listă de proiecte din categoria selectată.

lățimea totală a portofoliului divi.png

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

Înainte de a putea adăuga un modul de portofoliu filtrabil la pagina dvs., trebuie mai întâi să accesaț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 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 Activați Visual Builder când răsfoiți dvs site-ul web în prim-plan dacă sunteți conectat la tabloul de bord WordPress.

utilizați divi builder

Odată 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.

portofel full screen divi.png

Găsiți modulul de portofoliu filtrabil în lista de module și faceți clic pe el 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 „portofoliu pe ecran complet” și apoi să faceți clic pe „Enter” pentru a găsi și adăuga automat modulul de portofoliu filtrabil! 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 utilizare: Adăugarea unui modul de portofoliu filtrabil la o pagină de portofoliu

Pentru acest exemplu, vă voi arăta cum să adăugați un modul de portofoliu filtrabil la o pagină de portofoliu.

divizibil portofoliu divi builder.jpg

Să începem.

Utilizați generatorul vizual pentru a adăuga o secțiune obișnuită cu un rând cu lățime completă (1 coloană) sub antetul paginii. Apoi adăugați un modul de portofoliu filtrabil pe rând.

Actualizați setările de portofoliu filtrabile după cum urmează:

Opțiuni de conținut

Număr articole: 8

Opțiuni de proiectare

Aspect: Grilă Zoom Culoare pictogramă: #ffffff Hover Culoare suprapunere: rgba (224,153,0,0.58) Font titlu: Implicit, Bold, majuscul Titlu Dimensiune font: 14px Titlu Spațiere litere: 1px Filtru font: Implicit, Bold, majuscule Filtru Dimensiune font: 14px Filtrarea literelor: 1px Meta Dimensiune font: 12px Meta literele: 1px

Opțiuni avansate (CSS personalizate)

Filtru de portofoliu activ: culoare: # e09900; Titlul portofoliului: text-align: center; Portofoliu Mesaj Meta: text-align: center; Pagină activă de paginare: culoare: # e09900! Important;

modul de portofoliu cu divi.png

Asta este!

Opțiuni de conținut filtrabile pentru portofoliu

Î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ă.

modul divi filtru filtrabil full screen.png

Număr de mesaje

Alegeți cum puteți vedea postările pe care doriți să le vizualizați înainte ca lista să fie paginată.

Includeți categorii

Selectați categoriile pe care doriți să le afișați. Postările din categorii care nu sunt selectate nu vor apărea în lista de postări generate.

Afișați titlul

Introduceți un titlu, dacă doriți, care va fi plasat deasupra listei de proiecte.

Afișați categoriile

Alegeți dacă se afișează sau nu categoria sub fiecare articol din zona de metadate.

Vizualizați paginarea

Această opțiune activează / dezactivează paginarea. Dacă paginarea este dezactivată, va fi afișată o singură pagină de proiect pentru fiecare categorie.

Culoarea de fundal

Definiți o culoare de fundal personalizată pentru modulul dvs. sau lăsați necompletat pentru a utiliza culoarea implicită.

Imagine de fundal

Dacă este setată, această imagine va fi folosită ca fundal pentru acest modul. Pentru a elimina o imagine de fundal, trebuie doar să eliminați adresa URL din câmpul de setări. Imaginile de fundal vor apărea deasupra culorilor de fundal, ceea ce înseamnă că culoarea de fundal nu va fi vizibilă atunci când se aplică o imagine de fundal.

Eticheta de administrare

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 portofolică filtrabile

Î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.

modul de portofoliu fullwidth divi section design.png

Dispoziţie

Alegeți stilul de aspect pentru portofoliul dvs. „Lățime completă” afișează un mesaj pe rând, în timp ce „Grilă” afișează proiectele într-o grilă cu mai multe proiecte pe rând.

Culoarea textului

Aici puteți alege dacă textul dvs. trebuie să fie deschis sau întunecat. Dacă lucrați pe un fundal întunecat, textul dvs. ar trebui să fie ușor. Dacă fundalul dvs. este deschis, textul dvs. ar trebui să fie întunecat.

Fonturi de titlu

Puteți modifica fontul textului titlului 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. folosind opțiuni aldine, cursive, cu majuscule și cu subliniere.

Dimensiunea fontului titlului

Aici puteți regla dimensiunea textului din titlu. 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 titlului

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

Spațierea literelor de titlu

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul titlului, 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.

modul de distribuție divi.png

Înălțimea liniei de titlu

Înălțimea liniei afectează spațiul dintre fiecare linie a textului titlului 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âmpul de introducere situat î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.

Filtrați fontul

Puteți modifica fontul textului filtrului 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. folosind opțiuni aldine, cursive, cu majuscule și cu subliniere.

Filtrați dimensiunea fontului

Aici puteți regla dimensiunea textului filtrului. 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.

Filtrați culoarea textului

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

Filtrarea spațierii literelor

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul filtrului, 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 filtrare

Înălțimea rândului afectează spațiul dintre fiecare rând al textului filtrului 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 introducere situat î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.

Meta Font

Puteți schimba fontul meta textului 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. folosind opțiuni aldine, italice, cu majuscule și cu subliniere.

Dimensiunea fontului Meta

Aici puteți regla dimensiunea meta-textului. 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.

Meta text color

Î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.

Meta Spațiere între litere

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din meta-text, 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 valoarea mărimii 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âmpul de introducere situat î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.

meta portofoliu modul full screen divi.png

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.

Opțiuni avansate de portofoliu filtrabile

Î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.

secțiune avans modul portofoliu fullwidth.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 stiluri CSS personalizate. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi folosite în tema copilului Divi sau în foaia de stil CSS personalizată pe care o adăugați la pagina sau site-ul dvs. site-ul web folosind 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]

Alte tutoriale Divi