--- site_name: WPlama site_description: "Správa, opravy a vývoj WordPress webů a e-shopů" site_url: https://www.wplama.cz contact_email: info@wplama.cz title: "Divi 5: Design založený na presetech" url: https://www.wplama.cz/divi-5-navrh-zalozeny-na-presetech/ date: 2025-08-06 modified: 2025-05-30 author: Tomáš Cirkl type: post categories: [Divi šablona a Elegant Themes] tags: [Divi 5] --- Divi šablona a Elegant Themes # Divi 5: Design založený na presetech [TC **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 6. 8. 2025 4 min čtení ![Pokročilé jednotky](https://www.wplama.cz/wp-content/uploads/2025/05/pokrocile-jednotky.png "Pokročilé jednotky") Obsah článku (6 kapitol) 1. [Revoluce v návrhu díky presetům v Divi](https://www.wplama.cz/divi-5-navrh-zalozeny-na-presetech/#revoluce-v-navrhu-diky-presetum-v-divi) 2. [Přeměňte nastavení na designové presety](https://www.wplama.cz/divi-5-navrh-zalozeny-na-presetech/#premente-nastaveni-na-designove-presety) 3. [Přidání více presetů na jeden prvek](https://www.wplama.cz/divi-5-navrh-zalozeny-na-presetech/#pridani-vice-presetu-na-jeden-prvek) 4. [Přidávání presetů vrstev na presety prvků](https://www.wplama.cz/divi-5-navrh-zalozeny-na-presetech/#pridavani-presetu-vrstev-na-presety-prvku) 5. [Úprava výchozích presetů pro stylování základních prvků webu](https://www.wplama.cz/divi-5-navrh-zalozeny-na-presetech/#uprava-vychozich-presetu-pro-stylovani-zakladnich-prvku-webu) 6. [Shrnutí](https://www.wplama.cz/divi-5-navrh-zalozeny-na-presetech/#shrnuti) Divi 5 přichází s novinkou jménem **presety skupin možností (Option Group Presets)**, která zahajuje novou éru návrhu založeného na presetech. Jde o jednu z nejzásadnějších funkcí, které se v Divi objevily za poslední roky. Presety skupin možností představují **sdílené styly**, které lze libovolně kombinovat a aplikovat na jakýkoliv modul [Divi šablony](https://www.wplama.cz/divi-sablona/). Díky nim je možné jednoduše nastylovat základní prvky webu a vytvářet pokročilé designové systémy. Jakmile si uživatel osvojí tento způsob práce, je těžké se vracet zpět. Podívejte se na video níže a zjistěte, jak tato novinka funguje v praxi. 👇 [Introducing Preset-Based Design For Divi 5! (Most Important Feature In Years)](about:blank) ## Revoluce v návrhu díky presetům v Divi Jiné buildery tomu říkají *třídy*, v Divi se používá pojem *presety*. **Návrh založený na presetech** využívá znovupoužitelné styly k efektivní správě designového systému webu. Skupiny možností v Divi lze převést na presety a aplikovat je na libovolné prvky. Systém presetů není v Divi žádnou novinkou, ale **presety skupin možností (Option Group Presets)** přinášejí zásadní změnu – nejsou totiž vázané na konkrétní modul. Lze je tedy libovolně kombinovat napříč všemi prvky. Chcete-li například použít stejný styl pozadí, rámečku nebo nadpisu na více místech, už není třeba tyto styly znovu ručně nastavovat. Stačí vytvořit preset a aplikovat ho kamkoliv. Jakmile preset upravíte, změna se automaticky promítne do všech prvků, které ho využívají. ## Přeměňte nastavení na designové presety Podívejme se na konkrétní příklad. Na webu ve videu níže je vidět, že – jako u většiny webů – se opakuje řada stylů. Právě opakování vizuálních prvků vytváří celkovou soudržnost designu. Jedním z opakujících se motivů je styl pozadí, který kombinuje barvu, přechod a obrázek k vizuálnímu zvýraznění důležitých prvků. Místo toho, abyste tento styl znovu a znovu vytvářeli ručně, lze ho jednoduše **převést na preset**. Díky tomu je návrh výrazně jednodušší – styl pozadí stačí aplikovat jako preset na libovolný prvek. A co je nejdůležitější: když později potřebujete upravit vzhled, stačí změnit preset, a úprava se automaticky projeví všude, kde je použitý. ## Přidání více presetů na jeden prvek Presety skupin lze **kombinovat**. Každý preset představuje modulární část vašeho designového systému. Ve videu níže je vidět, že různé prvky na stránce sdílejí stejné vizuální motivy – používají stejný zaoblený rámeček, okraj, stín a styl nadpisu. A všechny tyto styly jsou vytvořeny pomocí presetů. Stačí tedy úprava na jednom místě a všechny opakující se designové prvky napříč webem se automaticky aktualizují. ## Přidávání presetů vrstev na presety prvků Presety skupin lze vrstvit na presety jednotlivých prvků. Ve videu níže například sloupce používají preset, který obsahuje společnou barvu pozadí, zaoblení rohů, stín a rozestupy. Tento preset lze jednoduše použít kdykoliv, kdy chcete vytvořit vzhled zvýrazněné karty. Kromě toho existují i samostatné presety pro rámeček a stín, které slouží k vizuálnímu zvýraznění vybraných prvků. Tyto presety lze **vrstvit** na základní preset sloupce. Díky tomu není téměř nikdy potřeba stylovat jednotlivé prvky ručně – celý web je postavený na kombinaci opakovaně použitelných presetů. ## Úprava výchozích presetů pro stylování základních prvků webu Nově je možné upravit **výchozí preset** libovolné skupiny možností a tím ovlivnit vzhled **základních prvků celého webu**. Například: pokud změníte písmo ve výchozím presetu pro nadpisy, automaticky se aktualizují všechny nadpisy ve všech modulech, protože tyto styly dědí právě z výchozího presetu. Stejným způsobem funguje každá další skupina možností. Úprava výchozích presetů je v podstatě jako mít **všechny funkce přizpůsobení šablony (Theme Customizer)**, které jste si kdy přáli – ale s větší flexibilitou a kontrolou. ## Shrnutí Divi 5 představuje zásadní vylepšení ve formě **presetů skupin možností (Option Group Presets)**, které přinášejí revoluci do způsobu návrhu webu. Místo opakovaného manuálního stylování nyní můžete vytvářet **znovupoužitelné styly**, které lze kombinovat, vrstvit a globálně upravovat napříč celým webem. Díky presetům: - snadno aplikujete jednotný vzhled na různé prvky, - výrazně zrychlíte práci při tvorbě i úpravách webu, - máte větší kontrolu nad celkovým designem díky úpravám výchozích stylů, - můžete budovat **systémový a konzistentní design** bez nutnosti opakovaného nastavování. Presety v [Divi 5](https://www.wplama.cz/divi-5) tak přináší větší efektivitu, jednotnost a moderní přístup k webdesignu. Jakmile si na ně zvyknete, návrat k dřívějším metodám už nebude dávat smysl. **Prohlédněte si i další novinky v Divi 5** - [Divi 5: Kombinovatelné nastavení](https://www.wplama.cz/divi-5-kombinovatelne-nastaveni/) - [Divi 5: Command Center](https://www.wplama.cz/divi-5-command-center/) - [Divi 5: Spekulativní prerendering](https://www.wplama.cz/divi-5-spekulativni-prerendering/) - [Divi 5: Upravitelné oblasti v Theme Builderu (Kompletní editace webu)](https://www.wplama.cz/upravitelne-oblasti-v-theme-builderu/) - [Divi 5: Nový karousel modul – vytvářejte slidery z čehokoliv](https://www.wplama.cz/divi-5-novy-karousel-modul-vytvarejte-slidery-z-cehokoliv/) - [Divi 5: Loop Builder – svoboda při výpisu obsahu](https://www.wplama.cz/divi-5-loop-builder-svoboda-pri-vypisu-obsahu/) - [Divi 5: Flexbox](https://www.wplama.cz/divi-5-flexbox/) - [Divi 5: Hledat a Nahradit](https://www.wplama.cz/divi-5-hledat-a-nahradit/) - [Divi 5: Rozšíření atributů](https://www.wplama.cz/divi-5-rozsireni-atributu/) - [Divi 5: Pokročilé jednotky (včetně CSS funkcí a proměnných)](https://www.wplama.cz/divi-5-pokrocile-jednotky-vcetne-css-funkci-a-promennych/) - [Divi 5: Proměnné v designu](https://www.wplama.cz/divi-5-promenne-v-designu/) - [Divi 5: Vyhledávání a filtrování nastavení](https://www.wplama.cz/divi-5-vyhledavani-a-filtrovani-nastaveni/) - [Divi 5: Správu atributů](https://www.wplama.cz/divi-5-spravu-atributu/) - [Divi 5: Skupiny modulů](https://www.wplama.cz/divi-5-skupiny-modulu/) - [Divi 5: Přizpůsobitelné responzivní breakpointy](https://www.wplama.cz/divi-5-prizpusobitelne-responzivni-breakpointy/) - [Divi 5: Vnořené řádky](https://www.wplama.cz/divi-5-vnorene-radky/) - [Divi 5 (Public Alpha) k dispozici ke stažení](https://www.wplama.cz/divi-5-public-alpha/) - [#Divi 5](https://www.wplama.cz/stitek/divi-5/) Sdílet - - [](mailto:?subject=Divi 5: Design založený na presetech&body=Divi 5: Design založený na presetech https://www.wplama.cz/divi-5-navrh-zalozeny-na-presetech/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fdivi-5-navrh-zalozeny-na-presetech%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fdivi-5-navrh-zalozeny-na-presetech%2F) TC Autor Tomáš Cirkl 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. 1 030 článků [Všechny články autora →](https://www.wplama.cz/author/tomas/) ## Komentáře Zatím tu nikdo nekomentoval. Napište první komentář. ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/divi-5-navrh-zalozeny-na-presetech/#respond) [← Předchozí článek Divi 5: Proměnné v designu](https://www.wplama.cz/divi-5-promenne-v-designu/) [Další článek → Divi 5: Pokročilé jednotky (včetně CSS funkcí a proměnných)](https://www.wplama.cz/divi-5-pokrocile-jednotky-vcetne-css-funkci-a-promennych/) Související ## Mohlo by vás zajímat [Všechny články z rubriky Divi šablona a Elegant Themes →](https://www.wplama.cz/wordpress/divi-elegant-themes/) ![kombinovatelne nastaveni](https://www.wplama.cz/wp-content/uploads/2026/04/kombinovatelne-nastaveni.png "kombinovatelne nastaveni") Divi šablona a Elegant Themes ### [Divi 5: Kombinovatelné nastavení](https://www.wplama.cz/divi-5-kombinovatelne-nastaveni/) 13. 4. 2026 2 min čtení --- ![command center](https://www.wplama.cz/wp-content/uploads/2026/03/command-center.png "command center") Divi šablona a Elegant Themes ### [Divi 5: Command Center](https://www.wplama.cz/divi-5-command-center/) 7. 4. 2026 4 min čtení --- ![spekulativni prerendering](https://www.wplama.cz/wp-content/uploads/2026/03/spekulativni-prerendering.png "spekulativni prerendering") Divi šablona a Elegant Themes ### [Divi 5: Spekulativní prerendering](https://www.wplama.cz/divi-5-spekulativni-prerendering/) 30. 3. 2026 3 min čtení ---