Divi: Jak přizpůsobit prvek mřížky modulu "Filtrovatelné portfolio".

Chtěli byste vědět, jak přizpůsobit prvky mřížky modulu Filtrovatelné portfolio divi ? Sledujte nás v tomto tutoriálu...

Mějte u sebe zónu Webové stránky předvést svou práci je důležité. Pokud jste stylista, můžete na svém vytvořit několik projektů Webové stránky WordPress pro předvedení vašich konceptů. Pokud jste tvůrcem značky, můžete k prezentaci své práce použít portfolio. Navíc můžeme jít ještě dále a přidat různé kategorie pro naše projekty. Je to tady co dělá Divi's Filterable Portfolio modul? .

S tímto modulem jsme schopni zobrazit naši tvrdou práci jednoduchým a organizovaným způsobem. 

V dnešním tutoriálu si přizpůsobíme jednotlivé prvky mřížky modulu Filtrovatelné portfolio. Použijeme rozložení z bezplatných balíčků rozložení Konference Divi et Divi Online instruktor jógy poskytnuto při každém nákupu divi . 

Jako u všeho o divi, máme možnost přizpůsobit tento modul tak, aby vyhovoval našim potřebám a přáním. Než se však pustíme do stylingu, pojďme se o modulu dozvědět něco více.

Co je modul Filtrovatelného portfolia Divi?

Projekty jsou součástí vlastního typu příspěvku, který funguje stejně jako příspěvky. Najdete je na svém panelu WordPress.

Zde vytvoříte své individuální projekty, které naplní váš modul Filtrovatelné portfolio. Modul nám poskytuje dva způsoby, jak ukázat naše projekty: ve formátu mřížky ou ve formátu s plnou šířkou. Pro nás použijeme a přizpůsobíme formát mřížky. 

S modulem Filterable Portfolio budeme moci prezentovat naše nejnovější projekty. Uživatelům našeho webu se v horní části mřížky našeho portfolia zobrazí pruh filtru. Odtud mohou procházet různé kategorie portfolia, které umožňujeme v modulu zobrazit.

Zde je příklad konfigurace mřížky modulu s některými ukázkovými projekty:

Oblasti, které je třeba vzít v úvahu při vytváření filtrovatelného portfolia Divi

Jako všechny mody diviModul Filterable Portfolio přichází s řadou funkcí, které můžeme přizpůsobit našim potřebám a přáním. Většinu funkcí, které jsou součástí modulu, lze tedy upravit na kartě Design z modálu nastavení modulu. Můžeme upravit následující oblasti a další:

• Název projektu
• Kategorie projektu
• Medailónek
• Filtrovat text
• Miniatura při umístění kurzoru myši
• Počet na stránku

Toto není úplný seznam a ani jsme nezačali mluvit o tom, jak CSS přidalo do tohoto modulu hlubší přizpůsobení!

Jak přizpůsobíme modul Divi's Filterable Portfolio

Jak již bylo zmíněno dříve, pro tento tutoriál použijeme dvě rozložení: Konference Divi et Divi Online instruktor jógy. Níže můžete získat přehled o práci, kterou budeme dělat během tohoto tutoriálu.

Uspořádání prvků uspořádání "Divi Conference".

Uspořádání prvků rozložení "Divi Online Yoga Instructor".

Obě rozložení si můžete snadno stáhnout z divi Stavitel. 

Nyní se do toho dáme!

Viz také: Divi: Vyberte si mezi mřížkou a rozložením v plné šířce modulu Filtrovatelné portfolio

Přizpůsobení modulu Divi Filterable Portfolio: "Divi Conference Edition"

Nejprve budeme muset nainstalovat šablonu stránky události z Divi Conference Layout Pack. Po vytvoření vaší nové stránky ve WordPressu a aktivaci Divi Builderu vstoupíme do Divi Library.

Vstupte do Divi Layout Library

Klikněte na ikonu « Načíst z knihovny pro vstup do Divi Layout Library

Vyhledejte rozvržení v knihovně rozvržení Divi

Pomocí funkce vyhledávání v knihovně rozložení Divi hledá dispozice" Stránka události konference".

Nainstalujte rozložení

Jakmile vyberete rozvržení, klikněte na " Použijte toto rozvržení k instalaci rozvržení na stránku.

Odebrat a vyměnit obrazový modul

Odebereme modul Obrázek zobrazený níže, abychom vytvořili místo pro modul Filtrovatelné portfolio, který budeme přizpůsobovat. Klikněte na " Vymazat po najetí myší na obrázek fotografii smažete.

Vložte modul Divi's Filterable Portfolio

S odstraněným modulem Image nyní můžeme uvolnit místo pro náš modul Filterable Portfolio. Klikneme na ikonu „ Přidat modul (šedé znaménko plus), potom vyberte modul v modálním poli modulu, které se zobrazí.

Nastavení počtu příspěvků a rozložení portfolia

Ve výchozím nastavení bude tento modul prezentovat vaši práci v jednom sloupci. Použijeme však rozložení mřížky, které je standardně dodáváno se 4 sloupci. 

Jako takové doporučujeme zvolit násobek 4 (4, 8, 12, 16 atd.) jako počet příspěvků pro vaše portfolio. 

Pro tento tutoriál použijeme 12 projektů v naší mřížce.

Začněte přizpůsobovat filtrovatelné portfolio Divi: Titulek a Metatext

Nyní, když jsou naše projekty zobrazeny v mřížce, propojme některé prvky návrhu naší vybrané šablony. V tomto případě použijeme styl dodaný s Divi Conference Layout Pack v našem novém modulu.

Styl textu

• Zarovnání textu: Na střed
• Barva textu: Tmavá

Styl textu nadpisu

• Úroveň nadpisu: H2
• Písmo názvu : Krona One
• Barva textu: #000000

Meta styl textu

• Meta Font: Výchozí (Otevřený bez)
• Barva meta textu: #ff6651

Nyní, když máme svůj styl pro tituly v mřížce portfolia, pojďme provést nějaké změny ve skutečném tvaru samotných miniatur projektu.

Změňte ohraničení miniatur projektu a zaoblené rohy

V našem balíčku Divi Conference Layout používáme jedinečnou kombinaci zaoblených rohů, abychom některým klíčovým snímkům v balíčku dali jedinečný tvar. Aplikujme tento styl na miniatury našeho modulu.

Obraz

• Obraz :
  • Zaoblené rohy: 50px 50px 50px 0px
  • Styly ohraničení: všechny
  • Šířka okraje: 3px
  • Barva: #000000
  • Styl ohraničení: pevný

To dá našim miniaturám tvar, který odpovídá zbytku ostatních obrázků v balíčku rozložení.

Přizpůsobení překryvného zobrazení po najetí myší

Pojďme ještě o krok dále s naším stylem a proveďte malou změnu výchozího překrytí, které je součástí tohoto modulu. Změníme barvu i ikonu, která se používá hned po vybalení.

Superpozice

• Barva ikony zoomu: #bcf5fd
• Barva překrytí kurzorem: #ff6651
• Výběr ikony při najetí myší: Přiblížení

Jak nyní můžete vidět, přidali jsme barvy značky pro toto rozvržení do překryvné vrstvy a také jsme změnili ikonu, kterou Divi ve výchozím nastavení poskytuje pro funkci překrytí při umístění kurzoru v tomto modulu.

Přizpůsobení stránkování

Nyní začneme používat malé úryvky CSS, abychom do našeho modulu Filterable Portfolio přidali další přizpůsobení. Nejprve přizpůsobíme stránkování tohoto modulu. Dále odstraníme ohraničení, které se objeví nad ním, pomocí jediného řádku CSS

Stránkovací text

• Stránkování:
  • Písmo: Krona One
  • Zarovnání textu: na střed
  • Barva textu: #ff6651, #000000 (přejetí myší)

U našeho CSS se přepneme na záložku pokročilý našeho modulu. Za druhé, klikneme na záložku Vlastní CSS. Dále zadáme následující úryvek kódu, abychom odstranili ohraničení nad stránkováním a dodali mu čistší vzhled.

Stránkování portfolia

border-top: 0px;

Použití nastavení Divi a CSS k přizpůsobení textu filtru

U textu filtru to vezmeme o stupeň výš. Budeme používat CSS ke změně pozadí i efektů hoveru. 

Chceme mít dokonalou kontinuitu mezi nově přidaným modulem a stylem layout packu. Nejprve zadejte naše nastavení Divi pro písmo.

Text kritérií filtru

• Kritéria filtru:
  • Písmo: Krona One
  • Barva písma: #ffffff, #000000 (Hover)

Jak to tak stojí, náš filtr se zdá být pryč. Ve výchozím stavu je to bílý text na bílém pozadí. To však změníme pomocí vlastního CSS na dvou místech. 

Nejprve do nastavení stránky přidáme úryvek CSS, který přidá pozadí k textu filtru. Za druhé si pomocí záložky přizpůsobíme aktivní filtr portfolia pokročilý du modul.

Mít přístup nastavení stránky, klikněte na tři tečky uprostřed obrazovky. pak vyberte ikonu ozubeného kola který otevře nastavení stránky. Pak ty přejděte na kartu Custom CSS a zadejte následující pro přidání pozadí k textu filtru.

Vlastní CSS

V tomto úryvku CSS cílíme na barvu pozadí filtru. Také cílíme a stylizujeme jeho stav visení. Jako další na programu přidáme do modulu další CSS a zvýrazníme naši kartu Aktivní filtr.

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}

Styl aktivní karty s filtrem portfolia

Aktivní záložka ffiltr portfolia upozorňuje uživatele na aktuální kategorii portfolia, kterou navštěvují. V současné době má tento filtr bílý text a světlé pozadí. 

Přejdeme na kartu pokročilý modulu Filtrovatelné portfolio a přidejte text k výchozím stavům této funkce a stavům kurzoru myši. Zde jsou vlastnosti CSS, které přidáme ve výchozím stavu:

background: #ff6651;
color: #ffffff !important;

Stav na houpačce

Při najetí myší změníme pozadí na černé.

color: #000000!important;

Konečný vzhled designu filtrovatelného portfolia Divi s "Divi Conference"

Zde je konečný vzhled!

A teď, tady je to, jak to vypadá, když umístíte kurzor!

Přizpůsobení modulu Divi's Filterable Portfolio: "Divi Online Yoga Instructor"

Stejně jako u Divi Conference Edition najděte své rozložení v balíčku rozložení pro online lektora jógy v Divi Builderu. 

V tomto tutoriálu budeme používat rozvržení vstupní stránky. Přejděte dolů do sekce Třídy sekcí s názvem Sekce Všechny nadcházející lekce.

Vložení modulu Filtrovatelné portfolio

Odtud odstraníme řádky s třídami. Klikněte na fialovou ikonu se třemi tečkami . Pak, vyberte zobrazení drátového modelu. Nakonec smažete dva řádky obsahující tři sloupce.

Poté je nahradíme jedním sloupcem v řádku uvnitř. Poté přidáme náš modul Filtrovatelné portfolio.

Stejně jako v předchozím příkladu použijeme pro tento modul rozložení mřížky s násobkem 4 pro počet příspěvků. 

Nyní udělejme něco trochu jiného s informacemi, které prezentujeme na mapě. 

Na kartě Obsah, navigovat do Prvky a zrušte výběr Zobrazit kategorie . To znamená, že modul Portfolio zobrazí pouze název projektu bez názvu kategorie, ve které se nachází.

Přizpůsobení textu kritérií filtru, názvu projektu a textu stránkování

Pojďme definovat stylovou základnu pro textové části našeho modulu. Hlavní text tohoto rozvržení je otevřené Sans a písmo použité pro hlavní nadpisy je cinzel. Proto budeme během procesu stylování používat kombinaci těchto dvou písem.

Texty

• Zarovnání textu: Na střed
• Barva textu: Světlá

Název textu

• Písmo názvu : Cinzel
• Barva textu nadpisu: #ffffff

Text kritérií filtru

• Kritéria filtru Tloušťka písma: Tučné
• Barva textu kritérií filtru: #ffffff

Stránkovací text

• Tloušťka písma stránkování: Tučné

Takto vypadá náš modul filtrovatelného portfolia právě teď. Není to moc, ale pomalu se k tomu dostáváme!

Vytvořte průsvitnou překryvnou vrstvu

Pojďme se inspirovat různými moduly a krásnými přechody v tomto rozložení. Za tímto účelem vytvoříme průsvitné překryvné zobrazení a upravíme ikonu, která se také zobrazí při umístění kurzoru.

• Barva ikony přiblížení: #323741
• Barva překryvné vrstvy při najetí myší: rgba (255 201 165, 0,85)
• Hover Icon Picker: vyhledejte list a podívejte se na ikonu výše

Přidání ohraničení k prvkům mřížky portfolia pomocí vlastního CSS

Podobně jako v našem prvním příkladu nyní použijeme CSS k přidání větší zajímavosti do našeho modulu Filtrovatelné portfolio. 

Nyní přidáme ohraničení kolem každé jednotlivé položky v mřížce portfolia. Pomocí fragmentu CSS níže ve vlastní části CSS v nastavení stránky přidejte náš okraj. 

Jako třídu CSS pro tento modul také použijeme „border“.

• CSS Třída: border

Vlastní CSS

/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}

Nyní zde máme náš modul Filterable Portfolio s pěkným okrajem – a vycpávkou – kolem každé položky mřížky.

Přidáno CSS do okraje stránkování stylu

Na rozdíl od našeho předchozího příkladu přidejte barvu k ohraničení našeho stránkování pomocí CSS. To půjde i v oblasti Nastavení > Vlastní stránka CSS .

/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}

Styl textu kritérií filtru

Podobně jako ve stylu našeho modulu Divi Conference Portfolio chceme do našich filtrů kategorií přidat jazz. Opět chceme čerpat ze stylu, který je již přítomen v nám poskytnuté šabloně. 

Zde je CSS, které přidáme do naší vlastní sekce CSS, abychom zacílili na pozadí a kurzor na lištu filtrů.

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
 
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}

S těmito dvěma novými přírůstky do našeho vlastního CSS se náš modul Filtrovatelného portfolia utváří tak, aby vypadal.

Všimněte si však, jak se ztrácí aktivní filtr portfolia. Vždy má světlé pozadí s bílým textem. Pojďme do nastavení modulu a přidejte nějaké CSS, abyste to změnili.

Vlastní CSS

Aktivní filtr portfolia:

background: #ffffff;
color: #323741 !important;

Odebrat animaci modulu

Abychom zajistili čistší prostředí, odstraníme výchozí animaci dodávanou s modulem Filtrovatelné portfolio. Nejprve se budeme muset vrátit do nastavení naší stránky a přidat nějaké CSS, které zacílí na prvky mřížky portfolia a odstraní je posuvný přechod to se stane po vybalení z krabice.

Vlastní CSS

/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}

Čtěte také: Divi: Jak změnit počet sloupců v blogu

Změňte mřížku portfolia ze čtyř sloupců na tři

Náš nejnovější přírůstek CSS bude transformovat náš modul Filtrovatelné portfolio ze čtyř sloupců na tři. To nám dá více prostoru, abychom viděli naše projekty. 

Také do našeho modulu přidáme další řádek. Najdete zde také nejnovější fragment CSS, který můžete použít k převodu sloupců.

Vlastní CSS

U tohoto posledního úryvku přidáme ID CSS #třísloupcová mřížka do našeho modulu. Stále zachováme naši třídu CSS z dřívějška nedotčenou.

/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
 
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}

Stáhněte si DIVI hned teď!!!

Proč investovat do čističky vzduchu?

Stejně jako u většiny modulů Divi lze nastavení dodávaná s Divi dále rozvíjet pomocí CSS. Prezentace vaší práce je důležitou součástí provozování online obchodu, blogu nebo značky. 

Proto je nezbytné mít organizovaný způsob, jak zobrazit svou práci. Získejte tipy, které byly dnes sdíleny, abyste se mohli zúčastnit své vlastní designové cesty modulu Divi's Filterable Portfolio.

Doufejme, že tato technika přidá další užitečnou designovou dovednost pro budoucí projekty.

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.

...