--- 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: Proměnné v designu" url: https://www.wplama.cz/divi-5-promenne-v-designu/ date: 2025-07-23 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: Proměnné v designu [![profil 100x100](https://www.wplama.cz/wp-content/uploads/2026/11/profil-100x100.jpg "profil 100x100") **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 23. 7. 2025 5 min čtení ![Proměnné v designu](https://www.wplama.cz/wp-content/uploads/2025/05/promenne-v-designu.png "Proměnné v designu") Obsah článku (3 kapitoly) 1. [Globální správa stylu pomocí proměnných v Divi](https://www.wplama.cz/divi-5-promenne-v-designu/#globalni-sprava-stylu-pomoci-promennych-v-divi) 2. [Příklady použití proměnných designu](https://www.wplama.cz/divi-5-promenne-v-designu/#priklady-pouziti-promennych-designu) 3. [Shrnutí](https://www.wplama.cz/divi-5-promenne-v-designu/#shrnuti) Divi 5 přináší novou funkci s názvem **proměnné designu**, která výrazně zefektivňuje celý proces návrhu a posouvá [Divi šablonu](https://www.wplama.cz/divi-sablona/) o krok dál oproti ostatním builderům. Uživatelé si nyní mohou definovat vlastní proměnné – například pro barvy, písma, číselné hodnoty, obrázky nebo texty – a následně je používat napříč prvky a presety. Jakmile se hodnota proměnné změní, automaticky se aktualizuje celý design nebo obsah webu, kde je proměnná použita. Tato novinka skvěle doplňuje nový systém návrhu v Divi, který je založený na presetech. Podívejte se na video níže a zjistěte, jak proměnné fungují v praxi. 👇 [Introducing Design Variables For Divi 5!](about:blank) ## Globální správa stylu pomocí proměnných v Divi Díky systému globálních barev v Divi už možná máte s pojmem **proměnná designu** určitou zkušenost – právě globální barva je jedním z jejich typických příkladů. Nová aktualizace ale přináší **globální přístup ke všemu** – nejen barvám. Do Divi přichází možnost vytvářet a spravovat proměnné pro jakýkoliv typ obsahu nebo stylu. A co víc – práce s globálními proměnnými je nyní výrazně přehlednější díky novému správci proměnných. ### Vytváření nových proměnných Kliknutím na ikonu proměnných v levém postranním panelu se otevře **správce proměnných**, kde lze jednoduše vytvořit nové proměnné. Stačí přidat novou proměnnou, pojmenovat ji, přiřadit hodnotu – a poté ji lze využít v příslušných nastaveních na jakékoliv stránce. Divi aktuálně podporuje **šest typů proměnných**, které pokrývají všechna nativní vstupní pole: **Barvy**: Barvy jsou základním stavebním kamenem každého webu – většina webů používá 3–4 hlavní barvy. Pokud si je nadefinujete jako proměnné, můžete celou barevnou paletu webu změnit během několika sekund. --- **Písma**: Pryč jsou časy práce s pevně nastavenými fonty. Nově už nejste omezeni globálním nastavením fontu v přizpůsobení šablony. Fonty lze definovat jako proměnné a spravovat je centrálně. --- **Čísla**: Číselné proměnné lze využít například pro jednotný systém velikostí – typickým příkladem je sjednocení velikosti zaoblení rohů (border-radius). Jednoduchou změnou jedné proměnné tak upravíte vzhled napříč celým webem. Stejně dobře lze nastavit výšky řádků, velikosti textu, šířky kontejnerů, mezery a další prvky. --- **Obrázky**: Používáte stejný obrázek na více stránkách? Například standardní pozadí, které tvoří vizuální identitu značky? Pokud ho nastavíte jako proměnnou, můžete později vizuální styl snadno změnit jediným krokem. --- **Texty**: Proměnné nejsou omezeny jen na design. Lze definovat i textové hodnoty – například telefonní číslo nebo adresu firmy. Když se údaje změní, stačí aktualizovat jedinou proměnnou. --- **URL adresy**: Divi nově umožňuje i práci s proměnnými typu URL. Typickým příkladem může být odkaz na výzvu k akci, který měníte v různých obdobích roku – například při slevových akcích. Díky proměnné stačí upravit adresu na jednom místě. --- ### Použití proměnných v prvcích a presetech Kliknutím na ikonu proměnných nad jednotlivými nastaveními lze vybrat ze seznamu dostupných proměnných a dynamického obsahu z webu. Systém proměnných a dynamického obsahu v Divi byl nyní rozšířen na **všechna vstupní pole** – zatímco dříve byl dostupný jen v obsahových polích, nově ho lze použít i u číselných hodnot, fontů a dalších typů nastavení. To znamená, že proměnné a dynamický obsah lze využít opravdu napříč celým návrhem – nejen pro texty, ale i pro velikosti, písma, mezery a další styly. ## Příklady použití proměnných designu Proměnné designu jsou velmi užitečným nástrojem a rychle se stanou klíčovou součástí pracovního postupu při návrhu webu v Divi. Pokud si ale zatím nejste úplně jistí, jak fungují v praxi, následující příklady vám pomohou lépe pochopit jejich využití. ### Příklad 1: Správa globálních fontů Jak mohou proměnné designu zefektivnit pracovní postup? Začněme u proměnných pro písmo. Většina webů používá dva až tři základní fonty. Možná už jste strávili spoustu času tím, že jste nastavovali požadované písmo pro nadpisy a odstavce v různých prvcích a presetech. Ale co když se rozhodnete použít jiné fonty? I když jste při návrhu postupovali optimálně a pracovali s presety, může být velmi časově náročné projít všechny prvky a písmo ručně změnit. Navíc si možná ani nevzpomenete, kde všude byl konkrétní font použit. A právě v takové situaci přichází na řadu **proměnné pro písmo**. Web, který je vidět ve videu výše, byl vytvořen pomocí tří proměnných pro písmo: **písmo pro nadpisy**, **písmo pro text** a **zvýrazňovací písmo**. Přidat proměnnou pro nadpisové písmo například do výchozího presetu pro blok s ikonou (blurb) je otázkou několika kliknutí. Protože nebyly použity žádné statické hodnoty fontu a místo toho byly všude vloženy proměnné, je celé písmo na webu **dynamické**. To znamená, že změna fontu pro nadpisy na celém webu je stejně jednoduchá jako aktualizace jediné proměnné. ### Příklad 2: Správa globálních velikostí To samé lze udělat i s velikostmi textu. U webu ve videu níže je definováno osm různých velikostí textu – pro jednotlivé úrovně nadpisů a styly běžného textu. Když pak upravíte výchozí preset pro blok s ikonou (blurb) a přiřadíte mu proměnnou pro středně velký nadpis, všechny nadpisy v těchto blocích automaticky přebírají hodnotu z dané proměnné. Pokud jsou velikosti textu na webu definovány pomocí proměnných, lze celý systém typografie spravovat centralizovaně prostřednictvím správce proměnných – bez nutnosti upravovat jednotlivé prvky ručně. ### Příklad 3: Celý web nastavený globálně Ve videu výše je ukázán web, který naplno využívá možnosti proměnných. **Všechny barvy**, **písma**, **velikosti textu**, **zaoblení rohů** i **mezery v kontejnerech** jsou definovány pomocí proměnných. Proměnné se ale netýkají jen designu – i **sdílený obsah** je převeden na proměnné. Název společnosti, telefonní číslo i adresa jsou nastaveny jako **textové proměnné**. Dokonce i **pozadí stránky**, které slouží jako jednotný vizuální motiv značky, je definováno jako **obrázková proměnná**, kterou lze kdykoliv snadno upravit. ## Shrnutí Proměnné designu v [Divi 5](https://www.wplama.cz/divi-5) představují výrazný krok vpřed v oblasti efektivity a správy vzhledu webu. Umožňují centralizovanou kontrolu nad barvami, fonty, velikostmi, obrázky, texty i odkazy – tedy nad vším, co se na webu často opakuje nebo mění. Díky propojení s novým systémem presetů lze navrhovat konzistentní a flexibilní layouty, které se snadno udržují a přizpůsobují. Uživatelé tak získávají nástroj, který výrazně zkracuje čas potřebný na úpravy a zároveň minimalizuje riziko chyb při manuálních změnách. Nová funkce přináší výhody jak začátečníkům, tak pokročilým uživatelům Divi, kteří chtějí mít plnou kontrolu nad vzhledem a obsahem svých webových stránek. **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: Design založený na presetech](https://www.wplama.cz/divi-5-navrh-zalozeny-na-presetech/) - [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: Proměnné v designu&body=Divi 5: Proměnné v designu https://www.wplama.cz/divi-5-promenne-v-designu/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fdivi-5-promenne-v-designu%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fdivi-5-promenne-v-designu%2F) ![profil 150x150](https://www.wplama.cz/wp-content/uploads/2026/11/profil-150x150.jpg "profil 150x150") Autor Tomáš Cirkl Zakladatel WPlama. Od roku 2014 se starám o weby a e‑shopy na WordPressu a píšu o tom, co při té práci řeším. Třikrát jsem přednášel na Word Campech. 1 035 č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-promenne-v-designu/#respond) [← Předchozí článek WordPress 6.8.2](https://www.wplama.cz/wordpress-6-8-2/) [Další článek → Divi 5: Design založený na presetech](https://www.wplama.cz/divi-5-navrh-zalozeny-na-presetech/) 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í ---