Výukový program Divi: Jak používat modul portfolia plné šířky

Filtrovatelné portfolio v Divi vám umožňuje zobrazit vaše nejnovější projekty v mřížce nebo standardním režimu. Filtrovatelné portfolio vypadá jako normální modul portfolia, kromě toho, že načte nové projekty pomocí požadavku Ajaxu a obsahuje možnosti filtrování seznamu projektů podle kategorií. Když je vybrána konkrétní kategorie, seznam projektů se okamžitě znovu vygeneruje novým seznamem projektů z vybrané kategorie.

Jak přidat filtrovatelný portfolio modul na vaši stránku

Než budete moci přidat filtrovatelný modul portfolia na svou stránku, musíte nejprve přejít do Divi Builderu. Jednou Divi téma nainstalovaný na vašem Webové stránky, všimnete si tlačítka Použijte nástroj Divi Builder nad editorem příspěvků, kdykoli vytvoříte novou stránku. Kliknutím na toto tlačítko aktivujete Divi Builder a získáte přístup ke všem modulům Divi Builder. Poté klikněte na tlačítko Použijte Visual Builder pro spuštění generátoru ve vizuálním režimu. Můžete také kliknout na tlačítko Povolit Visual Builder když si prohlížíte své Webové stránky v popředí, pokud jste přihlášeni do svého řídicího panelu WordPress.

Jakmile zadáte Visual Builder, můžete kliknutím na šedé tlačítko plus přidat nový modul na svou stránku. Nové moduly lze přidávat pouze do řádků. Pokud začínáte novou stránku, nezapomeňte nejprve přidat na stránku řádek.

Vyhledejte filtrovatelný modul portfolia v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modulů lze prohledávat, což znamená, že můžete také zadat slovo „portfolio na celou obrazovku“ a poté kliknout na „Enter“, abyste automaticky našli a přidali filtrovatelný modul portfolia! Po přidání modulu vás uvítá seznam možností modulu. Tyto možnosti jsou rozděleny do tří hlavních skupin: Obsah , Design et pokročilý .

Příklad použití: Přidání filtrovatelného modulu portfolia na stránku portfolia

V tomto příkladu vám ukážu, jak přidat filtrovatelný portfolio modul na stránku portfolia.

Začněme.

Pomocí vizuálního nástroje přidejte běžnou sekci s řádkem s plnou šířkou (1 sloupec) pod záhlaví stránky. Poté do řádku přidejte filtrovatelný modul portfolia.

Aktualizujte nastavení filtrovatelného portfolia následovně:

Možnosti obsahu

Počet článků: 8

Možnosti návrhu

Rozložení: Mřížka Zvětšení Barva ikony: #ffffff Barva překrytí kurzoru: rgba (224,153,0,0.58 14) Písmo nadpisu: Výchozí, tučné, velké písmo Nadpis Velikost písma: 1 pixelů Rozteč písmen nadpisu: 14 pixel Filtr písma: Tučné, velké filtry Velikost písma: 1px Rozteč písmen filtru: 12px Meta Velikost písma: 1px Meta rozteč písmen: XNUMXpx

Pokročilé možnosti (vlastní CSS)

Filtr aktivního portfolia: barva: # e09900; Název portfolia: text-align: center; Portfolio Message Meta: text-align: center; Aktivní stránka stránkování: barva: # e09900! Důležité;

A je to!

Možnosti filtrovatelného obsahu portfolia

Na kartě obsah najdete všechny prvky obsahu modulu, například text, obrázky a ikony. Vše, co ovládá co ve vašem modulu se vždy najde na této kartě.

Počet zpráv

Zvolte, jak zobrazit příspěvky, které chcete zobrazit, než bude seznam zobrazen.

Zahrnout kategorie

Vyberte kategorie, které chcete zobrazit. Příspěvky v kategoriích, které nejsou vybrány, se nezobrazí v seznamu vygenerovaných příspěvků.

Zobrazit titul

V případě potřeby zadejte název, který bude umístěn nad seznamem projektů.

Zobrazit kategorie

Zvolte, zda chcete zobrazit kategorii pod každým článkem v oblasti metadat.

Zobrazení stránkování

Tato možnost povoluje / zakazuje stránkování. Pokud je stránkování zakázáno, bude pro každou kategorii zobrazena pouze jedna stránka projektu.

Barva pozadí

Definujte vlastní barvu pozadí pro svůj modul nebo ponechte prázdné, chcete-li použít výchozí barvu.

Obrázek na pozadí

Pokud je nastaven, bude tento obrázek použit jako pozadí pro tento modul. Chcete-li odebrat obrázek na pozadí, jednoduše odeberte adresu URL z pole nastavení. Obrázky pozadí se objeví nad barvami pozadí, což znamená, že při použití obrázku pozadí nebude barva pozadí viditelná.

Štítek správy

Tím se změní štítek modulu v konstruktoru pro snadnou identifikaci. Když použijete pohled WireFrame ve Visual Builderu, tyto popisky se zobrazí v bloku modulu rozhraní Divi Builder.

Filtrovatelné možnosti návrhu portfolia

Na kartě Návrh najdete všechny možnosti stylingu modulu, například písma, barvy, velikost a mezery. Toto je karta, kterou použijete ke změně vzhledu vašeho modulu. Každý modul Divi má dlouhý seznam nastavení designu, pomocí kterého můžete cokoli změnit.

Dispozice

Vyberte styl rozvržení pro své portfolio. „Fullwidth“ zobrazuje jednu zprávu na řádek, zatímco „Grid“ zobrazuje vaše projekty v kachlové mřížce s více projekty na řádek.

Barva textu

Zde můžete zvolit, zda má být text světlý nebo tmavý. Pokud pracujete na tmavém pozadí, měl by být váš text světlý. Pokud je pozadí světlé, měl by být text tmavý.

Font písma

Písmo textu nadpisu můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také přizpůsobit pomocí možností tučně, kurzíva, velká písmena a podtržení.

Velikost písma titulku

Zde můžete upravit velikost textu nadpisu. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Barva textu titulku

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu textu nadpisu, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozestup hlavních písmen

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem v textu nadpisu, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Výška řádku názvu

Výška řádku ovlivňuje mezeru mezi každým řádkem textu nadpisu. Chcete-li zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo do vstupního pole zadejte požadovanou velikost mezery. umístěný napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Filtr písma

Písmo textu filtru můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také přizpůsobit pomocí možností tučně, kurzíva, velká písmena a podtržení.

Filtrování velikosti písma

Zde můžete upravit velikost textu filtru. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Filtrovat barvu textu

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu textu filtru, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Filtrování mezer mezi písmeny

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem v textu filtru, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Výška filtrační linie

Výška řádku ovlivňuje mezeru mezi každým řádkem textu filtru. Chcete-li zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo do vstupního pole zadejte požadovanou velikost mezery. umístěný napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Meta písmo

Písmo meta textu můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také přizpůsobit pomocí možností tučně, kurzíva, velká písmena a podtržení.

Velikost písma Meta

Zde můžete upravit velikost meta textu. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Barva textu Meta

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu svého meta textu, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozpětí mezi písmeny

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem meta-textu, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Výška meta linky

Výška řádku ovlivňuje mezeru mezi jednotlivými řádky meta-textu. Chcete-li zvětšit mezeru mezi jednotlivými řádky, upravte mezeru pomocí posuvníku rozsahu nebo do vstupního pole zadejte požadovanou velikost mezery. umístěný napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Použijte okraj

Povolením této možnosti umístíte ohraničení kolem vašeho modulu. Toto ohraničení lze přizpůsobit pomocí následujících podmíněných parametrů.

Barva hranice

Tato možnost ovlivňuje barvu ohraničení. Vyberte vlastní barvu z výběru barev a použijte ji na svůj okraj.

Šířka hranice

Ve výchozím nastavení jsou ohraničení široká 1 pixel. Tuto hodnotu můžete zvýšit přetažením posuvníku rozsahu nebo zadáním vlastní hodnoty do vstupního pole vpravo od posuvníku. Podporovány jsou vlastní měrné jednotky, což znamená, že můžete změnit výchozí jednotku z „px“ na něco jiného, jako em, vh, vw atd.

Styl okraje

Okraje podporují osm různých stylů: plný, tečkovaný, tečkovaný, dvojitý, drážka, hřeben, překrytí a začátek. Vyberte požadovaný styl z rozevírací nabídky a použijte jej na svůj okraj.

Pokročilé možnosti filtrovatelného portfolia

Na kartě Upřesnit najdete možnosti, které by zkušenější weboví designéři mohli považovat za užitečné, například vlastní atributy CSS a HTML. Zde můžete použít vlastní CSS na kterýkoli z mnoha prvků modulu. Na modul můžete také použít vlastní třídy a ID CSS, které lze použít k přizpůsobení modulu v souboru style.css vašeho podřízeného motivu.

CSS ID

Zadejte volitelné ID CSS, které chcete použít pro tento modul. ID lze použít k vytvoření vlastního stylu CSS nebo k propojení s konkrétními částmi vaší stránky.

CSS třídy

Zadejte volitelné třídy CSS, které chcete pro tento modul použít. Třídu CSS lze použít k vytvoření vlastních stylů CSS. Můžete přidat více tříd oddělených mezerou. Tyto třídy lze použít v podřízeném motivu Divi nebo ve vlastní šabloně stylů CSS, kterou přidáte na svou stránku nebo web. Webové stránky pomocí možností motivu Divi nebo nastavení stránky Divi Builder.

Vlastní CSS

Vlastní CSS lze také použít na modul a na libovolné interní součásti modulu. V sekci Vlastní CSS najdete textové pole, kde můžete přidat vlastní šablony stylů CSS přímo ke každému prvku. Položky CSS v tomto nastavení jsou již zabaleny do značek stylů. Stačí tedy zadat pravidla CSS oddělená středníky.

viditelnost

Tato možnost umožňuje ovládat zařízení, na kterých se váš modul zobrazuje. Můžete se rozhodnout deaktivovat svůj modul na tabletech, chytrých telefonech nebo stolních počítačích jednotlivě. To je užitečné, pokud chcete použít různé mody na různých zařízeních, nebo pokud chcete zjednodušit mobilní design odstraněním určitých prvků ze stránky.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STÁHNOUT TÉMA DIVI [/vcex_button][/vc_column=][vc_column /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STAŽTE SI TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Příručka Divi: Jak používat modul peněz v plné šíři