--- site_name: WPlama site_description: Internetové stránky na WordPressu snadno a česky site_url: https://www.wplama.cz contact_email: tomas@wplama.cz title: Jak na Tvůrce motivů v Divi (Theme Builder) url: https://www.wplama.cz/divi-editor-sablony/ date: 2019-12-02 modified: 2019-12-02 author: Tomáš Cirkl type: post categories: [Divi šablona a Elegant Themes] tags: [Divi, Editor šablony, Elegant Themes, Theme Builder, visual builder] --- ![Vlastní hlavička a patička](https://www.wplama.cz/wp-content/uploads/2019/10/vlastni-hlavicka-a-paticka-1024x515.jpg "Vlastní hlavička a patička") # Jak na Tvůrce motivů v Divi (Theme Builder) 2.12.2019 Editor šablony (Theme Builder) v [Divi](https://www.wplama.cz/divi) je rozhraní, které umožňuje použít Divi Builder pro tvorbu šablon a ty přiřadit stránkám, příspěvkům, archivům a dalším částem webu. S Editorem šablon máte kompletní kontrolu nad každým elementem webové stránky. Vytvořené šablony lze aplikovat hromadně (například na všechny příspěvky najednou) nebo jednotlivě (pro konkrétní příspěvek). Díky Editoru šablon již není potřeba pro úpravu částí webu, kde nešel použít Visual Builder, zasahovat do zdrojového kódu, například za použití [child šablony](https://www.wplama.cz/divi-child-sablona/). ## Představení Editoru šablony v Divi [Using The Divi Theme Builder](https://www.youtube.com/embed/Fma502HZUd8?feature=oembed) Editor šablony ve zkratce rozšiřuje možnost využití Divi Builderu na všechny části šablony. S Divi Theme Builder jde vytvářet: - hlavičku stránky, - patičku stránky, - stránku archivů pro rubriky a štítky, - stránku archivů pro vlastní typy stránek, - stránku výsledků vyhledávání, - stránku 404 nenalezeno, - detail příspěvku, - detail WooCommerce produktu, - WooCommerce stránky (pokladna, košík, můj účet), - WooCommerce archivy, - a další… ### Jak otevřít Editor šablony Do Editoru šablony se dostanete ve WordPress administraci a položku v menu Divi → Theme Builder. [![Theme Builder v Divi](https://www.wplama.cz/wp-content/uploads/2019/10/theme-builder-v-divi.jpg "Theme Builder v Divi")](https://www.wplama.cz/wp-content/uploads/2019/10 / theme-builder-v-divi.jpg)Theme Builder v Divi Zde pak najdete vše potřebné pro tvorbu a správu všech šablon. ## Tvorba a úprava šablony v Divi Editoru šablon Pojďme si postupně projít všechny možnosti tvorby a úpravy webu, které Editor šablon nabízí. ### Default Website Template (Výchozí šablona webu) [![Výchozí šablona webu](https://www.wplama.cz/wp-content/uploads/2019/10/vychozi-sablona-webu.jpg "Výchozí šablona webu")](https://www.wplama.cz/wp-content/uploads/2019/10 / vychozi-sablona-webu.jpg)Výchozí šablona webu Ve výchozím nastavení najdete jen jednu šablonu pojmenovanou Default Website Template (Výchozí šablona webu). Tato šablona nemůže být smazána, ale může být upravena. Jedná se o standardní šablonu webu, která pokud má prázdné pole, načítá výchozí styly a rozložení. Jestliže upravíte položku hlavičky (header), nahradí se tak původní hlavička napříč celým webem. Stejně tak to funguje u těla (body) stránky a patičky (footer). #### Oblasti u výchozí šablony webu Výchozí šablonu webu tvoří tři základní oblasti: 1. Global Header (Globální záhlaví), 2. Global Body (Globální tělo), 3. Global Footer (Globální zápatí). Abyste začali jednu z nich upravovat, stačí kliknout na vybranou oblast. [![Oblasti editoru šablon](https://www.wplama.cz/wp-content/uploads/2019/11/oblasti-editoru-sablon.jpg "Oblasti editoru šablon")](https://www.wplama.cz/wp-content/uploads/2019/11 / oblasti-editoru-sablon.jpg)Oblasti editoru šablon #### Tvorba globálního záhlaví (Global Header) Jestliže chcete začít tvorbu globální hlavičky (Global Header), klikněte na *Add Global Header (Přidat globální záhlaví) → Build Global Header (Vytvořit globální záhlaví)*. [![Začátek tvorby globální hlavičky](https://www.wplama.cz/wp-content/uploads/2019/11/zacatek-tvorby-globalni-hlavicky.jpg "Začátek tvorby globální hlavičky")](https://www.wplama.cz/wp-content/uploads/2019/11 / zacatek-tvorby-globalni-hlavicky.jpg)Začátek tvorby globální hlavičky Podobně jako při úpravě stránky se spustí Visual Editor a vy si nejprve musíte vybrat jak začnete stránku vytvářet. [![Tvorba šablony webu](https://www.wplama.cz/wp-content/uploads/2019/11/tvorba-sablony-webu-1024x504.png "Tvorba šablony webu")](https://www.wplama.cz/wp-content/uploads/2019/11 / tvorba-sablony-webu.png)Tvorba šablony webu - Vytvořit od začátku - Zvolte rozložení (využijete v případě, že máte uložené již něco v Divi Knihovně) - Klonujte stávající stránku Nejspíše budete vždy začínat možností *Vytvořit od začátku*. Po kliknutí na tuto možnost se otevře editor šablony a vy můžete začít tvořit. Postup je stejný, jako kdybyste vytvářeli stránku s Visual Builderem. [![Tvorba šablony od začátku](https://www.wplama.cz/wp-content/uploads/2019/11/tvorba-sablony-od-zacatku-1024x478.png "Tvorba šablony od začátku")](https://www.wplama.cz/wp-content/uploads/2019/11 / tvorba-sablony-od-zacatku.png)Tvorba šablony od začátku Nezapomeňte, že všechno, co sem vložíte se zobrazí na místě hlavičky napříč celým webem a nahradí tak výchozí Divi hlavičku. Jakmile design dokončíte, vše uložte a zpět se dostanete přes křížek v pravém horním rohu. [![Uložení hlavičky a návrat do Editoru šablon](https://www.wplama.cz/wp-content/uploads/2019/11/ulozeni-hlavicky-a-navrat-do-editoru-sablon-1024x474.png "Uložení hlavičky a návrat do Editoru šablon")](https://www.wplama.cz/wp-content/uploads/2019/11 / ulozeni-hlavicky-a-navrat-do-editoru-sablon.png)Uložení hlavičky a návrat do Editoru šablon Nyní vidíte, že pozice Global Header (Globální záhlaví) obsahuje zelený prvek. Zelená barva značí to, že se jedná o globální prvek. Pro aplikování nové hlavičky klikněte na Save Changes (Uložit změny). [![Aplikování změny v Editoru šablon](https://www.wplama.cz/wp-content/uploads/2019/11/aplikovani-zmeny-v-editoru-sablon.jpg "Aplikování změny v Editoru šablon")](https://www.wplama.cz/wp-content/uploads/2019/11 / aplikovani-zmeny-v-editoru-sablon.jpg)Aplikování změny v Editoru šablon Když se podíváte na web, měli byste novou hlavičku vidět. [![Upravená hlavička stránky](https://www.wplama.cz/wp-content/uploads/2019/11/upravena-hlavicka-stranky-1024x478.png "Upravená hlavička stránky")](https://www.wplama.cz/wp-content/uploads/2019/11 / upravena-hlavicka-stranky.png)Upravená hlavička stránky #### Tvorba globálního těla (Global Body) Ve většině případů není potřeba navrhovat tělo stránky, protože si tuto část vždy uděláte přes stránku samotnou a Visual Builder. Tato možnost se využije především v případě, když chcete designovat vzhled příspěvků anebo i stránek a nechcete Visual Builder používat při jejich tvorbě a vystačíte si s obyčejným klasickým editorem z WordPress. Jestliže chcete začít tvorbu globálního těla (Global Body), klikněte na *Add Global Body (Přidat globální tělo) → Build Global Body (Vytvořit globální tělo)*. [![Tvorba globálního těla stránky](https://www.wplama.cz/wp-content/uploads/2019/11/tvorba-globalniho-tela-stranky.png "Tvorba globálního těla stránky")](https://www.wplama.cz/wp-content/uploads/2019/11 / tvorba-globalniho-tela-stranky.png)Tvorba globálního těla stránky Otevře se editor šablony stránky. **Je velmi důležité, aby byl v šabloně těla stránky použit modul Post Content. **Tento modul přenáší obsah napsaný přes WordPress editor do obsahu Divi šablony stránky. [![Modul Post Content](https://www.wplama.cz/wp-content/uploads/2019/11/modul-post-content-1024x478.png "Modul Post Content")](https://www.wplama.cz/wp-content/uploads/2019/11 / modul-post-content.png)Modul Post Content Po vložení modulu do šablony se načte vzorový obsah, což vám zjednoduší práci při jeho stylování. [![Vzorový obsah modulu Post Content](https://www.wplama.cz/wp-content/uploads/2019/11/vzoroby-obsah-modulu-post-content-1024x478.png "Vzorový obsah modulu Post Content")](https://www.wplama.cz/wp-content/uploads/2019/11 / vzoroby-obsah-modulu-post-content.png)Vzorový obsah modulu Post Content Vzorový obsah bude při zobrazení přímé stránky nebo příspěvku nahrazen aktuálním obsahem WordPress editoru. [![WordPress editor](https://www.wplama.cz/wp-content/uploads/2019/11/wordpress-editor-1024x478.png "WordPress editor")](https://www.wplama.cz/wp-content/uploads/2019/11 / wordpress-editor.png)WordPress editor Jestliže se rozhodnete na stránce nebo příspěvku aktivovat Divi Builder a máte na ni aplikovanou šablonu z Editoru šablon, tak upravujete pouze tu oblast, kterou vkládá modul Post Content. Z toho důvodu není doporučeno upravovat globální tělo stránky a namísto toho vytvořit další šablonu webu a aplikovat ji přímo na vybraný obsah a ne na všechen globálně. #### Tvorba globálního zápatí (Global Footer) Jestliže chcete začít tvorbu globální patičky (Global Footer), klikněte na *Add Global Footer (Přidat globální zápatí) → Build Global Footer (Vytvořit globální zápatí)*. [![Tvorba globální patičky](https://www.wplama.cz/wp-content/uploads/2019/11/tvorba-globalni-paticky.png "Tvorba globální patičky")](https://www.wplama.cz/wp-content/uploads/2019/11 / tvorba-globalni-paticky.png)Tvorba globální patičky Po otevření editoru opět využijte Builder a navrhněte vaši patičku. Nakonec nezapomeňte vše uložit. [![Globální patička](https://www.wplama.cz/wp-content/uploads/2019/11/globalni-paticka-1024x474.png "Globální patička")](https://www.wplama.cz/wp-content/uploads/2019/11 / globalni-paticka.png)Globální patička TIP: Pro tvorbu patičky můžete klidně využít i [předpřipravené designy z Divi knihovny](https://www.divi.cz/designy/). Jakmile máte vše hotové, tak by se měl kompletně proměnit design vaší stránky. [![Vlastní design stránky](https://www.wplama.cz/wp-content/uploads/2019/11/vlastni-design-stranky-1024x773.png "Vlastní design stránky")](https://www.wplama.cz/wp-content/uploads/2019/11 / vlastni-design-stranky.png)Vlastní design stránky #### Globální tělo (Global Body) není potřeba Jak už jsme zmínili, tvorba globálního těla stránky není potřeba. V případě, že jste si ji vytvořili, tak je můžete smazat za pomocí ikony popelnice. [![Výchozí šablona webu bez těla](https://www.wplama.cz/wp-content/uploads/2019/11/vychozi-sablona-webu-bez-tela.png "Výchozí šablona webu bez těla")](https://www.wplama.cz/wp-content/uploads/2019/11 / vychozi-sablona-webu-bez-tela.png)Výchozí šablona webu bez těla Když nebude použito globální tělo, tak při zapnutí Divi Builderu u stránky designujete její obsah tak, jak jste zvyklí a bez omezení. [![Tvorba stránky přes Divi Builder](https://www.wplama.cz/wp-content/uploads/2019/11/tvorba-stranky-pres-divi-builder-1024x474.png "Tvorba stránky přes Divi Builder")](https://www.wplama.cz/wp-content/uploads/2019/11 / tvorba-stranky-pres-divi-builder.png)Tvorba stránky přes Divi Builder ### Vlastní šablony Použitím vlastních šablon můžete přepsat výchozí šablonu a vytvořit další specifický vzhled pro vybraný typ obsahu. #### Tvorba nové šablony Pro vytvoření nové šablony stačí kliknout na obdélník s ikonou plus a textem *Add New Template (Přidat novou šablonu)*. [![Tvorba nové šablony](https://www.wplama.cz/wp-content/uploads/2019/11/tvorba-nove-sablony.jpg "Tvorba nové šablony")](https://www.wplama.cz/wp-content/uploads/2019/11 / tvorba-nove-sablony.jpg)Tvorba nové šablony Otevře se nastavení šablony, kde si můžete vybrat, kde se šablona zobrazí (záložka Use On) a v případě potřeba, kde ne (záložka Exclude From). [![Nastavení šablony](https://www.wplama.cz/wp-content/uploads/2019/11/nastaveni-sablony.jpg "Nastavení šablony")](https://www.wplama.cz/wp-content/uploads/2019/11 / nastaveni-sablony.jpg)Nastavení šablony #### Přiřazení šablony **Use On vs. Exclude From (Použít na vs. Vyloučit z)** Vytvářená šablona jde přiřadit pomocí záložky Use On (Použít na) anebo naopak Exclude From (Vyloučit z). Pomocí zaškrtávacích možností si tak můžete přesně určit pro jaké stránky bude šablona aplikována nebo pro jaké stránky aplikována (Použít na) nebude (Vyloučit z). Obě varianty se dají kombinovat. Například vytváříte šablonu pro příspěvky, takže zaškrtnete položku All Posts (Všechny příspěvky) na záložce Použít na, ale nechce mít šablonu použitou ve specifickém příspěvku, tak si jej vyberete na záložce Vyloučit z. V případě konfliktu pravidel dojde vždy k vyloučení. **Do detailu specifikovaná šablona** V nabídce najdete možnost přiřazení šablony ke každé stránce, příspěvku nebo archivu. Zároveň je zde několik podmínek pro zobrazení WooCommerce stránek. [![Možnosti přiřazení šablony](https://www.wplama.cz/wp-content/uploads/2019/11/moznosti-prirazeni-sablony.png "Možnosti přiřazení šablony")](https://www.wplama.cz/wp-content/uploads/2019/11 / moznosti-prirazeni-sablony.png)Možnosti přiřazení šablony **Makro a mikro přiřazení** Šablony mohou být přiřazeny na makro nebo mikro úrovni. Například můžete šablonu přiřadit všem stránkám (makro úroveň) nebo specifické stránce (mikro úroveň). Případně můžete pravidla kombinovat. **Přiřazení šablony k již existující** Pokud uživatel přiřadí šablonu k typu obsahu, který již šablonu má přiřazenou, tak nově uložená šablona přepíše předchozí. U ní dojde k odstranění pravidla shodné podmínky zobrazení. Zároveň před uložením nové šablony dojde k upozornění, že při uložení dojde ke konfliktu a přepsání původní šablony. [![Konflikt přiřazení šablony](https://www.wplama.cz/wp-content/uploads/2019/11/konflikt-prirazeni-sablony.png "Konflikt přiřazení šablony")](https://www.wplama.cz/wp-content/uploads/2019/11 / konflikt-prirazeni-sablony.png)Konflikt přiřazení šablony **Přejmenování šablony** Jakmile máte vytvořenou a přiřazenou šablonu, tak její jméno se vygeneruje podle přiřazených položek. Jméno můžete změnit tak, že do jeho prostoru kliknete myší a zobrazí se pole pro zadání vlastního názvu. [![Vlastní název šablony](https://www.wplama.cz/wp-content/uploads/2019/11/vlastni-nazev-sablony.png "Vlastní název šablony")](https://www.wplama.cz/wp-content/uploads/2019/11 / vlastni-nazev-sablony.png)Vlastní název šablony ### Správa WordPress webu Nemusíte na to být sami. Pomůžeme vám s pravidelnou údržbou i novými vylepšeními. [Více informací](https://www.wplama.cz/sprava-wordpress-webu/) ### O autorovi ![579c70f93c868ab0086f8d13a2143605f2e29b7a7ba30c5e7a4d1163a5b37892](https://secure.gravatar.com/avatar/579c70f93c868ab0086f8d13a2143605f2e29b7a7ba30c5e7a4d1163a5b37892?s=100&d=monsterid&r=g "579c70f93c868ab0086f8d13a2143605f2e29b7a7ba30c5e7a4d1163a5b37892") [#### Tomáš Cirkl](https://www.wplama.cz/author/tomas/) Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na Word Camp Praha a WordPress konferencích. ## Mohlo by vás také zajímat [![Bloom vzhled formuláře](https://www.wplama.cz/wp-content/uploads/2015/03/bloom-vzhled-formulare-1024x514.png "Bloom vzhled formuláře")](https://www.wplama.cz/optinmonster-vs-bloom/) ### [Velké porovnání pluginů pro sběr emailů: OptinMonster vs. Bloom](https://www.wplama.cz/optinmonster-vs-bloom/) [Divi šablona a Elegant Themes](https://www.wplama.cz/wordpress/divi-elegant-themes/), [WordPress obecně](https://www.wplama.cz/wordpress/obecne/)[![elegant themes](https://www.wplama.cz/wp-content/uploads/2015/06/elegant-themes.jpg "elegant themes")](https://www.wplama.cz/wordpressovy-specialista-elegant-themes/) ### [WordPressový specialista Elegant Themes](https://www.wplama.cz/wordpressovy-specialista-elegant-themes/) [Divi šablona a Elegant Themes](https://www.wplama.cz/wordpress/divi-elegant-themes/), [WordPress obecně](https://www.wplama.cz/wordpress/obecne/)[![elegant themes](https://www.wplama.cz/wp-content/uploads/2015/06/elegant-themes.jpg "elegant themes")](https://www.wplama.cz/sablony-elegant-themes-cestina-zdarma/) ### [Všechny šablony od Elegant Themes česky? A zdarma?!](https://www.wplama.cz/sablony-elegant-themes-cestina-zdarma/) [Divi šablona a Elegant Themes](https://www.wplama.cz/wordpress/divi-elegant-themes/), [Ostatní](https://www.wplama.cz/wordpress/ostatni/) ### Diskuze [Zruš odpověď](https://www.wplama.cz/divi-editor-sablony/?_tmcb=1772962849#respond)