Responzivita na mobiloch a tabletoch

Poskytuje tipy na prispôsobenie webstránky pre rôzne zariadenia. Učí, ako skryť prvky alebo nastaviť zobrazenie stĺpcov pre mobilné zariadenia a tablety, čím zlepšuje užívateľský zážitok na rôznych obrazovkách.

1) Ako sa prepnúť do mobilnej alebo tabletovej verzie

Ak sa chceme prepnúť do inej verzie, vpravo hore klikneme na ikonku mobilu alebo tabletu   

DESKTOPOVÁ VERZIA

TABLETOVÁ VERZIA

MOBILNÁ VERZIA

2) Ako skryť prvok na mobile/tablete/desktope

  • zapneme editačný režim kliknutím na Upraviť aktuálnu stránku
  • označíme si prvok, ktorý chceme skryť

  • v záložke Upraviť v sekcii Viditeľnosť máme možnosti pre skrytie, zaškrtneme, kde chceme prvok skryť

  • dáme Uložiť

  • obnovíme stránku 

3) Ako nastaviť zobrazovanie jednotlivých stĺpcov (mobil/tablet)

  • zapneme editačný režim kliknutím na Upraviť aktuálnu stránku

  • označíme si stĺpce, ktorým chceme nastaviť zobrazenie

  • v ponuke máme sekciu Stĺpce, v ktorej si nastavujeme:

    • veľkosť stĺpcov - vieme nastaviť rovnako veľké stĺpce, alebo nejaký z vybraných pomerov

    • medzery medzi stĺpcami - vieme nastaviť predvolené, žiadne, malé alebo veľké medzery

    • responzivita - vieme nastaviť predvolenú, rovnakú ako desktop, zobraziť ako slider alebo vlastnú, kde si nastavujeme responzivitu samostatne pre mobil na výšku, mobil na šírku, tablet na výšku a tablet na šírku

  • po nastavení musíme stránku Uložiť      a   Ukončiť    

  • aby sme videli, ako stránka na mobile/tablete vyzerá, musíme sa prepnúť do mobilnej alebo tabletovej verzie

VEĽKOSŤ STĹPCOV - Rovnako veľké stĺpce

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

VEĽKOSŤ STĹPCOV - 1/6 + 1/3 + 1/3 + 1/6

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

MEDZERY MEDZI STĹPCAMI - Žiadne

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

MEDZERY MEDZI STĹPCAMI - Malé

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

MEDZERY MEDZI STĹPCAMI - Predvolené

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

MEDZERY MEDZI STĹPCAMI - Veľké

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

STĹPEC

stručný text, ktorý poskytuje základné informácie

Prácu priebežne ukladáme tlačidlom Uložiť.   

VIDEONÁVOD

Značky článkov

Mohlo by Vás zaujímať:

Nasadenie heureky

Vytvorenie konkrétnych cien na časové obdobie

Eshop so skladom / bez skladu

Captcha - neviditeľná

Komentáre a hodnotenia

Prázdny