Responzivní design WordPressu: zajistěte, aby vaše webové stránky vypadaly dobře jak na mobilních zařízeních, tak i na počítačích.

Mnoho začátečníků se setká s problémem, že stránky navržené na počítači vypadají na mobilním telefonu jako nečitelná hrouda textu a s nesprávně umístěnými obrázky – to je způsobeno nedostatečně responzivním designem. Elementor disponuje výkonným nástrojem pro responzivní editaci, který umožňuje jednoduše nastavit, aby webové stránky vypadaly na počítači, tabletu i mobilním telefonu esteticky a uživatelsky přívětivě.

Co je to responzivní design?

Zjednodušeně řečeno,Responzivní design umožňuje, aby se stejná webová stránka automaticky přizpůsobila velikosti obrazovky zařízení a upravila své rozložení.：

• Na počítači (na velké obrazovce) může být obsah zobrazen vedle sebe (například tři sloupce obrázků);
• Na tabletu (střední obrazovka) se automaticky přepne na dva sloupce;
• Na mobilních telefonech (s malou obrazovkou) se automaticky zobrazí ve sloupci, aby se zabránilo tomu, že text bude příliš malý nebo že obsah přetéká.

Elementor se automaticky přizpůsobí většině scénářů, ale stále je nutné ručně optimalizovat detaily, aby bylo zajištěno, že každé zařízení bude mít nejlepší možný zážitek.

První krok: Seznamte se s reaktivním režimem editace Elementoru.

Po vstupu do editačního rozhraní Elementoru se na pravé straně horního panelu nástrojů zobrazí tři ikony, které odpovídají třem pohledům na zařízení:

• 🖥️ Zobrazení na ploše(Výchozí zobrazení)
• 📱 Pohled na tabletu(šířka přibližně 768 pixelů)
• 📱 Pohled na mobilní telefon(šířka přibližně 375 pixelů)

Návod k použitíKlíkněte na příslušnou ikonu a přejděte do režimu náhledu pro dané zařízení. Všechny úpravy stylu (například velikost písma, mezery, rozložení) lze nastavit samostatně pro každé zařízení, aniž by se to vzájemně ovlivnilo.

Druhý krok: základní nastavení responzivního designu (3 povinné kroky)

Velikost textu: Vyhněte se tomu, aby byl text na telefonu příliš malý nebo příliš velký.

Text, který vypadá dobře na počítači, může být na mobilním telefonu nečitelný (příliš malý) nebo s narušeným formátováním (příliš velký), a proto vyžaduje samostatné přizpůsobení:

1. Vyberte textový modul (nadpis, odstavec atd.) a přejděte na panel „Styly“ na pravé straně.
2. Nalezněte nastavení „Velikost písma“ a klikněte na „Respondive ikonu“ vedle hodnoty (ikona malého počítače, po kliknutí se zobrazí tři vstupní pole odpovídající počítači, tabletu a telefonu).
3. Přepněte na „mobilní zobrazení“ a zadejte vhodné velikosti (například pro titulky na mobilních zařízeních použijte 24–32 pixelů a pro odstavce 14–16 pixelů).

upozornit na něcoVelikost písma by měla být v souladu s pravidlem „čím menší obrazovka, tím menší a přitom čitelnější písma“, aby bylo možné text číst na mobilním zařízení bez nutnosti přiblížení.

Obrazy a šířka modulu: Zabraňte tomu, aby přesahovaly obrazovku.

Obrázek nastavený na „šířku 80%“ na počítači může být na mobilním telefonu stále příliš široký nebo mít příliš velké bílé okraje po stranách:

1. Vyberte obrázek/modulu a přejděte do panelu „Styl“ na pravé straně (obrázek je v sekci „Styl“ → „Šířka“, zatímco ostatní moduly mohou být v sekci „Pokročilé“ → „Šířka“).
2. Klikněte na ikonu Responzivní vedle hodnoty „Šířka“ a přepněte na „Mobilní zobrazení“.
3. Nastavte šíři na „100%“ (aby obrázek/moduly zaplnily celou šíři obrazovky telefonu a nezůstaly bílé okraje po stranách) nebo upravte podle potřeby (například 90% pro zachování malého okraje).

PozorPokud je samotný obrázek příliš malý, bude po nastavení na 100% rozmazaný. Doporučuje se připravit si předem obrázky ve vysokém rozlišení (nejméně 1000 pixelů šířky).

Rozestupy a okraje: Zabraňte tomu, aby se obsah překrýval.

Prostor na obrazovce mobilního telefonu je omezený. Příliš velký odstup mezi moduly může způsobit plýtvání prostorem, zatímco příliš malý odstup může působit přeplněně:

1. Vyberte libovolný modul (například tlačítko nebo odstavec) a přejděte na panel „Pokročilé“ na pravé straně.
2. Naleznete „vnější okraje“ (vzdálenost modulu od ostatních prvků) nebo „vnitřní okraje“ (vzdálenost obsahu uvnitř modulu od jeho rámce) a kliknete na „ikonu responzivnosti“ vedle příslušné hodnoty.
3. Přepněte na „Mobilní zobrazení“ a snižte hodnoty (například horní okraj z 50 na 20 pixelů, aby byl modul kompaktnější).

Technika: Podržte Ctrl Současně vyberte více modulů a upravte odstupy hromadně, což je mnohem efektivnější.

Třetí krok: úprava rozložení (optimalizace rozložení sloupců na mobilních zařízeních)

Pokud na své domovské stránce používáte „více sloupcový layout“ (například 3 sloupce pro popis služeb, 2 sloupce s kombinací obrázků a textu), může se to na mobilních zařízeních zobrazit přehnaně a měli byste to změnit na jednosloupcový layout.

1. Nalezněte „Sekci“ obsahující více sloupců (klikněte na modrý kruhový rámec mimo modul a vyberte celý modul).
2. Přejděte na panel „Rozvržení“ na pravé straně a najděte nastavení „Sloupec“ (pokud je aktuálně nastaveno na „3 sloupce“).
3. Klikněte na ikonu Responzivní vpravo od hodnoty „Sloupec“ a přepněte na „Mobilní zobrazení“.
4. Změňte počet sloupců na „1 sloupec“ a obsah se na telefonu automaticky zobrazí ve sloupcích, což umožní lepší přehlednost.

PříkladNa počítači se produkty zobrazují ve třech sloupcích, na tabletu ve dvou sloupcích a na mobilním telefonu v jednom sloupci. Tím se využije prostor na velké obrazovce a současně se zajistí čitelnost na malé obrazovce.

Čtvrtý krok: Skryjte nepotřebné prvky (pro malé obrazovky)

Některé prvky mohou na počítači obohatit stránku, ale na mobilním zařízení se mohou jevit jako nadbytečné (například komplexní dekorativní ikony nebo dlouhé popisy textu) a lze je na mobilním zařízení skrýt:

1. Vyberte modul, který chcete skrýt, a přejděte na panel „Pokročilé“ na pravé straně.
2. Přejděte na nastavení „Responsivní“ a najděte možnost „Skryté na mobilních zařízeních“ (nebo zaškrtněte „Skryté na stolních počítačích“ a „Skryté na tabletech“).
3. Zatrhněte „Skryté na mobilních zařízeních“ a modul se automaticky skryje v mobilní verzi, aniž by to mělo vliv na zobrazení na počítači nebo tabletu.

Aplikační scénářeDejte si pozor na všechny detaily: dekorativní boční ikony, kontaktní formulář určený pro počítače (který lze na mobilních zařízeních nahradit jednodušším formulářem).

krok: Náhled a testování (klíčový krok)

Po dokončení nastavení nezapomeňte jej otestovat na skutečném zařízení (nebo důkladně zkontrolovat pomocí funkce náhledu v Elementoru):

1. Náhled v Elementoru.Klíkněte postupně na ikonky „Desktop → Tablet → Mobilní telefon“ a projděte si stránku, abyste zkontrolovali každý modul:
   • Je text zobrazen kompletně (bez oříznutí nebo překrývání)?
   • Jsou obrázky ostré a pokrývají celou obrazovku (bez překrývání nebo deformace)?
   • Je tlačítko dostatečně velké (nejméně 44 × 44 pixelů na mobilním telefonu, aby se na něj dalo kliknout)?
2. Otestování na skutečném zařízení.Scanujte pomocí telefonu „QR kód“ v horní části Elementoru, otevřete stránku na svém telefonu a vyzkoušejte funkčnost tlačítek a vstupních polí. Přesvědčte se o tom, jak hladce se vše pohybuje a jak dobře reaguje na doteky.
3. Opravte běžné problémy.：
   • Pokud je formátování textu na mobilním zařízení neuspořádané: zmenšete velikost písma nebo zvětšete šíři modulu.
   • Pokud se obrázek deformuje: na mobilním zařízení nastavte „Přizpůsobení objektu“ na „Překrytí“ (Obrázek → Styl → Přizpůsobení objektu).
   • Pokud jsou tlačítka příliš malá: na mobilních zařízeních zvětšete „vnitřní okraj“ tlačítek (nejméně 15 pixelů nahoře a 20 pixelů po stranách).

Principy responzivního designu, které musí začátečníci mít na paměti.

1. mobilní zařízení na prvním místěPři návrhu nejprve zvažte pohled na mobilní telefon a poté jej rozšířte na počítač (aby se zabránilo velkým úpravám v pozdější fázi).
2. Méně je někdy více.Prostor na obrazovce mobilního telefonu je omezený, proto je nutné zachovat pouze hlavní obsah a odstranit nadbytečné prvky.
3. KonzistenceBarvy a styl písma musí být na všech zařízeních stejné, aby nedošlo k dezorientaci návštěvníků.
4. Pravidelné kontrolyPo každém přidání nového modulu přejděte na zobrazení pro mobilní zařízení a ujistěte se, že se vše zobrazuje správně.

Pomocí výše uvedených kroků bude váš web vypadat profesionálně na počítači, tabletu i mobilním telefonu. Responzivní design se může zdát komplikovaný, ale po několika pokusech s Elementorem zjistíte, že stačí jen doladit několik klíčových parametrů pro různá zařízení a vyřešit problémy s přehráváním 90%. S dostatečnou praxí a testováním to brzy zvládnete!