Obsah
- Prepínanie medzi zobrazeniami (Desktop / Tablet / Mobil)
- Úprava prvkov pre konkrétne zariadenie
- Skrytie prvkov podľa zariadenia
V dnešnej dobe už nestačí, aby web vyzeral dobre len na počítači. Väčšina návštevníkov prichádza cez mobil či tablet, a preto je responzivita webstránky nevyhnutná. V Elementore máš výhodu – umožňuje ti prispôsobiť každý prvok pre rôzne zariadenia rýchlo a jednoducho.
Prepínanie medzi zobrazeniami (Desktop / Tablet / Mobil)
V najnovších verziách Elementora sa ovládanie responzívneho náhľadu presunulo do hornej časti editora. Nájdeš tam tri ikony – počítač, tablet a mobil. Kliknutím na niektorú z nich sa prepneš do náhľadu zvoleného zariadenia.
V tomto režime môžeš upravovať všetky prvky presne tak, ako sa budú zobrazovať na danom type obrazovky.
Po kliknutí na niektorú z ikon sa okamžite zmení veľkosť pracovnej oblasti editora tak, aby napodobňovala rozmery konkrétneho zariadenia. Táto funkcia umožňuje presne vidieť, ako sa stránka bude zobrazovať na rôznych obrazovkách a umožňuje upravovať dizajn nezávisle pre každý režim.
Pri prepnutí na tablet sa zobrazí užší layout s menšou šírkou.
Pri výbere mobilu sa pracovná plocha zúži ešte viac a zobrazenie sa prispôsobí typickému rozmeru smartfónu
Úprava prvkov pre konkrétne zariadenie
Elementor umožňuje nastaviť rozdielne hodnoty pre rôzne typy obrazoviek. Všímaj si ikonu monitora pri rôznych nastaveniach – ako napríklad veľkosť písma, rozostupy (padding/margin), zarovnanie alebo šírka prvku. Kliknutím na túto ikonu sa zobrazí možnosť nastaviť hodnotu samostatne pre desktop, tablet aj mobil.
Napríklad:
- Nadpisy môžu mať menšiu veľkosť na mobile.
- Rozostupy medzi sekciami môžu byť menšie, aby sa ušetrilo miesto.
- Prvky, ktoré sú vedľa seba na desktope, sa na mobile môžu zobraziť pod sebou.
Skrytie prvkov podľa zariadenia
V niektorých prípadoch je vhodné niektoré prvky na konkrétnom zariadení skryť – napríklad veľký obrázok na mobile alebo rozšírené informácie, ktoré zaberajú veľa miesta.
Na tento účel slúži možnosť skrytia prvku:
- 1. Označ požadovaný prvok alebo sekciu.
- 2. Prejdi do záložky „Advanced“ (Rozšírené).
- 3. Otvor časť „Responsive“.
- 4- Zaškrtni možnosť „Hide on Desktop“, „Hide on Tablet“ alebo „Hide on Mobile“ podľa potreby.
Záver
Elementor umožňuje veľmi pohodlne vytvárať responzívny web. Vďaka responzívnemu režimu v hornej časti editora môžeš stránku upraviť pre každé zariadenie samostatne a bez potreby kódu. Tým zabezpečíš, že návštevníci budú mať príjemný používateľský zážitok bez ohľadu na to, z akého zariadenia prídu.
V ďalších článkoch sa pozrieme aj na to, ako optimalizovať obrázky, pracovať s kontajnermi a štruktúrou stránky pre ešte vyšší výkon.
