--- site_name: WPlama site_description: "Správa, opravy a vývoj WordPress webů a e-shopů" site_url: https://www.wplama.cz contact_email: info@wplama.cz title: "Divi 5: Přizpůsobitelné responzivní breakpointy" url: https://www.wplama.cz/divi-5-prizpusobitelne-responzivni-breakpointy/ date: 2025-06-02 modified: 2025-05-30 author: Tomáš Cirkl type: post categories: [Divi šablona a Elegant Themes] tags: [Divi 5] --- Divi šablona a Elegant Themes # Divi 5: Přizpůsobitelné responzivní breakpointy [TC **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 2. 6. 2025 3 min čtení ![Přizpůsobitelné responzivní breakpointy](https://www.wplama.cz/wp-content/uploads/2025/05/prizpusobitelne-responzivni-breakpointy.png "Přizpůsobitelné responzivní breakpointy") Obsah článku (5 kapitol) 1. [Přizpůsobení breakpointů vašeho webu](https://www.wplama.cz/divi-5-prizpusobitelne-responzivni-breakpointy/#prizpusobeni-breakpointu-vaseho-webu) 2. [Nastavení šířek jednotlivých breakpointů](https://www.wplama.cz/divi-5-prizpusobitelne-responzivni-breakpointy/#nastaveni-sirek-jednotlivych-breakpointu) 3. [Intuitivní úpravy pro responzivní zobrazení](https://www.wplama.cz/divi-5-prizpusobitelne-responzivni-breakpointy/#intuitivni-upravy-pro-responzivni-zobrazeni) 4. [Návrh pro libovolné zařízení díky škálování plátna](https://www.wplama.cz/divi-5-prizpusobitelne-responzivni-breakpointy/#navrh-pro-libovolne-zarizeni-diky-skalovani-platna) 5. [Shrnutí](https://www.wplama.cz/divi-5-prizpusobitelne-responzivni-breakpointy/#shrnuti) Divi 5 nově přináší podporu **plně přizpůsobitelných responzivních breakpointů**. K dispozici je sedm předdefinovaných breakpointů, které pokrývají všechny typy zařízení – od mobilů až po velké monitory. Každý z nich si navíc můžete upravit podle vlastních potřeb, a tím získat plnou kontrolu nad vzhledem webu na všech šířkách obrazovky. Celý systém je rychlý a snadno použitelný. 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 Customizable Responsive Breakpoints for Divi 5!](about:blank) ## Přizpůsobení breakpointů vašeho webu Ve Visual Builderu můžete mezi jednotlivými breakpointy přepínat pomocí ikon v horní části rozhraní. Kliknutím na ikonu se třemi tečkami otevřete **editor breakpointů**, kde lze libovolné výchozí breakpointy Divi povolit nebo zakázat. Původní tři breakpointy byly rozšířeny o **čtyři nové**: **Phone Wide**, **Tablet Wide**, **Widescreen** a **Ultra Widescreen**. Tyto nové možnosti pokrývají všechna moderní zařízení, takže můžete přizpůsobit design opravdu pro každý typ obrazovky. ## Nastavení šířek jednotlivých breakpointů Předdefinované breakpointy by měly pokrýt většinu běžných potřeb, ale pokud chcete cílit na konkrétní zařízení, můžete si jejich šířky přizpůsobit. V **editoru breakpointů** lze pro každý breakpoint nastavit **vlastní šířku** přesně podle vašich požadavků. ## Intuitivní úpravy pro responzivní zobrazení V Divi 5 **už není potřeba zapínat responzivní úpravy pro jednotlivá nastavení**. Jakákoliv změna provedená v konkrétním breakpointu se automaticky aplikuje jen na daný rozsah šířky. Stačí přepnout pohled, provést úpravy a optimalizovat design pro vybranou velikost obrazovky. Navíc lze **tažením okraje pracovní plochy** zobrazit náhled webu v libovolné šířce v rámci aktivního breakpointu. ## Návrh pro libovolné zařízení díky škálování plátna Pokud je šířka aktivního breakpointu větší než šířka vašeho plátna, **návrh se automaticky proporčně zmenší**. Díky tomu je možné navrhovat i pro ultraširoké monitory – třeba i na menším notebooku nebo tabletu. I při práci na menším zařízení nebo v zúženém okně prohlížeče tak snadno uvidíte, jak bude váš design vypadat na velkých obrazovkách. ## Shrnutí [Divi 5](https://www.wplama.cz/divi-5) posouvá responzivní design na novou úroveň díky **přizpůsobitelným breakpointům** a intuitivnímu rozhraní pro jejich správu. Nově je k dispozici **sedm předdefinovaných breakpointů**, které lze dle potřeby **zapínat, vypínat a upravovat jejich šířku**, takže je možné cílit na jakékoliv zařízení – od mobilů až po ultraširoké monitory. Úpravy jsou nyní výrazně jednodušší – není třeba ručně zapínat responzivní režim pro jednotlivé volby. Jakákoli změna provedená v konkrétním breakpointu se automaticky vztahuje pouze na daný rozsah šířky. Navíc lze díky **škálování plátna** pohodlně navrhovat i pro velké obrazovky, i když pracujete na menším zařízení. Celý systém je rychlý, přehledný a umožňuje přesně optimalizovat vzhled webu pro každou velikost obrazovky. **Prohlédněte si i další novinky v Divi 5** - [Divi 5: Kombinovatelné nastavení](https://www.wplama.cz/divi-5-kombinovatelne-nastaveni/) - [Divi 5: Command Center](https://www.wplama.cz/divi-5-command-center/) - [Divi 5: Spekulativní prerendering](https://www.wplama.cz/divi-5-spekulativni-prerendering/) - [Divi 5: Upravitelné oblasti v Theme Builderu (Kompletní editace webu)](https://www.wplama.cz/upravitelne-oblasti-v-theme-builderu/) - [Divi 5: Nový karousel modul – vytvářejte slidery z čehokoliv](https://www.wplama.cz/divi-5-novy-karousel-modul-vytvarejte-slidery-z-cehokoliv/) - [Divi 5: Loop Builder – svoboda při výpisu obsahu](https://www.wplama.cz/divi-5-loop-builder-svoboda-pri-vypisu-obsahu/) - [Divi 5: Flexbox](https://www.wplama.cz/divi-5-flexbox/) - [Divi 5: Hledat a Nahradit](https://www.wplama.cz/divi-5-hledat-a-nahradit/) - [Divi 5: Rozšíření atributů](https://www.wplama.cz/divi-5-rozsireni-atributu/) - [Divi 5: Pokročilé jednotky (včetně CSS funkcí a proměnných)](https://www.wplama.cz/divi-5-pokrocile-jednotky-vcetne-css-funkci-a-promennych/) - [Divi 5: Design založený na presetech](https://www.wplama.cz/divi-5-navrh-zalozeny-na-presetech/) - [Divi 5: Proměnné v designu](https://www.wplama.cz/divi-5-promenne-v-designu/) - [Divi 5: Vyhledávání a filtrování nastavení](https://www.wplama.cz/divi-5-vyhledavani-a-filtrovani-nastaveni/) - [Divi 5: Správu atributů](https://www.wplama.cz/divi-5-spravu-atributu/) - [Divi 5: Skupiny modulů](https://www.wplama.cz/divi-5-skupiny-modulu/) - [Divi 5: Vnořené řádky](https://www.wplama.cz/divi-5-vnorene-radky/) - [Divi 5 (Public Alpha) k dispozici ke stažení](https://www.wplama.cz/divi-5-public-alpha/) - [#Divi 5](https://www.wplama.cz/stitek/divi-5/) Sdílet - - [](mailto:?subject=Divi 5: Přizpůsobitelné responzivní breakpointy&body=Divi 5: Přizpůsobitelné responzivní breakpointy https://www.wplama.cz/divi-5-prizpusobitelne-responzivni-breakpointy/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fdivi-5-prizpusobitelne-responzivni-breakpointy%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fdivi-5-prizpusobitelne-responzivni-breakpointy%2F) TC Autor Tomáš Cirkl 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. 1 030 článků [Všechny články autora →](https://www.wplama.cz/author/tomas/) ## Komentáře Zatím tu nikdo nekomentoval. Napište první komentář. ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/divi-5-prizpusobitelne-responzivni-breakpointy/#respond) [← Předchozí článek Divi 5: Vnořené řádky](https://www.wplama.cz/divi-5-vnorene-radky/) [Další článek → Divi 5: Skupiny modulů](https://www.wplama.cz/divi-5-skupiny-modulu/) Související ## Mohlo by vás zajímat [Všechny články z rubriky Divi šablona a Elegant Themes →](https://www.wplama.cz/wordpress/divi-elegant-themes/) ![kombinovatelne nastaveni](https://www.wplama.cz/wp-content/uploads/2026/04/kombinovatelne-nastaveni.png "kombinovatelne nastaveni") Divi šablona a Elegant Themes ### [Divi 5: Kombinovatelné nastavení](https://www.wplama.cz/divi-5-kombinovatelne-nastaveni/) 13. 4. 2026 2 min čtení --- ![command center](https://www.wplama.cz/wp-content/uploads/2026/03/command-center.png "command center") Divi šablona a Elegant Themes ### [Divi 5: Command Center](https://www.wplama.cz/divi-5-command-center/) 7. 4. 2026 4 min čtení --- ![spekulativni prerendering](https://www.wplama.cz/wp-content/uploads/2026/03/spekulativni-prerendering.png "spekulativni prerendering") Divi šablona a Elegant Themes ### [Divi 5: Spekulativní prerendering](https://www.wplama.cz/divi-5-spekulativni-prerendering/) 30. 3. 2026 3 min čtení ---