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 funguje v praxi. 👇
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, jako
fit-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 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í
