Newsletter Templates

Learn how to create beautiful newsletter templates using our drag-and-drop builder and custom HTML.

Create stunning newsletter templates using our visual drag-and-drop builder or custom HTML code for complete design control.

Template Types

Built-in Templates

Minimal: Clean, simple design with maximum readability
Glass: Modern frosted glass effect with elegant styling
Dark: Sleek dark mode theme for modern brands

Custom Templates

Drag-and-Drop Builder: Visual template creation
Custom HTML: Full control with your own HTML/CSS code

Drag-and-Drop Template Builder

Getting Started

Navigate to Templates → Create Template
Click "Use Template Builder"
Start building with visual elements

Available Elements

Content Placeholder

Purpose: Where your newsletter content will be inserted
Required: Every template must have exactly one {content} placeholder
Usage: Drag to position where main content should appear

Headings

Sizes: H1, H2, H3 with different font sizes
Customization:
- Text content
- Font size (18px - 32px)
- Text color
- Alignment (left, center, right)
- Font weight (normal, bold)

Text Blocks

Purpose: Paragraph content and descriptions
Customization:
- Text content
- Font size (12px - 20px)
- Text color
- Alignment
- Font weight

Images

Upload: Drag and drop or click to upload
Sizing: Small (200px), Medium (300px), Large (450px)
Alignment: Left, center, right
Auto-optimization: Images are automatically compressed and converted to base64

Buttons

Call-to-Action: Prominent button elements
Customization:
- Button text
- Background color
- Text color
- Font size
- Alignment

Dividers

Purpose: Visual separation between sections
Styling: Horizontal lines with customizable appearance

Building Your Template

Step 1: Layout Structure

Start with a Content Placeholder - this is required
Add elements above and below the content area
Arrange elements by dragging them up or down

Step 2: Customize Elements

Click any element to select it
Use the properties panel on the right to customize:
- Content: Text, links, images
- Styling: Colors, fonts, sizes
- Alignment: Text and element positioning

Step 3: Preview and Test

Click "Preview" to see your template
Test on both desktop and mobile views
Check how content flows around your elements

Step 4: Save Template

Enter a descriptive template name
Click "Save Template"
Your template is now available for newsletters

Template Variables

Your templates can use these dynamic variables:

{content} - Main newsletter content (required)
{title} - Newsletter title/subject line

Example usage in custom elements:

<h1 style="color: #333;">{title}</h1>
<div class="content-area">{content}</div>

Custom HTML Templates

When to Use Custom HTML

Advanced Layouts: Complex multi-column designs
Brand Consistency: Match exact brand guidelines
Special Features: Interactive elements, advanced styling
Developer Control: Full HTML/CSS customization

Creating Custom HTML Templates

Step 1: Choose Custom HTML Option

Navigate to Templates → Create Template
Select "Custom HTML"
Enter your HTML code in the editor

Step 2: HTML Structure

Your custom HTML template must include:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{title}</title>
</head>
<body>
  <!-- Your custom design here -->
  
  <!-- Required: Content placeholder -->
  <div class="newsletter-content">
    {content}
  </div>
  
</body>
</html>

Step 3: Email-Safe CSS

Use inline styles or <style> tags in the <head>:

<style>
  /* Email-safe CSS */
  .container {
    max-width: 600px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
  }
  
  .header {
    background-color: #f8f9fa;
    padding: 20px;
    text-align: center;
  }
  
  .content {
    padding: 30px 20px;
    line-height: 1.6;
  }
</style>

Email-Compatible HTML Guidelines

Supported Elements

<table>, <tr>, <td> for layout
<div>, <p>, <h1>-<h6> for content
<img> for images (base64 recommended)
<a> for links
<strong>, <em> for text formatting

CSS Best Practices

Inline styles preferred over external CSS
Table-based layouts for better email client support
Web-safe fonts: Arial, Helvetica, Times, Georgia
Absolute units: Use px instead of em or rem

Example Custom Template

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      font-family: Arial, sans-serif;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: #ffffff;
    }
    .header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 40px 20px;
      text-align: center;
    }
    .header h1 {
      color: #ffffff;
      margin: 0;
      font-size: 28px;
    }
    .content {
      padding: 40px 30px;
    }
    .footer {
      background-color: #f8f9fa;
      padding: 20px;
      text-align: center;
      font-size: 12px;
      color: #666;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Header -->
    <div class="header">
      <h1>{title}</h1>
    </div>
    
    <!-- Main Content -->
    <div class="content">
      {content}
    </div>
    
    <!-- Footer -->
    <div class="footer">
      <p>© 2025 debdabe.et. All rights reserved.</p>
      <p>You received this email because you subscribed to our newsletter.</p>
    </div>
  </div>
</body>
</html>

Advanced Features

Responsive Design

<style>
  @media only screen and (max-width: 600px) {
    .container {
      width: 100% !important;
    }
    .content {
      padding: 20px !important;
    }
  }
</style>

Dark Mode Support

<style>
  @media (prefers-color-scheme: dark) {
    .container {
      background-color: #1a1a1a !important;
      color: #ffffff !important;
    }
  }
</style>