Ukázková obsahová stránka se všemi sekcemi – Visualbook

Ukázková obsahová stránka se všemi sekcemi

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škrtnout tlačítko „Generovat obsah stránky“ a vloží se automaticky.

Získat mockup

Otevřít

Stáhnout náhled

Stáhnout

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.

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.

Poznámka

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“).

Každou fotografii můžete okomentovat pomocí tohoto popisku

Každou fotografii můžete okomentovat pomocí tohoto popisku

Každou fotografii můžete okomentovat pomocí tohoto popisku

Stáhnout media kit

mediakit.zip | 83,83 KB

Stáhnout

Odkaz na externí uložiště

drive.google.com

Otevřít

Odkaz na interní stránku

Logo

Otevřít

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: Ikony

Kliknutím na ikonu zobrazíte náhled a možnosti stažení v různých formátech a velikostech.

Tip

Klikněte na ikonu pro více možností nastavení.

Sekce: Karusel (slideshow)

Karusel je sekce, která postupně zobrazuje obrázky v podobě automatické slideshow. To znamená, že návštěvník po načtení stránky vidí první obrázek, po chvíli se mu vymění za druhý, pak za další atd.

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.

Poté
Před
Před
Poté

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.

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í.

Koncept a výzkum
Návrh a skici
Barevné varianty
Digitalizace
Finalizace a dodání

Koncept a výzkum

V první fázi provádíme důkladný výzkum vašeho odvětví, konkurence a cílové skupiny. Definujeme klíčové hodnoty a osobnost značky, které logo musí vyjadřovat.

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

0:00 / 0:00

Znělka podcastu

0:00 / 0:00

Znělka YouTube reklamy

0:00 / 0:00

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.

Práce se soubory ve Visualbooku

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

Otevřít

Další libovolné tlačítko

Stáhnout

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.

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.

Regular

lexend-regular.ttf | 76,52 KB

Stáhnout

Medium

lexend-medium.ttf | 76,85 KB

Stáhnout

Bold

lexend-bold.ttf | 76,79 KB

Stáhnout

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.

Loga

Stáhněte si vhodnou verzi loga s ohledem na plánované použití.

Písma

Nainstalujte písma, která vytvářejí vizuální charakter značky.

Externí odkaz

Externí odkaz osbahuji ikonku znázorňující, že po kliknutí uživatel opustí Visualbook.

Konkrétní logo

Popisek.

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

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

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ší

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

<!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>

Skupina karet s náhledovými obrázky

Skupina karet s textovými popisky

Loga

Stáhněte si vhodnou verzi loga s ohledem na plánované použití.

Písma

Nainstalujte písma, která vytvářejí vizuální charakter značky.

Externí odkaz

Tato karta směřuje na vámi definovaný externí odkaz