Edytor Struktury HTML

Zarządzaj szablonami podpisów email. Twórz, edytuj i zapisuj własne szablony. Użyj zmiennych do personalizacji. Zarządzaj zmiennymi
Zarządzanie Szablonami
Edytor Kodu
Niezapisany
Dostępne Zmienne
Zmienna Przykład
Instrukcje i Dobre Praktyki
Jak używać:
  1. Edytuj kod HTML w edytorze powyżej
  2. Użyj zmiennych w miejscach, gdzie chcesz dynamiczne dane
  3. Kliknij "Podgląd" aby zobaczyć jak wygląda
  4. Gdy jesteś zadowolony, kliknij "Zapisz Zmiany"
  5. Wróć do generatora i wygeneruj podpis z nowym szablonem
Dobre praktyki HTML w email:
  • Używaj <table> zamiast <div>
  • Wszystkie style inline (nie zewnętrzne CSS)
  • Unikaj JavaScript
  • Obrazki muszą być na serwerze (URL bezwzględne)
  • Testuj w różnych klientach email
Wskazówka: Szablony są zapisywane w pliku JSON na serwerze. Możesz w każdej chwili przywrócić oryginalny szablon klikając "Przywróć z stopka.html".

Przykłady i Wskazówki

Instrukcja dla edycji szablonu stopka.html
Poniżej znajdziesz szczegółowy opis struktury domyślnego szablonu z komentarzami.
1. Główna tabela (kontener podpisu)
<!-- Główna tabela - 500px szerokości -->
<table width="500" style="margin: 0; padding-top: 30px; width: 500px; max-width: 500px;">
  <tbody style="width: 100%;">

Ta tabela jest głównym kontenerem. Szerokość 500px jest standardem dla podpisów email.

2. Sekcja imienia i nazwiska
    <tr style="width: 100%;">
      <td colspan="5" style="width: 100%; display: block;">
        <!-- Tutaj możesz zmienić styl tekstu (kolor, rozmiar, czcionkę) -->
        <p style="line-height: 20px; padding: 0; margin:0; font-family: Arial, Helvetica, sans-serif; font-size:14px; color:#000;">
          {FULLNAME}  <!-- Zmienna - zostanie zastąpiona imieniem -->
        </p>
      </td>
    </tr>

Możesz dodać tutaj stanowisko, tytuł lub inne informacje. Użyj zmiennych jak {FULLNAME}.

3. Logo firmy
    <tr>
      <td colspan="5" style="padding: 18px 0;">
        <!-- Zmień src na URL do swojego logo -->
        <img width="500" style="width: 500px" 
             src="https://szajewski.com/images/logo_signatures.png" 
             alt="Logotyp Szajewski.com">
      </td>
    </tr>

Zmień src na ścieżkę do Twojego logo. Logo musi być hostowane online (URL bezwzględny).

4. Dane kontaktowe (linki)
    <tr style="display:block; line-height: 11px; padding: 0; margin:0; font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#000;">
      <!-- Telefon -->
      <td>
        <a style="color: black; text-decoration: none; padding-right: 10px;" 
           href="tel:{PHONE_LINK}">tel: {PHONE}</a>
      </td>
      
      <!-- Email -->
      <td>
        <a style="color: black; padding-right: 10px;" 
           href="mailto:{EMAIL}">{EMAIL}</a>
      </td>
      
      <!-- Strona WWW -->
      <td>
        <a style="color: black; padding-right: 10px;" 
           href="https://szajewski.com">szajewski.com</a>
      </td>
      
      <!-- Social media -->
      <td>
        <a style="color: black; padding-right: 10px;" 
           href="https://szajewski.com">facebook</a>
      </td>
      <td>
        <a style="color: black; padding-right: 10px;" 
           href="https://szajewski.com">instagram</a>
      </td>
    </tr>

Możesz dodać lub usunąć kolumny <td>. Zmień linki na swoje profile social media.

5. Dodatkowe informacje (adres firmy)
  </tbody>
  
  <tfoot>
    <tr>
      <td colspan="5">
        <!-- Adres firmy lub dodatkowe informacje -->
        <p style="line-height: 20px; padding: 0; margin:0; font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#000;">
          MSZ Maciej Szajewski, ul. Ląkowa 35/38, 80-768 Gdańsk, Poland
        </p>
      </td>
    </tr>
  </tfoot>
</table>

Sekcja <tfoot> pojawia się na dole podpisu. Możesz dodać tutaj adres, NIP, REGON, etc.

Ważne wskazówki:
  • Wszystkie style muszą być inline (w atrybucie style="")
  • Używaj tabel <table> zamiast <div> dla lepszej kompatybilności
  • Obrazki muszą mieć pełny URL (np. https://domena.pl/logo.png)
  • Testuj podpis w różnych klientach email (Gmail, Outlook, Apple Mail)
  • Szerokość 500-600px jest optymalna dla większości klientów email

Nowa funkcja! Możesz ukrywać fragmenty podpisu, jeśli zmienna jest pusta.

Użyj składni {IF:NAZWA_ZMIENNEJ}...{/IF} aby pokazać blok tylko gdy zmienna ma wartość:

<!-- Pokaż telefon tylko jeśli wypełniony -->
{IF:PHONE}
<p>Tel: {PHONE}</p>
{/IF}

<!-- Pokaż link do strony tylko jeśli podany -->
{IF:WEBSITE}
<a href="{WEBSITE}">Odwiedź naszą stronę</a>
{/IF}

<!-- Pokaż dział jeśli istnieje -->
{IF:DEPARTMENT}
<p style="color: #666;">Dział: {DEPARTMENT}</p>
{/IF}

Jak to działa? Jeśli zmienna jest pusta lub nie wypełniona, cały blok między {IF:...} a {/IF} zostanie usunięty z podpisu.

Przykłady modyfikacji stylów inline:

/* Zmiana koloru */
<p style="color:#ff0000;">Czerwony tekst</p>

/* Zmiana rozmiaru */
<p style="font-size:16px;">Większy tekst</p>

/* Pogrubienie */
<p style="font-weight:bold;">Pogrubiony</p>

Przykład dodania stanowiska:

<p style="margin:0; font-size:14px;">{FULLNAME}</p>
<p style="margin:0; font-size:12px; color:#666;">Specjalista IT</p>

Jak zmienić logo lub dodać nowe linki:

/* Zmiana logo */
<img src="https://twoja-domena.pl/logo.png" width="500">

/* Dodanie LinkedIn */
<td><a href="https://linkedin.com/in/profil">LinkedIn</a></td>