Gusto mo bang malaman kung paano i-customize ang mga elemento ng grid ng Filterable Portfolio module ng Divi ? Sundan kami sa tutorial na ito...
Magkaroon ng zone sa iyong Website upang ipakita ang iyong trabaho ay mahalaga. Kung ikaw ay isang stylist, maaari kang lumikha ng ilang mga proyekto sa iyong Website WordPress upang ipakita ang iyong mga konsepto. Kung ikaw ay isang tagabuo ng tatak, maaari kang gumamit ng isang portfolio upang ipakita ang iyong gawa. Higit pa rito, maaari pa tayong pumunta nang higit pa at magdagdag ng iba't ibang kategorya para sa ating mga proyekto. Nandito na ano ang ginagawa ng Filterable Portfolio module ng Divi? .
Sa modyul na ito, naipapakita namin ang aming pagsusumikap sa madali at organisadong paraan.
Sa tutorial ngayon, iko-customize namin ang mga indibidwal na elemento ng grid ng Filterable Portfolio module. Gagamit kami ng mga layout mula sa mga libreng layout pack Divi Conference et Divi Online Yoga Instructor ibinibigay sa bawat pagbili ng Divi .
Tulad ng lahat ng tungkol sa Divi, may kakayahan kaming i-customize ang modyul na ito upang umangkop sa aming mga pangangailangan at kagustuhan. Gayunpaman, bago tayo pumasok sa pag-istilo, matuto pa tayo ng kaunti pa tungkol sa module.
Ano ang Filterable Portfolio module ng Divi?
Ang mga proyekto ay bahagi ng isang pasadyang uri ng post na gumagana katulad ng mga post. Maaari mong mahanap ang mga ito sa iyong WordPress dashboard.
Dito ka lilikha ng iyong mga indibidwal na proyekto na magpupuno sa iyong Filterable Portfolio module. Ang module ay nagbibigay sa amin ng dalawang paraan upang ipakita ang aming mga proyekto: sa isang grid format ou sa isang full-width na format. Para sa amin, gagamitin at iko-customize namin ang format ng grid.
Gamit ang Filterable Portfolio module, magagawa naming ipakita ang aming pinakabagong mga proyekto. Makakakita ang mga user ng aming site ng filter bar sa tuktok ng aming portfolio grid. Mula doon, maaari silang mag-browse sa iba't ibang kategorya ng portfolio na pinapayagan naming ipakita sa module.
Narito ang isang halimbawa ng pagsasaayos ng grid ng module na may ilang sample na proyekto:
Mga lugar na dapat isaalang-alang kapag gumagawa ng na-filter na portfolio ng Divi
Tulad ng lahat ng mods Divi, ang Filterable Portfolio module ay may kasamang ilang feature na maaari naming i-customize sa aming mga pangangailangan at kagustuhan. Kaya, karamihan sa mga tampok na kasama ng module ay maaaring mabago sa tab Disenyo mula sa mod ng mga setting ng module. Maaari naming i-edit ang mga sumusunod na lugar at higit pa:
- Pamagat ng proyekto
- Kategorya ng proyekto
- Vignette
- I-filter ang text
- Thumbnail sa hover
- Pagbilang ng pahina
Hindi ito kumpletong listahan, at hindi pa kami nagsimulang mag-usap tungkol sa kung paano nagdagdag ang CSS ng mas malalim na mga pagpapasadya sa modyul na ito!
Paano namin iko-customize ang Filterable Portfolio module ng Divi
Gaya ng nabanggit kanina, para sa tutorial na ito ay gagamit kami ng dalawang layout: Divi Conference et Divi Online Yoga Instructor. Sa ibaba maaari kang makakuha ng pangkalahatang-ideya ng gawaing gagawin namin sa panahon ng tutorial na ito.
Pag-aayos ng mga elemento ng layout ng "Divi Conference".
Pag-aayos ng mga elemento ng layout ng "Divi Online Yoga Instructor".
Madali mong mada-download ang parehong mga layout mula sa Divi Tagabuo.
Ngayon magsimula tayo!
Tingnan din: Divi: Pumili sa pagitan ng grid at full-width na layout ng Filterable Portfolio module
Pag-customize ng Filterable Portfolio module ng Divi: "Divi Conference Edition"
Una, kakailanganin naming i-install ang template ng page ng kaganapan mula sa Divi Conference Layout Pack. Pagkatapos gawin ang iyong bagong page sa WordPress at i-activate ang Divi Builder, papasok kami sa Divi Library.
Ipasok ang Divi Layout Library
Mag-click sa icon « Mag-load Mula sa Library upang makapasok sa Divi Layout Library
Hanapin ang layout sa Divi Layout Library
Gamit ang function ng paghahanap sa layout library ng Divi, maghanap ang disposisyon" Pahina ng Kaganapan ng Kumperensya".
I-install ang layout
Kapag napili mo na ang layout, i-click ang " Gamitin ang Layout na Ito upang i-install ang layout sa iyong pahina.
Alisin at Palitan ang Image Module
Aalisin namin ang module ng Imahe na ipinapakita sa ibaba upang bigyang puwang ang module ng Filterable Portfolio na iko-customize namin. Mag-click sa " alisin pagkatapos mag-hover sa larawan upang tanggalin ang larawan.
Ipasok ang Filterable Portfolio module ng Divi
Sa pamamagitan ng pag-alis ng module ng Imahe, maaari na tayong magbigay ng puwang para sa aming Module ng Na-filter na Portfolio. Mag-click kami sa icon na " Magdagdag ng Module (ang gray na plus sign), pagkatapos ay piliin ang module sa module modal box na lalabas.
Pagtatakda ng bilang ng mga post at layout ng portfolio
Bilang default, ipapakita ng module na ito ang iyong gawa sa isang column. Gayunpaman, gagamitin namin ang layout ng grid na nagmumula bilang default na may 4 na column.
Dahil dito, inirerekomenda namin ang pagpili ng multiple ng 4 (4, 8, 12, 16, atbp.) bilang bilang ng mga post para sa iyong portfolio.
Para sa tutorial na ito, gagamit kami ng 12 proyekto sa aming grid.
Simulan ang pag-customize ng na-filter na portfolio ng Divi: Pamagat at Meta Text
Ngayon na ang aming mga proyekto ay ipinapakita sa isang grid, i-link natin ang ilan sa mga elemento ng disenyo ng aming napiling template. Sa kasong ito, gagamitin namin ang istilong ibinigay kasama ng Divi Conference Layout Pack sa aming bagong module.
Estilo ng text
- Paghahanay ng Teksto: Nakagitna
- Kulay ng Teksto: Madilim
Istilo ng teksto ng pamagat
- Antas ng Pamagat ng Pamagat: H2
- Font ng Pamagat : Krona One
- Kulay ng Teksto: #000000
Meta text style
- Meta Font: Default (Open Sans)
- Kulay ng Meta Text: #ff6651
Ngayong nailagay na natin ang ating istilo para sa mga pamagat sa portfolio grid, gumawa tayo ng ilang pagbabago sa aktwal na hugis ng mga thumbnail ng proyekto mismo.
Baguhin ang hangganan ng thumbnail ng proyekto at mga bilugan na sulok
Sa aming Divi Conference Layout pack, gumagamit kami ng kakaibang kumbinasyon ng mga bilugan na sulok upang magbigay ng kakaibang hugis sa ilan sa mga keyframe sa pack. Ilapat natin ang istilong ito sa mga thumbnail ng ating module.
Imahen
- Imahe:
- Mga Bilog na Sulok: 50px 50px 50px 0px
- Mga Estilo ng Border: lahat
- Lapad ng Border: 3px
- Kulay: #000000
- Estilo ng Border: solid
Bibigyan nito ang aming mga thumbnail ng hugis na tumutugma sa iba pang mga larawan sa layout pack.
Pag-customize sa Hover Overlay
Pumunta pa tayo ng isang hakbang sa ating pag-istilo at gumawa ng kaunting pagbabago sa default na overlay na kasama ng module na ito. Papalitan namin ang kulay pati na rin ang icon na ginamit sa labas ng kahon.
Superposisyon
- Kulay ng Icon ng Zoom: #bcf5fd
- Kulay ng Hover Overlay: #ff6651
- Tagapili ng Icon ng Hover: Mag-zoom
Gaya ng nakikita mo na ngayon, idinagdag namin ang mga kulay ng brand para sa layout na ito sa overlay, pati na rin binago ang icon na ibinibigay ng Divi bilang default para sa tampok na overlay sa hover sa module na ito.
Pagpapasadya ng pagination
Magsisimula na kaming gumamit ng maliliit na snippet ng CSS upang magdagdag ng karagdagang pag-customize sa aming Filterable Portfolio module. Una, iko-customize natin ang pagination ng modyul na ito. Susunod, aalisin namin ang hangganan na lumilitaw sa itaas nito gamit ang isang linya ng CSS
Teksto ng pagbilang ng pahina
- Pagination:
- Font: Krona One
- Text Alignment: nakagitna
- Kulay ng Teksto: #ff6651, #000000 (Mag-hover)
Para sa aming CSS, lilipat kami sa tab Advanced ng aming modyul. Pangalawa, mag-click kami sa tab Custom na CSS. Susunod, ilalagay namin ang sumusunod na snippet ng code upang alisin ang hangganan sa itaas ng aming pagination, na bibigyan ito ng mas malinis na hitsura.
Pagbilang ng Portfolio
border-top: 0px;
Paggamit ng Mga Setting ng Divi at CSS upang I-customize ang Teksto ng Filter
Para sa filter na text, pataasin natin ito. Gagamitin namin ang CSS upang baguhin ang background pati na rin ang mga hover effect.
Gusto naming magkaroon ng perpektong pagpapatuloy sa pagitan ng bagong idinagdag na module at ang istilo ng layout pack. Una, ipasok natin ang aming mga setting ng Divi para sa font.
I-filter ang Teksto ng Pamantayan
- Pamantayan sa Filter:
- Font: Krona One
- Kulay ng Font: #ffffff, #000000 (Mag-hover)
Habang nakatayo, ang aming filter ay tila nawala. Sa katunayan, sa default na estado nito, ito ay puting teksto sa isang puting background. Gayunpaman, babaguhin namin ito gamit ang custom na CSS sa dalawang lugar.
Una, magdaragdag kami ng CSS snippet sa mga setting ng page na magdaragdag ng background sa text ng filter. Pangalawa, iko-customize namin ang aktibong filter ng portfolio gamit ang tab Advanced ng modyul.
Sa pag-access mga setting ng pahina, i-click ang tatlong tuldok sa gitna ng screen. pagkatapos piliin ang icon ng gear na magbubukas ng mga setting ng pahina. Tapos ikaw mag-navigate sa tab na Custom CSS at ilagay ang sumusunod upang magdagdag ng background sa filter na text.
Pasadyang CSS
Sa CSS snippet na ito, tina-target namin ang kulay ng background ng filter. Tina-target din namin at ini-istilo ang estado ng hover nito. Susunod sa agenda, magdagdag pa tayo ng ilang CSS sa module at i-highlight ang aming tab na Active Filter.
/* 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;
}
Portfolio filter aktibong tab na istilo
Ang aktibong tab ng fportfolio ilter nakakakuha ng atensyon ng mga user sa kasalukuyang kategorya ng portfolio na binibisita nila. Sa kasalukuyan, ang filter na ito ay may puting text at maliwanag na background.
Pupunta tayo sa tab Advanced ng Filterable Portfolio module at magdagdag ng text sa default at hover states ng feature na ito. Narito ang mga katangian ng CSS na idaragdag namin sa isang default na estado:
background: #ff6651;
color: #ffffff !important;
Estado sa hover
Sa pag-hover, babaguhin natin ang background sa itim.
color: #000000!important;
Panghuling hitsura ng disenyo ng na-filter na portfolio ng Divi na may "Divi Conference"
Narito ang huling hitsura!
At ngayon, narito ang hitsura kapag nag-hover ka!
Pag-customize ng Divi's Filterable Portfolio module: "Divi Online Yoga Instructor"
Tulad ng Divi Conference Edition, hanapin ang iyong layout sa Online Yoga Instructor Layout Pack sa loob ng Divi Builder.
Gagamitin namin ang Layout ng Landing Page para sa tutorial na ito. Mag-scroll pababa sa seksyong Mga Klase ng Seksyon na may pamagat na Seksyon Lahat ng Paparating na Klase.
Paglalagay ng Filterable Portfolio module
Mula dito, aalisin namin ang mga row na may mga klase. Mag-click sa purple na icon na may tatlong tuldok dito . Pagkatapos, piliin ang view ng wireframe. Sa wakas, tatanggalin mo ang dalawang row na naglalaman ng tatlong column.
Pagkatapos ay papalitan namin ang mga ito ng isang haligi sa hilera sa loob. Pagkatapos, idaragdag namin ang aming Filterable Portfolio module.
Tulad ng sa nakaraang halimbawa, gagamitin namin ang layout ng grid para sa module na ito na may maramihang 4 para sa bilang ng mga post.
Ngayon gumawa tayo ng isang bagay na medyo naiiba sa impormasyong ipinakita namin sa mapa.
Sa tab nilalaman, mag-navigate sa Item at alisin sa pagkakapili Ipakita ang Mga Kategorya . Nangangahulugan ito na ang module ng Portfolio ay magpapakita lamang ng pangalan ng proyekto nang walang pangalan ng kategorya kung nasaan ito.
Pag-customize ng teksto ng pamantayan ng filter, pamagat ng proyekto at teksto ng pagination
Tukuyin natin ang base ng istilo para sa mga bahagi ng teksto ng ating module. Ang body text ng layout na ito ay Buksan Sans at ang font na ginamit para sa mga pangunahing heading ay pait. Samakatuwid, gagamit kami ng kumbinasyon ng dalawang font na ito sa buong proseso ng pag-istilo.
Teksto
- Paghahanay ng Teksto: Nakagitna
- Kulay ng Teksto: Banayad
Teksto ng pamagat
- Font ng Pamagat : Cinzel
- Kulay ng Teksto ng Pamagat: #ffffff
I-filter ang teksto ng pamantayan
- Pamantayan ng Filter Timbang ng Font: Bold
- Kulay ng teksto ng Pamantayan ng Filter: #ffffff
Teksto ng pagbilang ng pahina
- Timbang ng Font ng Pagbilang ng pahina: Bold
Ito ang hitsura ng aming na-filter na portfolio module sa ngayon. Ito ay hindi gaanong, ngunit kami ay nakakarating doon nang dahan-dahan!
Gumawa ng translucent hover overlay
Kumuha tayo ng inspirasyon mula sa iba't ibang mga module at magagandang gradient sa layout na ito. Para dito, gagawa kami ng translucent hover overlay at iko-customize ang icon na lalabas din sa hover.
- Kulay ng Icon ng Zoom: #323741
- Kulay ng Hover Overlay: rgba (255 201 165, 0,85)
- Hover Icon Picker: maghanap ng sheet at tingnan ang icon sa itaas
Pagdaragdag ng hangganan sa mga elemento ng grid ng portfolio na may custom na CSS
Katulad ng aming unang halimbawa, gagamitin na namin ngayon ang CSS upang magdagdag ng higit pang interes sa aming Filterable Portfolio module.
Ngayon ay magdaragdag kami ng hangganan sa paligid ng bawat indibidwal na item sa portfolio grid. Gamitin ang CSS snippet sa ibaba sa custom na CSS na bahagi ng mga setting ng page upang idagdag ang aming hangganan.
Gagamitin din namin ang "border" bilang CSS class para sa modyul na ito.
- CSS Class: hangganan
Pasadyang CSS
/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}
Narito na ang aming Filterable Portfolio module na may magandang border – at padding – sa paligid ng bawat grid item.
Idinagdag ang CSS sa border ng pagination ng istilo
Hindi tulad ng aming nakaraang halimbawa, magdagdag tayo ng kulay sa hangganan ng ating pagination gamit ang CSS. Pupunta rin ito sa lugar Mga Setting > Custom na CSS page .
/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}I-filter ang pamantayan sa istilo ng teksto
Katulad ng estilo ng aming Divi Conference Portfolio module, gusto naming magdagdag ng jazz sa aming mga filter ng kategorya. Muli, gusto naming gumuhit mula sa istilo na naroroon na sa template na ibinigay sa amin.
Narito ang CSS na idaragdag namin sa aming custom na CSS na seksyon upang i-target ang background at hover ng aming filter bar.
/* 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;
}Sa dalawang bagong dagdag na ito sa aming custom na CSS, ito ang hinuhubog ng aming Filterable Portfolio module.
Gayunpaman, pansinin kung paano nawala ang aktibong filter ng portfolio. Palagi itong may maliwanag na background na may puting text. Pumunta tayo sa mga setting ng module at magdagdag ng ilang CSS upang baguhin iyon.
Pasadyang CSS
Aktibong portfolio na filter:
background: #ffffff;
color: #323741 !important;
Alisin ang animation ng module
Para makapagbigay ng mas malinis na karanasan, aalisin namin ang default na animation na kasama ng Filterable Portfolio module. Para dito kakailanganin muna naming bumalik sa aming mga setting ng page at magdagdag ng ilang CSS na magta-target sa mga elemento ng grid ng portfolio at mag-alis ng sliding transition na nangyayari sa labas ng kahon.
Pasadyang 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;
}Basahin din ang: Divi: Paano baguhin ang bilang ng mga column sa isang Blog
Baguhin ang portfolio grid mula sa apat na column hanggang tatlo
Ang aming pinakabagong karagdagan sa CSS ay ang pagbabago ng aming Filterable Portfolio module mula sa apat na column patungo sa tatlo. Ito ay magbibigay sa amin ng mas maraming puwang upang makita ang aming mga proyekto.
Gayundin, magdaragdag kami ng karagdagang linya sa aming module. Makikita mo rin ang pinakabagong snippet ng CSS na magagamit mo para i-convert ang iyong mga column.
Pasadyang CSS
Para sa huling snippet na ito, idaragdag namin ang CSS ID #three-column-grid sa aming modyul. Papanatilihin pa rin namin ang aming klase ng CSS bago buo.
/* 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;
}
}
I-download ang DIV ngayon!!!
Konklusyon
Tulad ng karamihan sa mga module ng Divi, ang mga setting na kasama ng Divi ay maaaring higit pang mabuo gamit ang CSS. Ang pagpapakita ng iyong gawa ay isang mahalagang bahagi ng pagpapatakbo ng isang online na negosyo, blog, o brand.
Dahil dito, ang pagkakaroon ng isang organisadong paraan upang ipakita ang iyong gawa ay mahalaga. Makakuha ng mga tip na ibinahagi ngayon para makilahok sa sarili mong paglalakbay sa disenyo ng Filterable Portfolio module ng Divi.
Sana ang diskarteng ito ay magdaragdag ng isa pang kapaki-pakinabang na kasanayan sa disenyo para sa mga proyekto sa hinaharap.
Umaasa kami na ang tutorial na ito ay magbibigay inspirasyon sa iyo para sa iyong mga susunod na proyekto ng Divi. Kung mayroon kang anumang mga alalahanin o mungkahi, hanapin kami sa ang seksyon ng mga komento upang talakayin ito.
Maaari ka ring kumonsulta aming mga mapagkukunan, kung kailangan mo ng maraming mga elemento upang maisagawa ang iyong mga proyekto ng paglikha ng mga site sa Internet.
Huwag mag-atubiling kumunsulta din sa aming gabay sa Paglikha ng blog ng WordPress o ang isa sa Divi: ang pinakamahusay na tema ng WordPress sa lahat ng oras.
Ngunit pansamantala, ibahagi ang artikulong ito sa iyong iba't ibang mga social network.
...
