Rozvržení, které vypadá dobře na velkém monitoru, potřebuje na telefonu jiné proporce. Editor umožňuje nastavit šířku a viditelnost pozic pro jednotlivé velikosti obrazovky.
Co se naučíte
- Nastavit jiné šířky pozice pro mobil, tablet a desktop.
- Nechat sloupce na menší obrazovce skládat pod sebe.
- Skrýt méně důležitou pozici bez odstranění její konfigurace.
- Výsledek ověřit ve třech režimech náhledu.
Jedna pozice, několik šířek
Responsivní znamená, že se rozvržení přizpůsobuje šířce zařízení. Pozice může mít na desktopu například šířku 4 z 12, na tabletu 6 z 12 a na mobilu 12 z 12. Tři karty tak stojí na široké obrazovce vedle sebe, na tabletu se skládají po dvou a na telefonu každá zabere celý řádek.
Hodnota šířky je vždy číslo od 1 do 12. Číslo neudává pixely, ale podíl z dvanáctidílné Bootstrap mřížky. Nastavení se ukládá do šablony a export jej převede na odpovídající responsivní třídy.
Nastavení krok za krokem
- V režimu Grid vyberte řádek, jehož sloupce chcete upravovat, a otevřete Grid inspektor tohoto řádku.
- V seznamu jeho pozic začněte desktopovou šířkou a rozdělte řádek podle důležitosti jednotlivých částí.
- Přepněte náhled na tablet a zvolte širší sloupce, pokud už se obsah mačká.
- Na mobilu nastavte u běžných obsahových bloků šířku 12, aby se skládaly pod sebe.
- Méně důležitou pozici můžete pro vybranou velikost skrýt. Potom zkontrolujte, zda bez ní stránka stále dává smysl.
Skrytí není odstranění
Viditelnost říká, zda se pozice na dané velikosti zobrazí. Skrytá pozice zůstává v konfiguraci a její moduly nejsou smazány. To je užitečné například pro široký informační blok, který by na telefonu překážel. Zároveň ale neskrývejte jedinou navigaci nebo jedinou cestu ke kontaktu.
Viditelnost podle velikosti je něco jiného než přiřazení modulu pouze domovské stránce. První reaguje na šířku obrazovky, druhé na typ právě zobrazené stránky.
Než něco skryjete, projděte obsah celé pozice. Skrytím se na dané šířce schovají všechny její moduly, ne jen ten, který vás právě ruší. Pokud například pozice obsahuje dekorativní obrázek i důležité kontaktní tlačítko, je lepší prvky oddělit nebo změnit jejich rozložení. Grid inspektor patří vybranému řádku a spravuje jeho sloupce; běžné kliknutí na pozici samo neotevírá samostatný panel s těmito responsivními hodnotami.
Každou změnu ověřte i se skutečně dlouhým ukázkovým titulkem, ne pouze s krátkou maketou.
Náhled je kontrolní pomůcka
Tabletový režim používá šířku 768 px a mobilní 575 px. Editor bezpečně simuluje rozvržení, ale nezobrazuje živý obsah Joomly. Dlouhý skutečný název produktu nebo menu může potřebovat více místa než ukázkový text.