Želite li znati kako prilagoditi elemente mreže Filterable Portfolio modula za divi ? Pratite nas u ovom tutorijalu...
Imajte zonu na sebi site Web da izložite svoj rad je važno. Ako ste stilista, možete kreirati nekoliko projekata na sebi site Web WordPress da pokažete svoje koncepte. Ako ste kreator brenda, možete koristiti portfolio da prikažete svoj rad. Štaviše, možemo ići dalje i dodati različite kategorije za naše projekte. Ovdje je šta radi Divi-jev Filterable Portfolio modul? .
Sa ovim modulom, u mogućnosti smo da prikažemo naš naporan rad na lak i organizovan način.
U današnjem vodiču ćemo prilagoditi pojedinačne elemente mreže modula Filterable Portfolio. Koristit ćemo rasporede iz besplatnih paketa izgleda Divi konferencija et Divi online instruktor joge obezbeđeno uz svaku kupovinu divi .
Kao i sa svime o tome divi, imamo mogućnost da ovaj modul prilagodimo našim potrebama i željama. Međutim, prije nego što krenemo u stiliziranje, naučimo nešto više o modulu.
Šta je Divi Filterable Portfolio modul?
Projekti su dio prilagođenog tipa objave koji funkcionira isto kao i objave. Možete ih pronaći na vašoj WordPress kontrolnoj tabli.
Ovdje ćete kreirati svoje individualne projekte koji će popuniti vaš Filterable Portfolio modul. Modul nam daje dva načina da prikažemo naše projekte: u obliku mreže ou u formatu pune širine. Za nas ćemo koristiti i prilagoditi format mreže.
Sa modulom Filterable Portfolio moći ćemo predstaviti naše najnovije projekte. Korisnici naše stranice vidjet će traku filtera na vrhu mreže našeg portfelja. Odatle mogu pretraživati različite kategorije portfelja koje dozvoljavamo da se prikažu u modulu.
Evo primjera mrežne konfiguracije modula s nekim primjerima projekata:
Područja koja treba uzeti u obzir prilikom kreiranja Divi-jevog portfelja koji se može filtrirati
Kao i svi modovi divi, Filterable Portfolio modul dolazi s nizom funkcija koje možemo prilagoditi svojim potrebama i željama. Dakle, većina funkcija koje dolaze s modulom može se mijenjati na kartici dizajn iz modalnih postavki modula. Možemo uređivati sljedeća područja i više:
- Naziv projekta
- Kategorija projekta
- vinjeta
- Filtrirajte tekst
- Sličica pri lebdenju
- obilježavanje strana
Ovo nije potpuna lista, a nismo ni počeli da pričamo o tome kako je CSS dodao dublje prilagođavanje ovom modulu!
Kako ćemo prilagoditi Divi-jev Filterable Portfolio modul
Kao što je ranije spomenuto, za ovaj tutorijal koristit ćemo dva izgleda: Divi konferencija et Divi online instruktor joge. U nastavku možete dobiti pregled posla koji ćemo raditi tokom ovog tutorijala.
Raspored elemenata izgleda "Divi konferencije".
Raspored elemenata rasporeda "Divi Online Yoga Instructor".
Možete lako preuzeti oba izgleda sa divi Graditelj.
Hajdemo sada!
Vidi također: Divi: Birajte između mreže i izgleda pune širine modula Filterable Portfolio
Prilagodba Divi-jevog modula za filtriranje portfelja: "Divi Conference Edition"
Prvo ćemo morati da instaliramo predložak stranice događaja iz Divi Conference Layout Pack-a. Nakon kreiranja vaše nove stranice u WordPress-u i aktivacije Divi Buildera, ući ćemo u Divi biblioteku.
Unesite Divi Layout Library
Kliknite na ikonu « Učitaj iz biblioteke za ulazak u Divi Layout Library
Pronađite raspored u Divi biblioteci rasporeda
Koristeći funkciju pretraživanja u Divi biblioteci izgleda, tražim dispozicija" Stranica događaja konferencije".
Instaliraj izgled
Nakon što odaberete izgled, kliknite na " Koristite ovaj raspored da instalirate izgled na svoju stranicu.
Uklonite i zamijenite slikovni modul
Uklonit ćemo dolje prikazan modul slike kako bismo napravili mjesta za modul portfelja koji se može filtrirati koji ćemo prilagoditi. Kliknite na " izbrisati nakon što pređete kursorom preko slike da obrišete fotografiju.
Umetnite Divi-jev modul za filtriranje portfelja
Sa uklonjenim modulom slike, sada možemo napraviti mjesta za naš filter portfolio modul. Mi ćemo kliknuti na ikonu “ Dodaj modul (sivi znak plus), zatim odaberite modul u modalnom okviru modula koji se pojavljuje.
Podešavanje broja postova i izgleda portfolia
Podrazumevano, ovaj modul će predstaviti vaš rad u jednoj koloni. Međutim, koristićemo raspored mreže koji podrazumevano dolazi sa 4 kolone.
Kao takav, preporučujemo da odaberete višekratnik od 4 (4, 8, 12, 16, itd.) kao broj postova za vaš portfolio.
Za ovaj tutorijal koristit ćemo 12 projekata u našoj mreži.
Počnite prilagođavati Divi-jev portfolio 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, koristićemo stil koji je obezbeđen sa Divi Conference Layout Pack-om u našem novom modulu.
Oblikovanje teksta
- Poravnanje teksta: Centrirano
- Boja teksta: tamna
Stil teksta naslova
- Nivo 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 mreži portfelja, napravimo neke promjene u stvarnom obliku samih sličica projekta.
Promijenite obrub sličice projekta i zaobljene uglove
U našem Divi Conference Layout paketu koristimo jedinstvenu kombinaciju zaobljenih uglova da damo jedinstven oblik nekim ključnim kadrovima u paketu. Primijenimo ovaj stil na sličice našeg modula.
slika
- Image: \ t
- Zaobljeni uglovi: 50px 50px 50px 0px
- Stilovi obruba: svi
- Širina ivice: 3px
- Boja: #000000
- Stil obruba: čvrst
Ovo će našim sličicama dati oblik koji odgovara ostatku ostalih slika u paketu izgleda.
Prilagođavanje preklapanja pri lebdenju
Idemo korak dalje s našim stilom i napravimo blagu promjenu zadanog preklapanja koji dolazi s ovim modulom. Mi ćemo promijeniti boju kao i ikonu koja se koristi odmah iz kutije.
Superpozicija
- Boja ikone zumiranja: #bcf5fd
- Boja preklapanja pri lebdenju: #ff6651
- Hover Icon Birač: Zoom
Kao što sada možete vidjeti, dodali smo boje brenda za ovaj izgled u preklapanje, kao i promijenili ikonu koju Divi podrazumevano daje za funkciju preklapanja 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 ivicu koja se pojavljuje iznad nje sa jednom linijom CSS-a
Tekst paginacije
- Paginacija:
- Font: Krona One
- Poravnanje teksta: centrirano
- Boja teksta: #ff6651, #000000 (lebljenje)
Za naš CSS, prebacit ćemo se na karticu Napredan našeg modula. Drugo, klikćemo na karticu Custom CSS. Zatim ćemo unijeti sljedeći isječak koda da uklonimo ivicu iznad naše paginacije, dajući joj čišći izgled.
Paginacija portfelja
border-top: 0px;
Korištenje Divi postavki i CSS-a za prilagođavanje teksta filtera
Što se tiče teksta filtera, povisit ćemo ga. Koristićemo CSS da promenimo pozadinu kao i efekte lebdenja.
Želimo imati savršen kontinuitet između novododatog modula i stila paketa izgleda. Prvo, unesite naše Divi postavke za font.
Tekst kriterijuma filtera
- Kriteriji filtriranja:
- Font: Krona One
- Boja fonta: #ffffff, #000000 (lebljenje)
Kako sada stoji, naš filter izgleda nestao. Zaista, u svom zadanom stanju, to je bijeli tekst na bijeloj pozadini. Međutim, mi ćemo ovo promijeniti sa prilagođenim CSS-om na dva mjesta.
Prvo ćemo dodati CSS isječak u postavke stranice koji će dodati pozadinu tekstu filtera. Drugo, prilagodit ćemo aktivni portfolio filter pomoću kartice Napredan modula.
Za pristup postavke stranice, kliknite na tri tačke na sredini ekrana. onda izaberite ikonu zupčanika koji će otvoriti postavke stranice. Onda ti idite na karticu Custom CSS i unesite sljedeće da dodate pozadinu u tekst filtera.
Prilagođeni CSS
U ovom CSS isječku ciljamo boju pozadine filtera. Također ciljamo i stiliziramo njegovo stanje lebdenja. Sljedeće na dnevnom redu, dodajmo još malo CSS-a u modul i istaknemo našu karticu 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 stil aktivne kartice
Aktivna kartica fportfolio ilter skreće pažnju korisnika na trenutnu kategoriju portfelja koju posjećuju. Trenutno ovaj filter ima bijeli tekst i svijetlu pozadinu.
Idemo na karticu Napredan modula Portfolio koji se može filtrirati i dodati tekst u podrazumevana stanja i stanja lebdenja ove funkcije. Evo CSS svojstava koja ćemo dodati u zadanom stanju:
background: #ff6651;
color: #ffffff !important;
Stanje na lebdenju
Kada lebdite, promijenit ćemo pozadinu u crnu.
color: #000000!important;
Konačan izgled dizajna Divi-jevog portfelja koji se može filtrirati sa "Divi Conference"
Evo konačnog izgleda!
A sada, evo kako to izgleda kada lebdite!
Prilagodba Divi-jevog modula za filtriranje portfelja: "Divi Online Yoga Instructor"
Kao i kod Divi Conference Edition, pronađite svoj raspored u paketu rasporeda instruktora joge na mreži u Divi Builder-u.
Za ovaj vodič koristit ćemo izgled odredišne stranice. Pomaknite se prema dolje do odjeljka Klase odjeljaka s naslovom Odjeljak Svi predstojeći časovi.
Umetanje modula portfelja koji se može filtrirati
Odavde ćemo ukloniti redove sa klasama. Kliknite na ljubičastu ikonu sa tri tačke na njoj . Onda, izaberite žičani prikaz. Na kraju ćete obrisati dva reda koja sadrže tri kolone.
Zatim ćemo ih zamijeniti jednom kolonom u unutarnjem redu. Zatim ćemo dodati naš Filterable Portfolio modul.
Kao iu prethodnom primjeru, koristit ćemo raspored mreže za ovaj modul sa višestrukim brojem od 4 za broj postova.
Hajde da sada uradimo nešto malo drugačije sa informacijama koje prikazujemo na mapi.
Na kartici sadržaj, idite na Éléments 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.
Prilagođavanje teksta kriterija filtera, naslova projekta i teksta paginacije
Definirajmo stilsku osnovu za tekstualne dijelove našeg modula. Osnovni tekst ovog izgleda je Open Sans a font koji se koristi za glavne naslove je Dlijeto. Stoga ćemo koristiti kombinaciju ova dva fonta tokom procesa stiliziranja.
tekst
- Poravnanje teksta: Centrirano
- Boja teksta: Svetla
Naslov teksta
- Font naslova: Cinzel
- Boja teksta naslova: #ffffff
Tekst kriterijuma filtera
- Kriterij filtera Težina fonta: Bold
- Boja teksta kriterija filtera: #ffffff
Tekst paginacije
- Paginacija Težina fonta: Bold
Ovako trenutno izgleda naš filterski portfolio modul. Nije puno, ali polako stižemo!
Kreirajte prozirni preklopni sloj
Dobijmo inspiraciju u različitim modulima i prekrasnim gradijentima u ovom izgledu. Za ovo ćemo kreirati prozirni preklopni sloj i prilagoditi ikonu koja se također pojavljuje pri lebdenju.
- Boja ikone zumiranja: #323741
- Boja preklapanja pri lebdenju: rgba (255 201 165, 0,85)
- Hover Icon Birač: potražite list i vidite ikonu iznad
Dodavanje obruba elementima mreže portfelja sa prilagođenim CSS-om
Slično našem prvom primjeru, sada ćemo koristiti CSS da bismo dodali više interesa našem modulu portfolia koji se može filtrirati.
Sada ćemo dodati obrub oko svake pojedinačne stavke u mreži portfelja. Koristite CSS isječak ispod u prilagođenom CSS dijelu postavki stranice da dodate našu ivicu.
Takođe ć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 naš Filterable Portfolio modul sa lijepim rubom – i ispunom – oko svake stavke mreže.
Dodan CSS u ivicu paginacije stila
Za razliku od našeg prethodnog primjera, dodajmo boju rubu naše paginacije pomoću CSS-a. Ovo će se odnositi i na područje Postavke > Prilagođena CSS stranica .
/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}Stil teksta kriterijuma filtera
Slično stilu našeg Divi Conference Portfolio modula, želimo dodati jazz našim filterima kategorija. Opet, želimo da crtamo iz stila koji je već prisutan u predlošku koji nam je dostavljen.
Evo CSS-a koji ćemo dodati u naš prilagođeni CSS odjeljak kako bismo ciljali pozadinu i zadržali pokazivač miša naše filterske trake.
/* 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 ova dva nova dodatka našem prilagođenom CSS-u, ovako oblikuje naš modul za filtriranje portfelja.
Međutim, primijetite kako je aktivni portfolio filter izgubljen. Uvek ima svetlu pozadinu sa belim tekstom. Idemo na postavke modula i dodamo malo CSS-a da to promijenimo.
Prilagođeni CSS
Aktivni portfolio filter:
background: #ffffff;
color: #323741 !important;
Uklonite animaciju modula
Kako bismo pružili čistije iskustvo, uklonit ćemo zadanu animaciju koja dolazi s modulom Filterable Portfolio. Za ovo ćemo se prvo morati vratiti u postavke naše stranice i dodati neki CSS koji će ciljati elemente mreže portfelja i ukloniti klizni prelaz to se dešava van kutije.
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đe: Divi: Kako promijeniti broj kolona na blogu
Promijenite mrežu portfelja iz četiri kolone u tri
Naš najnoviji CSS dodatak će biti transformacija našeg modula portfolia koji se može filtrirati iz četiri kolone u tri. Ovo će nam dati više prostora da vidimo naše projekte.
Takođe, dodaćemo dodatnu liniju našem modulu. Također ćete pronaći najnoviji CSS isječak koji možete koristiti za konvertiranje svojih stupaca.
Prilagođeni CSS
Za ovaj posljednji isječak, dodaćemo CSS ID #three-column-grid našem modulu. 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 uz Divi mogu se dalje razvijati pomoću CSS-a. Predstavljanje vašeg rada važan je dio vođenja online poslovanja, bloga ili brenda.
Zbog toga je od suštinskog značaja da imate organizovan način prikazivanja vašeg rada. Zaradite savjete koji ste podijelili danas kako biste učestvovali na vlastitom putovanju dizajna Divi-jevog modula za filtriranje portfelja.
Nadamo se da će ova tehnika dodati još jednu korisnu vještinu dizajna za buduće projekte.
Nadamo se da će vas ovaj vodič inspirisati za vaše sljedeće Divi projekte. Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara da razgovaramo o tome.
Takođe možete konsultovati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se da konsultujete i naš vodič o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
