Coachflow.pl

Motyw

33. Email templates i branding ​

Poziom trudności: Średni
Czas: 15 minut

Tworzenie szablonu email ​

Marketing → Email Templates → Create Template

Template Name: "Newsletter Standard"
Category: Newsletter
Description: Główny template dla miesięcznych newsletterów

Branding elements ​

1. Logo i kolory ​

css
/* Brand colors */
Primary: #3b82f6 (niebieski)
Secondary: #10b981 (zielony)
Text: #1f2937 (ciemny szary)
Background: #f9fafb (jasny szary)

2. Header template ​

html
<table width="100%" bgcolor="#3b82f6">
  <tr>
    <td align="center" style="padding: 20px;">
      <img src="{{company.logo}}" alt="Logo" height="40">
    </td>
  </tr>
</table>

3. Footer template ​

html
<table width="100%" bgcolor="#f9fafb">
  <tr>
    <td style="padding: 30px; text-align: center;">
      <p style="font-size: 12px; color: #6b7280;">
        {{company.name}}<br>
        {{company.address}}<br>
        NIP: {{company.vat}}
      </p>
      <p style="font-size: 11px;">
        <a href="{{unsubscribe_link}}">Wypisz się</a> | 
        <a href="{{preferences_link}}">Preferencje</a>
      </p>
    </td>
  </tr>
</table>

Content blocks library ​

Call-to-action button ​

html
<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#3b82f6" style="border-radius: 4px;">
      <a href="{{link}}" style="
        display: inline-block;
        padding: 12px 24px;
        color: #ffffff;
        text-decoration: none;
        font-weight: bold;
      ">
        {{button_text}}
      </a>
    </td>
  </tr>
</table>

Two-column layout ​

html
<table width="100%">
  <tr>
    <td width="48%" valign="top">
      <!-- Left column content -->
      <h3>Feature #1</h3>
      <p>Description...</p>
    </td>
    <td width="4%"></td>
    <td width="48%" valign="top">
      <!-- Right column content -->
      <h3>Feature #2</h3>
      <p>Description...</p>
    </td>
  </tr>
</table>

Template variables ​

{{contact.firstName}} - Imię
{{contact.lastName}} - Nazwisko
{{contact.email}} - Email
{{company.name}} - Nazwa firmy
{{company.logo}} - URL logo
{{custom.any_field}} - Custom field
{{unsubscribe_link}} - Link wypisania (REQUIRED!)
{{trackable_link.name}} - Tracked link

Responsive design ​

html
<style>
  @media only screen and (max-width: 600px) {
    .container {
      width: 100% !important;
    }
    .two-column {
      width: 100% !important;
      display: block !important;
    }
    .mobile-hide {
      display: none !important;
    }
  }
</style>

Testing templates ​

  1. Send test email → Multiple devices
  2. Email clients: Gmail, Outlook, Apple Mail
  3. Mobile: iOS Mail, Android Gmail
  4. Check: Images, buttons, links, unsubscribe

Template library ​

Gotowe kategorie:

  • Newsletter (weekly/monthly)
  • Promotional (sales, offers)
  • Transactional (receipts, confirmations)
  • Onboarding (welcome series)
  • Re-engagement (win-back)

Podsumowanie ​

✅ Branded email templates gotowe do użycia!

Następny krok: 34. Tworzenie template w Page Builder