HTML kód – Visualbook

HTML kód

Na této stránce

HTML kód – co tato sekce umí

Sekce HTML kód propojuje vlastní HTML, živý náhled a zdrojový kód ke zkopírování – vhodné pro e-mailové podpisy, jednoduché widgety i snippety, které standardní moduly nepostaví.

Varianty zobrazení

  • E-mailový podpis – vertikální rozložení s logem, kontakty a odkazy; náhled v rámečku odpovídá běžnému zobrazení v mailu
  • E-mailový podpis – alternativní rozložení – kompaktní vodorovný blok s logem vlevo a vizuálním oddělovačem vedle údajů

K čemu se hodí

  • Jednotné týmové podpisy s kontrolovanou šablonou a jasnými placeholdery
  • Snippety pro partnery nebo interní nástroje, kde potřebujete přesně řídit výstupní HTML
  • Propagace jednoduchých CTA nebo právních odkazů v patičce zprávy bez grafického editoru v manuálu
  • Čisté textové bloky bez vlastního HTML řešíte rychleji sekcí Text

Varianta: E-mailový podpis

Sekce HTML kód slouží k přípravě e-mailového podpisu. V rámečku vidíte náhled výsledného e-mailu – tak, jak má podpis po vložení vizuálně vypadat.

Poznámka

Rozbalte nabídku HTML a upravte své jméno, pracovní pozici, telefonní číslo a e-mailovou adresu. Změny uložte a kód se automaticky aktualizuje. Zvolte celý text e-mailového podpisu a zkopírujte jej do svého e-mailového klienta.

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>

Varianta: E-mailový podpis – alternativní rozložení

Na stránce můžete mít libovolný počet takových sekcí pod sebou – každý podpis je samostatná sekce HTML kód s vlastním kódem.

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>