Divi: Si të personalizoni një element të rrjetit të modulit "Portofoli i Filterueshëm".

Dëshironi të dini se si të personalizoni elementet e rrjetit të modulit të Portofolit të Filterueshëm të Divi ? Na ndiqni në këtë tutorial...

Keni një zonë në tuaj Site Web për të shfaqur punën tuaj është e rëndësishme. Nëse jeni stilist, mund të krijoni disa projekte në tuaj Site Web WordPress për të treguar konceptet tuaja. Nëse jeni një ndërtues markash, mund të përdorni një portofol për të shfaqur punën tuaj. Për më tepër, ne mund të shkojmë edhe më tej dhe të shtojmë kategori të ndryshme për projektet tona. Eshte ketu çfarë bën moduli i portofolit të filtruar të Divi? .

Me këtë modul, ne jemi në gjendje të shfaqim punën tonë të palodhur në një mënyrë të lehtë dhe të organizuar. 

Në tutorialin e sotëm, ne do të personalizojmë elementet individuale të rrjetit të modulit të Portofolit të Filterueshëm. Ne do të përdorim paraqitjet nga paketat e paraqitjes falas Konferenca e Divi et Divi Online Instruktor Yoga ofrohet me çdo blerje të Divi . 

Si me gjithçka rreth Divi, ne kemi mundësinë ta personalizojmë këtë modul për t'iu përshtatur nevojave dhe dëshirave tona. Megjithatë, para se të futemi në stil, le të mësojmë pak më shumë rreth modulit.

Çfarë është moduli i Portofolit të Filterueshëm të Divi?

Projektet janë pjesë e një lloji postimi të personalizuar që funksionon njësoj si postimet. Mund t'i gjeni në pultin tuaj të WordPress.

Këtu do të krijoni projektet tuaja individuale që do të mbushin modulin tuaj të Portofolit të Filterueshëm. Moduli na jep dy mënyra për të treguar projektet tona: në një format rrjeti ou në një format me gjerësi të plotë. Për ne, ne do të përdorim dhe personalizojmë formatin e rrjetit. 

Me modulin Portofoli i Filterueshëm, ne do të jemi në gjendje të prezantojmë projektet tona më të fundit. Përdoruesit e faqes sonë do të shohin një shirit filtri në krye të rrjetit të portofolit tonë. Nga atje, ata mund të shfletojnë nëpër kategoritë e ndryshme të portofolit që ne lejojmë të shfaqen në modul.

Këtu është një shembull i konfigurimit të rrjetit të modulit me disa projekte mostër:

Zonat që duhen marrë parasysh kur krijoni portofolin e filtruar të Divi

Si të gjithë modalitetet Divi, moduli Portofoli i Filterueshëm vjen me një sërë veçorish që mund t'i përshtatim sipas nevojave dhe dëshirave tona. Kështu, shumica e veçorive që vijnë me modulin mund të modifikohen në skedën Projektimi nga modali i cilësimeve të modulit. Ne mund të modifikojmë fushat e mëposhtme dhe më shumë:

• Titulli i Projektit
• Kategoria e projektit
• skicë në libra
• Filtro tekstin
• Miniatura në lëvizje
• Numër faqesh

Kjo nuk është një listë e plotë, dhe ne as që kemi filluar të flasim se si CSS shtoi personalizime më të thella në këtë modul!

Si do të personalizojmë modulin e portofolit të filtruar të Divi

Siç u përmend më herët, për këtë tutorial do të përdorim dy paraqitje: Konferenca e Divi et Divi Online Instruktor Yoga. Më poshtë mund të merrni një pasqyrë të punës që do të bëjmë gjatë këtij tutoriali.

Rregullimi i elementeve të paraqitjes së "Konferencës Divi".

Rregullimi i elementeve të paraqitjes "Divi Online Yoga Instructor".

Ju mund t'i shkarkoni lehtësisht të dy paraqitjet nga Divi Ndërtues. 

Tani le të fillojmë!

Shiko gjithashtu: Divi: Zgjidhni midis rrjetit dhe paraqitjes me gjerësi të plotë të modulit të Portofolit të Filterueshëm

Përshtatja e modulit të portofolit të filtruar të Divi: "Edicioni i Konferencës Divi"

Së pari, do të na duhet të instalojmë shabllonin e faqes së ngjarjeve nga Paketa e Paraqitjes së Konferencës Divi. Pas krijimit të faqes tuaj të re në WordPress dhe aktivizimit të Divi Builder, ne do të hyjmë në Bibliotekën Divi.

Hyni në Bibliotekën e Divi Layout

Klikoni në ikonën « Ngarkoni nga Biblioteka për të hyrë në Bibliotekën Divi Layout

Gjeni paraqitjen në Bibliotekën Divi Layout

Duke përdorur funksionin e kërkimit në bibliotekën e paraqitjes së Divi, kërkim disponimi " Faqja e ngjarjes së konferencës".

Instaloni paraqitjen

Pasi të keni zgjedhur paraqitjen, klikoni " Përdorni këtë paraqitje për të instaluar paraqitjen në faqen tuaj.

Hiq dhe zëvendëso modulin e imazhit

Ne do të heqim modulin e imazhit të paraqitur më poshtë për të krijuar vend për modulin e Portofolit të Filterueshëm që do të personalizojmë. Klikoni në " Fshij pasi rri pezull mbi imazhin për të fshirë foton.

Fut modulin e portofolit të filtruar të Divi

Me modulin e imazhit të hequr, tani mund të krijojmë vend për modulin tonë të Portofolit të Filterueshëm. Ne do të klikojmë në ikonën " Shto modul (shenja plus gri), më pas zgjidhni modulin në kutinë modale të modulit që shfaqet.

Përcaktimi i numrit të postimeve dhe paraqitjes së portofolit

Si parazgjedhje, ky modul do të prezantojë punën tuaj në një kolonë të vetme. Megjithatë, ne do të përdorim paraqitjen e rrjetit e cila vjen si parazgjedhje me 4 kolona. 

Si i tillë, ju rekomandojmë të zgjidhni një shumëfish prej 4 (4, 8, 12, 16, etj.) si numrin e postimeve për portofolin tuaj. 

Për këtë tutorial, ne do të përdorim 12 projekte në rrjetin tonë.

Filloni të personalizoni portofolin e filtruar të Divi: Titulli dhe Meta Text

Tani që projektet tona shfaqen në një rrjet, le të lidhim disa nga elementët e dizajnit të shabllonit tonë të zgjedhur. Në këtë rast, ne do të përdorim stilin e dhënë me Paketën e Paraqitjes së Konferencës Divi në modulin tonë të ri.

Stili i tekstit

• Rreshtimi i tekstit: në qendër
• Ngjyra e tekstit: E errët

Stili i tekstit të titullit

• Niveli i titullit: H2
• Fonti i titullit: Krona One
• Ngjyra e tekstit: #000000

Stili i tekstit meta

• Fonti Meta: i parazgjedhur (Open Sans)
• Ngjyra e meta tekstit: #ff6651

Tani që kemi stilin tonë në vend për titujt në rrjetin e portofolit, le të bëjmë disa ndryshime në formën aktuale të vetë miniaturave të projektit.

Ndrysho kufirin e miniaturës së projektit dhe qoshet e rrumbullakosura

Në paketën tonë Divi Conference Layout, ne përdorim një kombinim unik të qosheve të rrumbullakosura për t'i dhënë një formë unike disa prej kornizave kyçe në paketë. Le ta zbatojmë këtë stil në miniaturat e modulit tonë.

Imazh

• foto:
  • Këndet e rrumbullakosura: 50px 50px 50px 0px
  • Stilet e kufirit: të gjitha
  • Gjerësia e kufirit: 3 px
  • Ngjyra: #000000
  • Stili i kufirit: i fortë

Kjo do t'u japë miniaturave një formë që përputhet me pjesën tjetër të imazheve të tjera në paketën e paraqitjes.

Personalizimi i mbivendosjes Hover

Le të shkojmë një hap më tej me stilin tonë dhe të bëjmë një ndryshim të vogël në mbivendosjen e paracaktuar që vjen me këtë modul. Ne do të ndryshojmë ngjyrën si dhe ikonën që përdoret menjëherë jashtë kutisë.

mbivendosje

• Ngjyra e ikonës së zmadhimit: #bcf5fd
• Ngjyra e mbivendosjes së pezullimit: #ff6651
• Zgjedhësi i ikonës së pezullimit: Zmadhimi

Siç mund ta shihni tani, ne kemi shtuar ngjyrat e markës për këtë paraqitje në mbivendosje, si dhe kemi ndryshuar ikonën që Divi ofron si parazgjedhje për veçorinë e mbivendosjes në lëvizje në këtë modul.

Përshtatja e faqes

Tani do të fillojmë të përdorim copa të vogla të CSS për të shtuar personalizim shtesë në modulin tonë të Portofolit të Filterueshëm. Së pari, ne do të personalizojmë faqet e këtij moduli. Më pas, do të heqim kufirin që shfaqet sipër tij me një rresht të vetëm CSS

Teksti i faqezimit

• Pagination:
  • Fonti: Krona One
  • Rreshtimi i tekstit: në qendër
  • Ngjyra e tekstit: #ff6651, #000000 (Hover)

Për CSS-në tonë, ne do të kalojmë në skedën Avancuar të modulit tonë. Së dyti, ne do të klikojmë në skedën CSS e personalizuar. Më pas, do të fusim copën e kodit të mëposhtëm për të hequr kufirin sipër faqes sonë, duke i dhënë një pamje më të pastër.

Faqerojtje e portofolit

border-top: 0px;

Përdorimi i Cilësimeve Divi dhe CSS për të personalizuar tekstin e filtrit

Për tekstin e filtrit, ne do ta ngremë atë në një nivel. Ne do të përdorim CSS për të ndryshuar sfondin si dhe efektet hover. 

Ne duam të kemi një vazhdimësi të përsosur midis modulit të sapo shtuar dhe stilit të paketës së paraqitjes. Së pari, le të futim cilësimet tona Divi për fontin.

Teksti i kritereve të filtrit

• Kriteret e filtrit:
  • Fonti: Krona One
  • Ngjyra e shkronjave: #ffffff, #000000 (Hover)

Siç qëndron, filtri ynë duket se është zhdukur. Në të vërtetë, në gjendjen e tij të paracaktuar, është tekst i bardhë në një sfond të bardhë. Megjithatë, ne do ta ndryshojmë këtë me CSS të personalizuar në dy vende. 

Së pari, ne do të shtojmë një fragment CSS në cilësimet e faqes që do të shtojë një sfond në tekstin e filtrit. Së dyti, ne do të personalizojmë filtrin aktiv të portofolit duke përdorur skedën Avancuar du modul.

Për të hyrë cilësimet e faqes, klikoni tre pikat në mes të ekranit. ensuite, zgjidhni ikonën e ingranazheve e cila do të hapë cilësimet e faqes. Pastaj ju lundroni te skeda CSS e personalizuar dhe futni sa vijon për të shtuar një sfond në tekstin e filtrit.

Custom CSS

Në këtë fragment CSS, ne synojmë ngjyrën e sfondit të filtrit. Ne gjithashtu synojmë dhe stilojmë gjendjen e tij të pezullimit. Më pas në rendin e ditës, le të shtojmë disa CSS të tjera në modul dhe të theksojmë skedën tonë të Filtrit aktiv.

/* 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;
}

Stili aktiv i skedës së filtrit të portofolit

Skeda aktive e fportofoli ilter tërheq vëmendjen e përdoruesve në kategorinë aktuale të portofolit që ata po vizitojnë. Aktualisht ky filtër ka tekst të bardhë dhe sfond të lehtë. 

Ne do të shkojmë në skedën Avancuar të modulit Portofoli i Filterueshëm dhe shtoni tekst në gjendjet e parazgjedhur dhe pezullimin e këtij funksioni. Këtu janë vetitë CSS që do të shtojmë në një gjendje të paracaktuar:

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

Gjendja në pezullim

Kur rri pezull, ne do ta ndryshojmë sfondin në të zezë.

color: #000000!important;

Pamja përfundimtare e dizajnit të portofolit të filtruar të Divi me "Divi Conference"

Këtu është pamja përfundimtare!

Dhe tani, ja si duket kur rri pezull!

Personalizimi i modulit të portofolit të filtruar të Divi: "Instruktori i Yogas Divi Online"

Ashtu si me Edicionin e Konferencës Divi, gjeni paraqitjen tuaj në Paketën e Paraqitjes së Instruktorëve të Yoga Online brenda Divi Builder. 

Ne do të përdorim paraqitjen e faqes së uljes për këtë tutorial. Lëvizni poshtë te seksioni Klasat e seksionit me titullin Seksioni Të gjitha klasat e ardhshme.

Futja e modulit Portofoli i Filterueshëm

Nga këtu, ne do të heqim rreshtat me klasat. Klikoni në ikonën e purpurt me tre pika mbi të . Pastaj, zgjidhni pamjen e kornizës. Më në fund, do të fshini dy rreshtat që përmbajnë tre kolona.

Pastaj do t'i zëvendësojmë me një kolonë të vetme në rreshtin brenda. Më pas, ne do të shtojmë modulin tonë të Portofolit të Filterueshëm.

Si në shembullin e mëparshëm, ne do të përdorim paraqitjen e rrjetit për këtë modul me një shumëfish të 4 për numrin e postimeve. 

Tani le të bëjmë diçka pak më ndryshe me informacionin që paraqesim në hartë. 

Në skedë Përmbajtja, lundroni te elementet dhe çaktivizoni Shfaq Kategoritë . Kjo do të thotë që moduli Portofoli do të shfaqë vetëm emrin e projektit pa emrin e kategorisë në të cilën ndodhet.

Përshtatja e tekstit të kritereve të filtrit, titullit të projektit dhe tekstit të faqes

Le të përcaktojmë bazën e stilit për pjesët e tekstit të modulit tonë. Teksti i trupit të kësaj paraqitjeje është Sans Hapur dhe fonti i përdorur për titujt kryesorë është Daltë. Prandaj, ne do të përdorim një kombinim të këtyre dy shkronjave gjatë gjithë procesit të stilimit.

Tekst

• Rreshtimi i tekstit: në qendër
• Ngjyra e tekstit: e lehtë

Teksti i titullit

• Fonti i titullit: Cinzel
• Ngjyra e tekstit të titullit: #ffffff

Filtro tekstin e kritereve

• Kriteret e filtrit Pesha e shkronjave: Bold
• Teksti i kriterit të filtrit Ngjyra: #ffffff

Teksti i faqezimit

• Pesha e shkronjave të faqes: Bold

Kështu duket tani moduli ynë i portofolit të filtruar. Nuk është shumë, por po arrijmë ngadalë!

Krijo një mbivendosje të tejdukshme të pezullimit

Le të marrim frymëzim nga modulet e ndryshme dhe gradientët e bukur në këtë paraqitje. Për këtë, ne do të krijojmë një mbivendosje të tejdukshme të pezullimit dhe do të personalizojmë ikonën që shfaqet gjithashtu në lëvizje.

• Ngjyra e ikonës së zmadhimit: #323741
• Ngjyra e mbivendosjes së pezullimit: rgba (255 201 165, 0,85)
• Zgjedhësi i ikonave rri pezull: kërkoni për një fletë dhe shikoni ikonën e mësipërme

Shtimi i kufirit në elementët e rrjetit të portofolit me CSS të personalizuar

Ngjashëm me shembullin tonë të parë, tani do të përdorim CSS për të shtuar më shumë interes për modulin tonë të Portofolit të Filterueshëm. 

Tani do të shtojmë një kufi rreth çdo artikulli individual në rrjetin e portofolit. Përdorni fragmentin CSS më poshtë në pjesën e personalizuar të CSS të cilësimeve të faqes për të shtuar kufirin tonë. 

Ne gjithashtu do të përdorim "border" si klasë CSS për këtë modul.

• Klasa CSS: kufiri

Custom CSS

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

Këtu tani kemi modulin tonë të portofolit të filtruar me një kufi të bukur - dhe mbushje - rreth çdo artikulli të rrjetit.

U shtua CSS në kufirin e stilimit të faqes

Ndryshe nga shembulli ynë i mëparshëm, le të shtojmë ngjyrë në kufirin e faqes sonë me CSS. Kjo do të shkojë edhe në zonë Cilësimet > Faqja e personalizuar CSS .

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

Kriteret e filtrit të stilit të tekstit

Ngjashëm me stilin e modulit tonë të Portofolit të Konferencës Divi, ne duam të shtojmë xhazin në filtrat e kategorive tona. Përsëri, ne duam të nxjerrim nga stili që është tashmë i pranishëm në shabllonin e ofruar për ne. 

Këtu është CSS që do të shtojmë në seksionin tonë të personalizuar CSS për të synuar sfondin dhe rri pezull në shiritin tonë të filtrit.

/* 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;
}

Me këto dy shtesa të reja në CSS-në tonë të personalizuar, kjo është se si po duket moduli ynë i Portofolit të Filterueshëm.

Sidoqoftë, vini re se si humbet filtri aktiv i portofolit. Gjithmonë ka një sfond të lehtë me tekst të bardhë mbi të. Le të shkojmë te cilësimet e modulit dhe të shtojmë disa CSS për ta ndryshuar atë.

Custom CSS

Filtri aktiv i portofolit:

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

Hiq animacionin e modulit

Për të ofruar një përvojë më të pastër, ne do të heqim animacionin e paracaktuar që vjen me modulin Portofoli i Filterueshëm. Për këtë, së pari do të na duhet të kthehemi në cilësimet e faqes sonë dhe të shtojmë disa CSS që do të synojnë elementët e rrjetit të portofolit dhe do të heqin tranzicioni rrëshqitës që ndodh jashtë kutisë.

Custom CSS

/* 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;
}

Lexo gjithashtu: Divi: Si të ndryshoni numrin e kolonave në një blog

Ndryshoni rrjetin e portofolit nga katër kolona në tre

Shtesa jonë e fundit CSS do të jetë transformimi i modulit tonë të Portofolit të Filterueshëm nga katër në tre kolona. Kjo do të na japë më shumë hapësirë ​​për të parë projektet tona. 

Gjithashtu, ne do të shtojmë një linjë shtesë në modulin tonë. Do të gjeni gjithashtu fragmentin më të fundit CSS që mund të përdorni për të konvertuar kolonat tuaja.

Custom CSS

Për këtë fragment të fundit, ne do të shtojmë ID-në CSS #rrjet me tre kolona në modulin tonë. Ne do ta mbajmë ende të paprekur klasën tonë CSS nga më parë.

/* 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;
}
}

Shkarkoni DIVI tani!!!

Përfundim

Ashtu si me shumicën e moduleve Divi, cilësimet që vijnë me Divi mund të zhvillohen më tej me CSS. Shfaqja e punës suaj është një pjesë e rëndësishme e drejtimit të një biznesi, blogu ose marke në internet. 

Si e tillë, të kesh një mënyrë të organizuar për të shfaqur punën tënde është thelbësore. Fitoni këshilla që u ndanë sot për të marrë pjesë në udhëtimin tuaj të dizajnit të modulit të Portofolit të Filterueshëm të Divi.

Shpresojmë që kjo teknikë të shtojë një aftësi tjetër të dobishme të projektimit për projektet e ardhshme.

Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.

Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.

Mos hezitoni të konsultoheni edhe me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...