Coachflow.pl

Motyw

Email Builder - Tworzenie szablonów ​

GHL Email Builder to drag & drop tool do tworzenia responsive, professional email templates bez kodowania. Ten tutorial shows wszystkie features + best practices.

Interfejs Email Builder ​

Accessing Builder ​

Method 1 - From Templates:

Marketing → Email → Templates → Create New

Method 2 - From Campaign:

Marketing → Campaigns → Create Campaign → Design Email

Method 3 - From Workflows:

Automation → Workflows → Add Action → Send Email → Create New

Layout Buildera ​

Left Sidebar - Elements:

  • Text blocks
  • Images
  • Buttons
  • Dividers
  • Social media icons
  • Video embeds
  • Spacers
  • Custom HTML

Center Canvas:

  • Preview Twojego emaila
  • Drag & drop area
  • Real-time editing

Right Sidebar - Settings:

  • Element properties
  • Styling options
  • Mobile responsive settings

Top Bar:

  • Save/Save As
  • Preview (Desktop/Mobile/Tablet)
  • Test Send
  • Back/Exit

Creating Email od zera ​

Step 1: Choose Starting Point ​

Blank Template:

  • Zaczynasz z pustym canvas
  • Full control, więcej pracy
  • Best jeśli masz jasną vision

Pre-Built Template:

  • GHL offers library gotowych templates
  • Kategorie: Newsletter, Promocja, Event, Announcement, etc.
  • Customize colors/text/images
  • Szybszy start

Recommendation: Pre-built template dla beginners, blank dla advanced users.

Step 2: Structure (Rows & Columns) ​

Adding Row:

  1. Click "+" button na canvas
  2. Wybierz column layout:
    • 1 column (full width)
    • 2 columns (50-50)
    • 3 columns (33-33-33)
    • 2

columns (66-33 lub 33-66)

  • 4 columns (25 each)

Tip: Start z strukturą EERST:

Header Row (Logo + Menu)
↓
Hero Image/Banner Row
↓
Content Row (1-2 columns)
↓
CTA Button Row
↓
Footer Row (Social + Unsubscribe)

Step 3: Adding Elements ​

Text Block:

Drag "Text" element → Drop do wybrane column.

Double-click to edit:

  • Headline (zwykle H1-H3 tags)
  • Paragraph text
  • Formatting: Bold, Italic, Underline
  • Lists (bullet, numbered)
  • Links
  • Font rodzina, rozmiar, kolor

Przyklad:

Headline: "Ekskluzywna Oferta Tylko Dla Ciebie!"
Body: "Przez następne 48 godzin otrzymasz 30% rabatu..."

Image:

Drag "Image" → Drop.

Options:

  • Upload from computer
  • Select from Media Library
  • URL zewnętrznego image

Best Practices:

  • Max width: 600px (standard email width)
  • Format: JPG (photos), PNG (logos/graphics with transparency)
  • Optimize size (<200KB per image dla fast loading)
  • Alt text (accessibility + gdy images blocked)

Button (CTA - Call To Action):

Drag "Button" → Drop.

Customize:

  • Text (np. "KUP TERAZ", "POBIERZ PDF", "UMÓW CALL")
  • Link URL
  • Background color
  • Text color
  • Border radius (rounded corners)
  • Padding (size button)
  • Alignment

CTA Best Practices:

  • Single, clear action per email
  • Contrastujący kolor (red/orange/green stand out)
  • actionable text ("Get Started" > "Click Here")
  • 44x44px minimum (mobile tap friendly)

Social Icons:

Drag "Social" block.

Add links do:

  • Facebook
  • Instagram
  • LinkedIn
  • Twitter / X
  • YouTube
  • TikTok

Icons automatically styled w brand colors.

Video:

GHL nie embeds actual video (email clients block), ALE:

  • Upload thumbnail image
  • Link to video على YouTube/Vimeo
  • Creates "play button" overlay קน링ำkธclick → video page

Divider:

Visual separator between sections.

  • Solid line, dashed, dotted
  • Color + thickness
  • Add spacing around

Spacer:

Invisible element for vertical spacing.

  • Dodaj 20px, 40px... between elements
  • Kontrola white space (ważne dla readability)

Step 4: Styling & Branding ​

Global Styles (Template Level):

Settings → Email Settings:

Background Color:

  • Body background (usually white or light gray)
  • Container background

Fonts:

  • Headline font (Google Fonts available!)
  • Body font
  • Default sizes

Recommended:

Headlines: Montserrat, Poppins, Raleway (bold, modern)
Body: Open Sans, Lato, Roboto (readable, clean)

Brand Colors:

Define primary & secondary:

Primary: #FF6B35 (CTA buttons, headlines)
Secondary: #004E89 (links, accents)
Background: #F7F7F7
Text: #333333

GHL allows saving brand kit → reuse w przyszłych emailach.

Element-Level Styling:

Click any element → Right sidebar shows options:

  • Font size, weight, color
  • Background color
  • Padding (internal spacing)
  • Margin (external spacing)
  • Border (width, color, style)
  • Alignment (left, center, right)

Step 5: Mobile Responsive ​

Why Critical:

  • 85%+ emails opened na mobile devices
  • Nie-responsive emails = instant delete

GHL's Responsive Features:

Auto-responsive: Builder automatically adjusts dla mobile (columns stack vertically).

Manual control:

Click "Mobile View" icon (top bar).

Adjust mobile-specific:

  • Font sizes (zwykle 10-20% larger dla readability)
  • Image sizes (mogu wymagać resize)
  • Button sizes (bigger dla thumbs)
  • Padding (more white space)
  • Hide elements (Desktop-only content)

Test across devices:

Preview → Desktop / Tablet / Mobile przed final save.

Best Practices:

  • Single column layout simplest dla mobile
  • 14px minimum font size na mobile
  • CTA buttons full-width lub centered
  • Short subjects (50 chars max - mobile truncates)

Advanced Features ​

Personalization Tags ​

Insert dynamic content based on contact data:

Available tags:

{{contact.first_name}}
{{contact.last_name}}
{{contact.email}}
{{contact.phone}}
{{contact.company}}
{{custom_fields.any_custom_field}}

Usage Example:

Subject: "{{contact.first_name}}, specjalna oferta dla Ciebie!"
Body: "Cześć {{contact.first_name}}, Twoja firma {{contact.company}}..."

Conditional Content:

Show/hide sections based NA criteria:

{% if contact.tags contains "vip-customer" %}
  Twój VIP discount code: EXCLUSIVE50
{% else %}
  Użyj kodu WELCOME10
{% endif %}

Advanced users can create highly personalized templates.

Custom HTML Blocks ​

Dla developers: Drag "Custom HTML" element.

Paste raw HTML/CSS για advanced:

  • Animations (CSS) -特别 layouts
  • Embedded forms
  • Countdown timers (third-party tool)

⚠ Warning: Test thoroughly! Email clients have LIMITED HTML/CSS support (no JavaScript, restricted CSS).

Safe HTML:

  • tables dla layout (archaic ale works)
  • Inline CSS (NOT <style> tags w head)
  • Gmail/Outlook-friendly code

Automatic: GHL auto-appends tracking parameters do ALL links:

  • Click tracking
  • attribution w reports

Manual UTM tags:

Add для Google Analytics:

https://twoja-firma.pl/oferta?utm_source=ghl&utm_medium=email&utm_campaign=spring-sale

Track campaign performance w GA.

A/B Testing Elements ​

Nie built directly INTO builder, але:

CREATE two versions of template:

  • Version A: Green CTA button
  • Version B: Red CTA button

Campaign level: GHL allows A/B testing sending different templates → see който performs better.

Template Management ​

Saving Templates ​

Save: Overwrites current template (use when editing existing).

Save As: Creates NEW template (use when creating variant).

Naming Convention:

Good:

Newsletter-MonthlyUpdate-v1
Promo-SpringSale-2026
Webinar-Invite-ProductLaunch

Bad:

Template1
Test
asdf

Be descriptive – ви'll have dozens templates.

Organizing Templates ​

Folders:

GHL lets create folders:

📁 Newsletters
📁 Promotions
📁 Transaktional (receipts, confirmations)
📁 Workflows
📁 Events

Keeps library organized as scales.

Duplicating Templates ​

Quick way create variations:

  1. Find template
  2. Click "..." menu
  3. "Duplicate"
  4. Edit copy

Template Snippets (Re-usable Blocks) ​

Create common sections once, reuse everywhere:

Footer Snippet:

[Social Icons]
[Unsubscribe Link]
[Company Address]
[Email footer text/legal]

Save as snippet → drag w ANY future email - instant branded footer.

Best Practices Round-up ​

Design ​

✅ Keep It Simple:

  • Clean, minimalistic > busy, cluttered
  • Max 2-3 colors
  • Plenty white space

✅ Visual Hierarchy:

  • Largest/boldest = most important (headline, CTA)
  • Guide eye naturally top → bottom

✅ Brand Consistency:

  • Logo always w header
  • Consistent colors, fonts across kampanii

✅ Scannable Content:

  • Short paragraphs (2-3 lines max)
  • Bullet points
  • Subheadings
  • Bold key phrases

❌ Avoid:

  • ALL CAPS (looks spammy)
  • Too many fonts (max 2-3)
  • Giant walls של text
  • overused exclamation marks!!!!!!

Technical ​

✅ Optimize Images:

  • Compress before uploading
  • Use web-safe formats (JPG, PNG, GIF)
  • Alt text always

✅ Test Send: Before campaign, send test do:

  • Yourself
  • Gmail account
  • Outlook account
  • Mobile device

Check rendering across clients.

✅ Include Plain Text Version:

GHL auto-generates, але review it!

Some email clients show plaintext (rare today, але accessibility matters).

✅ Unsubscribe Link:

Required bylaw + deliverability.

GHL auto-adds footer unsubscribe - KEEP IT VISIBLE.

Content ​

✅ Compelling Subject:

  • 40-50 characters
  • Personalized ()
  • Creates curiosity/urgency
  • Avoid spam words ("FREE!!!", "ACT NOW!!!")

✅ Preheader Text:

First line preview w inbox (after subject). Use strategically:

Subject: "Nowa oferta dla Ciebie"
Preheader: "30% rabat tylko przez 48h - sprawdź!"

✅ Clear CTA:

  • ONE primary action/email
  • Button prominently placed (above fold ideally, again at bottom)

✅ Value First:

  • Recipient thinking "What's in it for me?"
  • Provide value BEFORE asking (free tip, resource, insight → THEN pitch)

Troubleshooting ​

Problem: Email looks broken w Outlook

Outlook (especially older versions) notorious dla rendering issues.

Fix:

  • Use table-based layouts (not DIV/flexbox)
  • Inline CSS all styles
  • Test explicitly w Outlook using Litmus/Email on Acid

Problem: Images nie showing

Many email clients BLOCK images bydefault.

Ensure:

  • Alt text descriptive (recipient sees text even without image)
  • Email makes sense even WITHOUT images loading
  • "Display images" link w preheader

Problem: Mobile version breaks

Check:

  • Max-width set ON images (wont overflow)
  • Font sizes না too small
  • Buttons BIGG enough (~44px height)

Test REAL mobile device, nie just preview.

Problem: High spam score

mail-tester.com score email.

Common issues:

  • Too many images vs text (keep 60% text, 40% images ratio)
  • Spammy words (FREE, winner, click HERE)
  • Missing unsubscribe
  • No plain-text version
  • Linked domains blacklisted

Checklist ​

  • [ ] Structure defined (header, content, CTA, footer)
  • [ ] Brand colors + fonts applied
  • [ ] Personalization tags included
  • [ ] CTA clear + prominent
  • [ ] Images optimized + alt text
  • [ ] Mobile responsive checked
  • [ ] Test send to multiple clients
  • [ ] Links working correctly
  • [ ] Subject line + preheader written
  • [ ] Template saved w descriptive name
  • [ ] Unsubscribe link present

Podsumowanie ​

Email Builder empowers you create professional, branded, responsive emails without coding. Master drag & drop + personalization + mobile optimization = higher engagement + conversion.

Key points:

  • Start με template או blank based ఆన comfort
  • Mobile responsive NON-negotiable
  • Personalization boosts opens/clicks
  • Test across email clients BEFORE campaign
  • Keep design simple, content valuable, CTA clear

Next tutorial (#34): Email Campaigns - setting-up + sending masowych wiadomości.