Ukázková obsahová stránka s přehledem sekcí – Visualbook

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

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

Tip

Sekce můžete libovolně vkládat do libovolné stránky s obsahem nebo 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ý nápis
  • 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

Zde máte možnost přidat k audio nahrávce i delší popisek, ve kterém můžete stručně popsat účel tohoto zvuku, kontext použití nebo další důležité informace pro uživatele. Podrobný popisek pomůže lépe pochopit, jak lze tuto znělku využít ve vašich projektech.

0:00 / 0:00
Znělka podcastu

V admin panelu můžete nastavit, zda-li může návštěvník audio stáhnout.

0:00 / 0:00
YouTube znělka
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 (vizuální osa)

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

inter-regular.ttf | 302,57 KB

Stáhnout
Medium

lexend-medium.ttf | 76,85 KB

Stáhnout
Bold

lexend-bold.ttf | 76,79 KB

Stáhnout

Sekce: Tabulka

Tabulka je jednoduchý oddíl zobrazující běžnou tabulku. V současné době nemá tato sekce žádné pokročilé funkce. V případě potřeby 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: 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.

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.

Tlačítko
Otevřít

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.
stationery_mockup_2.jpg
stationery_mockup_3.jpg
stationery_mockup_4.jpg

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>