--- 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: 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] --- ![Proměnné v designu](https://www.wplama.cz/wp-content/uploads/2025/05/promenne-v-designu-1024x580.png "Proměnné v designu") # Divi 5: Proměnné v designu 23.7.2025 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!](https://www.youtube.com/embed/JmTMNUCACmo?feature=oembed) Obsah 1. Globální správa stylu pomocí proměnných v Divi 2. Příklady použití proměnných designu 3. Shrnutí ## 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: Nový karousel modul – vytvářejte slidery z čehokoliv - Divi 5: Loop Builder – svoboda při výpisu obsahu - Divi 5: Flexbox - Divi 5: Hledat a Nahradit - Divi 5: Rozšíření atributů - Divi 5: Pokročilé jednotky (včetně CSS funkcí a proměnných) - Divi 5: Design založený na presetech - Divi 5: Vyhledávání a filtrování nastavení - Divi 5: Správu atributů - Divi 5: Skupiny modulů - Divi 5: Přizpůsobitelné responzivní breakpointy - Divi 5: Vnořené řádky - Divi 5 (Public Alpha) k dispozici ke stažení ### 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-5-promenne-v-designu/?_tmcb=1773302525#respond)