Dnes vám chci představit něco, co už delší dobu sleduji: Divi 5 Beta od Elegant Themes. Pokud používáte Divi (či plánujete web na WordPressu stavět), pak tohle bude pro vás opravdu zajímavá informace. Je to totiž víc než jen aktualizace – Divi 5 není „jen nějaký update“, je to nový základ pro builder, který má ambice posunout hranice, co lze ve vizuálním builderu dokázat.
Pojďme se podívat, co vše Beta verze přináší, co je na ni super, na co si dát pozor – a jestli je už čas provést upgrade či počkat.
Co je Divi 5 Beta a proč by vás měla zajímat
Oficiální oznámení říká, že Divi 5 vstoupila do fáze „Public Beta“ – tedy fáze, kdy jsou důležité nové funkce hotové a připravené pro širší testování, a nad stávajícími weby můžete začít uvažovat nad migrací. Důvod, proč by vás to mělo zajímat: oproti předchozím verzím Divi (např. Divi 4) se bere v potaz moderní vývoj webu – lepší layouty, větší kontrola, efektivnější práce, a to vše s ohledem na výkon i na budoucnost. Pokud stavíte nové weby, nebo chcete mít weby opravdu připravené do budoucna – toto je krok, který stojí za zvážení.
Hlavní nové funkce, které Divi 5 přináší
Níže najdete přehled opravdu těch největších a nejdůležitějších novinek – a já se vám to pokusím shrnout, aby bylo jasné, co za tím je, proč byste to mohli využít a na co si dát pozor.
1. Loop Builder
Funkce, která dovoluje „opakovat“ obsah – vytvářet smyčky založené na datech (např. příspěvky, produkty, uživatelé, taxonomie).
- Proč super: Umožňuje vám designovat šablonu pro jeden „item“ a pak nechat builder automaticky aplikovat tuto šablonu na všechny položky z vybrané množiny (např. všechny příspěvky, nebo produkty z e-shopu). Máte plnou kontrolu nad tím, jak bude každá opakovaná položka vypadat.
- Tip: Chcete mít na blogu nebo e-shopu vlastní výpisy (např. podle taxonomie, nebo vybrané produkty)? Díky Loop Builderu nemusíte spoléhat jen na standardní modul – design je ve vašich rukách.
- Na co dát pozor: Když migrujete starší web, musí vybrané pluginy/moduly být kompatibilní – Loop Builder zabere více uvažování, pokud máte hodně vlastních CPT (custom post types) nebo ACF (Advanced Custom Fields).
2. Flexbox Layouty
Jedna z funkcí, kterou už mnozí uživatelé Divi chtěli: plná kontrola pomocí flexboxu – směr, zarovnání, pořadí modulů, obalování modulů atd.
- Proč to dává smysl: Když chcete mít web, který reaguje správně na různá zařízení, nemusíte už obcházet s CSS hacky. Flexbox v Divi 5 vám umožní mnohem intuitivněji stavět horizontální i vertikální uspořádání uvnitř sloupců či kontejnerů.
- Tip: Pokud jste si v minulosti lámali hlavu, jak vyrovnat modul rychle bez custom CSS – teď je čas experimentovat s Flexboxem v Divi 5.
- Na co pamatovat: Flexbox je mocný nástroj, ale i zde platí – pokud máte starší design (Divi 4), může být nutné upravit či optimalizovat rozvržení po migraci.
3. CSS Grid Layouty
Další level nad Flexboxem – mřížkový systém, který dovoluje vytvářet složité rozvržení.
- Proč to oceňuji: Když chcete mít stránku, kde některé položky překračují více sloupců, nebo chcete mít nepravidelné mřížky, dříve jste museli sahat po vlastním CSS. Teď to můžete dělat vizuálně v Divi 5.
- Tip pro vás: Vytvořte si vlastní šablonu článků či portfolia, kde některé položky „robustněji“ vystupují (např. 2×2 bloky) – CSS Grid vám to umožní.
- Na co se připravit: S velkou mocí přichází i potřeba plánování. Složitější mřížky mohou ovlivnit výkon, pokud nejsou optimalizované. Doporučuji testovat responzivitu.
4. Interakce (Interactions)
Funkce, která přidává spoustu možností pro animace, efekty na scroll, spouštěče (triggery), pop-upy a další vizuální pohyby.
- Proč je to užitečné: Nejen že weby vypadají dynamicky a moderně – uživatelská interakce může být plynulejší a atraktivnější. Např. prvky reagují na vstup uživatele, scroll nebo kliknutí.
- Tip: Pokud navrhujete pro klienty, kteří chtějí „wow efekt“, vyzkoušejte interakce – ale s mírou. Příliš mnoho interakcí může působit rušivě.
- Na co si dát pozor: Zkontrolujte výkon – animace a efekty mohou zpomalit mobilní zařízení. Také ověřte přístupnost – efekty by neměly být rušivé pro uživatele se speciálními potřebami.
5. Design Variables
Toto je funkce, která změnila můj pohled na to, jak pracovat s tvorbou webu – proměnné pro barvy, fonty, čísla, obrázky, odkazy.
- Proč miluju: Když nastavíte proměnnou „Hlavní barva“ nebo „Radius tlačítka“, pak když se klient rozhodne změnit paletu, měníte vše na jednom místě – web se automaticky přizpůsobí. To znamená méně práce při údržbě.
- Tip: Hned při startu projektu si vytvořte sadu proměnných (např. primární a sekundární barva, radius, velikost textu, atd.) a použijte je všude.
- Na co myslet: U starších projektů může být nutné nejprve najít všechny hodnoty a změnit je na proměnné, což může být práce navíc.
6. Customizable Breakpoints
Konečně – kontrola nad tím, kdy se layout přepne na mobil/tablet a jak vypadá v různých šířkách. Umožňuje nově nastavit 7 breakpointů.
- Proč je to zásadní: Předchozí verze Divi měly fixní breakpoints – často se stávalo, že na tabletu v landscape režimu byl design „neideální“. Teď si můžete sami nastavit až 7 breakpointů a definovat šířky.
- Tip: Pokud víte, že většina vašich návštěvníků je na tabletu s větším rozlišením – nastavte breakpoint cíleně pro něj. Získáte lepší kontrolu.
- Na co se připravit: Více breakpointů = více testování. Ujistěte se, že všechny layouty vypadají dobře ve všech nastavených šířkách.
7. Attribute Management
Novinka, která umožňuje kopírovat, vkládat, resetovat atributy stylů mezi moduly či kontejnery.
- Proč to pomáhá: Pokud máte mnoho modulů, které chtějí stejné nastavení (např. tlačítko stylu A), nemusíte nastavovat každý jednotlivě – lze „nastavit jednou“.
- Tip: Vytvořte si systém stylů, které můžete rychle aplikovat – tím urychlíte vývoj.
- Na co myslet: Udržujte přehled o tom, co se aplikuje jako atribut – pokud příliš rozšíříte kopírování, může být obtížné sledovat změny.
8. Advanced Units
Funkce, kterou ocení zejména ti, co se nebojí trochu „víc CSS“ – práce s jednotkami, funkcemi jako calc(), clamp(), CSS proměnné. Pokročilé jednotky pro moderní responzivní design.
- Proč je to skvělé: Už se nelimitujete jen na px nebo procenta. Můžu nastavit „velikost = clamp(1 rem, 2 vw, 2.5 rem)“ a design je plynulejší.
- Tip: Pokud budujete moderní web s fluidní typografií či responzivními odstupy – sáhněte po těchto pokročilých jednotkách.
- Na co si dát pozor: Vyžaduje to základní znalost CSS jednotek a funkcí – pokud jste začátečník, doporučuji začít s jednoduchými nastaveními.
9. Module Groups & Group Carousel
Skupiny modulů (Module Groups) umožňují seskupit více modulů do jedné jednotky, a nový modul Group Carousel umožňuje udělat carousel z jakékoliv skupiny.
- Proč to využít: Můžete například vytvořit skupinu modulu s obrázkem + textem + tlačítkem a pak ji vložit víckrát, nebo jako carousel – vše v jednotném stylu. Ušetříte čas a zajistíte konzistenci.
- Tip: Využijte Group Carousel například pro reference zákazníků, týmové bloky nebo produktové výpisy.
- Na co myslet: Při velkých carouselech sledujte výkon na mobilních zařízeních.
10. Relative Colors & HSL
Pokročilé řízení barev – definice barvy jako proměnné a derivace jejího odstínu, saturace, světlosti (HSL).
- Proč to oceňuji: Když změníte „primární barvu“, všechny barvy, které od ní odvozujete (např. „primární + 20 % světlosti“) se automaticky aktualizují.
- Tip: Při startu projektu si definujte základní barevnou proměnnou a nastavte si odvozné barvy.
- Na co myslet: Udržujte paletu jednoduchou a přehlednou; příliš mnoho derivací může být pro jiné vývojáře méně srozumitelné.
11. Nested Rows
Vnořené řádky pro složitější struktury uvnitř sloupců.
- Proč to je fajn: Pokud někde potřebujete uvnitř sloupce mít další rozdělení (např. dvě tlačítka + obrázek + text v jedné složité mřížce), Nested Rows tento scénář umožní.
- Tip: Používejte tam, kde jste dříve museli improvizovat s CSS – teď to můžete udělat přímo v UI.
- Na co dávat pozor: Přílišné vnořování řádků může komplikovat správu a výkon – volte strukturu promyšleně.
12. Inspector
Nástroj, který shromažďuje všechny použité styly, proměnné, atributy a umožní vám je rychle spravovat.
- Proč je to užitečné: Pokud chcete mít přehled o tom, co na stránce skutečně platí (barvy, fonty, styly modulů, atd.), Inspector vám to ukáže v přehledném panelu.
- Tip: Při větších stránkách nebo projektech s více designéry/skupinou využijte Inspector k auditu a udržení standardu.
- Na co myslet: Vyžaduje si to trochu času naučit se to.
Kdy upgradovat a kdy počkat
Protože každá větší verze s sebou nese i rizika, pojďme si říct, kdy se vyplatí Divi 5 Beta nasadit – a kdy je lepší počkat.
Doporučuji nasadit, pokud:
- Stavíte zcela novou webovou stránku a neřešíte urgentně kompatibilitu s mnoha pluginy.
- Chcete využít nové layouty a mít web připravený na budoucnost,
- Jste si jisti, že všechny klíčové pluginy, které používáte, jsou (nebo budou) kompatibilní s Divi 5.
Doporučuji počkat, pokud:
- Máte živý (produkční) web běžící na Divi 4 s množstvím pluginů a modulů třetích stran, které nemusí být ještě plně kompatibilní.
- Potřebujete absolutní stabilitu a nechcete riskovat žádnou „beta fázi“.
- Nejste připraveni testovat a řešit možné drobné nedostatky.
Závěr
Divi 5 Beta je opravdu velký skok – nové možnosti + moderní technologický základ + lepší ovládání = menší kompromisy při tvorbě webů.
Skvělá příležitost pro designéry a vývojáře, kteří chtějí být „o krok napřed“. Pokud začínáte nový projekt – přemýšlejte o Divi 5.
Na druhou stranu – pokud spravujete širokou infrastrukturu webů a hledáte absolutní jistotu – možná bude lepší počkat ještě chvíli, než bude vše plně stabilizované a pluginy plně připravené.
