Divi 5: Flexbox

Byl představen zbrusu nový layout systém pro Divi 5 postavený na Flexboxu. Nejedná se o žádnou drobnou aktualizaci. Tento krok v podstatě redefinuje celou Divi a umožní vám postavit prakticky jakoukoli strukturu layoutu.

Nový systém zahrnuje pokročilé responzivní chování, vlastní změny pořadí modulů (order), snadné vertikální zarovnání nebo pozicování prvků a mnoho dalšího.

Jak vypadá nová funkce v akci, se můžete podívat na videu níže. 👇

Zcela nový systém rozložení v Divi 5

Systém layoutu v Divi byl kompletně přepracován a přibylo mnoho nových šablon řádků i možností nastavení. Díky flexboxu, vnořeným řádkům a skupinám modulů teď vytvoříte prakticky jakoukoli strukturu.

Nový systém výrazně usnadňuje kontrolu nad pozicováním prvků, mezerami, zalamováním (wrapping) a pořadím prvků.

Velký výběr nových Flexbox šablon pro řádky

Jako první vás pravděpodobně zaujme nabídka nových šablon řádků, která nově obsahuje i varianty s vnořenými řádky (nested rows). Variabilita je nyní mnohem větší.

Nejde přitom o pevné limity – tyto šablony slouží jen jako pohodlné předpřipravené ukázky pro rychlejší start. Jakmile se ponoříte do nastavení, zjistíte, že zmizela dřívější omezení. Můžete přidávat libovolný počet sloupců, definovat jim vlastní velikosti a vnořovat řádky do sloupců tak, abyste docílili přesně takového rozložení, jaké potřebujete.

Flexbox nastavení pro každý prvek

Nové možnosti Flexboxu jsou nyní k dispozici u všech prvků. Můžete plně ovládat zalamování layoutu (wrapping), směr toku, pořadí prvků, mezery i pozicování vnořených (child) prvků.

Už žádné „hacky“, žádný zbytečný JavaScript ani nepořádek v kódu. Divi 5 nabízí intuitivní ovládací prvky, které zkrátka fungují.

Responzivní struktura řádků

Tvorba responzivních webů je zase o něco jednodušší. Pro každý breakpoint (bod zlomu) teď můžete v rámci jednoho řádku nastavit odlišnou strukturu. Je to jednoduché řešení, které umožňuje kompletně změnit rozložení layoutu pro jednotlivá zařízení.

Kromě toho lze na každém zařízení upravovat velikost sloupců a měnit jakékoli nastavení Flexboxu.

Responzivní řazení prvků

Změna pořadí prvků pro různá zařízení je nyní hračka. Snadno změníte směr toku prvků na jednotlivých zařízeních i pořadí konkrétních elementů.

Můžete tak kompletně přizpůsobit strukturu řádku pro konkrétní zařízení a následně v rámci této nové struktury prvky optimálně seřadit.

Snadné pozicování vnořených prvků

Flexbox výrazně zjednodušuje pozicování prvků uvnitř jejich rodičovských kontejnerů. Už není potřeba používat JavaScript ani prvky s absolutní pozicí. Například vertikální vycentrování prvků ve sloupci je nyní otázkou jednoho kliknutí.

Stejně jednoduché je i sjednocení výšky prvků. Snadno tak nastavíte, aby měly všechny sloupce v řádku stejnou výšku, nebo aby byly stejně vysoké všechny moduly v rámci jednoho sloupce.

Konec Speciálních sekcí a Sekcí na celou šířku

V rámci zjednodušení struktury Divi se upouští od Speciálních sekcí (Specialty Sections) a Sekcí na celou šířku (Fullwidth Sections).

Nemusíte se ale bát o své starší weby – existující sekce tohoto typu budou fungovat i nadále. Pouze byla odstraněna možnost přidávat nové. Důvod je prostý: díky novým Flexbox řádkům už různé typy sekcí nejsou potřeba. Všechno, co uměly ty staré (a ještě víc), teď zvládnete v rámci standardních řádků.

Moduly, které byly dříve vázané pouze na plnošířkové sekce, byly přejmenovány a nově je lze vkládat do běžných sekcí. To dává tvůrcům mnohem větší volnost.

Závěrem: Nutný skok do současnosti

Přechod na Flexbox v Divi 5 není jen kosmetická úprava, je to technologická nutnost. Divi se tímto krokem zbavuje letitého technologického dluhu (zastaralé floats) a konečně se technicky dotahuje na moderní page buildery, pro které je Flexbox standardem už dlouho.

Prohlédněte si i další novinky v Divi 5