Želite li znati kako prilagoditi elemente rešetke modula Filterable Portfolio od Divi ? Pratite nas u ovom tutorijalu...

Imajte zonu na sebi web stranica važno je prikazati svoj rad. Ako ste stilist, možete napraviti nekoliko projekata na svom web stranica WordPress da pokažete svoje koncepte. Ako ste graditelj robne marke, možete koristiti portfelj za izlaganje svog rada. Štoviše, možemo čak ići dalje i dodati različite kategorije za naše projekte. Ovdje je što radi modul Divi Filterable Portfolio? .

Pomoću ovog modula možemo prikazati svoj naporan rad na jednostavan i organiziran način. 

U današnjem vodiču prilagodit ćemo pojedinačne elemente rešetke modula Filterable Portfolio. Koristit ćemo izglede iz besplatnih paketa izgleda Divi konferencija et Divi online instruktor joge pruža se uz svaku kupnju Divi 

Kao i sa svim o Divi, imamo mogućnost prilagoditi ovaj modul kako bi odgovarao našim potrebama i željama. Međutim, prije nego što krenemo u stiliziranje, naučimo nešto više o modulu.

Što je modul Divi Filterable Portfolio?

Projekti su dio prilagođene vrste posta koji funkcionira isto kao i postovi. Možete ih pronaći na nadzornoj ploči WordPressa.

Ovdje ćete kreirati svoje pojedinačne projekte koji će popuniti vaš modul Filterable Portfolio. Modul nam daje dva načina za prikazivanje naših projekata: u formatu mreže ou u formatu pune širine. Za nas ćemo koristiti i prilagoditi format mreže. 

S modulom Filterable Portfolio moći ćemo predstaviti naše najnovije projekte. Korisnici naše stranice vidjet će traku s filtrima na vrhu mreže našeg portfelja. Odatle mogu pregledavati različite kategorije portfelja kojima dopuštamo prikaz u modulu.

Ovdje je primjer mrežne konfiguracije modula s nekim oglednim projektima:

Područja koja treba uzeti u obzir pri stvaranju Divi portfelja koji se može filtrirati

Kao i svi modovi Divi, modul Filterable Portfolio dolazi s nizom značajki koje možemo prilagoditi svojim potrebama i željama. Stoga se većina značajki koje dolaze s modulom mogu mijenjati u kartici dizajn iz modalnih postavki modula. Možemo urediti sljedeća područja i više:

  • Naziv projekta
  • Kategorija projekta
  • Vinjeta
  • Filtrirajte tekst
  • Sličica pri lebdenju
  • Obilježavanje strana

Ovo nije potpuni popis, a nismo ni počeli razgovarati o tome kako je CSS dodao dublje prilagodbe ovom modulu!

Kako ćemo prilagoditi modul Divi Filterable Portfolio

Kao što je ranije spomenuto, za ovaj vodič koristit ćemo dva izgleda: Divi konferencija et Divi online instruktor jogeU nastavku možete dobiti pregled posla koji ćemo obaviti tijekom ovog vodiča.

Raspored elemenata rasporeda "Divi Conference".

prilagodite elemente rešetke Divi modula Filterable Portfolio

Raspored elemenata izgleda "Divi Online Yoga Instructor".

prilagodite elemente rešetke Divi modula Filterable Portfolio

Oba izgleda možete jednostavno preuzeti s Divi Graditelj. 

Sada počnimo!

Vidi također: Divi: Odaberite između rešetkastog izgleda i rasporeda pune širine modula Filterable Portfolio

Prilagodba modula Divi Filterable Portfolio: "Divi Conference Edition"

Prvo ćemo morati instalirati predložak stranice događaja iz Divi Conference Layout Packa. Nakon što izradite svoju novu stranicu u WordPressu i aktivirate Divi Builder, ući ćemo u Divi knjižnicu.

Uđite u Divi Layout Library

Kliknite na ikonu « Učitaj iz biblioteke za ulazak u Divi Layout Library

Pronađite izgled u biblioteci Divi Layout Library

Koristeći funkciju pretraživanja u Divi biblioteci izgleda, u potrazi raspoloženje " Stranica događaja konferencije".

Izgled instalacije

Nakon što odaberete izgled, kliknite " Koristite ovaj izgled da instalirate izgled na svoju stranicu.

Uklonite i zamijenite modul slike

Uklonit ćemo modul slike prikazan u nastavku kako bismo napravili mjesta za modul portfelja koji se može filtrirati koji ćemo prilagoditi. Klikni na " Izbrisati nakon što zadržite pokazivač miša iznad slike kako biste je izbrisali.

Umetnite modul Divi Filterable Portfolio

S uklonjenim modulom Image, sada možemo napraviti mjesta za naš modul Filterable Portfolio. Kliknut ćemo na ikonu " Dodajte modul (sivi znak plus), zatim odaberite modul u modalnom okviru modula koji se pojavi.

Postavljanje broja objava i izgleda portfelja

Prema zadanim postavkama, ovaj će modul prikazati vaš rad u jednom stupcu. Međutim, koristit ćemo raspored mreže koji prema zadanim postavkama ima 4 stupca. 

Kao takav, preporučujemo da odaberete višestruki broj od 4 (4, 8, 12, 16, itd.) kao broj postova za svoj portfelj. 

Za ovaj vodič koristit ćemo 12 projekata u našoj mreži.

Počnite prilagođavati Divijev portfelj koji se može filtrirati: naslov i metatekst

Sada kada su naši projekti prikazani u mreži, povežimo neke od elemenata dizajna našeg odabranog predloška. U ovom slučaju, koristit ćemo stil koji je isporučen s Divi Conference Layout Packom u našem novom modulu.

Stil teksta

  • Poravnanje teksta: centrirano
  • Boja teksta: tamna

Stil teksta naslova

  • Razina naslova naslova: H2
  • Font naslova: Krona One
  • Boja teksta: #000000

Meta stil teksta

  • Meta font: Zadani (Open Sans)
  • Boja meta teksta: #ff6651

Sada kada smo postavili naš stil za naslove u rešetki portfelja, napravimo neke promjene u stvarnom obliku samih sličica projekta.

Promijenite okvir minijature projekta i zaobljene kutove

U našem Divi Conference Layout paketu koristimo jedinstvenu kombinaciju zaobljenih kutova kako bismo dali jedinstveni oblik nekim od ključnih okvira u paketu. Primijenimo ovaj stil na sličice našeg modula.

Slika

  • slika:
    • Zaobljeni uglovi: 50px 50px 50px 0px
    • Stilovi obruba: svi
    • Širina obruba: 3 px
    • Boja: #000000
    • Stil obruba: jednobojni

To će našim sličicama dati oblik koji odgovara ostalim slikama u paketu izgleda.

Prilagodba sloja za lebdenje

Idemo korak dalje s našim stilom i napravimo malu promjenu zadanog sloja koji dolazi s ovim modulom. Promijenit ćemo boju kao i ikonu koja se koristi odmah po vađenju iz kutije.

slaganje

  • Boja ikone za zumiranje: #bcf5fd
  • Boja sloja pri lebdenju: #ff6651
  • Birač ikona za lebdenje: zumiranje

Kao što sada možete vidjeti, dodali smo boje robne marke za ovaj izgled sloju, kao i promijenili ikonu koju Divi nudi prema zadanim postavkama za značajku sloja pri lebdenju u ovom modulu.

Prilagođavanje paginacije

Sada ćemo početi koristiti male isječke CSS-a kako bismo dodali dodatnu prilagodbu našem modulu Filterable Portfolio. Prvo ćemo prilagoditi paginaciju ovog modula. Zatim ćemo ukloniti obrub koji se pojavljuje iznad njega pomoću jednog retka CSS-a

Tekst paginacije

  • Paginacija:
    • Font: Krona One
    • Poravnanje teksta: centrirano
    • Boja teksta: #ff6651, #000000 (lebdeći)

Za naš CSS, prebacit ćemo se na karticu napredan našeg modula. Drugo, kliknut ćemo karticu Prilagođeni CSS. Zatim ćemo unijeti sljedeći isječak koda kako bismo uklonili obrub iznad naše stranice, dajući joj čišći izgled.

Paginacija portfelja

border-top: 0px;

Korištenje Divi postavki i CSS-a za prilagodbu teksta filtra

Što se tiče teksta filtra, malo ćemo ga podići. Koristit ćemo CSS za promjenu pozadine, kao i efekte lebdenja. 

Želimo imati savršen kontinuitet između novododanog modula i stila paketa izgleda. Prvo, unesite naše Divi postavke za font.

Tekst kriterija filtra

  • Kriteriji filtra:
    • Font: Krona One
    • Boja fonta: #ffffff, #000000 (lebdeći)

Kako sada stoji, čini se da je naš filter nestao. Doista, u zadanom stanju, to je bijeli tekst na bijeloj pozadini. Međutim, to ćemo promijeniti pomoću prilagođenog CSS-a na dva mjesta. 

Prvo ćemo dodati CSS isječak u postavke stranice koji će dodati pozadinu tekstu filtra. Drugo, prilagodit ćemo filtar aktivnog portfelja pomoću kartice napredan du modul.

prilagodite elemente rešetke Divi modula Filterable Portfolio

Pristupiti postavke stranice, kliknite tri točke u sredini zaslona. tada odaberite ikonu zupčanika koji će otvoriti postavke stranice. Onda ti idite na karticu Custom CSS i unesite sljedeće za dodavanje pozadine tekstu filtra.

Prilagođeni CSS

U ovom CSS isječku ciljamo boju pozadine filtra. Također ciljamo i stiliziramo njegovo stanje lebdenja. Sljedeće na dnevnom redu, dodajmo još malo CSS-a u modul i istaknimo našu karticu Aktivni 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;
}

Stil aktivne kartice filtera portfelja

Aktivna kartica fportfelj ilter privlači pozornost korisnika na trenutnu kategoriju portfelja koju posjećuju. Trenutačno ovaj filtar ima bijeli tekst i svijetlu pozadinu. 

Ići ćemo na karticu napredan modula Filterable Portfolio i dodajte tekst u zadana stanja i stanja lebdenja ove značajke. Ovo su CSS svojstva koja ćemo dodati u zadanom stanju:

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

Stanje pri lebdenju

Dok lebdite, promijenit ćemo pozadinu u crnu.

color: #000000!important;

Konačni izgled dizajna Divinog portfelja koji se može filtrirati s "Divi konferencijom"

Evo konačnog izgleda!

prilagodite elemente rešetke Divi modula Filterable Portfolio

A sada, evo kako to izgleda kada lebdite!

prilagodite elemente rešetke Divi modula Filterable Portfolio

Prilagodba modula Divi Filterable Portfolio: "Divi Online Yoga Instructor"

Kao i kod Divi Conference Edition, pronađite svoj izgled u Online Yoga Instructor Layout Packu unutar Divi Buildera. 

Za ovaj vodič koristit ćemo izgled odredišne ​​stranice. Pomaknite se prema dolje do odjeljka Klase odjeljaka s naslovom Odjeljak Svi nadolazeći tečajevi.

prilagodite elemente rešetke Divi modula Filterable Portfolio

Umetanje modula Filterable Portfolio

Odavde ćemo ukloniti retke s klasama. Kliknite na ljubičastu ikonu s tri točke na njoj . Zatim, odaberite wireframe prikaz. Na kraju ćete izbrisati dva retka koja sadrže tri stupca.

Zatim ćemo ih zamijeniti jednim stupcem u retku iznutra. Zatim ćemo dodati naš modul Filterable Portfolio.

Kao i u prethodnom primjeru, koristit ćemo raspored mreže za ovaj modul s višekratnikom od 4 za broj postova. 

Učinimo sada nešto malo drugačije s informacijama koje prikazujemo na karti. 

U kartici Sadržaj, idite na Elementi i poništite odabir Prikaži kategorije . To znači da će modul Portfolio prikazati samo naziv projekta bez naziva kategorije u kojoj se nalazi.

Prilagodba teksta kriterija filtra, naslova projekta i teksta paginacije

Definirajmo stilsku osnovu za tekstualne dijelove našeg modula. Glavni tekst ovog izgleda je Otvoreno Sans a font koji se koristi za glavne naslove je Sječivo. Stoga ćemo koristiti kombinaciju ova dva fonta tijekom procesa stiliziranja.

Tekstovi

  • Poravnanje teksta: centrirano
  • Boja teksta: svijetla

Tekst naslova

  • Font naslova: Cinzel
  • Boja teksta naslova: #ffffff

Tekst kriterija filtra

  • Kriteriji filtra Težina fonta: Podebljano
  • Boja teksta kriterija filtra: #ffffff

Tekst paginacije

  • Težina slova paginacije: Podebljano

Ovako trenutno izgleda naš modul portfelja koji se može filtrirati. Nije puno, ali polako stižemo!

prilagodite elemente rešetke Divi modula Filterable Portfolio

Stvorite proziran sloj koji lebdi

Nadahnimo se različitim modulima i prekrasnim gradijentima u ovom rasporedu. Za to ćemo izraditi proziran sloj lebdeći mišem i prilagoditi ikonu koja se također pojavljuje prilikom lebdenja.

  • Boja ikone za zumiranje: #323741
  • Boja sloja pri lebdenju: rgba (255 201 165, 0,85)
  • Birač ikone lebdeći mišem: potražite list i pogledajte gornju ikonu

Dodavanje obruba elementima mreže portfelja s prilagođenim CSS-om

Slično našem prvom primjeru, sada ćemo koristiti CSS kako bismo dodali više interesa našem modulu Filterable Portfolio. 

Sada ćemo dodati obrub oko svake pojedinačne stavke u mreži portfelja. Upotrijebite CSS isječak u nastavku u prilagođenom CSS dijelu postavki stranice da dodate našu granicu. 

Također ćemo koristiti "border" kao CSS klasu za ovaj modul.

  • CSS klasa: granica

Prilagođeni CSS

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

Ovdje sada imamo modul Filterable Portfolio s lijepim rubom – i ispunom – oko svake stavke mreže.

prilagodite elemente rešetke Divi modula Filterable Portfolio

Dodan je CSS u stil ruba paginacije

Za razliku od našeg prethodnog primjera, dodajmo boju rubu naše paginacije pomoću CSS-a. Ovo će također ići u to područje Postavke > Prilagođena CSS stranica .

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

Stil teksta kriterija filtra

Slično stilu našeg Divi Conference Portfolio modula, želimo dodati jazz našim filtrima kategorija. Opet, želimo crpiti iz stila koji je već prisutan u predlošku koji smo dobili. 

Ovo je CSS koji ćemo dodati u naš prilagođeni CSS odjeljak za ciljanje pozadine i lebdenja naše trake filtera.

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

S ova dva nova dodatka našem prilagođenom CSS-u, ovako izgleda naš modul Filterable Portfolio.

prilagodite elemente rešetke Divi modula Filterable Portfolio

Međutim, primijetite kako je filtar aktivnog portfelja izgubljen. Uvijek ima svijetlu pozadinu s bijelim tekstom. Idemo u postavke modula i dodamo CSS da to promijenimo.

Prilagođeni CSS

Filtar aktivnog portfelja:

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

Ukloni animaciju modula

Kako bismo pružili čistije iskustvo, uklonit ćemo zadanu animaciju koja dolazi s modulom Filterable Portfolio. Za ovo ćemo se prvo trebati vratiti u postavke naše stranice i dodati neki CSS koji će ciljati elemente rešetke portfelja i ukloniti klizni prijelaz to se događa izvan okvira.

Prilagođeni 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;
}

Pročitajte također: Divi: Kako promijeniti broj stupaca u blogu

Promijenite rešetku portfelja s četiri stupca na tri

Naš najnoviji CSS dodatak bit će transformacija našeg modula Filterable Portfolio iz četiri stupca u tri. To će nam dati više prostora da vidimo naše projekte. 

Također, dodat ćemo dodatni red našem modulu. Također ćete pronaći najnoviji CSS isječak koji možete koristiti za pretvaranje svojih stupaca.

prilagodite elemente rešetke Divi modula Filterable Portfolio

Prilagođeni CSS

Za ovaj zadnji isječak dodat ćemo CSS ID #rešetka s tri stupca na naš modul. I dalje ćemo zadržati našu CSS klasu od prije netaknutom.

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

Preuzmite DIVI sada!!!

Zaključak

Kao i kod većine Divi modula, postavke koje dolaze s Divi mogu se dalje razvijati pomoću CSS-a. Predstavljanje vašeg rada važan je dio vođenja online poslovanja, bloga ili robne marke. 

Kao takav, vrlo je važno imati organiziran način izlaganja svog rada. Zaradite savjete koji su podijeljeni danas kako biste sudjelovali u vlastitom dizajnerskom putovanju modula Divi Filterable Portfolio.

Nadamo se da će ova tehnika dodati još jednu korisnu dizajnersku vještinu za buduće projekte.

Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.

Također se možete konzultirati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.

Ne ustručavajte se također konzultirati naš vodič o Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.

...