Vzhled
Sekce Hero
Sekce Hero slouží jako úvodní vizuální blok stránky, který představí hlavní sdělení, motto školy nebo název oboru. Využijí ji redaktoři i správci školy na úvodní stránce, rozcestnících nebo stránkách oborů. Pokud sekci Hero vložíte na stránku jako první, její nadpis se automaticky stane hlavním nadpisem stránky úrovně <h1> a nahradí standardní záhlaví.
Na následujícím snímku vidíte, jak sekce Hero vypadá na hotovém webu školy.
Kde to najdete
V levém menu administrace klikněte na položku Obsah webu. V přehledu Obsah zvolte Stránka a otevřete požadovanou stránku (případně klikněte na tlačítko Přidat vpravo nahoře). Ve formuláři přejděte k oblasti Sekce stránky.
Postup krok za krokem
- V levém menu klikněte na Obsah webu a vyberte Stránka.
- Klikněte na název stránky, kterou chcete upravit.
- V oblasti Sekce stránky klikněte na tlačítko Přidat komponent do Sekce stránky.
- V nabídce Vyberte jeden komponent zvolte ze skupiny Section položku Hero.
- Vyplňte povinné pole Nadpis a vyberte hodnotu v poli Varianta.
- Doplňte volitelná pole podle potřeby (Nadnadpis, Podnadpis, Text, Fotka).
- Pro přidání odkazů klikněte na tlačítko pod seznamem položek v poli Tlačítka.
- U varianty
programdoplňte parametry studia v poli Parametry oboru. - V pravém panelu Záznam klikněte na tlačítko Uložit pro uložení konceptu.
- Jakmile chcete změny zveřejnit na webu, klikněte na tlačítko Publikovat.
Pole a nastavení
Na následujícím snímku vidíte rozbalenou sekci Hero v editačním formuláři stránky.
Základní pole sekce
| Pole | K čemu slouží | Povinné | Tip |
|---|---|---|---|
| Nadnadpis | Štítek nad hlavním titulkem. | Ne | Zvolte 2 až 5 slov (např. název školy). |
| Nadpis | Hlavní titulek sekce i stránky. | Ano | Slovo mezi *hvězdičkami* se v designu Než zazvoní zvýrazní barvou školy. |
| Podnadpis | Doplňkový text pod nadpisem. | Ne | Uplatní se u variant program, brand a split. Např. „4letý maturitní obor“. |
| Text | Úvodní popis sekce. | Ne | Odstavce oddělujte prázdným řádkem. U varianty program je první odstavec tučný. |
| Fotka | Obrázek z knihovny médií. | Ne | Zobrazení řídí pole Varianta (kruh, polaroidový rámeček, fotka na pozadí). |
| Tlačítka | Akční odkazy pod textem nebo v panelu. | Ne | Doporučujeme nanejvýš 2 tlačítka (první výrazné, druhé doplňkové). |
| Parametry oboru | Seznam údajů o oboru. | Ne | Zobrazí se pouze u varianty program. |
| Varianta | Styl rozložení sekce. | Ne (výchozí split) | Rozbalovací nabídka ukazuje technické názvy hodnot split, brand, program, cover, page, plain. |
Položky v poli Tlačítka
Tlačítka tvoří opakované položky typu Odkaz. Tlačítkem pod seznamem položek přidejte novou položku:
| Pole | K čemu slouží | Povinné | Tip |
|---|---|---|---|
| Text odkazu | Nápis na tlačítku. | Ano | Zvolte výstižný text, např. „Podat přihlášku“. |
| Adresa | Cílová adresa odkazu. | Ano | Relativní adresa (/pro-uchazece), externí web (https://...) nebo kotva (#terminy). |
| Ikona | Grafický symbol před textem. | Ne (výchozí none) | Vhodné jsou ikony arrow-right, calendar nebo pen. |
Položky v poli Parametry oboru
Parametry oboru využijete pouze u varianty program. Vytvářejí rámeček v pravém panelu oborové stránky. Tlačítkem pod seznamem položek přidejte novou položku:
| Pole | K čemu slouží | Povinné | Tip |
|---|---|---|---|
| Údaj | Název parametru. | Ano | Např. „Kód oboru“, „Délka studia“, „Zakončení studia“. |
| Hodnota | Údaj parametru. | Ano | Např. „63-41-M/02“, „4 roky“, „Maturitní zkouška“. |
Varianty vzhledu
V poli Varianta můžete vybrat z šesti rozvržení:
- split: Výchozí varianta na bílém podkladu. Text s tlačítky je v levém sloupci, fotografie v pravém sloupci je oříznuta do kruhu (v designu Než zazvoní) nebo zarovnána vedle panelu (v klasickém designu).
- brand: Tmavá plocha v barvě školy. Text je vlevo, fotografie vpravo má bílý rámeček ve stylu polaroidu. Nadnadpis má podobu zaoblené pilulky. Vhodné pro úvodní stránku školy. Bez fotky se text roztáhne přes celou šířku.
- program: Rozvržení pro studijní obory. Vlevo je velký sloupec s fotkou nahoře, nadpisy a odstavci textu (první odstavec je tučný). Vpravo je postranní panel s tlačítky a parametry oboru.
- cover: Fotografie přes celou šířku stránky na pozadí, překrytá tmavým závojem pro čitelnost textu. Bílý text i tlačítka jsou vycentrovány uprostřed. Vhodné pro rozcestníky a významné akce.
- page: Kompaktnější obdoba varianty cover s menší výškou, vhodná pro běžnější podstránky.
- plain: Barevný pás bez fotografie, pouze s textem a tlačítky, když nemáte k dispozici vhodný snímek.
Poznámka k podnadpisu a variantám
Pole Podnadpis se na webu uplatní pouze u variant program, brand a split. U variant cover a page se nezobrazuje. V klasickém designu webu se podnadpis nevykresluje vůbec.
Tipy a doporučení
- Délka a členění textu: Hero slouží jako upoutávka, nikoliv jako dlouhý článek. Hlavní nadpis volte do 10 slov. Text v poli Text udržujte v rozsahu jednoho až dvou odstavců (přibližně 150 až 300 znaků).
- Zvýraznění slova hvězdičkami: Pokud v poli Nadpis uzavřete slovo mezi hvězdičky (např.
Získej *náskok* v kariéře), web v designu Než zazvoní toto slovo obarví akcentní barvou školy. Tato funkce je určena pro školy s designem Než zazvoní. V klasickém designu zůstanou hvězdičky v textu. - Počet tlačítek: Doporučujeme nanejvýš dvě tlačítka. První slouží pro hlavní akci (např. přihláška), druhé pro doplňující krok (např. dny otevřených dveří).
- Výběr fotografie: Pro varianty cover a page volte kvalitní fotografii na šířku v rozlišení alespoň 1920 × 1080 px. Vyhněte se fotografiím s detaily uprostřed, které by překryl text.
- Kotvy pro posun po stránce: Pro posun na konkrétní sekci na stejné stránce zadejte do pole Adresa kotvu s křížkem, například
#terminynebo#duvody. V cílové sekci musí být v poli Kotva stejná hodnota bez křížku.
Časté chyby
- Více sekcí Hero na stránce: Sekce Hero smí být na stránce pouze jednou, a to na první pozici. Na další místa patří obsahové sekce (Karty, Text a obrázek, Čísla).
- Příliš dlouhý text: Dlouhý text v poli Text posune tlačítka pod spodní okraj obrazovky a nutí návštěvníka rolovat.
- Nevyplněné parametry u varianty program: U varianty
programvždy doplňte položky do pole Parametry oboru, aby postranní rámeček nepůsobil prázdně. - Fotografie na výšku: Fotografie z mobilu na výšku způsobuje u variant cover a brand nevhodný ořez. Používejte snímky na šířku.