Chceli by ste použiť modul Filtrovateľné portfólio z divi a nevieš aké rozloženie si vybrať?
Modul « Filtrovateľné portfólio "Ak chcete divi vám ponúka na výber dve možnosti rozloženia. Obe možnosti majú výhody a na určité účely fungujú veľmi dobre.
V tomto článku porovnáme rozloženie s plnou šírkou a mriežkou tohto modulu, aby sme vám pomohli rozhodnúť sa, čo potrebujete pre webové stránky.
Obidve rozloženia tiež prispôsobíme, aby sme videli, ako fungujú v jednom rozložení divi.
Začnime!
prehľad
Najprv sa pozrime, čo vytvoríme v tomto návode.
Desktopová verzia rozloženia mriežky
Stiahnite si DIVI teraz!!!
Telefónna verzia rozloženia mriežky
Desktopová verzia rozloženia Fullwidth
Čítajte tiež: Divi: Ako používať efekty tieňa a vznášania na vytváranie interaktívneho obsahu
Telefónna verzia rozloženia Fullwidth
Ako zmeniť rozloženie modulu filtrovateľného portfólia
Modul „Filtrovateľné portfólio“ štandardne zobrazuje rozloženie v plnej šírke. Rozloženie môžete zmeniť tak, aby sa položky zobrazovali v mriežke. Najprv otvorte parametre modulu.
Potom vyberte kartu Design. Prvá možnosť je Dispozícia. Má rozbaľovací zoznam s niekoľkými možnosťami. Vyberte ho a vyberte si medzi Plná šírka et mriežka.
Ak vyberiete možnosť, ktorá momentálne nie je vybratá, modul sa znova načíta a zobrazí položky portfólia v tomto rozložení. Nižšie uvedený príklad ukazuje rozloženie mriežky.
Porovnanie rozloženia filtrovateľných modulov portfólia
Tieto dve rozloženia sú veľmi odlišné, ale majú určité podobnosti. Obidve zobrazujú filter v hornej časti modulu, názov a meta pod obrázkami položiek a stránkovanie v spodnej časti modulu.
Tu je pohľad na to, ako sa líšia.
Rozloženie na celú šírku
Celá šírka zobrazuje veľký obrázok s prvkom portfólia zaberajúcim celú šírku oblasti portfólia. Obrázky sa zobrazujú v pôvodnej podobe a rozširujú sa, aby sa prispôsobili dostupnej šírke.
Nepridáva veľa priestoru medzi položkami peňaženky. Odporúčame obmedziť počet príspevkov na niekoľko. Príklad nižšie ukazuje rozloženie na celú šírku s 2 príspevkami.
Rozloženie mriežky
Rozloženie Mriežka zobrazuje až 4 položky v rade. Pridáva viac priestoru medzi prvkami. Obrázky sú orezané, aby sa vytvorili miniatúry rovnakej veľkosti bez ohľadu na veľkosť a tvar obrázka.
V tomto prípade sme modul obmedzili na zobrazenie štyroch príspevkov na zobrazenie stránkovania.
Kedy použiť jednotlivé rozloženia modulu Filtrovateľné portfólio
Obe usporiadania majú svoje výhody. Tu je niekoľko tipov, kedy použiť jednotlivé rozloženia.
Rozloženie na celú šírku
Rozloženie Celá šírka použite, ak máte na zobrazenie len niekoľko položiek alebo sa chcete zamerať na niekoľko položiek.
Toto rozloženie použite aj vtedy, keď chcete zvýrazniť alebo upozorniť na odporúčané obrázky.
Rozloženie mriežky
Rozloženie Mriežka použite, ak chcete zobraziť veľa položiek alebo ak chcete, aby rozloženie zobrazovalo viac položiek na menšom priestore.
Ako prispôsobiť rozloženie filtrovateľných modulov portfólia
Teraz, keď sme videli, ako vybrať rozloženia, ako fungujú a kedy ich použiť, poďme sa pozrieť, ako tieto dve rozloženia prispôsobiť.
Použijeme stránku Portfólio Bezplatný balík rozloženia Painter dostupné v Divi. Tu je pôvodná stránka.
Portfólio nahradíme modulom Filterable Portfolio a použijeme rovnaké obrázky a názvy.
Vytvoríme dve verzie: jednu s rozložením na celú šírku a jednu s rozložením mriežky.
Ako prispôsobiť rozloženie mriežky modulu filtrovateľného portfólia
Začneme rozložením mriežky. Použijem farby a fonty z pôvodného rozloženia.
Obsah
Otvorte ich parametre modulu a zadajte 4 pre Počet príspevkov. Vybrať všetko kategórie ktoré chcete zobraziť v module.
- Počet príspevkov: 4
- Zahrnuté kategórie: Vyberte Kategórie
dispozície
Potom vyberte kartu dizajn a vyber si mriežka v možnostiach rozloženia.
- Rozloženie: Mriežka
Obraz
Prejdite na položku Obraz a vyberte možnosť BoxShadow. Zmeň to farba tieňa v rgba(0,0,0,0.05).
- Box Shadow: 4 voľba
- Farba tieňa: rgba (0,0,0,0.05)
Texty
Potom prejdite nadol na Texty a upraviť vyrovnanie V centre. Toto vycentruje filter, názov, meta a stránkovanie.
- Zarovnanie textu: Stred
Názov textu
Potom prejdite nadol na Text nadpisu a zmeňte nasledujúce nastavenia.
- Písmo názvu : Merriweather
- Farba textu nadpisu: #000000
Zmeňte veľkosť polícia pri 26px pre stolné počítače, 20px pre tablety a 18px pre telefóny.
- Veľkosť textu nadpisu: Desktop 26px, tablet 20px, Phone 18px
Text kritéria filtra
Potom prejdite nadol na Text kritérií filtra a zmeňte nasledujúce nastavenia:
- Kritériá filtra:
- Písmo: Montserrat
- Hrúbka písma: tučné
- Štýl: TT
- Farba textu: #fd6927
- Veľkosť textu: 12px
Meta text
Potom prejdite nadol na Meta Text. Zmeň to polícia v Montserrate a farba v #fd6927.
- Veľkosť meta textu: Montserrat
- Farba meta textu: #fd6927
Nastaviť pás na 12 pixelov,medzery medzi písmenami na 2 pixeloch a hauteur riadku na 1,2 em.
- Veľkosť textu: 12px
- Meter medzi písmenami: 2px
- Meta Line Výška: 1,2 em
Text stránkovania
Nakoniec prejdite nadol na Text stránkovania a zmeniť to polícia v Montserrate a nastavte farba písmo na čiernom. Zatvorte modul a uložte nastavenia.
- Písmo stránkovania: Montserrat
- Farba textu stránkovania: #000000
Ako prispôsobiť modul filtrovateľného portfólia v rozložení s plnou šírkou
Teraz nakonfigurujme modul v rozložení na celú šírku.
Použijeme rovnaké dizajnové prvky ako rozloženie mriežky, ale urobíme niekoľko zmien, ktoré budú pre toto rozloženie vhodné. Na vykonanie menších úprav použijeme jednoduché CSS.
Obsah
Otvorte ich parametre modulu a zmeniť počet publikácie na 2. Vďaka tomu bude stránka menšia a lepšie spravovateľná s veľkými obrázkami. Vybrať všetko kategórie ktoré chcete zobraziť v module.
- Počet príspevkov: 2
- Zahrnuté kategórie: Vyberte Kategórie
Položky
Prejdite na položku Prvky a zakázať Zobraziť kategórie. Ostatné nechajte zapnuté. Kategórie budú pre filter stále povolené, ale nebudú sa zobrazovať s názvom.
- Zobraziť kategórie: NIE
dispozície
Vyberte kartu Design. pod Dispozícia, ponechajte Layout nastavené na Plná šírka, čo je jeho predvolené nastavenie.
- Rozloženie: Plná šírka
Obraz
Potom prejdite nadol na Obraz . Vyberte možnosť Shadow Box a zmeniť to farba odtieň v rgba (0,0,0,0.05).
- Box Shadow: 4 voľba
- Farba tieňa: rgba (0,0,0,0.05)
Texty
Potom prejdite nadol na text. Zmeniť vyrovnanie V centre. Filter, názov a stránkovanie budú vycentrované s obrázkami.
- Zarovnanie textu: Stred
Názov textu
Potom prejdite nadol na Názov textu . Zmeň to polícia na Merriweather a zmeniť farba v čiernej farbe.
- Písmo názvu : Merriweather
- Farba textu nadpisu: #000000
Zmeňte veľkosť polícia pri 40px pre stolné počítače, 20px pre tablety a 18px pre telefóny.
- Veľkosť textu nadpisu: Desktop 40px, tablet 20px, Phone 18px
Text kritéria filtra
Potom prejdite nadol na Text kritérií filtra a zmeňte nasledujúce nastavenia:
- Kritériá filtra:
- Písmo: Montserrat
- Hrúbka písma: tučné
- Štýl: TT
- Farba textu: #fd6927
Text stránkovania
Potom prejdite nadol na Text stránkovania. Zmeň to polícia v Montserrate, zmeňte váha polotučné a nastavte farba písma na #fd6927. Zatvorte modul a uložte nastavenia.
- Písmo stránkovania: Montserrat
- Farba: #fd6927
- Hmotnosť písma: polotučné
Text nadpisu CSS
Otvorte kartu pokročilý a prejdite na Názov portfólia. Vyberte ikonu Pracovná plocha. Skopírujte nižšie uvedený kód pre rôzne veľkosti obrazovky. Zatvorte modul a uložte nastavenia.
Názov portfólia:
- Desktop
padding-bottom:40px- tableta
padding-bottom:30px- Telefón
padding-bottom:20px
résultats
Desktopová verzia rozloženia mriežky
Telefónna verzia rozloženia mriežky
Stiahnite si DIVI teraz!!!
Desktopová verzia rozloženia na celú šírku
Pozri tiež: Divi: Ako zmeniť gradient pozadia pri umiestnení kurzora myši
Telefónna verzia rozloženia na celú šírku
Stiahnite si DIVI teraz!!!
záver
Toto je náš pohľad na použitie rozloženia v plnej šírke oproti mriežke v module Filtrovateľné portfólio z Divi. Výber medzi dvoma možnosťami rozloženia je jednoduchý.
Každá možnosť má výhody a mala by byť navrhnutá inak, aby fungovala s vašou webové stránky. Stačí vykonať niekoľko vylepšení, aby ste sa uistili, že váš modul bude dobre fungovať s akýmkoľvek rozložením Divi.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.
Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
