Jak používat custom breakpointy v Divi 5, aniž byste rozbili mobil

Affiliate upozornění: Pokud si přes odkazy v tomto článku pořídíte Divi, můžeme získat provizi. Cenu vás to nijak nezvýší a na našem hodnocení to nic nemění.

Vlastní breakpointy znějí jako moc nad layoutem – a jsou. Jenže každý breakpoint navíc je další sada stavů, kterou musíte navrhnout, otestovat a udržovat. Divi 5 (Elegant Themes) responsivní editaci umí a běží na týdenní kadenci aktualizací (verze 5.8, červen 2026). Klíčová otázka ale nezní „jak přidat breakpoint", nýbrž „potřebuju ho vůbec, nebo mám raději zjednodušit layout?" Tento návod ukazuje, jak vlastní breakpointy používat tak, abyste si nerozbili mobil.

Jak responsivní editace v Divi funguje

Divi historicky pracuje se sadou náhledů – desktop, tablet a telefon – a u většiny nastavení (rozměry, odsazení, velikost písma, viditelnost) můžete hodnotu nastavit pro každý náhled zvlášť. Stránku tak skládáte v responsivním editoru a přepínáte mezi šířkami. Divi 5 tuhle logiku staví na novém engine a rozšiřuje responsivní práci nad rámec tří pevných zařízení.

Pravidlo, které platí napříč verzemi: co nenastavíte pro užší náhled, dědí se z širšího. Proto se navrhuje od desktopu dolů a upravují se jen věci, které se na menší šířce reálně lámou.

Kdy přidat vlastní breakpoint

Vlastní breakpoint má smysl, když mezi tabletem a telefonem (nebo na konkrétní šířce) layout viditelně „praská" a stávající tři náhledy to neřeší. Typicky:

• mřížka, která na konkrétní šířce vypadá rozbitě – třeba 3 sloupce, které se na ~900 px tísní, ale na telefonu už jsou v pořádku,
• velký nadpis nebo cena, který se na úzkém tabletu zalomí ošklivě,
• menu / navigace, která potřebuje přepnout do mobilní podoby na jiné šířce, než je default.

Breakpoint přidávejte cíleně na konkrétní problém, ne preventivně „pro jistotu".

Kdy breakpoint NEpřidávat (a raději zjednodušit layout)

Většina „mobilních" problémů není problém breakpointu, ale příliš složitého layoutu:

• Pokud potřebujete tři a víc breakpointů, aby sekce držela, je sekce nejspíš překombinovaná. Zjednodušte ji.
• Vícesloupcové rozvržení, které se na mobilu stejně skládá pod sebe, nepotřebuje vlastní breakpoint – potřebuje rozumný default skládání.
• Každý breakpoint je údržbová zátěž: změna obsahu se musí zkontrolovat ve všech stavech. Méně breakpointů = méně míst, kde se to rozbije.

Zlaté pravidlo: nejdřív zjednoduš layout, breakpoint až když i jednoduchý layout na konkrétní šířce praská.

Jak nerozbít mobil – postup

1. Navrhujte mobile-aware, ne mobile-afterthought. Mějte mobil v hlavě od začátku, ne jako poslední krok.
2. Postupujte od desktopu dolů a na každém užším náhledu opravte jen to, co se reálně láme – využijte dědění hodnot.
3. Testujte na reálném zařízení, ne jen v náhledu builderu. Náhled lže o dotykových cílech, fontech a klávesnici.
4. Hlídejte dotykové cíle – tlačítka a odkazy dost velké pro prst, dost odsazené.
5. Po každém přidaném breakpointu projděte i ostatní šířky – změna na jedné se může propsat jinam.
6. Změřte CLS na mobilu – špatně zvládnuté responsivní obrázky a fonty způsobují poskakování layoutu.

Časté dotazy

Kolik breakpointů je „moc"?

Když potřebujete tři a víc vlastních breakpointů, aby jedna sekce držela, problém je v layoutu, ne v breakpointech. Zjednodušte sekci.

Musím nastavit každý náhled zvlášť?

Ne. Co nenastavíte pro užší náhled, dědí se z širšího. Upravujte jen to, co se na menší šířce reálně láme.

Stačí mi otestovat mobil v náhledu builderu?

Ne. Náhled je orientační. Reálné zařízení odhalí dotykové cíle, chování fontů, klávesnici a skutečné poskakování layoutu (CLS).

Vlastní breakpoint, nebo jednodušší layout?

Nejdřív zjednodušte layout. Vlastní breakpoint přidejte, až když i jednoduché rozvržení na konkrétní šířce viditelně praská.

Závěr

Vlastní breakpointy v Divi 5 jsou mocný nástroj, který se snadno zneužije. Přidávejte je cíleně na konkrétní místo, kde layout praská, využívejte dědění hodnot od desktopu dolů, testujte na reálném zařízení a hlídejte CLS a dotykové cíle. A hlavně: než sáhnete po dalším breakpointu, zkuste layout zjednodušit – nejlepší responzivní stránka je ta, která jich potřebuje co nejmíň.

Vyzkoušet Divi 5

Zdroje a další čtení