Design manuálu
Na stránce Design nastavíte vzhled webu manuálu: barvy, písma, zaoblení, pozadí úvodní stránky, logo v hlavičce a faviconu. Po uložení se změny projeví na celém webu.
Co bude hotové
Manuál v barvách a písmech vaší značky, s logem v hlavičce a vlastní faviconou.
Postup
Otevřete Design
V levém menu panelu klikněte na Design. Stránka má záložky Barvy, Písma, Zaoblení objektů, Pozadí homepage, Logo a favicon a Ostatní.
Zadejte brandové barvy
Na záložce Barvy přidejte vpravo v části Vaše brandové barvy barvy značky – HEX (třeba
#E30613) a Název barvy (třeba „Červená“). Tyto barvy se pak nabízejí k rychlému výběru ve všech barevných polích panelu.Nastavte globální barvy
Vlevo vyberte barvy pro tyto prvky:
- Header pozadí
- Nadpis H1 (titulek v headeru)
- Nadpisy H2–H6
- Texty
- Odkazy
- Hlavní tlačítka
- Tlačítka v hlavičce
Pozadí webu může být bílé (
#ffffff), nebo velmi světle šedé (#fafafa). Prázdné pole znamená výchozí barvu.Vyberte písma
Na záložce Písma nahrajte písma do polí Vyberte písmo pro nadpisy, Vyberte písmo pro texty (Regular) a (Bold). Podporované formáty jsou TTF, OTF, WOFF a WOFF2; pro rychlejší web doporučujeme WOFF2. Máte písma v Adobe Fonts? Vložte Adobe Fonts: Project ID svého webového projektu a po uložení se písma objeví ve výběru.
Přidejte logo a faviconu
Na záložce Logo a favicon nahrajte do pole Logo v hlavičce logo ve formátu SVG a posuvníkem Velikost loga v hlavičce nastavte jeho šířku (50–250 px, výchozí 180 px). Do pole Favicon nahrajte čtvercový obrázek JPG, PNG nebo WebP. Visualbook ho při nahrání zmenší na 192 px a uloží jako PNG.
Uložte a zkontrolujte web
Klikněte na Uložit a potom na Zobrazit Visualbook – otevře se úvodní stránka manuálu s novým vzhledem.
Jak poznáte, že je hotovo
Hlavička má vaši barvu a logo, nadpisy jsou ve vybraném písmu a v záložce prohlížeče je vaše favicona.
Co nastavíte na kterých záložkách
| Záložka | Co nastavuje | Rozsahy a volby |
|---|---|---|
| Barvy | Globální barvy, Barvy velkých karet (textová část), Barvy UI elementů (tooltip, info box, štítky, Povoleno, Zakázáno), brandové barvy | Linka mezi obrázkem a textem u velkých karet (hodí se pro velmi světlé karty) |
| Písma | Písmo nadpisů a textů, Adobe Fonts | Velikost nadpisů 0,8–1,1; Velikost textů 14–18 px (výchozí 16); Meziřádkový proklad (texty) 1,0–2,0 (výchozí 1,5); prostrkání −0,1 až 0,1 |
| Zaoblení objektů | Rohy tlačítek, karet, štítků a tooltipů | Tlačítka a Tlačítka v headeru 0–50 px (výchozí 8); Karty, Štítky, Tooltipy 0–16 px (výchozí 16) |
| Pozadí homepage | Obrázek za hlavičkou úvodní stránky | JPG, PNG, WebP nebo SVG; Zarovnání obrázku; Vlastnosti obrázku: Cover, Contain, Repeat |
| Logo a favicon | Logo v hlavičce a ikona v záložce prohlížeče | Logo SVG, šířka 50–250 px; favicona z JPG, PNG nebo WebP |
| Ostatní | Přeškrtávací čára v sekcích „Čemu se vyhnout“ u loga a v galeriích | Výraznost čáry: Normální, Silná, Extra silná |
Typografické volby
Pole Nastavení typografie pro nadpisy nabízí verzálky a OpenType funkce, které nahrané písmo obsahuje. Nastavení typografie pro texty nabízí tabulkové číslice a funkce písma pro texty. Po výměně písma se volby, které nové písmo nepodporuje, samy odeberou.
Pozadí úvodní stránky
- Volba „Zobrazit také na všech podstránkách“ u Zobrazit obrázek pozadí rozšíří pozadí do hlavičky všech stránek.
- Zobrazit obrázek na mobilních zařízeních? je ve výchozím stavu Ne. Pole Vypnout pozadí při šířce pak určuje, pod jakou šířkou obrazovky se pozadí skryje (výchozí 768 px).
- U volby Repeat zadáte Šířku opakovaného obrázku v pixelech.
Kdo Design upravuje a další poznámky
- Když chybí logo v hlavičce nebo favicona, upozorní vás na to box Tipy pro vylepšení Visualbooku na Přehledu.
- Design upravuje role Administrátor. Editor multibrandu položku Design v menu nemá.
- V režimu Multibrand může mít každá podznačka vlastní barvy, písma, pozadí i logo – viz Více značek v jednom manuálu.
- Jméno a odkaz na designéra nebo studio v patičce nastavuje podpora Visualbooku. Kontakt najdete na stránce Podpora a kontakt.