Přejít k hlavnímu obsahu

Divi tutorial: Jak používat modul modulu Zone Widget

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

Divi vám umožňuje vytvářet neomezený počet zón připravených k okamžitému použití. Postranní panely lze poté přidat na libovolnou stránku, což vám umožní vytvořit jedinečné postranní panely pro různé části vašeho webu.

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

Před přidáním modulu postranního panelu na stránku musíte nejprve přejít na Divi Builder. Jakmile je motiv Divi nainstalován na vašem webu, 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 při procházení webu v popředí, pokud jste připojeni k hlavnímu 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

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

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

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

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.

Snadno vytvořte svůj online obchod

Stáhněte si zdarma WooCommerce, nejlepší e-commerce pluginy pro prodej vašich fyzických a digitálních produktů na WordPress. [Doporučeno]

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.

Ostatní výukové programy Divi

Tento článek obsahuje komentáře 3

  1. Haló
    Na rozdíl od vás se pokouším odstranit postranní panel na stránkách blogových článků a nevím, jak to udělat v nové verzi Divi 4
    Máte tip?
    merci
    Aurélie

  2. Dobrý den a děkuji za tyto návody.

    V tomto příkladu jste začali se stránkou o celé šířce nebo se šablonou s původním postranním panelem?

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek
14 akcie
podíl8
tweet2
Zadat4