Vzhľad blokov: pozadie, farby a rozostupy

Ako zvoliť farby sekcie?

Samostatne nastavíte pozadie, farbu textu a zvýrazňujúcu farbu odkazov a ikon.

• Predvolené: blok ponechá bežné pozadie stránky.
• Tmavé: použije tmavý odtieň z palety a text prispôsobí kontrastu.
• Základné, zvýraznené alebo tlmené pozadie: farby nadväzujú na značku a môžu sa zmeniť spolu s jej paletou.
• Vlastná farba: použite presný odtieň, ak je to pre vizuálnu identitu potrebné.

Farbu textu nechajte spravidla vybrať editorom. Ručne ju meňte iba pri vedomej kombinácii a overte kontrast aj na mobile. Pri vlastnej farbe tlačidla môže editor automaticky zvoliť čitateľný odtieň jeho textu.

Fotografia na pozadí a prekrytie pre čitateľnosť

Za blok môžete vložiť fotografiu. Mala by podporovať atmosféru, nie niesť jedinú kópiu zásadnej informácie.

Vrstva prekrytia pomáha udržať text čitateľný:

• Svetlá: nad fotografiou sa objaví svetlá vrstva, farby textu zostanú zladené so značkou.
• Tmavá: stmaví fotografiu a použije svetlý text.
• Bez prekrytia: obrázok zostane čistý, no text musí byť dobre čitateľný na celej ploche.

Vhodné sú menej rušné fotografie, napríklad krajina či textúra. Nastavte aj ohnisko výrezu. Čisto dekoratívne fotografie na pozadí nepotrebujú ALT text.

Spodný okraj: rovný, vlnitý alebo oblúkový

Sekcia s pozadím môže mať rovný, vlnitý alebo oblúkový spodný okraj. Vlnka a oblúk vytvárajú plynulejší prechod; pod nimi je viditeľné skutočné pozadie nasledujúceho bloku.

• Efekt sa prejaví pri farebnom alebo fotografickom pozadí.
• Tvarovaný okraj nahrádza bežnú medzeru pod blokom.
• Posledný blok stránky má rovný okraj.
• Takéto prechody používajte striedmo, ideálne v jednotnom štýle.

Napríklad tmavý blok s vlnitým okrajom môže prirodzene prechádzať do svetlej sekcie.

Šírka a rozostupy

• Šírka obsahu: úzka pre dlhší text, širšia pre mriežky alebo plná pre špeciálne rozloženia.
• Rozsah pozadia: len oblasť obsahu alebo až k okrajom obrazovky.
• Medzera pod blokom: žiadna, úzka, predvolená či veľká.
• Vnútorný odstup: priestor medzi obsahom a hranicami farebnej sekcie.
• Odsadenie po stranách: hore, vpravo, dole a vľavo podľa potreby.

Najprv ponechajte predvolené hodnoty. Upravujte iba tam, kde to zlepší čitateľnosť alebo rytmus stránky, napríklad keď sú dve sekcie príliš ďaleko od seba.

Viditeľnosť podľa zariadenia

• Všetky zariadenia: blok sa zobrazuje všade.
• Iba mobil: neukáže sa na tablete ani počítači.
• Iba počítač: skryje sa v mobilnej verzii.
• Skryté: návštevník blok nevidí, no zostáva v editore na neskoršie použitie.

Na počítači tak môžete použiť veľkú fotografiu a na mobile kompaktnejší blok. V náhľade si overte, že návštevníkom nechýbajú dôležité informácie ani tlačidlá.

Automatické plánovanie zobrazenia

Blok sa môže zobrazovať iba vo vybranom období:

• Rozsah dátumov: sekcia sa zobrazí od určeného začiatku do konca. Vhodné pre časovo obmedzenú ponuku, udalosť alebo sviatočné hodiny.
• Hodiny dňa: blok sa ukazuje len v určitých časoch podľa miestneho času návštevníka, aj v intervale cez polnoc.

Po uplynutí platnosti sekcia pre návštevníkov zmizne. Zrušením plánovania sa vrátite k bežnému zobrazeniu.

Kotva: odkaz priamo na konkrétnu sekciu

Každému bloku môžete priradiť identifikátor kotvy, napríklad kontakt alebo ceny. Tlačidlo či odkaz s #kontakt potom návštevníka posunie na danú sekciu.

Používajte malé písmená bez diakritiky, čísla, pomlčky a podčiarkovníky. Kotva nesmie začínať číslicou a na stránke musí byť jedinečná.

Je to užitočné najmä na dlhých stránkach s viacerými sekciami, napríklad pri formulári na konci predstavenia služieb.