HTML code – Visualbook Demo

HTML code

On this page

HTML code – What This Section Does

The HTML code section combines custom markup, a live preview, and raw source ready to copy – ideal for e‑mail signatures, lightweight widgets, and snippets you cannot build with standard modules.

Display variants

  • Email signature (vertical layout) – logo, contacts, and links stacked vertically; the framed preview mirrors typical mail clients
  • E‑mail signature – horizontal layout – compact horizontal block with the logo on the left and a divider next to the details

When to use it

  • Team-wide signatures with a controlled template and clear placeholders
  • Snippets for partners or internal tools where you need precise control of the exported HTML
  • Simple CTAs or legal footers in the message footer without a graphic editor inside the manual
  • Everyday paragraphs without custom markup are faster in the Text section

Email signature (vertical layout)

The HTML code section is for building an e‑mail signature. The pane at the top shows a preview of the final e‑mail—how the signature should look once inserted. Below, after expanding the HTML block, you’ll find the raw source; copy it and paste it into the signature settings of your e‑mail client (e.g. Outlook, Gmail, or Apple Mail). Steps differ by app—look for items named “Signature”, “E‑mail signature”, or similar. A single content page can stack several HTML code sections—for different teams, languages, formal vs. short signatures, or different layout structures (see the next section below). Each section has its own preview and its own code to copy.

Note

After you paste it into your client, double-check the result in a sent message: some apps tweak spacing or font size compared to the preview shown here.

HTML

<!DOCTYPE html>
<html lang="cs" style="margin:0;padding:0;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ukázkový e-mail podpis</title>
</head>
<body style="margin:0;padding:0;">
    <div style="text-align: left;">
        <div style="margin-bottom: 12px;">
            <img src="https://visualbook.pro/kirby-data/your-logo.png" alt="Logo" style="width: 112px; height: auto;">
        </div>
        <div>
            <span style="font-family: sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; color: #111;">
                Jméno Příjmení
            </span>
        </div>
        <div style="margin-top: 4px; font-family: sans-serif; font-size: 12px; line-height: 16px; color: #666;">
            Pozice / role
        </div>
        <div style="margin-top: 8px;">
            <a href="mailto:email@example.com" style="font-family: sans-serif; font-size: 12px; color: #666; text-decoration: underline;">
                email@example.com
            </a>
        </div>
        <div style="margin-top: 16px; font-family: sans-serif; font-size: 11px; font-weight: 700; color: #111;">
            NÁZEV SPOLEČNOSTI
        </div>
        <div style="font-family: sans-serif; font-size: 12px; line-height: 16px; color: #666;">
            <a href="https://www.example.com" style="color: #666;">Web</a>
            ·
            <a href="https://www.linkedin.com/" style="color: #666;">LinkedIn</a>
        </div>
    </div>
</body>
</html>

Test Content

E-mail signature – horizontal layout

You can place any number of these sections one under another on this page—each signature is its own HTML code block with its own source.

HTML

<!DOCTYPE html>
<html lang="cs" style="margin:0;padding:0;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Podpis – vodorovné rozložení</title>
</head>
<body style="margin:0;padding:0;">
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;font-family:sans-serif;">
        <tr>
            <td style="vertical-align:middle;padding:0 20px 0 0;">
                <img src="https://visualbook.pro/kirby-data/your-logo.png" alt="Logo" width="96" style="display:block;width:96px;height:auto;">
            </td>
            <td style="vertical-align:middle;border-left:2px solid #111111;padding:0 0 0 20px;">
                <div style="font-size:15px;font-weight:700;color:#111111;line-height:20px;">Jméno Příjmení</div>
                <div style="font-size:12px;color:#666666;line-height:17px;margin-top:2px;">Pozice / role</div>
                <div style="font-size:12px;line-height:17px;margin-top:6px;">
                    <a href="mailto:email@example.com" style="color:#666666;text-decoration:underline;">email@example.com</a>
                    <span style="color:#cccccc;"> &nbsp;|&nbsp; </span>
                    <a href="tel:+420123456789" style="color:#666666;text-decoration:none;">+420 123 456 789</a>
                </div>
                <div style="font-size:11px;font-weight:700;color:#111111;margin-top:10px;letter-spacing:0.02em;">NÁZEV SPOLEČNOSTI</div>
                <div style="font-size:12px;color:#666666;margin-top:4px;">
                    <a href="https://www.example.com" style="color:#666666;text-decoration:underline;">Web</a>
                    ·
                    <a href="https://www.linkedin.com/" style="color:#666666;text-decoration:underline;">LinkedIn</a>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>