Divi: Cum să personalizați un element din grila modulului „Portofoliul filtrabil”.

Doriți să știți cum să personalizați elementele grilei din modulul Portofoliu filtrabil al Divi ? Urmărește-ne în acest tutorial...

Ai o zonă pe tine site-ul web este important să-ți arăți munca. Dacă ești stilist, poți crea mai multe proiecte pe tine site-ul web WordPress pentru a vă prezenta conceptele. Dacă sunteți un constructor de mărci, puteți utiliza un portofoliu pentru a vă prezenta munca. Mai mult, putem merge chiar mai departe și adăugam diferite categorii pentru proiectele noastre. E aici ce face modulul de portofoliu filtrabil al Divi? .

Cu acest modul, suntem capabili să arătăm munca noastră grea într-un mod ușor și organizat. 

În tutorialul de astăzi, vom personaliza elementele de grilă individuale ale modulului Portofoliu filtrabil. Vom folosi layout-uri din pachete de layout gratuite Conferinta Divi et Instructor de yoga online Divi furnizate cu fiecare achiziție de Divi . 

Ca și în orice despre Divi, avem capacitatea de a personaliza acest modul pentru a se potrivi nevoilor și dorințelor noastre. Cu toate acestea, înainte de a intra în stil, să învățăm puțin mai multe despre modul.

Ce este modulul de portofoliu filtrabil al Divi?

Proiectele fac parte dintr-un tip de postare personalizat care funcționează la fel ca și postările. Le puteți găsi în tabloul de bord WordPress.

Aici vă veți crea proiectele individuale care vă vor popula modulul Portofoliu filtrabil. Modulul ne oferă două moduri de a ne arăta proiectele: într-un format de grilă ou într-un format cu lățime completă. Pentru noi, vom folosi și personaliza formatul grilei. 

Cu modulul Filterable Portfolio, vom putea prezenta cele mai recente proiecte ale noastre. Utilizatorii site-ului nostru vor vedea o bară de filtre în partea de sus a grilei portofoliului nostru. De acolo, ei pot naviga prin diferitele categorii de portofoliu pe care le permitem să le afișăm în modul.

Iată un exemplu de configurare a rețelei a modulului cu câteva exemple de proiecte:

Domenii de luat în considerare la crearea portofoliului filtrabil al Divi

Ca toate modurile Divi, modulul Portofoliu filtrabil vine cu o serie de caracteristici pe care le putem personaliza în funcție de nevoile și dorințele noastre. Astfel, majoritatea caracteristicilor care vin cu modulul pot fi modificate în filă Amenajări din modulul de setări modul. Putem edita următoarele zone și multe altele:

• Titlul proiectului
• Categoria de proiect
• Vinietă
• Filtrați textul
• Miniatură la hover
• Paginație

Aceasta nu este o listă completă și nici măcar nu am început să vorbim despre modul în care CSS a adăugat personalizări mai profunde la acest modul!

Cum vom personaliza modulul de portofoliu filtrabil al Divi

După cum am menționat mai devreme, pentru acest tutorial vom folosi două aspecte: Conferinta Divi et Instructor de yoga online Divi. Mai jos puteți obține o imagine de ansamblu asupra activității pe care o vom face în timpul acestui tutorial.

Aranjarea elementelor layout-ului „Divi Conference”.

Aranjarea elementelor layout-ului „Divi Online Yoga Instructor”.

Puteți descărca cu ușurință ambele machete de pe Divi Constructor. 

Acum să începem!

Vezi si: Divi: alegeți între grila și aspectul pe lățime completă a modulului Portofoliu filtrabil

Personalizarea modulului de portofoliu filtrabil al Divi: „Divi Conference Edition”

În primul rând, va trebui să instalăm șablonul de pagină de eveniment din pachetul Divi Conference Layout Pack. După crearea noii pagini în WordPress și activarea Divi Builder, vom intra în Biblioteca Divi.

Intrați în Biblioteca Divi Layout

Faceți clic pe pictogramă « Încărcare din bibliotecă pentru a intra în Biblioteca Divi Layout

Găsiți aspectul în biblioteca Divi Layout

Folosind funcția de căutare din biblioteca de layout a Divi, în căutarea dispozitia" Pagina evenimentului conferinței".

Instalați aspectul

După ce ați selectat aspectul, faceți clic pe " Utilizați acest aspect pentru a instala aspectul în pagina dvs.

Eliminați și înlocuiți modulul de imagine

Vom elimina modulul Imagine prezentat mai jos pentru a face loc pentru modulul Portofoliu filtrabil pe care îl vom personaliza. Faceți clic pe " Șterge după ce treceți cu mouse-ul peste imagine pentru a șterge fotografia.

Introduceți modulul de portofoliu filtrabil al Divi

Cu modulul Imagine eliminat, acum putem face loc pentru modulul nostru de portofoliu filtrabil. Vom face clic pe pictograma „ Adăugați modul (semnul gri plus), apoi selectați modulul din caseta modală a modulului care apare.

Setarea numărului de postări și a aspectului portofoliului

În mod implicit, acest modul vă va prezenta munca într-o singură coloană. Cu toate acestea, vom folosi aspectul grilă care vine implicit cu 4 coloane. 

Ca atare, vă recomandăm să alegeți un multiplu de 4 (4, 8, 12, 16 etc.) ca număr de postări pentru portofoliul dvs. 

Pentru acest tutorial, vom folosi 12 proiecte în grila noastră.

Începeți să personalizați portofoliul filtrabil al Divi: Titlu și Meta Text

Acum că proiectele noastre sunt afișate într-o grilă, să legăm câteva dintre elementele de design ale șablonului nostru selectat. În acest caz, vom folosi stilul furnizat cu Divi Conference Layout Pack în noul nostru modul.

Stil text

• Alinierea textului: centrat
• Culoare text: Întunecat

Stilul text al titlului

• Titlu Titlu Nivel: H2
• Font de titlu: Krona One
• Culoare text: #000000

Stilul meta text

• Meta font: implicit (Open Sans)
• Culoare meta text: #ff6651

Acum că avem stilul nostru stabilit pentru titlurile din grila portofoliului, haideți să facem câteva modificări formei reale a miniaturilor proiectului.

Schimbați chenarul miniaturii proiectului și colțurile rotunjite

În pachetul nostru Divi Conference Layout, folosim o combinație unică de colțuri rotunjite pentru a da o formă unică unora dintre cadrele cheie din pachet. Să aplicăm acest stil miniaturilor modulului nostru.

Imagine

• poza:
  • Colțuri rotunjite: 50px 50px 50px 0px
  • Stiluri de chenar: toate
  • Lățimea chenarului: 3px
  • Culoare: #000000
  • Stil chenar: solid

Acest lucru va oferi miniaturilor noastre o formă care se potrivește cu restul celorlalte imagini din pachetul de aspect.

Personalizarea suprapunerii Hover

Să facem un pas mai departe cu stilul nostru și să facem o ușoară modificare la suprapunerea implicită care vine cu acest modul. Vom schimba culoarea, precum și pictograma care este folosită imediat din cutie.

Suprapunere

• Culoare pictogramă Zoom: #bcf5fd
• Culoarea suprapunerii cu cursorul: #ff6651
• Selector de pictograme cu mouse-ul: Zoom

După cum puteți vedea acum, am adăugat culorile mărcii pentru acest aspect la suprapunere, precum și am schimbat pictograma pe care Divi o oferă în mod implicit pentru funcția de suprapunere la trecerea cursorului în acest modul.

Personalizarea paginării

Vom începe acum să folosim mici fragmente de CSS pentru a adăuga personalizare suplimentară la modulul nostru de portofoliu filtrabil. În primul rând, vom personaliza paginarea acestui modul. În continuare, vom elimina chenarul care apare deasupra acestuia cu o singură linie de CSS

Text de paginare

• Paginare:
  • Font: Krona One
  • Alinierea textului: centrat
  • Culoare text: #ff6651, #000000 (Hover)

Pentru CSS-ul nostru, vom trece la fila Avansat a modulului nostru. În al doilea rând, vom face clic pe filă CSS personalizat. Apoi, vom introduce următorul fragment de cod pentru a elimina chenarul de deasupra paginației noastre, dându-i un aspect mai curat.

Paginarea portofoliului

border-top: 0px;

Utilizarea Setărilor Divi și CSS pentru a personaliza textul de filtrare

Pentru textul filtrului, îl vom lua mai sus. Vom folosi CSS pentru a schimba fundalul, precum și efectele hover. 

Dorim să avem o continuitate perfectă între modulul nou adăugat și stilul pachetului de layout. Mai întâi, să introducem setările noastre Divi pentru font.

Criterii de filtrare text

• Criterii de filtrare:
  • Font: Krona One
  • Culoare font: #ffffff, #000000 (Hover)

În starea actuală, filtrul nostru pare să dispară. Într-adevăr, în starea sa implicită, este text alb pe fundal alb. Cu toate acestea, vom schimba acest lucru cu CSS personalizat în două locuri. 

În primul rând, vom adăuga un fragment CSS în setările paginii care va adăuga un fundal textului filtrului. În al doilea rând, vom personaliza filtrul de portofoliu activ folosind fila Avansat a modulului.

A accesa setările paginii, faceți clic pe cele trei puncte din mijlocul ecranului. atunci selectați pictograma roată care va deschide setările paginii. Atunci tu navigați la fila CSS personalizat și introduceți următoarele pentru a adăuga un fundal textului de filtru.

CSS personalizate

În acest fragment CSS, vizam culoarea de fundal a filtrului. De asemenea, vizam și stilăm starea de hover. În continuare, pe agendă, să adăugăm mai multe CSS la modul și să evidențiem fila Filtru activ.

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}

Stil de filă activ al filtrului de portofoliu

Fila activă a ffiltru de portofoliu atrage atenția utilizatorilor asupra categoriei actuale de portofoliu pe care o vizitează. În prezent, acest filtru are text alb și un fundal deschis. 

Vom merge la fila Avansat din modulul Portofoliu filtrabil și adăugați text la stările implicite și de trecere cu mouse-ul acestei caracteristici. Iată proprietățile CSS pe care le vom adăuga într-o stare implicită:

background: #ff6651;
color: #ffffff !important;

Starea la hover

La trecerea cursorului, vom schimba fundalul în negru.

color: #000000!important;

Aspectul final al designului portofoliului filtrabil al Divi cu „Divi Conference”

Iată aspectul final!

Și acum, iată cum arată când treci cu mouse-ul!

Personalizarea modulului de portofoliu filtrabil Divi: „Divi Online Yoga Instructor”

Ca și în cazul Divi Conference Edition, găsește-ți aspectul în Pachetul de aranjament pentru instructor de yoga online din Divi Builder. 

Vom folosi aspectul paginii de destinație pentru acest tutorial. Derulați în jos la secțiunea Clase de secțiuni cu titlul Secțiune Toate cursurile viitoare.

Inserarea modulului Portofoliu filtrabil

De aici, vom elimina rândurile cu clasele. Faceți clic pe pictograma violet cu trei puncte pe ea . Apoi, selectați vizualizarea wireframe. În cele din urmă, veți șterge cele două rânduri care conțin trei coloane.

Apoi le vom înlocui cu o singură coloană în rândul din interior. Apoi, vom adăuga modulul nostru de portofoliu filtrabil.

Ca și în exemplul anterior, vom folosi aspectul grilei pentru acest modul cu un multiplu de 4 pentru numărul de postări. 

Acum să facem ceva puțin diferit cu informațiile pe care le prezentăm pe hartă. 

În filă Conţinut, navigheaza catre Element și deselectați Afișați categoriile . Aceasta înseamnă că modulul Portofoliu va afișa doar numele proiectului fără numele categoriei în care se află.

Personalizarea textului criteriilor de filtrare, titlului proiectului și textului de paginare

Să definim baza de stil pentru părțile de text ale modulului nostru. Corpul textului acestui aspect este Sans deschise iar fontul folosit pentru titlurile principale este cinzel. Prin urmare, vom folosi o combinație a acestor două fonturi pe tot parcursul procesului de stilare.

Text

• Alinierea textului: centrat
• Culoare text: deschis

Textul titlului

• Font titlu: Cinzel
• Culoare text titlu: #ffffff

Textul criteriilor de filtrare

• Criterii de filtrare Greutatea fontului: Bold
• Textul criteriilor de filtrare Culoare: #ffffff

Text de paginare

• Greutatea fontului de paginare: aldine

Acesta este modulul nostru de portofoliu filtrabil acum. Nu e mult, dar ajungem încet!

Creați o suprapunere translucidă

Să ne inspirăm din diferitele module și din gradiente frumoase din acest aspect. Pentru aceasta, vom crea o suprapunere translucidă de trecere cu mouse-ul și vom personaliza pictograma care apare și la trecerea cu mouse-ul.

• Culoare pictogramă Zoom: #323741
• Culoare de suprapunere cu mouse-ul: rgba (255 201 165, 0,85)
• Selector de pictograme cu mouse-ul: căutați o foaie și vedeți pictograma de mai sus

Adăugarea de margini elementelor grilei de portofoliu cu CSS personalizat

Similar cu primul nostru exemplu, acum vom folosi CSS pentru a adăuga mai mult interes modulului nostru de portofoliu filtrabil. 

Acum vom adăuga un chenar în jurul fiecărui element individual din grila portofoliului. Utilizați fragmentul CSS de mai jos în partea CSS personalizată a setărilor paginii pentru a adăuga chenarul nostru. 

Vom folosi, de asemenea, „border” ca clasă CSS pentru acest modul.

• Clasa CSS: chenar

CSS personalizate

/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}

Aici avem acum modulul nostru de portofoliu filtrabil cu un chenar frumos – și umplutură – în jurul fiecărui element de grilă.

S-a adăugat CSS la chenarul de paginare a stilului

Spre deosebire de exemplul nostru anterior, haideți să adăugăm culoare la chenarul paginii noastre cu CSS. Aceasta va merge și în zonă Setări > Pagina CSS personalizată .

/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}

Stilul text al criteriilor de filtrare

Similar cu stilul modulului nostru Divi Conference Portfolio, dorim să adăugăm jazz la filtrele noastre de categorie. Din nou, vrem să tragem din stilul care este deja prezent în șablonul oferit nouă. 

Iată CSS-ul pe care îl vom adăuga în secțiunea CSS personalizată pentru a viza fundalul și trecerea cursorului pe bara noastră de filtre.

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
 
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}

Cu aceste două noi completări la CSS-ul nostru personalizat, acesta este modulul nostru de portofoliu filtrabil.

Cu toate acestea, observați cum se pierde filtrul activ de portofoliu. Are întotdeauna un fundal deschis cu text alb pe el. Să mergem la setările modulului și să adăugăm niște CSS pentru a schimba asta.

CSS personalizate

Filtru activ de portofoliu:

background: #ffffff;
color: #323741 !important;

Eliminați animația modulului

Pentru a oferi o experiență mai curată, vom elimina animația implicită care vine cu modulul Portofoliu filtrabil. Pentru aceasta, va trebui mai întâi să revenim la setările paginii noastre și să adăugăm câteva CSS care vor viza elementele grilei portofoliului și vor elimina tranziție de alunecare asta se întâmplă din cutie.

CSS personalizate

/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}

Citiți și: Divi: Cum se schimbă numărul de coloane dintr-un blog

Schimbați grila de portofoliu de la patru coloane la trei

Ultima noastră adăugare CSS va fi transformarea modulului nostru de portofoliu filtrabil din patru coloane în trei. Acest lucru ne va oferi mai mult spațiu pentru a ne vedea proiectele. 

De asemenea, vom adăuga o linie suplimentară la modulul nostru. Veți găsi, de asemenea, cel mai recent fragment CSS pe care îl puteți folosi pentru a vă converti coloanele.

CSS personalizate

Pentru acest ultim fragment, vom adăuga ID-ul CSS #grilă-în trei coloane la modulul nostru. Vom păstra în continuare intactă clasa noastră CSS de înainte.

/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
 
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}

Descărcați DIVI acum!!!

Concluzie

Ca și în cazul majorității modulelor Divi, setările care vin cu Divi pot fi dezvoltate în continuare cu CSS. Prezentarea muncii tale este o parte importantă a conducerii unei afaceri online, a unui blog sau a unei mărci. 

Ca atare, este esențial să ai o modalitate organizată de a-ți afișa munca. Câștigați sfaturi care au fost distribuite astăzi pentru a lua parte la propria călătorie de proiectare a modulului Portofoliu filtrabil al Divi.

Sperăm că această tehnică va adăuga o altă abilitate de design utilă pentru proiectele viitoare.

Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.

De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.

Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...