Cum să stilați paginarea în modulul de portofoliu filtrabil al Divi

Modulul de portofoliu filtrabil al Divi este o modalitate excelentă și ușoară de a vă afișa munca și proiectele pe site-ul dvs. web. Puteți utiliza categorii pentru a crea diferite filtre pentru modulul dvs. de portofoliu și oferă o modalitate ușoară de a păstra un portofoliu actualizat fără a fi nevoie să vă modificați designul site-ului de fiecare dată. Pur și simplu adăugați un nou proiect în tabloul de bord WordPress, apoi se va completa automat în modulul portofoliu de pe site-ul dvs., atâta timp cât este clasificat corespunzător.

În acest tutorial, vă vom arăta 3 moduri diferite de a stila paginarea în modulul de portofoliu filtrabil al Divi. Personalizând acest design, puteți face ca modulul portofoliu să se potrivească cu designul general al site-ului dvs. și să atrageți atenția asupra lucrării pe care doriți să o afișați.

Să începem!

Trage cu ochiul

Iată o previzualizare a ceea ce vom proiecta

Stil de paginare Unu

Stil de paginare doi

Stilul de paginare trei

Ce aveți nevoie pentru a începe

Instalați și activați Divi

Înainte de a începe, instalați și activați Tema Divi și asigurați-vă că aveți cea mai recentă versiune a Divi pe site-ul dvs.

Adăugați proiecte de portofoliu

Pentru ca portofoliul să se populeze cu proiecte odată ce îl adăugăm pe pagina noastră, trebuie mai întâi să adăugăm proiectele în tabloul de bord WordPress. Selectați Proiecte în bara laterală a tabloului de bord WordPress, apoi adăugați un proiect nou. Asigurați-vă că proiectul are o imagine prezentată și o categorie, astfel încât să poată fi filtrat.

Acum, sunteți gata să începeți!

Cum să stilați paginarea în modulul de portofoliu filtrabil al Divi

Creați o pagină nouă cu un aspect prefabricat

Să începem prin a folosi un aspect prefabricat din biblioteca Divi. Vom folosi Pagina Portofoliu Painter din pachetul de layout Painter pentru acest design.

Adăugați o pagină nouă pe site-ul dvs., dați-i un titlu și selectați opțiunea Utilizați Divi Builder.

Vom folosi un aspect prefabricat din biblioteca Divi pentru acest exemplu, deci selectați Răsfoire layout-uri.

Căutați și selectați aspectul Painter Portfolio Page.

Selectați Utilizați acest aspect pentru a adăuga aspectul paginii dvs.

Acum suntem gata să ne construim designul.

Adăugați modulul de portofoliu filtrabil

Vom înlocui conținutul portofoliului existent de pe această pagină cu modulul de portofoliu filtrabil. Mai întâi, ștergeți secțiunea portofoliului existent.

Apoi, inserați o nouă secțiune pe pagină, sub secțiunea „lucrare recentă”.

Apoi adăugați un rând cu o singură coloană la secțiune.

Adăugați modulul de portofoliu filtrabil la noul rând.

Portofoliul dvs. filtrabil ar trebui să fie populat cu proiectele dvs., atâta timp cât acestea au fost adăugate la secțiunea de proiecte a tabloului de bord WordPress.

Setări de portofoliu filtrabile

Acum să personalizăm designul portofoliului filtrabil. Deschideți setările modulului, apoi modificați numărul de postări la 6.

• Număr de postări: 6

Sub elemente, dezactivați Afișare categorii.

• Afișați categorii: nr

Treceți la fila Design și deschideți setările Aspect. Setați aspectul la Grilă.

• Aspect: Grilă

Apoi, deschideți setările de suprapunere. Setați Culoarea pictogramei Zoom, Culoarea suprapunerii cu mouse-ul și Selectorul pictogramei Hover, după cum urmează:

• Culoare pictogramă Zoom: #fdd23a
• Culoarea suprapunerii cu mouse-ul: rgba(61,61,61,0.28)
• Selector de pictograme cu mouse-ul: pictograma Plus

Deschideți setările pentru imagine, apoi adăugați o umbră pentru caseta de imagine.

Apoi, setați culoarea umbrei.

• Culoare umbră: #f2f2f2

Apoi, modificați setările fontului titlului după cum urmează:

• Font de titlu: Merriweather
• Greutatea fontului titlului: aldine
• Culoarea textului titlului#000000

Setați dimensiunea textului titlului și înălțimea liniei.

• Dimensiunea textului titlului: 25px
• Înălțimea liniei de titlu: 2 em

Treceți la secțiunea Filter Criteria Text și modificați setările fontului după cum urmează:

• Font criteriu de filtrare: Montserrat
• Criterii de filtrare Greutatea fontului: Bold
• Criterii de filtrare Culoare text: #000000

Acum că cea mai mare parte a designului modulului nostru este completă, putem trece la personalizarea stilurilor de paginare.

Stil de paginare Unu

Pentru primul stil de paginare, vom seta o culoare diferită a fontului pentru pagina activă. În plus, vom seta dimensiunea textului de paginare să crească la trecerea cursorului. Să începem.

În setările portofoliului filtrabil, deschideți setările textului de paginare. Personalizați fontul după cum urmează:

• Font de paginare: Montserrat
• Greutatea fontului de paginare: aldine
• Alinierea textului de paginare: dreapta
• Culoarea textului de paginare: #000000

Setați dimensiunea textului. Apoi. utilizați setările de trecere cu mouse-ul pentru a crește dimensiunea textului la trecerea cu mouse-ul.

• Dimensiunea textului de paginare: 17px
• Dimensiunea textului de paginare la trecerea cu mouse-ul: 21 px

În cele din urmă, navigați la fila Avansat și adăugați următorul CSS personalizat la secțiunea CSS Paginare activă a paginii. Acest lucru activează culoarea galbenă pe pagina activă.

color: #FDD23A !important;

Design final

Și iată aspectul final pentru primul nostru design.

Stil de paginare doi

Al doilea stil de paginare pe care îl vom proiecta include o culoare de fundal în spatele paginii, câteva efecte de culoare de hover și o culoare diferită pentru pagina activă.

În setările portofoliului filtrabil, deschideți setările textului de paginare. Personalizați fontul după cum urmează:

• Font de paginare: Merriweather
• Greutatea fontului de paginare: aldine
• Alinierea textului de paginare: Centru
• Culoarea textului de paginare: #9e9e9e
• Culoarea textului de paginare la trecerea cu mouse-ul: #000000

Apoi, setați dimensiunea textului și înălțimea liniei.

• Dimensiunea textului de paginare: 26px
• Înălțimea liniei de paginare: 2em

Treceți la fila Avansat și adăugați următorul CSS personalizat la secțiunea CSS Paginare portofoliu. Aceasta va adăuga o culoare de fundal și va elimina chenarul:

background:#f2f2f2;
border:none;

În cele din urmă, adăugați următorul CSS la secțiunea Pagination Active Page CSS pentru a seta o culoare diferită a textului pentru pagina activă.

color: #000000 !important;

Design final

Iată designul final pentru cel de-al doilea stil de paginare.

Stilul de paginare trei

Pentru designul nostru final de paginare, vom adăuga un cerc galben în spatele paginii active. De asemenea, vom seta o culoare diferită a fontului pentru pagina activă și pentru trecerea cursorului.

În setările portofoliului filtrabil, deschideți setările textului de paginare. Apoi personalizați fontul după cum urmează:

• Font de paginare: Merriweather
• Greutatea fontului de paginare: aldine
• Alinierea textului de paginare: Centru
• Culoarea textului de paginare: #000000
• Culoarea textului de paginare la hover: #FDD23A
• Dimensiunea textului de paginare: 26px

Treceți la fila Avansat și adăugați următorul CSS personalizat la secțiunea CSS Paginare portofoliu pentru a elimina chenarul:

border:none;

În cele din urmă, adăugați următorul CSS la secțiunea Pagination Active Page CSS. Acest CSS va seta o culoare diferită a textului și un fundal circular pentru pagina activă.

padding: 10% 60% 10% 60%;
background-color: #FDD23A;
border-radius: 80%;
color: #ffffe7!important;

Design final

Iată designul final pentru ultimul nostru aspect.

Rezultat final

Acum să aruncăm o privire la toate cele trei modele finale cu diferitele noastre stiluri de paginare.

Stil de paginare Unu

Stil de paginare doi

Stilul de paginare trei

Gânduri finale

Modulul de portofoliu filtrabil este ușor de personalizat pentru a se potrivi cu designul site-ului dvs. și puteți adăuga rapid noi proiecte din tabloul de bord WordPress pentru a vă menține portofoliul la zi. Acest modul este grozav pentru designeri, artiști, fotografi și alți creativi pentru a-și etala munca cu imagini frumoase și o navigare ușoară. Pentru mai multe idei unice de design de portofoliu, consultați acest tutorial despre crearea unui șablon de proiect de portofoliu dinamic. Ați folosit modulul de portofoliu filtrabil pe site-ul dvs.? Spune-ne în comentarii!