Working with files in Visualbook
Sample content page with overview of sections
On this page
Section: Image (multifunctional)
Unlike the Image (simple) section, this section integrates buttons or dropdown boxes to the image to define different rules. This is clearly the most used section when creating visual rules. It offers options to define graphics along with buttons to download source files or detailed tutorials with cover image.
HINT: Did you know that the content above is automatically generated? Just check the "Generate page content" button in the Content Page settings and it will be inserted automatically.
Získat mockup
Stáhnout náhled
Rozbalovací obsah
Show
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
Show
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.
Section: Picture (simple)
A picture (simple) is a section with a picture and possibly optional text below it. It allows you to insert an image or photo anywhere in the content page and define its usage rules.
HINT: You can also view the simple image in a lightbox at a higher resolution once you click on it.
You can insert a text box below the image to describe any rules shown in the image. Of course, external links or text highlighting are possible. You can also insert numbered or unnumbered lists:
- Item 1
- Item 2
- Item 3
- Item 4
Section: Gallery of images
The Gallery section is one of the most useful sections for graphic manuals and brand books. You can use these sections not only to create image galleries in different groups, but also to add Allowed or Disallowed rules to visually define how you work with, for example, photos or other visual content.
Each section can have the following individual image aspect ratios set:
Original
16:9
4:3
1:1
You can comment each photo with this caption
You can comment each photo with this caption
The photo can also be without rules (strikethrough or with a "check" icon).
You can insert a text box below the gallery where you can describe any rules displayed in the gallery. Of course, external links or text highlighting are possible. You can also insert numbered or unnumbered lists:
- Item 1
- Item 2
- Item 3
- Item 4
Section: Text
The text section allows you to convey information and rules through text in the form of paragraphs with several formatting options. You can add external links, highlights and other options to the text, which are listed below.
TIP: You can insert sections freely into any content page or into default pages such as Logos, Fonts, and Colors.
Big headline
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.
Small inscription
- Slot number 1
- Slot number 2
- Slot number 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.
Section: Writing names and texts
This section defines two types of rules:
Naming: focuses on names, slogans and short text rules.
Text Rules: focuses on longer text rules, where you can again insert different text formatting to describe the rules in more detail.
Visualbook
visualbook
VISUALBOOK
VisualBook
Visual Book
Section: Audio
The audio section allows you to share audio tracks that you can define different rules for. For example, you can define the pronunciation of your brand or product name. You can also use the Audio section to define audio branding.
Jingle for logo animation
Optional label
Podcast theme song
YouTube ad jingle
Section: Video
The video section allows you to add your own videos or YouTube videos in a very variable way. You can set several display options, autoplay or captions under each video.
How to set a custom Visualbook style
Introducing the Visualbook admin panel
How to create a Logos page
Section: Video (multifunction)
This section is useful, for example, for video tutorials to which you need to add downloads, links to further information or drop-down content with additional rules or specifications.
Link to the video
Another arbitrary button
Expandable content
Show
In this drop-down content, you can write additional rules in your brand manual. The amount of information and expandable content is up to you.
More drop-down content
Show
In this drop-down content, you can write additional rules in your brand manual. The amount of information and expandable content is up to you.
Section: Chart
Use the chart to visually define the character of the brand or, for example, the style of writing texts. You can define a single property or any large group of properties. This chart is useful, for example, for defining Tone of Voice and others.
Friendly
Authoritative
Serious
Playful
Elite
Mass
Conventional
Rebel
Section: Table
A table is a simple section displaying an ordinary table. Currently this section does not have any advanced features. We will improve this section if needed.
| Sloupec A | Sloupec B | Sloupec C |
|---|---|---|
| Položka tabulky. | Položka tabulky. | Položka tabulky. |
| Položka tabulky. | Položka tabulky. | Položka tabulky. |
Section: Files for download
The downloads section offers a clear view of the downloadable data. It allows you to group certain types of downloads together. For each file, its name and size are automatically generated.
Section: Google Drive
The Google Drive section allows you to easily view files from your google folder in Visualbook. You can choose to display image thumbnails or a list of files below.
Section:Cards with links
This section effectively links the pages of your manual and directs users to other relevant content. You can create groups of tabs that link to selected pages in your manual, or add tabs with external links. Each tab displays the relevant icons of its tab - so you can easily tell if it is a signpost, a bookmarked page or an external link.
Section: Expandable content (accordion)
Use this section to create various FAQs and other text instructions or specifications. You can also add download buttons below the dropdown content and also cover image above the dropdown content.
Expandable content
Show
In this drop-down content, you can write additional rules in your brand manual. The amount of information and expandable content is up to you.
More drop-down content
Show
In this drop-down content, you can write additional rules in your brand manual. The amount of information and expandable content is up to you.
And others
Show
In this drop-down content, you can write additional rules in your brand manual. The amount of information and expandable content is up to you.
Section: Archetype
The archetype section is primarily set up to introduce the brand archetype.
Caregiver
The caregiver exudes kindness, reliability and empathy. Brands with this archetype help, protect and create a safe environment for customers. They stand out with friendly communication, quality service and products that make life easier. They are ideal for the healthcare, education and family care sectors where trust and support play a key role.
| Key desire | Description of this attribute. |
| Target | Description of this attribute. |
| Strategie | Description of this attribute. |
| Dar | Description of this attribute. |
Section: HTML code
This section is useful for creating e-mail signatures.
HTML
Show
<!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>