Email Builder Overview

The Email Builder is Zyntro's visual drag-and-drop tool for creating professional, branded email templates. It produces visually rich, "pretty" HTML emails that are optimized for newsletters, announcements, and one-to-many broadcast communications.

🎯 Major Feature

Build responsive, visually appealing email templates using a component-based drag-and-drop interface. Templates include smart tag personalization, multi-column layouts, and real-time desktop/mobile preview.

⚠️ When to Use Email Builder

USE for:

  • Newsletters and digests
  • Product announcements and launches
  • Event invitations and promotional broadcasts
  • Company updates and one-to-many communications
  • Marketing campaigns requiring visual branding

DO NOT USE for:

  • Nurturing sequences and drip campaigns
  • 1:1 outreach and sales emails
  • Personalized follow-ups
  • Relationship-building communication

For nurturing and outreach, use plain-text or minimal HTML emails that feel personal. The Email Builder produces "pretty" emails that look like marketing—great for broadcasts, but counterproductive for building genuine 1:1 relationships.

How It Works

Step 1: Access Email Builder

  • Navigate to Brands → Brand Assets → Email Templates
  • Click "Create New Email Template" to open the Email Builder
  • Or click "Edit" on an existing template to modify it

Step 2: Set Template Details

Configure the basic template information in the header bar:

  • Template Name: Internal identifier for the template (e.g., "Monthly Newsletter")
  • Email Subject: The subject line recipients will see in their inbox

Step 3: Build Your Layout

The builder interface has three panels:

  • Left Panel - Components: Drag-and-drop sections and elements
  • Center Panel - Canvas: Visual preview of your email
  • Right Panel - Settings: Properties for selected components

Available Sections (Layout)

  • 1 Column: Full-width single column layout
  • 2 Columns: Side-by-side two-column layout with adjustable widths
  • 3 Columns: Three-column layout for complex designs

Available Components

  • Text: Rich text blocks with formatting (bold, italic, links, lists)
  • Heading: Styled headings with adjustable font size and weight
  • Button: Call-to-action buttons with customizable colors, text, and links
  • Image: Image blocks with Media Manager integration for easy uploads
  • Spacer: Adjustable vertical spacing between elements
  • Divider: Horizontal line separators with styling options

Step 4: Customize Component Settings

Click any component to access its settings in the right panel:

  • Alignment: Left, center, or right alignment
  • Colors: Background color, text color, border color
  • Padding: Top, right, bottom, left spacing
  • Borders: Width, style (solid/dashed/dotted), radius
  • Typography: Font size, font weight
  • Width: Percentage-based width control

Step 5: Configure Global Styles

Click the gear icon to access document-wide settings:

  • Backdrop Color: Background color behind the email canvas
  • Canvas Color: Main email background color
  • Text Color: Default text color throughout the email
  • Link Color: Color for hyperlinks
  • Font Family: Choose from email-safe fonts (Arial, Helvetica, Times New Roman, Georgia, Verdana)
  • Canvas Padding: Overall padding around email content
  • Canvas Border: Border around the email container

Step 6: Add Personalization

Click the person icon to access Smart Tags:

  • Insert merge fields like {contact.first_name}, {contact.email}
  • Personalize content using CRM custom fields
  • Click any smart tag to copy it to your clipboard
  • Paste smart tags directly into text or heading components

Step 7: Preview and Save

  • Use Desktop Preview (monitor icon) to see full-width view
  • Use Mobile Preview (phone icon) to see responsive mobile layout
  • Click "Save Template" to store your template

What It Achieves

💡 Key Benefits

  • Visual Design: Create professional emails without coding
  • Brand Consistency: Maintain visual standards across all broadcast communications
  • Responsive Layouts: Emails automatically adapt to mobile devices
  • Personalization Ready: Smart tags integrate with your CRM data
  • Media Integration: Direct access to Media Manager for images
  • Real-time Preview: See exactly how emails will appear to recipients

📈 Expected Outcomes

  • Professional newsletter and broadcast emails
  • Consistent branding across marketing communications
  • Higher engagement through visually appealing design
  • Faster email creation with reusable templates
  • Mobile-friendly emails that render correctly everywhere

Business Use Cases

📰 Monthly Newsletter

Scenario: A consultant sends a monthly newsletter to their entire subscriber list with industry insights, upcoming events, and featured content.

Why Email Builder: Newsletters benefit from visual structure—headers, images, multiple sections, and clear CTAs. The "pretty" format signals this is curated content worth reading, not personal outreach.

🎉 Product Launch Announcement

Scenario: An e-commerce brand announces a new product line to all customers with hero images, feature highlights, and purchase buttons.

Why Email Builder: Product launches need visual impact. Professional design conveys quality and excitement, driving clicks and conversions.

📅 Event Invitation

Scenario: A company invites contacts to a webinar with event details, speaker bios, and registration CTAs.

Why Email Builder: Event emails benefit from structured layouts that organize information clearly and create urgency with prominent registration buttons.

❌ When NOT to Use Email Builder

Scenario: A sales rep wants to follow up with a lead who attended a demo last week.

Why NOT Email Builder: This is 1:1 relationship communication. A "pretty" email with images and fancy formatting screams "marketing automation." Instead, use a simple plain-text or minimal HTML email that feels genuinely personal. The goal is connection, not conversion through visual persuasion.

Component Details

Text Component

Rich text editing with Quill editor:

  • Bold, italic, underline formatting
  • Hyperlink insertion
  • Ordered and unordered lists
  • Indent controls
  • Double-click on canvas to edit inline

Button Component

Fully customizable CTA buttons:

  • Button text and link URL
  • Background and text colors
  • Container padding (space around button)
  • Button padding (internal button spacing)
  • Border styling and radius

Image Component

Image handling with Media Manager:

  • Browse button opens Media Manager for uploads
  • Alt text for accessibility
  • Click URL for linked images
  • Width control (percentage-based)
  • Alignment and padding options

Column Layouts

Multi-column sections for complex designs:

  • Adjustable column widths (percentage-based)
  • Individual column background colors
  • Per-column padding controls
  • Drag components into any column

Best Practices

  • Use for broadcasts only: Reserve the Email Builder for one-to-many communications where visual branding adds value
  • Keep layouts simple: Most effective emails use 1-2 columns maximum
  • Optimize for mobile: Always check mobile preview—most emails are read on phones
  • Use web-safe fonts: Stick to the provided font options for consistent rendering
  • Add alt text to images: Many email clients block images by default
  • Test smart tags: Ensure personalization fields have fallback values in your CRM
  • Keep image sizes reasonable: Large images slow loading and may be clipped
  • Use clear CTAs: Make buttons prominent with contrasting colors