Hero header
K čemu slouží
Hero header se vizuálně atraktivní prvek, který se používá nejčastěji jako hlavní upoutávkový banner na úvodní stránce webu. Jedná se o velký obrázek přes celou šířku obrazovky s krátkým textem umístěným na obrázku. Text je ve výchozím nastavení umístěn v malém boxíku, lze ale docílit i dalších variant vzhledu a přidávat kromě textu např. i tlačítka či jiné prvky.
Prvek je také vhodný pro umístění v rámci obsahu stránky, zejména pro výrazné grafické upoutávky.
Jak s komponentou pracovat
Varianty vzhledu a další nastavení
Hero header je variabilní komponenta, s kterou můžete vytvořit velký a vizuálně atraktivní prvek na webu.
Součástí prvku je vždy obrázek na pozadí, roztažený přes celou šířku, a text (či jiný další obsah) umístěný na obrázku.
Ve výchozím nastavení je textový obsah zobrazen uvnitř malého boxu s bílým nebo černým pozadím. Máte ale možnost vybrat si i variantu bez pozadí, což znamená, že box nebude viditelný.
Možnosti vzhledu textového boxu
- s pozadím (tzn. bílý či černý box) / bez pozadí (tzn. bez viditelného boxu)
- tmavé / světlé barevné schéma (bílé písmo + černé pozadí / černé písmo + bílé pozadí)
- umístění malého boxu vlevo nahoře, vpravo nahoře, vlevo dole, vpravo dole, případně roztažení boxu (či samotného textu bez pozadí) přes celou šířku (šířku boxíku kromě tohoto roztažení nelze měnit)
Možnosti vzhledu hero headeru
- hero header lze zasunout pod záhlaví – obrázek se tedy na stránce zobrazí i pod logem, menu a ostatními prvky záhlaví
- v případě zasunutí hero headeru pod záhlaví lze navolit ještě další nastavení (např. roztažení hero headeru přes celou obrazovku – tedy nejen na šířku, ale i na výšku)
Další informace a nastavení
- Každou z komponent vytvořených v Umbracu je možné na webu skrýt (záložka Viditelnost v nastavení prvku) a vždy je možné nastavit rozestupy od okolních prvků (záložka Rozestupy).
- Prozkoumejte a vyzkoušejte všechny dostupné možnosti nastavení této komponenty přímo v Umbracu.
Tipy a doporučení
- Použijte fotografii na pozadí v dostatečné velikosti a kvalitě. Minimálně velikost obrázku by měla být 3000 px na šířku.
- Pokud chcete nastavit zasunutí hero headeru pod záhlaví, zvolte takový obrázek, aby na něm bylo menu webu dobře čitelné.
- Zobrazení hero headeru na stránce si vždy zkontrolujte nejen pro zobrazení na počítači, ale i na mobilu a tabletu.
Ukázky použití na webu
Zobrazte si živé ukázky – k dispozici je vždy odkaz na ukázkovou stránku nebo přímo na skutečnou stránku webu, ze kterého daný příklad pochází.
Ukázka 1
Ukázka zobrazuje typický hero header s modrou grafikou na pozadí; textový boxík má bílé pozadí a obsahuje text a tlačítko.
Ukázka 2
Hero header je v této ukázce zasunutý pod záhlaví a jako pozadí má vloženou fotku s červeným potahem sedačky ve Scale. Dále obsahuje text a tlačítko, které jsou bez bílého či černého pozadí a jsou vycentrované na střed.
Ukázka 3
Ukázka zobrazuje typický hero header s fotkou na pozadí; textový boxík má bílé pozadí.
Ukázka 4
Celá ukázka zobrazuje hero header zasunutý pod záhlaví webu, který je roztažený přes celou výšku obrazovky. Na pozadí je použita grafika MjUNI. Uvnitř hero headeru jsou vloženy další prvky (sloupce s textem a tlačítky).
Prozkoumat další komponenty
- Citace
- Časová osa s boxy
- Článek – upoutávka
- Fotogalerie
- Grafický modul
- Hero box
- Kategorie
- Kontaktní formulář
- Loga
- Mapa
- Obrázek
- Otáčecí dlaždice
- Prohlížeč PDF
- Proměnné webu
- Rozcestník odkazů
- Rozklikávací boxy
- Slideshow
- Testimoniál (citát)
- Text
- Text s obrázkem
- Tlačítka
- Uživatelské formuláře
- Vizitka
- Vnořený grid
- Významné informace
- YouTube video
- Záložky