Chcete použít modul Filtrovatelné portfolio z divi a nevíte jaké rozložení zvolit?
Modul « Filtrovatelné portfolio "Chcete-li divi nabízí dvě možnosti rozvržení, ze kterých si můžete vybrat. Obě možnosti mají výhody a pro určité účely fungují velmi dobře.
V tomto článku porovnáme rozvržení plné šířky a mřížky tohoto modulu, abychom vám pomohli rozhodnout, co potřebujete pro svůj Webové stránky.
Také přizpůsobíme obě rozvržení, abychom viděli, jak fungují v jednom rozvržení divi.
Začněme!
přehled
Nejprve se podívejme, co v tomto tutoriálu vytvoříme.
Desktopová verze rozložení mřížky
Stáhněte si DIVI hned teď!!!
Telefonní verze rozložení mřížky
Desktopová verze rozvržení Fullwidth
Čtěte také: Divi: Jak používat efekty stínu a vznášet se k vytváření interaktivního obsahu
Telefonní verze rozvržení Fullwidth
Jak změnit rozvržení modulu filtrovatelného portfolia
Modul „Filtrovatelné portfolio“ standardně zobrazuje rozložení v plné šířce. Rozvržení můžete změnit tak, aby se položky zobrazovaly v mřížce. Nejprve otevřete parametry modulu.
Poté vyberte kartu Design. První možností je Nákres. Má rozevírací seznam s několika možnostmi. Vyberte jej a vyberte si mezi Plná šířka et Mřížka.
Pokud zvolíte možnost, která aktuálně není vybrána, modul znovu načte a zobrazí položky portfolia v tomto rozložení. Níže uvedený příklad ukazuje rozložení mřížky.
Porovnání rozvržení modulů filtrovatelného portfolia
Tato dvě rozložení jsou velmi odlišná, ale mají určité podobnosti. Oba zobrazují filtr v horní části modulu, název a meta pod obrázky položek a stránkování v dolní části modulu.
Zde je pohled na to, jak se liší.
Rozložení na celou šířku
Celá šířka zobrazí velký obrázek s prvkem portfolia zabírajícím celou šířku oblasti portfolia. Obrázky se zobrazí ve své původní podobě a rozbalí se, aby se vešly na dostupnou šířku.
Nepřidává mnoho místa mezi položkami peněženky. Doporučujeme omezit počet příspěvků na několik. Níže uvedený příklad ukazuje rozložení v plné šířce se 2 příspěvky.
Rozvržení mřížky
Rozvržení mřížky zobrazuje až 4 položky v řadě. Přidá více prostoru mezi prvky. Obrázky jsou oříznuty, aby se vytvořily miniatury stejné velikosti bez ohledu na velikost a tvar obrázku.
V tomto případě jsme omezili modul na zobrazení čtyř příspěvků pro zobrazení stránkování.
Kdy použít jednotlivé rozvržení modulu Filtrovatelné portfolio
Obě uspořádání mají své výhody. Zde je několik tipů, kdy použít jednotlivé rozvržení.
Rozložení na celou šířku
Rozvržení Plná šířka použijte, když máte k zobrazení jen několik položek nebo se chcete zaměřit na několik položek.
Toto rozvržení použijte také, když chcete zvýraznit doporučené obrázky nebo na ně upozornit.
Rozvržení mřížky
Rozvržení Mřížka použijte, když chcete zobrazit mnoho položek nebo když chcete, aby rozvržení zobrazovalo více položek na menším prostoru.
Jak přizpůsobit rozvržení modulů filtrovatelného portfolia
Nyní, když jsme viděli, jak vybrat rozvržení, jak fungují a kdy je použít, pojďme se podívat, jak tato dvě rozvržení přizpůsobit.
Použijeme stránku Portfolio Zdarma Painter Layout Pack k dispozici v Divi. Zde je původní stránka.
Portfolio nahradíme modulem Filterable Portfolio a použijeme stejné obrázky a názvy.
Vytvoříme dvě verze: jednu s rozložením po celé šířce a jednu s rozložením mřížky.
Jak přizpůsobit rozložení mřížky modulu filtrovatelného portfolia
Začneme rozložením mřížky. Použiji barvy a fonty z původního layoutu.
Obsah
Otevřete je parametry modulu a zadejte 4 pro Počet příspěvků. Vybrat vše kategorie které chcete zobrazit v modulu.
- Počet příspěvků: 4
- Zahrnuté kategorie: Vyberte kategorie
Dispozice
Poté vyberte kartu Design a zvolte Mřížka v možnostech rozložení.
- Rozložení: Mřížka
Obraz
Přejděte na Obraz a vyberte možnost BoxShadow. Změň to barva stínu v rgba(0,0,0,0.05).
- Box Shadow: 4ème volba
- Barva stínu: rgba (0,0,0,0.05)
Texty
Poté přejděte dolů na Texty a upravit zarovnání Ve středu. Tím se vycentruje filtr, název, meta a stránkování.
- Zarovnání textu: Střed
Název textu
Poté přejděte dolů na Text nadpisu a změňte následující nastavení.
- Písmo názvu : Merriweather
- Barva textu nadpisu: #000000
Změňte velikost policie na 26px pro stolní počítače, 20px pro tablety a 18px pro telefony.
- Velikost textu nadpisu: Desktop 26px, tablet 20px, Phone 18px
Text kritéria filtru
Poté přejděte dolů na Text kritérií filtru a změňte následující nastavení:
- Kritéria filtru:
- Písmo: Montserrat
- Tloušťka písma: Tučné
- Styl: TT
- Barva textu: #fd6927
- Velikost textu: 12px
Meta text
Poté přejděte dolů na Meta Text. Změň to policie v Montserratu a barva v #fd6927.
- Velikost meta textu: Montserrat
- Barva meta textu: #fd6927
Nastav taille na 12 pixelech,mezery mezi písmeny na 2 pixelech a povýšenost řádku na 1,2 em.
- Velikost textu: 12px
- Mezera mezi písmeny: 2px
- Meta Line Výška: 1,2 em
Stránkovací text
Nakonec přejděte dolů na Text stránkování a změnit to policie v Montserratu a nastavte barva písmo na černém pozadí. Zavřete modul a uložte nastavení.
- Písmo stránkování: Montserrat
- Barva textu stránkování: #000000
Jak přizpůsobit modul filtrovatelného portfolia v rozložení plné šířky
Nyní nakonfigurujme modul v rozložení v plné šířce.
Použijeme stejné návrhy jako rozvržení mřížky, ale provedeme několik změn, které pro toto rozvržení dobře fungují. K provedení drobných úprav použijeme jednoduché CSS.
Obsah
Otevřete je parametry modulu a změnit počet publikace na 2. Díky tomu bude stránka menší a lépe ovladatelná s velkými obrázky. Vybrat vše kategorie které chcete zobrazit v modulu.
- Počet příspěvků: 2
- Zahrnuté kategorie: Vyberte Kategorie
Prvky
Přejděte na Prvky a zakázat Zobrazit kategorie. Ostatní nechte povolené. Kategorie budou pro filtr stále povoleny, ale nebudou se zobrazovat s názvem.
- Zobrazit kategorie: NE
Dispozice
Vyberte kartu Design. pod Nákres, ponechte Layout nastavené na Plná šířka, což je jeho výchozí nastavení.
- Rozložení: Plná šířka
Obraz
Poté přejděte dolů na Obraz . Vyberte možnost Stín boxu a změnit to barva odstín v rgba (0,0,0,0.05).
- Box Shadow: 4ème volba
- Barva stínu: rgba (0,0,0,0.05)
Texty
Poté přejděte dolů na Text. Změň zarovnání Ve středu. Filtr, název a stránkování budou vycentrovány s obrázky.
- Zarovnání textu: Střed
Název textu
Poté přejděte dolů na Název textu . Změň to policie na Merriweather a změnit barva v černé.
- Písmo názvu : Merriweather
- Barva textu nadpisu: #000000
Změňte velikost policie na 40px pro stolní počítače, 20px pro tablety a 18px pro telefony.
- Velikost textu nadpisu: Desktop 40px, tablet 20px, Phone 18px
Text kritéria filtru
Poté přejděte dolů na Text kritérií filtru a změňte následující nastavení:
- Kritéria filtru:
- Písmo: Montserrat
- Tloušťka písma: Tučné
- Styl: TT
- Barva textu: #fd6927
Stránkovací text
Poté přejděte dolů na Text stránkování. Změň to policie v Montserrat, změnit poids polotučné a nastavte barva fontu na #fd6927. Zavřete modul a uložte nastavení.
- Písmo stránkování: Montserrat
- Barva: #fd6927
- Tloušťka písma: Polotučné
Text nadpisu CSS
Otevřete kartu pokročilý a přejděte na Název portfolia. Vyberte ikonu Plocha. Pro různé velikosti obrazovky zkopírujte níže uvedený kód. Zavřete modul a uložte nastavení.
Název portfolia:
- Desktop
padding-bottom:40px- Tablet
padding-bottom:30px- Telefon
padding-bottom:20px
Résultats
Desktopová verze rozložení mřížky
Telefonní verze rozložení mřížky
Stáhněte si DIVI hned teď!!!
Desktopová verze rozvržení v plné šířce
Telefonní verze rozložení na celou šířku
Stáhněte si DIVI hned teď!!!
Proč investovat do čističky vzduchu?
Toto je náš pohled na použití rozložení v plné šířce oproti mřížce v modulu Filtrovatelné portfolio z Divi. Výběr mezi dvěma možnostmi rozložení je snadný.
Každá možnost má své výhody a měla by být navržena jinak, aby fungovala s vaší Webové stránky. Stačí provést několik úprav, abyste zajistili, že váš modul bude dobře fungovat s jakýmkoli rozložením Divi.
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek.
Neváhejte se také podívat na našeho průvodce na Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
