--- 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: Pokročilé jednotky (včetně CSS funkcí a proměnných) url: https://www.wplama.cz/divi-5-pokrocile-jednotky-vcetne-css-funkci-a-promennych/ date: 2025-08-20 modified: 2025-05-30 author: Tomáš Cirkl type: post categories: [Divi šablona a Elegant Themes] tags: [Divi 5] --- ![Pokročilé jednotky](https://www.wplama.cz/wp-content/uploads/2025/05/pokrocile-jednotky-1-1024x576.png "Pokročilé jednotky") # Divi 5: Pokročilé jednotky (včetně CSS funkcí a proměnných) 20.8.2025 Divi 5 přichází s novinkou v podobě **pokročilého pole pro zadávání jednotek**, které podporuje plný rozsah CSS jednotek, funkcí i proměnných. Nový typ pole zvládá nejen běžné jednotky jako `px`, `em`, `%`, ale i hodnoty bez jednotky (např. `unset`, `fit-content`) a moderní CSS funkce jako `clamp()` nebo `calc()`. Díky tomu je tvorba responzivních a flexibilních návrhů – například s plynulou typografií – výrazně jednodušší. Podporováno je také **vlastní definování CSS proměnných**, které lze následně používat napříč celým designem. Podívejte se na video níže a zjistěte, jak nová funkce [Divi šablony](https://www.wplama.cz/divi-sablona/) funguje v praxi. 👇 [Introducing Advanced Units For Divi 5 (Including CSS Functions & Variables)](https://www.youtube.com/embed/dGWAd_Wr0UU?feature=oembed) Obsah 1. Nové pole pro pokročilé jednotky v Divi 2. Využití pokročilých CSS funkcí 3. Využití CSS proměnných 4. Používejte libovolné CSS jednotky 5. Shrnutí ## Nové pole pro pokročilé jednotky v Divi V Divi bylo původní ovládání pomocí posuvníku a výběru hodnot nahrazeno **novým multifunkčním polem**. Uživatel ho může používat stejně jako klasický posuvník, provádět jemné úpravy hodnot nebo zadat jakoukoliv hodnotu i jednotku ručně. K dispozici je také nabídka často používaných jednotek a funkcí. Toto nové pole zvládá vše – včetně podpory všech **CSS jednotek**, **funkcí** i **proměnných**. ## Využití pokročilých CSS funkcí Hodnotová pole v Divi nyní podporují **CSS funkce**! To otevírá nové možnosti pro tvorbu flexibilního a responzivního designu. Například funkce jako `calc()` nebo `clamp()` jsou v praxi velmi užitečné. Pomocí funkce `clamp()` lze snadno nastavit **plynulou responzivní typografii**, a to bez nutnosti manuálního nastavování pro různé velikosti obrazovky. Například výraz `clamp(5rem, 10vw, 15rem)` zajistí, že se text bude plynule přizpůsobovat šířce obrazovky, ale nikdy nebude menší než 5 rem ani větší než 15 rem. Ve videu níže je ukázka, kde se velikost textu škáluje podle 10 % šířky viewportu, ale přitom zůstává v definovaném rozsahu. Pomocí funkce `calc()` lze vytvářet **vlastní vzorce pro výpočet velikostí**, které kombinují statické i relativní hodnoty. Ve videu níže je ukázka situace, kdy je na stránce pevně umístěné menu a požadovaný je **30px prostor ze všech stran**. Pokud se šířka nastaví na `100%`, žádný prostor po stranách nezůstane. Při nastavení na `90%` už sice nějaký vznikne, ale mění se v závislosti na šířce obrazovky a není konzistentní. Pomocí výrazu `calc(100% - 60px)` lze ale přesně určit šířku tak, aby bylo **30 pixelů prostoru na každé straně**, a to bez ohledu na velikost viewportu. ## Využití CSS proměnných Hodnotová pole v Divi nyní podporují **CSS proměnné**! Ty lze definovat buď v nastavení šablony (Theme Options), nebo přímo na úrovni konkrétní stránky – a následně je vložit do nového pole pro zadávání hodnot. Ve videu níže je ukázáno, jak lze například definovat velikosti nadpisů H1–H6 pomocí CSS proměnných, použít je ve výchozím presetu pro nadpisy a následně napříč celým webem. Pokud bude potřeba velikosti nadpisů kdykoliv změnit, stačí se vrátit do Theme Options a upravit hodnoty proměnných – změna se okamžitě projeví všude, kde jsou použity. ## Používejte libovolné CSS jednotky Hodnotová pole v Divi nyní podporují **celý rozsah CSS jednotek**! Lze kombinovat hodnoty se všemi dostupnými jednotkami – například: - vw, která se přizpůsobuje šířce viewportu, - rem, která mění velikost relativně k základní velikosti písma, - nebo jednotky bez hodnoty, jakofit-content, které přizpůsobují šířku prvku jeho obsahu. Podporovány jsou také globální hodnoty jako `auto`, `initial` nebo `unset`, které se hodí například k resetování stylů děděných z větších breakpointů. V Divi 5 nejsou žádná omezení – návrháři mají plnou kontrolu nad tím, jak budou prvky reagovat a přizpůsobovat se. ## Shrnutí Nové **pokročilé pole pro jednotky** v [Divi 5](https://www.wplama.cz/divi-5) přináší větší flexibilitu, přesnost a svobodu při nastavování designových prvků. Uživatelé mohou nyní zadávat libovolné CSS jednotky, používat funkce jako `calc()` a `clamp()` a využívat CSS proměnné pro jednotný a snadno spravovatelný vzhled. Tato novinka významně rozšiřuje možnosti při návrhu responzivních webů – od plynulé typografie až po přesné rozvržení s využitím kombinace statických i dynamických hodnot. S Divi 5 už není třeba hledat kompromisy mezi vizuální kvalitou a efektivitou práce. **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: Design založený na presetech - Divi 5: Proměnné v designu - 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-pokrocile-jednotky-vcetne-css-funkci-a-promennych/?_tmcb=1772962943#respond)