Práce se soubory ve Visualbooku
Ukázková obsahová stránka s přehledem sekcí
Na této stránce
Sekce: Obrázek (multifunkční)
Na rozdíl od sekce Obrázek (jednoduchý) tato sekce k obrázku integruje tlačítka nebo rozbalovací pole pro definování různých pravidel. Tato je sekce je jednoznačně nejpoužívanější sekcí při tvorbě vizuálních pravidel. Nabízí možnosti definování grafiky společně s tlačítky ke stažení zdrojových souborů nebo podrobné návody s cover obrázkem.
TIP: Věděli jste, že obsah výše je generován automaticky? Stačí v nastavení Obsahové stránky zaškrtnou tlačítko „Generovat obsah stránky“ a vloží se automaticky.
Získat mockup
Stáhnout náhled
Rozbalovací obsah
Zobrazit
V tomto rozbalovacím obsahu můžete sepsat další pravidla ve vašem brand manuálu. Množství informací a rozbalovacích obsahů je jen na vás.
Další rozbalovací obsah
Zobrazit
V tomto rozbalovacím obsahu můžete sepsat další pravidla ve vašem brand manuálu. Množství informací a rozbalovacích obsahů je jen na vás.
Sekce: Obrázek (jednoduchý)
Obrázek (jednoduchý) je sekce s obrázkem a případně i volitelným textem pod ním. Umožňuje kamkoliv do obsahové stránky vložit obrázek nebo fotografii a definovat jeho pravidla používání.
TIP: Jednoduchý obrázek můžete také zobrazit v lightboxu ve větším rozlišení, jakmile na něj kliknete.
Pod obrázek můžete vložit textové pole, kde můžete popsat případná pravidla zobrazená na obrázku. Samozřejmostí jsou externí odkazy nebo zvýraznění textu. Můžete vložit také číslované nebo nečíslované seznamy:
- Položka 1
- Položka 2
- Položka 3
- Položka 4
Sekce: Galerie obrázků
Sekce Galerie je jedna s nejpřínosnějších sekcí pro grafické manuály a brand booky. Můžete pomocí těchto sekcí tvořit nejen galerie obrázků do různých skupin, ale také přidávat pravidla Povoleno nebo Zakázáno a tím vizuálně definovat, jak pracujete například s fotografiemi, nebo jiným vizuálním obsahem.
Každá sekce může mít nastaveny tyto individuální poměry stran obrázků:
Originální
16:9
4:3
1:1
Každou fotografii můžete okomentovat pomocí tohoto popisku
Každou fotografii můžete okomentovat pomocí tohoto popisku
Fotografie může být také bez pravidel (přeškrtnutí nebo s ikonou „check“).
Pod galerii můžete vložit textové pole, kde můžete popsat případná pravidla zobrazená v galerii. Samozřejmostí jsou externí odkazy nebo zvýraznění textu. Můžete vložit také číslované nebo nečíslované seznamy:
- Položka 1
- Položka 2
- Položka 3
- Položka 4
Sekce: před a po (posuvník)
Tento posuvník porovnává dvě fotografie. Ke každé z nich můžete zvolit individuální popisek.
Sekce: Text
Sekce text umožňuje předávat informace a pravidla prostřednictvím textů ve formě odstavců s několika možnostmi formátování. Můžete do textu vkládat externí odkazy, zvýraznění a další možnosti, které jsou vypsány níže.
TIP: Sekce můžete vkládat libovolně do jakékoliv obsahové stránky nebo také do výchozích stránek, jako jsou Loga, Písma a Barvy.
Velký nadpis
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc tincidunt ante vitae massa. Aliquam in lorem sit amet leo accumsan lacinia. Nullam rhoncus aliquam metus. Phasellus faucibus molestie nisl. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus.
Malý napis
- Slot číslo 1
- Slot číslo 2
- Slot číslo 3
Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Sekce: Proces tvorby
Tato sekde je idéální pro zobrazení procesu tvorby, kupříkladu genere loga a podobně. Můžete vložit 2–5 fází.
Sekce: Psaní názvů a textů
Tato sekce definuje dva typy pravidel:
Psaní názvů: zaměřuje na názvy, slogany a krátká textová pravidla.
Psaní textů: zaměřuje na delší textová pravidla, kde je možné opět vkládat různá formátování textu a více detailněji tak popsat daná pravidla.
Visualbook
visualbook
VISUALBOOK
VisualBook
Visual Book
Sekce: Audio
Sekce audio vám umožňuje sdílet zvukové stopy, kterými můžete definovat různá pravidla. Například můžete definovat výslovnost názvu vaší značky nebo produktu. Dále můžete sekci Audio využít pro definování audio brandingu.
Znělka pro animaci loga
Volitelný popisek
Znělka podcastu
Znělka YouTube reklamy
Sekce: Video
Sekce video umožňuje velmi variabilně vkládat vlastní videa nebo videa z YouTube. Můžete nastavit několik možností zobrazení, autoplay nebo popisky pod jednotlivá videa.
Jak nastavit vlastní styl Visualbooku
Představení admin panelu Visualbooku
Jak vytvořit stránku Loga
Sekce: Video (multifunkční)
Tato sekce je vhodná například pro video návody, ke kterým potřebujete přidat soubory ke stažení, odkazy na další informace nebo rozbalovací obsah s dalšími pravidly nebo specifikacemi.
Odkaz na video
Další libovolné tlačítko
Rozbalovací obsah
Zobrazit
V tomto rozbalovacím obsahu můžete sepsat další pravidla ve vašem brand manuálu. Množství informací a rozbalovacích obsahů je jen na vás.
Další rozbalovací obsah
Zobrazit
V tomto rozbalovacím obsahu můžete sepsat další pravidla ve vašem brand manuálu. Množství informací a rozbalovacích obsahů je jen na vás.
Sekce: Graf
Pomocí grafu vizuálně definujete charakter značky nebo kupříkladu styl psaní textů. Můžete definovat jednu vlastnost, nebo libovolně rozsáhlou skupinu vlastností. Užitečný je tento graf kupříkladu pro definici Tone of Voice a dalších.
Přítelský
Autoritativní
Seriózní
Hravý
Elitní
Masový
Konvenční
Rebelský
Sekce: Tabulka
Tabulka je jednoduchá sekce zobrazující obyčejnou tabulku. V současné chvíli tato sekce neumí žádné pokročilejší funkce. V případě zájmu budeme tuto sekci vylepšovat.
| Sloupec A | Sloupec B | Sloupec C |
|---|---|---|
| Položka tabulky. | Položka tabulky. | Položka tabulky. |
| Položka tabulky. | Položka tabulky. | Položka tabulky. |
Sekce: Soubory ke stažení
Sekce soubory ke stažení nabízí přehledné zobrazení dat ke stažení. Umožňuje shlukovat do skupin určité typy souborů ke stažení. U každého souboru se automaticky generuje jeho název a velikost.
Sekce: Google Drive
Sekce Google Drive umožňuje jednoduché zobrazení souborů z vaší google složky ve Visualbooku. Můžete si zvolit zobrazení obrázkových náhledů nebo seznam souborů pod sebou.
Sekce: Karty s odkazy
Tato sekce efektivně propojuje stránky vašeho manuálu a navádí uživatele na další relevantní obsah. Můžete tvořit skupiny karet, které odkazují na vybrané stránky vašeho manuálu, nebo přidávat karty s externími odkazy. Každá karta zobrazuje relevantní ikony své karty – poznáte tak velmi jednoduše, zda-li se jedná o rozcestník, zaheslovanou stránku nebo externí odkaz.
Sekce: Rozbalovací obsah (akordeon)
Pomocí této sekce tvoříte různá FAQ a další textové návody či specifikace. Můžete pod rozbalovací obsah přidávat i tlačítka ke stažení souborů a také cover obrázek nad rozbalovacím obsahem.
Rozbalovací obsah
Zobrazit
V tomto rozbalovacím obsahu můžete sepsat další pravidla ve vašem brand manuálu. Množství informací a rozbalovacích obsahů je jen na vás.
Další rozbalovací obsah
Zobrazit
V tomto rozbalovacím obsahu můžete sepsat další pravidla ve vašem brand manuálu. Množství informací a rozbalovacích obsahů je jen na vás.
A další
Zobrazit
V tomto rozbalovacím obsahu můžete sepsat další pravidla ve vašem brand manuálu. Množství informací a rozbalovacích obsahů je jen na vás.
Sekce: Archetyp
Sekce archetyp je primárně sestavena pro představení archetypu značky.
Pečovatel
Pečovatel vyzařuje laskavost, spolehlivost a empatii. Značky s tímto archetypem pomáhají, chrání a vytvářejí bezpečné prostředí pro zákazníky. Vynikají přátelskou komunikací, kvalitními službami a produkty, které usnadňují život. Ideální je pro oblasti zdravotnictví, vzdělávání a péče o rodinu, kde důvěra a podpora hrají klíčovou roli.
| Klíčová touha | Popis tohoto atributu. |
| Cíl | Popis tohoto atributu. |
| Strategie | Popis tohoto atributu. |
| Dar | Popis tohoto atributu. |
Sekce: HTML kód
Tato sekce je vhodná pro tvorbu e-mail podpisů.
HTML
Zobrazit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Signature Template</title>
</head>
<body>
<div style="padding: 32px 0px; text-align: left;">
<!-- Logo placed above the signature -->
<div style="margin-bottom: 16px;">
<img src="https://visualbook.pro/kirby-data/your-logo.png" alt="Company Logo" style="width: 120px; height: auto;">
</div>
<div>
<span style="font-family: sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; color: #000000;">
Full Name
</span>
</div>
<div>
<div style="margin-top: 4px; margin-bottom: 4px; font-family: sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; color: #8d8d8d;">
Job Title
</div>
</div>
<div>
<a href="mailto:email@example.com" style="font-family: sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; text-decoration: underline; color: #8d8d8d;">
email@example.com
</a>
</div>
<div>
<a href="tel:+123456789" style="font-family: sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; text-decoration: underline; color: #8d8d8d;">
+123 456 789
</a>
</div>
<div>
<span style="font-family: sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; color: #8d8d8d;">
Telegram:
</span>
<a href="https://t.me/username" style="font-family: sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; text-decoration: underline; color: #8d8d8d;">
@username
</a>
</div>
<div style="margin-top: 16px; font-family: sans-serif; font-weight: 700; font-size: 11px; line-height: 14px; color: #000000;">
COMPANY NAME
</div>
<div style="font-family: sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; color: #8d8d8d !important;">
<a href="https://t.me/company" style="text-decoration: underline; color: #8d8d8d;">Telegram</a> ·
<a href="https://x.com/company" style="text-decoration: underline; color: #8d8d8d;">X</a> ·
<a href="https://www.linkedin.com/company/company/" style="text-decoration: underline; color: #8d8d8d;">LinkedIn</a>
</div>
</div>
</body>
</html>