Dëshironi të përdorni modulin e Portofolit të Filterueshëm të Divi dhe nuk e dini se cilën plan urbanistik të zgjidhni?
Moduli « Portofoli i filtruar 'Nga Divi ju jep dy opsione të paraqitjes për të zgjedhur. Të dy opsionet kanë përparësi dhe funksionojnë shumë mirë për qëllime të caktuara.
Në këtë artikull, ne do të krahasojmë paraqitjet e gjerësisë së plotë dhe rrjetit të këtij moduli për t'ju ndihmuar të vendosni se çfarë ju nevojitet për Site Web.
Ne gjithashtu do t'i personalizojmë të dy paraqitjet për të parë se si funksionojnë në një paraqitje Divi.
Le të fillojmë!
studim
Së pari, le të shohim se çfarë do të krijojmë në këtë tutorial.
Versioni i desktopit i paraqitjes së rrjetit
Shkarkoni DIVI tani!!!
Versioni i telefonit të paraqitjes së rrjetit
Versioni i desktopit i paraqitjes Fullwidth
Lexo gjithashtu: Divi: Si të përdorni efektet e hijes dhe të pezullimit për të krijuar përmbajtje interaktive
Versioni i telefonit i paraqitjes me gjerësi të plotë
Si të ndryshoni paraqitjen e modulit të portofolit të filtruar
Si parazgjedhje, moduli "Portofoli i filtruar" shfaq paraqitjen në gjerësi të plotë. Mund të ndryshoni paraqitjen për të shfaqur artikujt në një rrjet. Së pari, hapni parametrat e modulit.
Pastaj zgjidhni skedën Projektimit. Opsioni i parë është Plan urbanistik. Ajo ka një listë rënëse me disa zgjedhje. Zgjidhni atë për të zgjedhur Gjerësia e plotë et Grid.
Nëse zgjidhni opsionin që nuk është zgjedhur aktualisht, moduli do të ringarkojë dhe do të shfaqë artikujt e portofolit në këtë paraqitje. Shembulli më poshtë tregon paraqitjen e rrjetit.
Krahasimi i paraqitjes së modulit të portofolit të filtruar
Dy paraqitjet janë shumë të ndryshme, por ato kanë disa ngjashmëri. Të dy shfaqin filtrin në krye të modulit, titullin dhe meta poshtë imazheve të artikullit dhe faqet në fund të modulit.
Ja një vështrim se si ata janë të ndryshëm.
Paraqitja me gjerësi të plotë
Gjerësia e plotë shfaq një imazh të madh me një element portofoli që zë gjerësinë e plotë të zonës së portofolit. Imazhet shfaqen në formën e tyre origjinale dhe zgjerohen për t'iu përshtatur gjerësisë së disponueshme.
Nuk shton shumë hapësirë midis artikujve të portofolit. Ne rekomandojmë kufizimin e numrit të postimeve në disa. Shembulli më poshtë tregon paraqitjen me gjerësi të plotë me 2 postime.
Paraqitja e rrjetës
Paraqitja Grid shfaq deri në 4 artikuj me radhë. Ai shton më shumë hapësirë midis elementeve. Imazhet priten për të krijuar miniaturë me të njëjtën madhësi, pavarësisht nga madhësia dhe forma e imazhit.
Për këtë, ne e kufizuam modulin në shfaqjen e katër postimeve për të treguar faqet.
Kur të përdoret çdo paraqitje e modulit të Portofolit të Filterueshëm
Të dyja marrëveshjet kanë avantazhet e tyre. Këtu janë disa këshilla se kur duhet përdorur çdo plan urbanistik.
Paraqitja me gjerësi të plotë
Përdorni paraqitjen me gjerësi të plotë kur keni vetëm disa artikuj për të shfaqur ose dëshironi të fokusoheni në disa artikuj.
Përdoreni gjithashtu këtë plan urbanistik kur dëshironi të nënvizoni ose të tërheqni vëmendjen ndaj imazheve të paraqitura.
Shtrirja e rrjetit
Përdorni paraqitjen Grid kur dëshironi të shfaqni shumë artikuj ose kur dëshironi që një plan urbanistik të shfaqë më shumë artikuj në një hapësirë më të vogël.
Si të personalizoni paraqitjet e modulit të portofolit të filtruar
Tani që kemi parë se si të zgjedhim paraqitjet, si funksionojnë dhe kur t'i përdorim ato, le të shohim se si t'i personalizojmë këto dy paraqitje.
Ne do të përdorim faqen Portofoli të Paketë Falas e Paraqitjes së Piktorit në dispozicion në Divi. Këtu është faqja origjinale.
Ne do të zëvendësojmë portofolin me modulin Filterable Portfolio dhe do të përdorim të njëjtat imazhe dhe tituj.
Ne do të krijojmë dy versione: një me një plan urbanistik me gjerësi të plotë dhe një me një plan urbanistik.
Si të personalizoni paraqitjen e rrjetit të modulit të portofolit të filtruar
Do të fillojmë me paraqitjen e rrjetit. Do të përdor ngjyrat dhe fontet nga faqosja origjinale.
Përmbajtje
Hapni ato parametrat e modulit dhe futni 4 për Numri i postimeve. Selektoj të gjitha kategoritë që dëshironi të shfaqni në modul.
- Numri i postimeve: 4
- Kategoritë e përfshira: Zgjidhni Kategoritë
natyrë
Pastaj zgjidhni skedën Projektimi dhe zgjidhni Grid në opsionet e paraqitjes.
- Paraqitja: Rrjeti
Imazh
Shkoni te Imazh dhe zgjidhni opsionin BoxShadow. Ndryshoje ngjyra e hijes në rgba(0,0,0,0.05).
- Hija e kutisë: 4ème alternativë
- Ngjyra e hijes: rgba (0,0,0,0.05)
Tekst
Më pas lëvizni poshtë te Tekst dhe modifikoni radhitje Ne qender. Kjo përqendron filtrin, titullin, meta dhe faqetimin.
- Rreshtimi i tekstit: Qendër
Teksti i titullit
Më pas lëvizni poshtë te Teksti i titullit dhe ndryshoni cilësimet e mëposhtme.
- Fonti i titullit: Merriweather
- Ngjyra e tekstit të titullit: #000000
Ndryshoni madhësinë e polici në 26px për desktop, 20px për tablet dhe 18px për telefona.
- Madhësia e tekstit të titullit: Desktop 26 pikselë, tabletë 20 pikselë, Telefon 18 px
Filtro tekstin e kriterit
Më pas lëvizni poshtë te Teksti i kritereve të filtrit dhe ndryshoni cilësimet e mëposhtme:
- Kriteret e filtrit:
- Fonti: Montserrat
- Pesha e shkronjave: Bold
- Stili: TT
- Ngjyra e tekstit: #fd6927
- Madhësia e tekstit: 12 px
Meta tekst
Më pas lëvizni poshtë te Meta Tekst. Ndryshoje polici në Montserrat dhe couleur në #fd6927.
- Madhësia e tekstit Meta: Montserrat
- Ngjyra e meta tekstit: #fd6927
Vendos madhësi në 12 piksele,ndarja e shkronjave në 2 piksele dhe mendjemadhësi e linjës në 1,2 em.
- Madhësia e tekstit: 12 px
- Hapësira e meta shkronjave: 2 px
- Lartësia e linjës Meta: 1,2 em
Teksti i faqezimit
Më në fund, lëvizni poshtë te Teksti i faqezimit dhe ndryshoje atë polici në Montserrat, dhe vendosi couleur font në të zezë. Mbyllni modulin dhe ruani cilësimet tuaja.
- Fonti i faqezimit: Montserrat
- Ngjyra e tekstit të faqezimit: #000000
Si të personalizoni modulin e portofolit të filtruar në një plan urbanistik me gjerësi të plotë
Tani, le të konfigurojmë modulin në një plan urbanistik me gjerësi të plotë.
Ne do të përdorim të njëjtat shenja të projektimit si paraqitjen e rrjetit, por do të bëjmë disa ndryshime që funksionojnë mirë për këtë paraqitje. Ne do të përdorim disa CSS të thjeshta për të bërë disa ndryshime të vogla.
Përmbajtje
Hapni ato parametrat e modulit dhe ndryshoni numrin e publikime në 2. Kjo e mban faqen më të vogël dhe më të menaxhueshme me imazhe të mëdha. Selektoj të gjitha kategoritë që dëshironi të shfaqni në modul.
- Numri i postimeve: 2
- Kategoritë e përfshira: Zgjidhni Kategoritë
elementet
Shkoni te Elementet dhe çaktivizoni Shfaq Kategoritë. Lërini të tjerat të aktivizuara. Kategoritë do të jenë ende të aktivizuara për filtrin, por ato nuk do të shfaqen me titullin.
- Shfaq Kategoritë: JO
natyrë
Zgjidhni skedën Projektimit. sous Plan urbanistik, lini të vendosur Layout në Gjerësia e plotë, i cili është cilësimi i tij i paracaktuar.
- Paraqitja: Me gjerësi të plotë
Imazh
Më pas lëvizni poshtë te Imazh . Zgjidhni opsionin Hija e Kutisë dhe ndryshoje atë couleur hije në rgba (0,0,0,0.05).
- Hija e kutisë: 4ème alternativë
- Ngjyra e hijes: rgba (0,0,0,0.05)
Tekst
Më pas lëvizni poshtë te Tekst. Ndryshoni radhitje Ne qender. Filtri, titulli dhe faqëzimi do të përqendrohen me imazhet.
- Rreshtimi i tekstit: Qendër
Teksti i titullit
Më pas lëvizni poshtë te Teksti i titullit . Ndryshoje polici të Merriweather dhe të ndryshojë couleur në të zezë.
- Fonti i titullit: Merriweather
- Ngjyra e tekstit të titullit: #000000
Ndryshoni madhësinë e polici në 40px për desktop, 20px për tablet dhe 18px për telefona.
- Madhësia e tekstit të titullit: Desktop 40 pikselë, tabletë 20 pikselë, Telefon 18 px
Filtro tekstin e kriterit
Më pas lëvizni poshtë te Teksti i kritereve të filtrit dhe ndryshoni cilësimet e mëposhtme:
- Kriteret e filtrit:
- Fonti: Montserrat
- Pesha e shkronjave: Bold
- Stili: TT
- Ngjyra e tekstit: #fd6927
Teksti i faqezimit
Më pas lëvizni poshtë te Teksti i faqezimit. Ndryshoje polici në Montserrat, ndryshoni peshë gjysmë të guximshme dhe vendoseni ngjyra e shkronjave në #fd6927. Mbyllni modulin dhe ruani cilësimet tuaja.
- Fonti i faqezimit: Montserrat
- Ngjyra: #fd6927
- Pesha e shkronjave: Gjysmë e trashë
Teksti i titullit CSS
Hapni skedën Avancuar dhe shkoni te Titulli i portofolit. Zgjidhni ikonën e Desktopit. Kopjoni kodin më poshtë për madhësi të ndryshme të ekranit. Mbyllni modulin dhe ruani cilësimet tuaja.
Titulli i portofolit:
- Desktop
padding-bottom:40px- Tabletë
padding-bottom:30px- Numri telefonit
padding-bottom:20px
Résultats
Versioni i desktopit i paraqitjes së rrjetit
Versioni i telefonit të paraqitjes së rrjetit
Shkarkoni DIVI tani!!!
Versioni i desktopit i paraqitjes me gjerësi të plotë
Shiko gjithashtu: Divi: Si të ndryshoni gradientin e një sfondi në hover
Versioni i telefonit i paraqitjes me gjerësi të plotë
Shkarkoni DIVI tani!!!
Përfundim
Ky është mendimi ynë për përdorimin e një plan urbanistik me gjerësi të plotë kundrejt një rrjeti në modul Portofol i filtrueshëm të Divit. Zgjedhja midis dy opsioneve të paraqitjes është e lehtë.
Secili opsion ka përparësi dhe duhet të dizajnohet ndryshe për të punuar me tuajin Site Web. Thjesht bëni disa ndryshime për të siguruar që moduli juaj të funksionojë mirë me çdo plan urbanistik Divi.
Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.
Mos hezitoni të konsultoheni edhe me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
