Želite li koristiti Filterable Portfolio modul od divi a ne znate koji raspored odabrati?
Modul « Portfolio koji se može filtrirati »de divi daje vam dvije opcije rasporeda koje možete izabrati. Obje opcije imaju prednosti i vrlo dobro rade za određene svrhe.
U ovom članku ćemo uporediti izglede pune širine i mreže ovog modula kako bismo vam pomogli da odlučite šta vam je potrebno za site Web.
Također ćemo prilagoditi oba izgleda da vidimo kako rade u jednom rasporedu divi.
Počnimo!
pregled
Prvo, da vidimo šta ćemo kreirati u ovom tutorijalu.
Desktop verzija rasporeda mreže
Preuzmite DIVI sada!!!
Telefonska verzija rasporeda mreže
Desktop verzija izgleda pune širine
Pročitajte takođe: Divi: Kako koristiti efekte sjene i lebdenja za kreiranje interaktivnog sadržaja
Telefonska verzija izgleda pune širine
Kako promijeniti izgled modula portfelja koji se može filtrirati
Modul “Filterable Portfolio” podrazumevano prikazuje izgled u punoj širini. Možete promijeniti izgled za prikaz stavki u mreži. Prvo otvorite parametri modula.
Zatim odaberite karticu Dizajn. Prva opcija je Raspored. Ima padajuću listu sa nekoliko opcija. Odaberite ga da birate između Puna širina et rešetka.
Ako odaberete opciju koja trenutno nije odabrana, modul će ponovo učitati i prikazati stavke portfelja u ovom izgledu. Primjer ispod prikazuje raspored mreže.
Poređenje izgleda modula portfelja koji se može filtrirati
Ova dva izgleda su veoma različita, ali imaju neke sličnosti. Oba prikazuju filter na vrhu modula, naslov i meta ispod slika stavke i paginaciju na dnu modula.
Evo kako se razlikuju.
Raspored pune širine
Puna širina prikazuje veliku sliku s elementom portfelja koji zauzima cijelu širinu područja portfelja. Slike se prikazuju u svom originalnom obliku i proširuju se tako da odgovaraju dostupnoj širini.
Ne dodaje puno prostora između stavki novčanika. Preporučujemo da ograničite broj postova na nekoliko. Primjer ispod prikazuje izgled pune širine sa 2 posta.
Raspored mreže
Raspored mreže prikazuje do 4 stavke u nizu. Dodaje više prostora između elemenata. Slike se izrezuju kako bi se stvorile sličice iste veličine bez obzira na veličinu i oblik slike.
Za ovaj smo ograničili modul na prikaz četiri posta za prikaz paginacije.
Kada koristiti svaki izgled modula Filterable Portfolio
Oba aranžmana imaju svoje prednosti. Evo nekoliko savjeta o tome kada koristiti svaki izgled.
Raspored pune širine
Koristite izgled pune širine kada imate samo nekoliko stavki za prikaz ili želite da se fokusirate na nekoliko stavki.
Također koristite ovaj raspored kada želite istaknuti ili skrenuti pažnju na istaknute slike.
Raspored mreže
Koristite raspored mreže kada želite da prikažete mnogo stavki ili kada želite da raspored prikazuje više stavki na manjem prostoru.
Kako prilagoditi izglede modula portfelja koji se mogu filtrirati
Sada kada smo vidjeli kako odabrati izglede, kako funkcionišu i kada ih koristiti, hajde da vidimo kako da prilagodimo ova dva izgleda.
Koristit ćemo Portfolio stranicu Besplatni Painter Layout Pack dostupno u Divi. Ovdje je originalna stranica.
Zamijenit ćemo portfolio modulom Filterable Portfolio i koristiti iste slike i naslove.
Napravit ćemo dvije verzije: jednu sa rasporedom pune širine i jednu sa rasporedom mreže.
Kako prilagoditi raspored mreže filtera portfolio modula
Počećemo sa rasporedom mreže. Koristit ću boje i fontove iz originalnog izgleda.
sadržaj
Otvori ih parametri modula i unesite 4 za Post Count. Označi sve kategorije koje želite da prikažete u modulu.
- Broj postova: 4
- Uključene kategorije: Odaberite Kategorije
raspored
Zatim odaberite karticu dizajn i odaberite rešetka u opcijama izgleda.
- Raspored: Mreža
slika
Dođite do slika i odaberite opciju BoxShadow. Promijeni boja senke u rgba(0,0,0,0.05).
- Box Shadow: 4ème opcija
- Boja senke: rgba(0,0,0,0.05)
tekst
Zatim skrolujte dole do tekst i modifikovati poravnanje U centru. Ovo centrira filter, naslov, meta i paginaciju.
- Poravnanje teksta: Centar
Naslov teksta
Zatim skrolujte dole do Tekst naslova i promijenite sljedeće postavke.
- Font naslova: Merriweather
- Boja teksta naslova: #000000
Promijenite veličinu policija na 26px za desktop, 20px za tablete i 18px za telefone.
- Veličina teksta naslova: desktop 26px, tablet 20px, telefon 18px
Tekst kriterijuma filtera
Zatim skrolujte dole do Tekst kriterija filtera i promijenite sljedeće postavke:
- Kriteriji filtriranja:
- Font: Montserrat
- Težina fonta: Bold
- Stil: TT
- Boja teksta: #fd6927
- Veličina teksta: 12px
Meta tekst
Zatim skrolujte dole do Meta Text. Promijeni policija u Montserratu i boja u #fd6927.
- Veličina meta teksta: Montserrat
- Boja meta teksta: #fd6927
Postavite struk na 12 piksela,razmak između slova na 2 piksela i oholost linije na 1,2 em.
- Veličina teksta: 12px
- Razmak meta slova: 2px
- Visina meta linije: 1,2 em
Tekst paginacije
Na kraju, skrolujte dole do Tekst paginacije i promenite ga policija u Montserratu, i postaviti boja font na crnoj boji. Zatvorite modul i sačuvajte podešavanja.
- Font paginacije: Montserrat
- Boja teksta paginacije: #000000
Kako prilagoditi modul portfelja koji se može filtrirati u izgledu pune širine
Sada, hajde da konfigurišemo modul u izgledu pune širine.
Koristit ćemo iste dizajnerske znakove kao i raspored mreže, ali ćemo napraviti nekoliko promjena koje dobro funkcioniraju za ovaj raspored. Koristit ćemo neki jednostavan CSS da napravimo neke manje izmjene.
sadržaj
Otvori ih parametri modula i promijenite broj publikacije do 2. Ovo čini stranicu manjom i lakšom za upravljanje s velikim slikama. Označi sve kategorije koje želite da prikažete u modulu.
- Broj postova: 2
- Uključene kategorije: Odaberite kategorije
Éléments
Dođite do elementi i onemogućiti Prikaži kategorije. Ostale ostavite uključene. Kategorije će i dalje biti omogućene za filter, ali se neće prikazivati s naslovom.
- Prikaži kategorije: NO
raspored
Odaberite karticu Dizajn. pod Raspored, ostavite Layout podešen na Puna širina, što je njegova zadana postavka.
- Izgled: puna širina
slika
Zatim skrolujte dole do slika . Odaberite opciju Box Shadow i promenite ga boja nijansa u rgba (0,0,0,0.05).
- Box Shadow: 4ème opcija
- Boja senke: rgba(0,0,0,0.05)
tekst
Zatim skrolujte dole do tekst. Promijenite poravnanje U centru. Filter, naslov i paginacija će biti centrirani sa slikama.
- Poravnanje teksta: Centar
Naslov teksta
Zatim skrolujte dole do Naslov teksta . Promijeni policija u Merriweather i promijenite boja u crnom.
- Font naslova: Merriweather
- Boja teksta naslova: #000000
Promijenite veličinu policija na 40px za desktop, 20px za tablete i 18px za telefone.
- Veličina teksta naslova: desktop 40px, tablet 20px, telefon 18px
Tekst kriterijuma filtera
Zatim skrolujte dole do Tekst kriterija filtera i promijenite sljedeće postavke:
- Kriteriji filtriranja:
- Font: Montserrat
- Težina fonta: Bold
- Stil: TT
- Boja teksta: #fd6927
Tekst paginacije
Zatim skrolujte dole do Tekst paginacije. Promijeni policija u Montserratu, promijenite poids polupodebljano i postavite boja fonta na #fd6927. Zatvorite modul i sačuvajte podešavanja.
- Font paginacije: Montserrat
- Boja: #fd6927
- Težina fonta: Semi Bold
CSS Naslov teksta
Otvorite karticu Napredan i dođite do Portfolio Title. Odaberite ikonu na radnoj površini. Kopirajte kod ispod za različite veličine ekrana. Zatvorite modul i sačuvajte podešavanja.
Naslov portfolia:
- desktop
padding-bottom:40px- tableta
padding-bottom:30px- Telefon
padding-bottom:20px
Rezultati
Desktop verzija rasporeda mreže
Telefonska verzija rasporeda mreže
Preuzmite DIVI sada!!!
Desktop verzija izgleda pune širine
Vidi također: Divi: Kako promijeniti gradijent pozadine pri lebdenju
Telefonska verzija izgleda pune širine
Preuzmite DIVI sada!!!
zaključak
Ovo je naš pogled na korištenje rasporeda pune širine u odnosu na mrežu u modulu Portfolio koji se može filtrirati od Divi. Odabir između dvije opcije rasporeda je jednostavan.
Svaka opcija ima prednosti i trebalo bi da bude drugačije dizajnirana da bi radila sa vama site Web. Samo napravite nekoliko podešavanja kako biste osigurali da vaš modul dobro radi sa bilo kojim Divi rasporedom.
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.
...
