Email Newsletter Template Builder

When to use this skill

• User asks to create a newsletter
• User needs email subject lines
• User wants email campaign templates
• User mentions email marketing copy
• User needs A/B testing variants

Workflow

• Identify email type and goal
• Generate subject line variants
• Create preheader text
• Build email structure
• Write content blocks
• Add CTAs and footer

Instructions

Step 1: Identify Email Type

Email Type	Goal	Structure
Newsletter	Engagement, value	Hero + 3-5 content blocks
Promotional	Sales, conversions	Hero + offer + CTA
Welcome	Onboarding	Personal intro + next steps
Announcement	Awareness	News + details + CTA
Re-engagement	Win-back	Hook + incentive + CTA
Transactional	Information	Order details + support

Step 2: Subject Line Generation

Subject line formulas:

Formula	Example
Number + Benefit	"5 ways to speed up your website today"
How to + Outcome	"How to double your open rates"
Question	"Is your portfolio costing you interviews?"
Curiosity gap	"The one thing top developers never skip"
Urgency	"Last chance: 40% off ends tonight"
Personal	"John, your weekly digest is ready"
FOMO	"Everyone's talking about this new feature"
Direct benefit	"Get 3 hours back every week"

Subject line best practices:

• 30-50 characters (mobile preview)
• Front-load key information
• Avoid spam triggers (FREE!!!, 💰💰💰)
• Test with/without emoji
• Match preheader text

A/B test variants:

## Subject Line Variants

**Version A (Benefit-focused):**
Subject: 5 tools that cut my development time in half
Preheader: Plus the one tool I stopped using

**Version B (Curiosity):**
Subject: I stopped using this popular tool
Preheader: And my productivity doubled

**Version C (Question):**
Subject: Are you still using [Tool]?
Preheader: There's a faster alternative

Step 3: Preheader Text

Preheader guidelines:

• 40-100 characters
• Complement (don't repeat) subject
• Add context or secondary hook
• Include CTA preview if relevant

Subject	Poor Preheader	Good Preheader
"5 ways to speed up your site"	"Read our latest blog post"	"Plus the #1 mistake slowing you down"
"Your order has shipped"	"Order confirmation"	"Arrives Thursday. Track it here →"

Step 4: Email Structure Templates

Newsletter template:

<!-- Preheader (hidden) -->
<span style="display:none;">[Preheader text here]</span>

<!-- Header -->
[Logo] [Navigation: Blog | Products | Contact]

<!-- Hero Section -->
[Featured image or heading] [Brief intro: 2-3 sentences] [Primary CTA button]

<!-- Content Block 1 -->
[H2: Section title] [Thumbnail image] [Summary: 2-3 sentences] [Read more link]

<!-- Content Block 2 -->
[H2: Section title] [Thumbnail image] [Summary: 2-3 sentences] [Read more link]

<!-- Content Block 3 -->
[H2: Section title] [Thumbnail image] [Summary: 2-3 sentences] [Read more link]

<!-- Secondary CTA -->
[H2: Call to action heading] [Brief value prop] [CTA button]

<!-- Footer -->
[Social icons] [Unsubscribe | Preferences | View in browser] [Company address]
[Copyright]

Promotional template:

<!-- Preheader -->
<span style="display:none;">[Urgency or key offer]</span>

<!-- Header -->
[Logo]

<!-- Hero -->
[Bold headline with offer] [Hero image of product/service] [Key benefit: 1
sentence] [Primary CTA: "Shop Now" / "Get Started"]

<!-- Social Proof -->
[Testimonial or rating] [Customer logo bar]

<!-- Benefits -->
[Benefit 1 with icon] [Benefit 2 with icon] [Benefit 3 with icon]

<!-- Urgency -->
[Countdown or deadline] [Secondary CTA]

<!-- Footer -->
[Unsubscribe | View in browser] [Address]

Welcome email template:

<!-- Preheader -->
<span style="display:none;">Here's what to do first...</span>

<!-- Header -->
[Logo]

<!-- Hero -->
[Personalized greeting: "Welcome, {first_name}!"] [What they signed up for /
what to expect] [Founder photo or brand image]

<!-- Quick Wins -->
[H2: Get started in 3 steps] [Step 1] [Icon + title + 1-sentence description]
[Step 2] [Icon + title + 1-sentence description] [Step 3] [Icon + title +
1-sentence description] [Primary CTA: "Complete your profile" / "Start
tutorial"]

<!-- Value Reminder -->
[H2: What you'll get] [Bullet list of benefits]

<!-- Personal Touch -->
[Sign-off from founder/team] [Photo + signature] [P.S. line with secondary offer
or tip]

<!-- Footer -->
[Support link] [Social icons] [Unsubscribe | Preferences]

Step 5: Content Block Writing

Block structure:

## [Compelling headline]

[1-2 sentences summarizing the value or key point]

[Optional: key stat or quote]

[CTA: "Read more →" or "Watch now →"]

Block examples:

## Why Your Images Are Slowing Down Your Site

Large, unoptimized images are the #1 cause of slow page loads.
Here's how to fix it in under 10 minutes.

→ Read the full guide

---

## New Feature: Dark Mode Support

You asked, we delivered. Enable dark mode in your dashboard
settings for easier late-night work sessions.

→ Try it now

---

## Case Study: How Acme Corp Increased Conversions 47%

See exactly how they optimized their checkout flow and
the surprising change that made the biggest difference.

→ Read the case study

Step 6: CTA Best Practices

Button copy:

Weak	Strong
Click here	Get your free guide
Submit	Start my trial
Learn more	See how it works
Buy now	Add to cart - $29
Download	Download the checklist

CTA guidelines:

• Action verb + benefit
• 2-5 words
• First person ("Get my..." vs "Get your...")
• Contrast color from email background
• Minimum 44x44px tap target

Step 7: Footer Requirements

Required elements:

<!-- Social Links -->
<a href="#">Twitter</a> | <a href="#">LinkedIn</a> | <a href="#">Instagram</a>

<!-- Legal -->
<p>You're receiving this because you signed up at [website].</p>

<a href="{unsubscribe_link}">Unsubscribe</a> |
<a href="{preferences_link}">Email preferences</a> |
<a href="{browser_link}">View in browser</a>

<!-- Address (CAN-SPAM required) -->
<p>
  [Company Name]<br />
  [Street Address]<br />
  [City, State ZIP]
</p>

<!-- Copyright -->
<p>© 2026 [Company Name]. All rights reserved.</p>

Step 8: Mobile Optimization

Mobile-first guidelines:

Element	Mobile Spec
Width	100%, max 600px
Font size	Body 16px+, headings 22px+
Line height	1.5-1.6
Button size	Full width, 48px height min
Images	100% width, max-width set
Padding	20px sides minimum
Single column	Stack all content vertically

Responsive image:

<img
  src="image.jpg"
  alt="Description"
  width="600"
  style="max-width: 100%; height: auto; display: block;"
/>

Step 9: Testing Checklist

Before sending:

• Subject line under 50 characters
• Preheader complements subject
• All links working
• Images have alt text
• Unsubscribe link present
• Physical address included
• Renders on mobile (test with Litmus/Email on Acid)
• Plain text version included
• Personalization tokens work ({first_name})
• Sent from recognizable sender name

Output Format

## Email Campaign: [Name]

**Type:** [Newsletter/Promotional/Welcome/etc.]
**Goal:** [Engagement/Sales/Onboarding/etc.]

---

### Subject Line Variants

**A:** [Subject line]
**B:** [Subject line variant]

**Preheader:** [Preheader text]

---

### Email Content

[Full email content with sections marked]

---

### Notes

- Send time: [Recommended day/time]
- Segment: [Target audience]
- A/B test: [What to test]

Validation

Before completing:

• Subject line A/B variants provided
• Preheader text included
• Clear value in first paragraph
• CTAs are action-oriented
• Mobile-friendly structure
• Footer has required elements
• Consistent with brand voice

Error Handling

• No clear goal: Ask for campaign objective (traffic, sales, engagement).
• Too much content: Limit to 3-5 content blocks; link to full articles.
• Missing personalization: Add {first_name} or segment-specific content.
• Spam trigger words: Avoid "FREE", "Act now", excessive caps/punctuation.
• No mobile consideration: Use single column, large fonts, stacked CTAs.

Resources

• Really Good Emails - Inspiration
• Litmus - Email testing
• Mail-Tester - Spam score check
• Email on Acid - Cross-client testing