Vzhled
Vzhled webu
Vzhled webu určuje celkový grafický styl a vizuální vyznění prezentace školy na internetu. V Než zazvoní CMS se grafický manuál nepřepisuje do složitých stylopisů, ale nastavuje se pomocí přehledných voleb v záznamu školy. Můžete zde zvolit celkovou designovou šablonu, nastavit barvy značky, vybrat písma pro nadpisy i text a nahrát logo, znak i fotografii do záhlaví stránek. Nastavení je určeno pro správce platformy (Super Admin) i pro pověřené redaktory školy.
Kde to najdete
K nastavení vizuální identity školy přejdete v administraci takto:
- V levém menu klikněte na položku Obsah webu.
- V navigačním panelu OBSAH otevřete sekci Škola.
- Otevřete záznam své školy. Pole pro nastavení vzhledu, barev a grafických podkladů najdete v horní a střední části formuláře.
Na následujícím snímku vidíte část formuláře záznamu školy určenou pro nastavení barev, písem a grafických podkladů.
Postup krok za krokem
Při úpravě vzhledu a grafických prvků webu postupujte podle těchto kroků:
- V poli Vzhled webu zvolte šablonu (moderní design
nznebo původní šablonuklasik). - Do polí Hlavní barva a Akcentní barva vložte kódy barev z grafického manuálu školy ve formátu HEX.
- Pokud chcete upravit doplňkové plochy, vyplňte pole Tmavá barva a Světlé pozadí, případně je ponechte prázdná pro automatické odvození.
- V polích Písmo nadpisů a Písmo textu vyberte z nabídek vhodnou kombinaci typografických rodin.
- V poli Zaoblení rohů zvolte míru zakulacení tlačítek a karet.
- Kliknutím na pole Logo nahrajte nebo vyberte z knihovny médií oficiální logo školy.
- V poli Znak školy vyberte průhledný soubor se znakem či erbem školy pro použití ve vodoznaku.
- V poli Fotka v hlavičce podstránek přiřaďte fotografii, která se zobrazí pod barevným závojem v záhlaví běžných stránek.
- Pro testování nového webu můžete vyplnit pole Adresa druhé verze webu a Popisek přepínače verzí.
- V pravém panelu Záznam uložte nastavení kliknutím na tlačítko Uložit.
Na obrázku níže je ukázka úvodní stránky školy zpracované v moderním designu Než zazvoní.
Pro srovnání vidíte stejnou školu zobrazenou v původním klasickém designu platformy.
Pole a nastavení
Přehled všech polí pro nastavení vizuální stránky webu přináší následující tabulka:
| Pole | K čemu slouží | Povinné | Tip |
|---|---|---|---|
| Vzhled webu | Volba designové šablony webu (nz nebo klasik). | Ano | Hodnota nz aktivuje moderní marketingový design Než zazvoní, hodnota klasik původní konzervativní rozložení. |
| Hlavní barva | Primární barva instituce z grafického manuálu v šestnáctkovém formátu HEX. | Ano | Určuje barvu navigačních prvků, rámečků a tmavých ploch. Výchozí hodnota je #1f3b6f. |
| Akcentní barva | Doplňková kontrastní barva pro tlačítka, štítky a zvýraznění. | Ano | Používá se pro akční tlačítka a zvýrazněná slova mezi hvězdičkami v nadpisech. Výchozí hodnota je #d4a017. |
| Tmavá barva | Barva pro tmavá pozadí sekcí Hero a výzev CTA. | Ne | Pokud zůstane prázdná, systém barvu automaticky namíchá z hlavní barvy a tmavého inkoustu. |
| Světlé pozadí | Světlý tón pro podbarvení vybraných sekcí stránek. | Ne | Volitelné pole. Při nevyplnění systém světlý podklad odvodí automaticky. |
| Písmo nadpisů | Výběr typografie pro hlavní a vedlejší nadpisy. | Ano | Výchozí volbou je patková literata. K dispozici jsou patková i bezpatková písma. |
| Písmo textu | Výběr typografie pro odstavce běžného textu, tabulky a výpisy. | Ano | Výchozí volbou je bezpatkové písmo atkinson, navržené pro špičkovou čitelnost. |
| Zaoblení rohů | Styl rohů u tlačítek, karet a informačních boxů. | Ano | Možnosti jsou sharp (ostré, 0 px), soft (jemné, 6 px, výchozí) a round (výrazné, 14 px). |
| Logo | Oficiální grafické logo školy v záhlaví webu. | Ne | Nahrávejte soubor s průhledným pozadím (PNG nebo WebP), aby přirozeně splynul s podkladem. |
| Znak školy | Samostatný emblém nebo erb školy s průhledným pozadím. | Ne | Slouží jako decentní vodoznak v sekci karet a jako náhradní obrázek u článků bez fotografie. |
| Fotka v hlavičce podstránek | Reprezentativní fotografie umístěná v záhlaví běžných podstránek. | Ne | Zobrazí se pod poloprůhledným barevným závojem na všech běžných stránkách. |
| Adresa druhé verze webu | Internetová adresa paralelní verze webu při testování. | Ne | Aktivuje plovoucí přepínač verzí v levém dolním rohu obrazovky. |
| Popisek přepínače verzí | Text na tlačítku přepínače verzí, například Původní web. | Ne | Vyplňuje se společně s adresou druhé verze webu. |
Tipy a doporučení
- Automatické hlídání kontrastu: Webový engine platformy automaticky přepočítává poměry jasu podle standardu WCAG 2.1 AA. Pokud nastavíte světlou hlavní barvu, texty na této barvě se automaticky zbarví do tmavého odstínu inkoustu (
#14202b). Na akcentních prvcích systém zaručuje minimální kontrastní poměr 3 : 1 vůči bílému podkladu. - Lokální načítání písem (self-hosted): Všech 10 nabízených typografických rodin (včetně patkových písem
literata,lora,source-serifa bezpatkovýchatkinson,figtree,manrope,inter,nunito,lexend,jakarta) se stahuje přímo ze serveru školy. Prohlížeč nevysílá požadavky na servery Google Fonts, což zajišťuje bleskové zobrazení a soulad s pravidly ochrany osobních údajů. - Příprava znaku školy: Pro pole Znak školy připravte jednobarevný nebo zjednodušený erb v grafickém formátu PNG s průhledným pozadím. Web ho v designu Než zazvoní použije jako elegantní vodoznak na pozadí sekce karet a také jako zástupný symbol v kartách aktualit bez vlastní náhledové fotky.
- Fotografie v záhlaví: Pole Fotka v hlavičce podstránek vyžaduje kvalitní širokoúhlou fotografii školy. Na webu se přes ni položí barevný závoj v hlavní barvě školy, na kterém spolehlivě vynikne bílý nadpis stránky. Bez nahrané fotografie se zobrazí světlé záhlaví s decentním vzorem.
- Přechod na nový web: Při spuštění nového webu vyplňte pole Adresa druhé verze webu odkazem na dosavadní web a do pole Popisek přepínače verzí zadejte text Původní web. Návštěvníci tak během přechodného období snadno najdou staré materiály.
Časté chyby
- Chybný zápis kódu barvy: Zadání kódu bez úvodního křížku (např.
005484místo#005484) nebo v neúplné délce. Šestnáctkový kód musí mít vždy formát sedmi znaků začínajících symbolem mřížky. - Nahrání loga s bílým rámečkem: Pokud nahrajete logo vyříznuté na bílém podkladu místo průhledného formátu PNG, v záhlaví vznikne rušivý bílý obdélník.
- Příliš malá fotografie v záhlaví: Vložení snímku v nízkém rozlišení do pole Fotka v hlavičce podstránek vede k rozostření na monitorech s vysokým rozlišením. Používejte fotografie o šířce alespoň 1920 pixelů.