Želite li koristiti modul Filterable Portfolio od Divi a ne znate koji izgled odabrati?
Modul « Portfelj koji se može filtrirati 'Od Divi nudi vam dvije opcije izgleda na izbor. Obje opcije imaju prednosti i vrlo dobro funkcioniraju za određene svrhe.
U ovom ćemo članku usporediti izgled pune širine i mreže ovog modula kako bismo vam pomogli da odlučite što vam je potrebno za web stranica.
Također ćemo prilagoditi oba izgleda da vidimo kako funkcioniraju u jednom izgledu Divi.
Krenimo!
pregled
Prvo, da vidimo što ćemo stvoriti u ovom vodiču.
Desktop verzija rasporeda mreže
Preuzmite DIVI sada!!!
Telefonska verzija rasporeda mreže
Desktop verzija izgleda Fullwidth
Pročitajte također: Divi: Kako koristiti efekte sjene i lebdenja za stvaranje interaktivnog sadržaja
Telefonska verzija izgleda Fullwidth
Kako promijeniti izgled modula portfelja koji se može filtrirati
Prema zadanim postavkama, modul "Portfelj koji se može filtrirati" prikazuje izgled u punoj širini. Možete promijeniti izgled za prikaz stavki u rešetki. Prvo otvorite parametri modula.
Zatim odaberite karticu Dizajn. Prva opcija je Raspored. Ima padajući popis s nekoliko izbora. Odaberite između njih Puna širina et rešetka.
Ako odaberete opciju koja trenutno nije odabrana, modul će se ponovno učitati i prikazati stavke portfelja u ovom izgledu. Primjer u nastavku prikazuje raspored mreže.
Usporedba izgleda modula portfelja koji se može filtrirati
Dva izgleda su vrlo različita, ali imaju neke sličnosti. Oba prikazuju filtar 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 punu širinu područja portfelja. Slike se prikazuju u izvornom obliku i proširuju se kako bi odgovarale dostupnoj širini.
Ne dodaje puno prostora između stavki novčanika. Preporučujemo da ograničite broj postova na nekoliko. Primjer u nastavku prikazuje izgled pune širine s 2 stupa.
Raspored rešetki
Raspored mreže prikazuje do 4 stavke u nizu. Dodaje više prostora između elemenata. Slike se izrezuju kako bi se stvorile minijature iste veličine bez obzira na veličinu i oblik slike.
Za ovaj smo modul ograničili 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 se želite usredotočiti na nekoliko stavki.
Također koristite ovaj izgled kada želite istaknuti ili privući pozornost na istaknute slike.
Raspored rešetke
Upotrijebite raspored mreže kada želite prikazati mnogo stavki ili kada želite da raspored prikazuje više stavki na manjem prostoru.
Kako prilagoditi izgled modula portfelja koji se može filtrirati
Sada kada smo vidjeli kako odabrati izglede, kako funkcioniraju i kada ih koristiti, pogledajmo kako prilagoditi ova dva izgleda.
Koristit ćemo Portfolio stranicu od Besplatni Painter Layout Pack dostupan u Divi. Ovdje je originalna stranica.
Portfelj ćemo zamijeniti modulom Filterable Portfolio i koristiti iste slike i naslove.
Napravit ćemo dvije verzije: jednu s izgledom pune širine i jednu s rasporedom rešetke.
Kako prilagoditi raspored mreže modula portfelja koji se može filtrirati
Počet ćemo s rasporedom mreže. Koristit ću boje i fontove iz originalnog izgleda.
Sadržaj
Otvori ih parametri modula i unesite 4 za Broj postova. Odaberi sve kategorije koje želite prikazati u modulu.
- Broj postova: 4
- Uključene kategorije: Odaberite kategorije
raspored
Zatim odaberite karticu dizajn i odaberite rešetka u opcijama izgleda.
- Izgled: Mreža
Slika
Pomaknite se do Slika i odaberite opciju BoxShadow. Promijeni to boja sjene u rgba(0,0,0,0.05).
- Sjena okvira: 4ème opcija
- Boja sjene: rgba(0,0,0,0.05)
Tekstovi
Zatim se pomaknite dolje do Tekstovi i izmijeniti poravnanje U središtu. Ovo centrira filtar, naslov, meta i paginaciju.
- Poravnanje teksta: središte
Tekst naslova
Zatim se pomaknite dolje do Tekst naslova i promijenite sljedeće postavke.
- Font naslova: Merriweather
- Boja teksta naslova: #000000
Promijenite veličinu policija na 26px za stolna računala, 20px za tablete i 18px za telefone.
- Veličina teksta naslova: stolno računalo 26px, tablet 20px, telefon 18px
Tekst kriterija filtra
Zatim se pomaknite dolje do Tekst kriterija filtra i promijenite sljedeće postavke:
- Kriteriji filtra:
- Font: Montserrat
- Težina fonta: Podebljano
- Stil: TT
- Boja teksta: #fd6927
- Veličina teksta: 12px
Meta tekst
Zatim se pomaknite dolje do Meta tekst. Promijeni to policija u Montserratu i boja u #fd6927.
- Veličina meta teksta: Montserrat
- Boja meta teksta: #fd6927
Postavi struk na 12 piksela,razmak između slova na 2 piksela i napetost linije na 1,2 em.
- Veličina teksta: 12px
- Razmak meta slova: 2 px
- Visina meta linije: 1,2 em
Tekst paginacije
Na kraju, pomaknite se dolje do Paginacijski tekst i promijeniti ga policija u Montserratu i postavio boja font na crnom. Zatvorite modul i spremite svoje postavke.
- Font paginacije: Montserrat
- Boja teksta paginacije: #000000
Kako prilagoditi modul portfelja koji se može filtrirati u izgledu pune širine
Sada, konfigurirajmo modul u rasporedu pune širine.
Koristit ćemo iste naznake dizajna kao i raspored rešetke, ali ćemo napraviti nekoliko promjena koje dobro funkcioniraju za ovaj izgled. Koristit ćemo se jednostavnim CSS-om za neke manje izmjene.
Sadržaj
Otvori ih parametri modula i promijeniti broj publikacije do 2. Time je stranica manja i lakša za rukovanje velikim slikama. Odaberi sve kategorije koje želite prikazati u modulu.
- Broj postova: 2
- Uključene kategorije: Odaberite kategorije
Elementi
Pomaknite se do Elementi i onemogućiti Prikaži kategorije. Ostavite ostale uključene. Kategorije će i dalje biti omogućene za filtar, ali se neće prikazivati s naslovom.
- Prikaži kategorije: BR
raspored
Odaberite karticu Dizajn. Sous Raspored, ostavite postavku postavljenu na Puna širina, što je njegova zadana postavka.
- Izgled: puna širina
Slika
Zatim se pomaknite dolje do Slika . Odaberite opciju Kutija sjena i promijeniti ga boja nijansa u rgba (0,0,0,0.05).
- Sjena okvira: 4ème opcija
- Boja sjene: rgba(0,0,0,0.05)
Tekstovi
Zatim se pomaknite dolje do Tekst. Promijeni poravnanje U središtu. Filtar, naslov i paginacija bit će centrirani sa slikama.
- Poravnanje teksta: središte
Tekst naslova
Zatim se pomaknite dolje do Tekst naslova . Promijeni to policija Merriweatheru i promijeniti boja u crnom.
- Font naslova: Merriweather
- Boja teksta naslova: #000000
Promijenite veličinu policija na 40px za stolna računala, 20px za tablete i 18px za telefone.
- Veličina teksta naslova: stolno računalo 40px, tablet 20px, telefon 18px
Tekst kriterija filtra
Zatim se pomaknite dolje do Tekst kriterija filtra i promijenite sljedeće postavke:
- Kriteriji filtra:
- Font: Montserrat
- Težina fonta: Podebljano
- Stil: TT
- Boja teksta: #fd6927
Tekst paginacije
Zatim se pomaknite dolje do Paginacijski tekst. Promijeni to policija u Montserratu promijenite težina polupodebljano i postavite boja fonta na #fd6927. Zatvorite modul i spremite svoje postavke.
- Font paginacije: Montserrat
- Boja: #fd6927
- Težina fonta: polu podebljano
Tekst CSS naslova
Otvorite karticu napredan i pomaknite se do Naslov portfelja. Odaberite ikonu radne površine. Kopirajte donji kod za različite veličine zaslona. Zatvorite modul i spremite svoje postavke.
Naslov portfelja:
- desktop
padding-bottom:40px- Tableta
padding-bottom:30px- Telefon
padding-bottom:20px
Résultats
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 dok lebdite
Telefonska verzija izgleda pune širine
Preuzmite DIVI sada!!!
Zaključak
Ovo je naš pogled na korištenje rasporeda pune širine u odnosu na rešetku u modulu Portfelj koji se može filtrirati od Divi. Odabir između dvije opcije izgleda je jednostavan.
Svaka opcija ima prednosti i trebala bi biti drugačije dizajnirana kako bi radila s vašim web stranica. Samo napravite nekoliko podešavanja kako biste osigurali da vaš modul dobro radi s bilo kojim Divi rasporedom.
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.
...
