Divi vám umožňuje vytvářet neomezený počet oblastí připravených k použití za chodu. Postranní panely lze poté přidat na jakoukoli stránku, což vám umožní vytvořit jedinečné postranní panely pro různé části vaší stránky Webové stránky.

Jak přidat modul widgetu Zonde od společnosti Divi

Než budete moci na svou stránku přidat modul postranního panelu, 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 Použijte 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.

divi stavitel

Jakmile používáte Visual Builder, můžete kliknutím na šedé (+) tlačítko přidat na stránku nový modul. 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.

sidebar divi plugin wordpress.png

Vyhledejte modul postranního panelu v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modulů je prohledávatelný, což znamená, že můžete také zadat slovo „postranní panel“ a poté kliknout na „Enter“, abyste modul bočního panelu automaticky našli a přidali! 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í postranního panelu na stránku blogu

Modul postranního panelu umožňuje vložit postranní panel (a všechny jeho integrované widgety) kamkoli na vaši stránku. Ve skutečnosti můžete přidat libovolnou oblast widgetu pomocí modulu postranního panelu. V tomto příkladu vám ukážu, jak vložit vlastní postranní panel na stránku blogu pomocí specializované sekce k zobrazení widgetu Hledat a Poslední příspěvky na WordPress.

sidebar pro článek o WordPress.jpg

Tato stránka blogu má záhlaví o celé šířce, aby se v horní části stránky zobrazil název blogu. Pod modulem záhlaví s plnou šířkou je speciální rozvržení s modulem blogu vlevo a pravou svislou oblastí postranního panelu vpravo.

Použití specializované sekce vám umožňuje přidat složité variace sloupců vedle svislých postranních panelů, aniž byste na stránku přidávali nežádoucí konce. To je ideální pro blog s postranním panelem.

Nejprve se musíte ujistit, že máte widgety nastaveny na stránce Widgety na vašem panelu WordPress. V tomto příkladu přidávám widget Hledat a widget Poslední články do widgetu Boční panel.

boční lišta widget wordpress.png

Poté nasaďte Visual Builder a upravte stránku blogu. Přidejte na svou stránku specializovanou sekci (těsně pod záhlavím) s následujícím rozložením:

vytvořit vlastní sekci divi.png

vložit sloupce divi.png

Jakmile na stránku přidáte specializovanou sekci, všimnete si, že oblast (vlevo) má tlačítko „Přidat modul“. V tomto příkladu je toto místo, kde byl přidán modul Blog s rozložením mřížky pro zobrazení blogových příspěvků.
příklad článku rozložení blogu grid.png

Druhý (vpravo) má tlačítko „Vložit řádek“. Oblast „Vložit modul“ představuje váš svislý boční panel. Zde vstoupíte do modulu postranního panelu. Zde můžete přidat tolik modulů, do jednoho řádku, a budou překlenovat svislou šířku sekce vedle struktury sloupce, kterou vedle ní vytvoříte. Ve skutečnosti má v tomto příkladu stránka blogu v této oblasti svislého postranního panelu rozvržení Speciality již modul Email Optin a modul Person.

Nyní přidejte modul postranního panelu na vrchol ostatních modulů ve svislé oblasti postranního panelu.

přidejte moduly do sidebar.jpg

V nastavení modulu bočního panelu aktualizujte následující:

Karta Obsah

Oblast widgetu: vyberte postranní panel

Karta Návrh

Orientace: Vpravo (protože postranní panel je vpravo)
Smazat oddělovač hran: ANO
Barva textu:
Velikost písma Dark Header: 26px
Rozestup dopisů
záhlaví: 3px Výška řádku záhlaví: 1.1em

Karta Upřesnit

V části Vlastní CSS přidejte následující CSS do textového pole Widget. Díky tomu se design widgetů postranního panelu shoduje s designem webu:

pozadí: #fff; polstrování: 20px; -webkit-box-stín: 0 1px 5px rgba (0, 0, 0, 0.1) -moz-box-stín: 0 1px 5px rgba (0, 0, 0, 0.1); box-stín: 0 1px 5px rgba (0, 0, 0, 0.1);

vytvořit postranní panel divi.jpg

Uložte nastavení

Nyní můžete vidět, že modul postranního panelu zobrazuje prvky widgetu postranního panelu (Vyhledat a poslední články) a zobrazuje je ve svislé oblasti postranního panelu vaší specializované sekce.

příklad divi.jpg postranního panelu

Možnosti obsahu pro postranní panel

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

sidebar.png nastavení

Oblast Widget

Modul Postranní panel používá oblasti pro vytváření widgetů, které můžete vytvořit na kartě Vzhledy> Widgety. V této rozevírací nabídce můžete vybrat jednu ze svých vlastních oblastí widgetů.

Správce štítku

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.

Možnosti designu postranního panelu

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.

možnosti designu divi.png

Orientace

Zde si můžete vybrat, na které straně stránky se bude váš postranní panel zobrazovat. Tento parametr řídí orientaci textu a polohu ohraničení.

Odstraňte oddělovač okrajů

Zde můžete odstranit tenké šedé ohraničení, které odděluje váš postranní panel od obsahu vaší stránky.

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ý.

Záhlaví písma

Písmo textu záhlaví 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é upravit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Velikost písma záhlaví

Zde můžete upravit velikost textu záhlaví. 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 záhlaví

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 záhlaví, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Mezery v záhlaví

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 záhlaví, 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 záhlaví

Výška řádku ovlivňuje mezeru mezi jednotlivými řádky textu záhlaví. Chcete-li zvětšit mezeru mezi jednotlivými řádky, upravte mezeru pomocí posuvníku nebo do pole zadejte požadovanou velikost mezery. položka umístěná napravo 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.

Body font

Písmo těla 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é upravit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Velikost písma těla

Zde můžete upravit velikost textu. Přetažením posuvníku můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat hodnotu požadované 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 těla

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, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozestup tělových písmen

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi jednotlivými písmeny v 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 linie těla

Výška řádku ovlivňuje mezeru mezi každým řádkem textu v těle 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.

Pokročilé možnosti postranního panelu

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.

předběžný postranní panel divi.png

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 pro tento modul. Třídu CSS lze použít k vytvoření vlastního stylu CSS. Můžete přidat více tříd oddělených mezerou. Tyto třídy lze použít ve vašem podřízeném motivu Divi nebo ve vlastní šabloně stylů CSS, kterou přidáte na svou stránku nebo na svůj web pomocí možností motivu Divi nebo nastavení na stránce 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]

Ostatní výukové programy Divi