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

Modulul de portofoliu filtrabil al Divi conține multe elemente și fiecare poate fi stilat individual. Filtrul este unul dintre cele mai utile elemente, dar uneori este trecut cu vederea. În această postare, vom vedea cum să stilăm filtrul de categorii în Modulul de portofoliu filtrabil al Divi. Vom vedea ce se poate face cu setările standard și vom cerceta CSS pentru a vedea cum să-l stilăm și mai mult.

Să începem!

previzualizare

Mai întâi, să vedem ce vom construi în acest tutorial.

Exemplul unu de filtru pentru categoria desktop

Exemplul unu de filtru pentru categoria de telefon

Exemplul doi de filtru pentru categoria desktop

Exemplul doi de filtru pentru categoria de telefon

Exemplul trei de filtru pentru categoria desktop

Exemplul trei de filtru pentru categoria de telefon

Împărțirea proiectelor în categorii

Pentru a utiliza cât mai bine filtrul de categorii, va trebui să vă împărțiți proiectele în categorii care au cel mai mult sens pentru cititorii dvs. Pentru a vă crea categoriile, accesați Proiecte > Categorii din tabloul de bord WordPress.

Aici, veți vedea câmpuri pentru a adăuga numele, melcul, categoria părinte și descrierea. De asemenea, veți vedea lista de categorii într-o listă în care le puteți edita.

După ce v-ați creat categoriile, asigurați-vă că le alegeți pentru fiecare dintre proiectele dvs. care au cel mai mult sens pentru cititor. Pentru a vă crea proiecte, accesați Proiecte și faceți clic pe Adăugare nou în meniu sau în partea de sus a paginii.

Pentru exemplele mele, am creat proiecte pentru o companie de renovare a casei. Compania s-ar concentra pe renovarea caselor, dar ar include și lucrări similare pentru corporații și ar putea construi de la zero. Pentru case, folosesc categoriile Interior și Exterior. Pentru toate celelalte lucrări, am adăugat Corporate și Construcții.

Setări pentru modulul de portofoliu filtrabil

În exemplul nostru, voi înlocui secțiunea portofoliu a paginii Portofoliu din pachetul gratuit Renovation Layout cu un modul de portofoliu filtrabil. Mai întâi, să vedem cum să stilăm modulul. Apoi, vom stila filtrul în trei moduri diferite. Iată pagina înainte să fac modificările.

Iată pagina după adăugarea Modulului de portofoliu filtrabil în locul imaginilor.

Mai întâi, vom stila modulul. Vom folosi aceleași setări pentru toate cele trei exemple.

Conţinut

În fila Conținut, setați numărul de postări la 8 și selectați Categorii din lista de Categorii incluse.

• Număr de postări: 8
• Categorii incluse: alegerea dvs

Elemente

Derulați în jos la Elemente și dezactivați Afișare categorii . Vom folosi doar titlurile și vom permite filtrului să afișeze categoriile.

• Afișați categorii: nr

Aspect

Apoi, accesați fila Design și selectați Grid sub Layout . L-am selectat deja pentru imaginile anterioare, dar modulul afișează implicit lățimea completă.

• Aspect: Grilă

Text

Apoi, derulați la Text și setați Alinierea textului la Centru. Aceasta centrează filtrul și paginarea cu modulul și titlurile cu imaginile proiectului.

• Alinierea textului: Centru

Textul titlului

Apoi, derulați la Textul titlului . Schimbați fontul în Kanit și setați Greutatea la Semi Bold. Setați culoarea la negru.

• Font: Kanit
• Greutate: Semi Bold
• Culoare: #000000

Schimbați dimensiunea fontului la 20px pentru desktop, 18px pentru tablete și 16px pentru telefoane. Setați Distanța dintre linii la 1px și Înălțimea liniei la 1,3 em.

• Dimensiune: desktop 20px, tabletă 18px, telefon 16px
• Spațiere între litere: 1px
• Înălțimea liniei: 1,3 em

Textul de paginare

Apoi, derulați în jos la Pagination Text și schimbați fontul în Kanit. Schimbați culoarea în negru.

• Font: Kanit
• Culoare: #000000

Schimbați distanța dintre linii la 1px. Salvează-ți munca. Acum putem stila filtrul de categorii pentru exemplele noastre.

• Spațiere între litere: 1px

Exemple de filtre de categorii

Acum, putem trece la exemplele noastre de Filtre de categorii. Folosesc indicii de design din pachetul de layout.

Filtru de categorie Exemplul unu

Primul nostru exemplu este cel mai simplu dintre cele trei. Folosește setările de bază și nu face nimic extravagant. Funcționează bine cu aspectul.

Criterii de filtrare text

În fila Design , derulați în jos la Textul criteriilor . Schimbați fontul în Kanit. Schimbați stilul în TT și culoarea în negru.

• Font: Kanit
• Stil: TT
• Culoare: #000000

Setați Distanța dintre linii la 1px și setați înălțimea liniei la 1,3 em. Asta e pentru primul. Acum, salvați setările și închideți modulul.

• Spațiere între litere: 1px
• Înălțimea liniei: 1,3 em

Exemplul doi de filtru de categorie

Al doilea exemplu va folosi niște CSS simple pentru modul și pagină pentru a crea colțuri rotunjite și o umbră de casetă. Acesta arată cel mai diferit.

Criterii de filtrare text

Accesați fila Design și derulați în jos la Filter Criteria Text . Schimbați fontul în Kanit. Setați culoarea la negru, dimensiunea la 16 px și înălțimea liniei la 1,5 em. Dimensiunea fontului funcționează bine pe toate dimensiunile de ecran, așa că nu va fi nevoie să o ajustăm pentru tablete sau telefoane.

• Font: Kanit
• Culoare: #000000
• Dimensiune: 16px
• Înălțimea liniei: 1,5 em

Modulul CSS

Apoi, accesați fila Avansat . Derulați în jos la Filtru de portofoliu activ și adăugați CSS pentru culoarea de fundal și închideți modulul. Aceasta schimbă culoarea de fundal a filtrului activ. Orice filtru pe care îl face clic pe utilizator se schimbă la această culoare de fundal, iar filtrul anterior revine la culoarea obișnuită.

• Filtrul activ de portofoliu CSS:

  background-color:#ffd000;

Setări pagină CSS

Apoi, deschideți Setările paginii în meniul paginii. În modulul Setări pagină, selectați fila Avansat și inserați CSS-ul personalizat în câmp. Acest CSS elimină marginea elementelor de filtrare, creează o rază a marginii de 25 px și adaugă 5 px de marjă între elemente. De asemenea, adaugă o mică casetă-umbră în partea de jos a articolelor și schimbă culoarea umbrei. Închideți modulul și salvați setările.

• CSS personalizat:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {border-width:0px; border-radius: 25px!important; margin:5px; box-shadow: 1px 2px rgba(0,0,0,0.3);}

Filtru de categorie Exemplul trei

Al treilea exemplu urmează idei de design CSS similare din exemplul anterior. Nu include colțuri rotunjite și schimbă fontul și culorile de fundal la trecerea cursorului. De asemenea, folosește CSS atât pentru modul, cât și pentru pagină.

Criterii de filtrare text

Accesați fila Design și derulați în jos la Filter Criteria Text . Alegeți Kanit pentru Font , setați stilul la TT și culoarea la alb.

• Font: Kanit
• Stil: TT
• Culoare: #ffffff

Apoi, selectați opțiunea Hover pentru Culoarea textului și schimbați culoarea în negru. Acest lucru are grijă de fonturile de pe hover. Ne vom ocupa de fundaluri cu CSS. Schimbați spațierea literelor la 1px și înălțimea liniei la 1,3 em.

• Culoare Hover: #000000
• Spațiere între litere: 1px
• Înălțimea liniei: 1,3 em

Modulul CSS

Apoi, accesați fila Avansat și derulați în jos la Filtru de portofoliu activ . Adăugați următorul CSS pentru a schimba fundalul filtrului activ. Închideți modulul.

• Filtrul activ de portofoliu CSS:

  background-color:#ffd000

Setări pagină CSS

În cele din urmă, deschideți Setările paginii . accesați fila Avansat și introduceți următorul CSS personalizat . Închideți modulul și salvați setările. Aceasta schimbă fundalul în negru, adaugă 15 px de umplutură în partea de sus și de jos și 30 px în partea stângă și în dreapta. Acest lucru redimensionează elementele de filtrare pentru a se potrivi îndeaproape cu butoanele din aspect și ajută la crearea modificării culorii pentru efectul de hover. Fundalul se va schimba în alb la trecerea cursorului.

• CSS personalizat:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {background-color:black; padding: 15px 30px 15px 30px;}

Rezultate

Exemplul unu de filtru pentru categoria desktop

Exemplul unu de filtru pentru categoria de telefon

Exemplul doi de filtru pentru categoria desktop

Exemplul doi de filtru pentru categoria de telefon

Exemplul trei de filtru pentru categoria desktop

Exemplul trei de filtru pentru categoria de telefon

Gânduri de sfârșit

Acesta este aspectul nostru despre cum să stilăm filtrul de categorii în Modulul de portofoliu filtrabil al Divi. Filtrul de categorii include aceleași instrumente de stilare ca și celelalte elemente, astfel încât să poată fi stilat cu ușurință pentru a funcționa cu orice aspect Divi. Adăugând CSS atât la modul, cât și la pagină, putem stila filtrul de categorii în multe moduri unice pentru a ieși în evidență din mulțime.

Vrem sa auzim de la tine. Ți-ai adaptat filtrul de categorie în Modulul de portofoliu filtrabil al Divi? Spune-ne despre asta în comentarii.