Co je Hero sekce
Hero sekce je výrazná vizuální hlavička obvykle na začátku stránky. Obsahuje velký obrázek nebo video na pozadí, hlavní nadpis, podnadpis a volitelně vyhledávací pole. Je to první, co návštěvník stránky uvidí, proto by měla být atraktivní a jasně komunikovat účel stránky.
Kdy použít
- Na úvodní stránce webu
- Na hlavních vstupních stránkách sekcí
- Pro kampaňové nebo propagační stránky
- Když chcete výrazně představit téma stránky
- Pro stránky s vyhledávacím polem (katalogy, databáze)
Jak přidat Hero sekci
- V záložce Obsah klikněte na "Přidat komponentu"
- Vyberte "Hero"
- Vyplňte následující pole
Dostupná pole
Nadpis (povinné)
Hlavní nadpis hero sekce. Měl by být:
- Krátký: Ideálně 5-10 slov
- Výstižný: Jasně sděluje, o čem stránka je
- Působivý: Zaujme návštěvníka
Příklad: "Vítejte na portálu města", "Digitální služby pro občany", "Rozvoj našeho regionu"
Podnadpis (volitelné)
Doplňující text pod hlavním nadpisem. Měl by:
- Rozšířit nebo upřesnit hlavní nadpis
- Být kratší než hlavní nadpis nebo stejně dlouhý
- Obsahovat maximálně 1-2 věty
Příklad: "Vyřiďte si vše online z pohodlí domova"
Obrázek pozadí (povinné)
Velký obrázek zobrazený na pozadí hero sekce.
Technické požadavky:
- Formát: JPG, WebP
- Rozměry: Minimálně 1920×800 px (ideálně 1920×1080 px)
- Velikost: Do 500 KB (optimalizujte!)
- Kvalita: Ostrý, kvalitní obrázek
- Obsah: Jednoduchý, nekomplikovaný motiv - text musí být čitelný
Tipy pro výběr obrázku:
- Vyhněte se příliš detailním nebo rušivým obrázkům
- Upřednostněte obrázky s volným prostorem pro text
- Zkontrolujte čitelnost textu na světlých i tmavých částech obrázku
- Zvažte použití překryvné vrstvy pro lepší kontrast
Barva pozadí
Barevná vrstva překrývající obrázek pro zlepšení čitelnosti textu:
- Výchozí: Bez překryvné vrstvy
- Tmavá: Tmavé ztmavení (pro světlé obrázky)
- Světlá: Světlé zesvětlení (pro tmavé obrázky)
- Primární: Barevný filtr podle primární barvy webu
Vyhledávací pole
Volitelné vyhledávací pole v hero sekci. Vhodné pro:
- Katalogy a databáze
- Portály s velkým množstvím obsahu
- Stránky zaměřené na vyhledávání služeb
Nastavení vyhledávání:
- Zobrazit vyhledávací pole: Zaškrtnutím se pole zobrazí
- Label: Text nad polem (např. "Hledat službu")
- Placeholder: Nápovědný text uvnitř pole (např. "Zadejte název služby...")
Dobré praktiky
- Jedna hero na stránku: Nepoužívejte více hero sekcí na jedné stránce
- První komponenta: Hero sekce by měla být vždy první komponenta
- Kvalitní obrázek: Hero sekce je dominantní - šetřit na kvalitě se nevyplatí
- Kontrast: Text musí být perfektně čitelný, použijte překryvnou vrstvu pokud je potřeba
- Mobilní pohled: Ověřte, že hero vypadá dobře i na mobilech
- Krátké texty: Návštěvník by měl zprávu pochopit během 3 sekund
- Optimalizace: Komprimujte obrázek - hero sekce významně ovlivňuje rychlost načítání stránky
Příklady použití
Úvodní stránka města
Nadpis: "Město Příkladov"
Podnadpis: "Moderní město s tradicemi"
Obrázek: Panorama města s radnicí
Vyhledávání: Ne
Portál služeb
Nadpis: "Digitální služby pro občany"
Podnadpis: "Vyřiďte si vše online, rychle a jednoduše"
Obrázek: Abstraktní grafika s notebookem
Vyhledávání: Ano
Label: "Najděte potřebnou službu"
Placeholder: "Zadejte název služby nebo životní situaci..."
Časté chyby
- ❌ Příliš dlouhý nadpis (více než 15 slov)
- ❌ Nečitelný text kvůli nízkému kontrastu s obrázkem
- ❌ Neoptimalizovaný obrázek (>2 MB)
- ❌ Příliš detailní nebo rušivý obrázek na pozadí
- ❌ Více hero sekcí na jedné stránce
- ❌ Hero sekce umístěná uprostřed nebo na konci stránky
- ❌ Malý obrázek roztažený na hero sekci (rozmazaný)