Email Builder

Create stunning, professional emails with our powerful drag-and-drop email builder. No coding required - just drag, drop, and customize.

Getting Started

The Email Builder is accessible when creating a new campaign. After selecting your campaign type and template, you'll enter the Email Builder step where you can design your email.

Overview

The Email Builder is a visual editor that allows you to create beautiful emails using a simple drag-and-drop interface. It includes 10+ content blocks, real-time preview, comprehensive styling options, and personalization variables.

Content Blocks

Build your email using these powerful content blocks organized by category:

Structure Blocks

Header Block

Professional email header with logo upload, company name, tagline, and customizable styling. Configure logo visibility, company information display, and alignment options.

  • • Logo upload and positioning
  • • Company name and tagline
  • • Customizable typography and colors
  • • Background color and alignment

Footer Block

Comprehensive footer with company information, address, copyright text, unsubscribe links, and social media integration. Control content order and styling.

  • • Company information and address
  • • Copyright text
  • • Unsubscribe link
  • • Social media links

Content Blocks

Text Block

Rich text editor with formatting toolbar. Format text with bold, italic, underline, alignment, and more. Insert personalization variables.

  • • Rich text formatting (bold, italic, underline)
  • • Text alignment (left, center, right, justify)
  • • Personalization variables ({{firstName}}, {{email}}, etc.)
  • • Custom typography and colors

Image Block

Upload images from media gallery or add URLs. Configure alt text, linking, alignment, and responsive sizing.

  • • Upload from media gallery or URL
  • • Alt text for accessibility
  • • Image linking capabilities
  • • Width, height, and alignment controls

Button Block

Customizable call-to-action buttons with full control over styling, colors, and behavior.

  • • Button text and URL
  • • Background and text colors
  • • Border radius and padding
  • • Width options (auto, full width)

Video Block

Embed videos with thumbnail support, autoplay options, and control settings.

  • • Video URL (YouTube, Vimeo, etc.)
  • • Thumbnail image
  • • Autoplay and controls

Social Block

Add social media links for Facebook, Twitter, Instagram, LinkedIn, YouTube, and Pinterest.

  • • Multiple social platforms
  • • Custom icon colors
  • • Background customization

Layout Blocks

Divider Block

Horizontal divider lines with customizable styles, colors, and widths.

  • • Line styles (solid, dashed, dotted)
  • • Color customization
  • • Width control

Spacer Block

Add vertical spacing between blocks with adjustable height.

  • • Adjustable height (pixels)
  • • Responsive spacing

Advanced Blocks

HTML Block

Custom HTML code for advanced users who need complete design control.

  • • Raw HTML input
  • • Full design flexibility
  • • For advanced users

Drag and Drop

The Email Builder uses an intuitive drag-and-drop system powered by @dnd-kit:

  1. Add Blocks: Click the "+" button or use the sidebar to add new blocks
  2. Reorder Blocks: Drag blocks up or down to reorder them
  3. Move Blocks: Use drag handles or click-and-drag to move blocks
  4. Keyboard Support: Use arrow keys to move blocks when selected

Live Preview

The Email Builder includes a real-time preview panel that shows exactly how your email will look:

  • Desktop View: See how your email appears on desktop screens
  • Mobile View: Preview mobile-responsive design
  • Split View: Edit and preview simultaneously
  • Real-time Updates: Changes reflect immediately in the preview
  • Interactive Preview: Click blocks in preview to select and edit them

Block Management

Each block can be managed with these actions:

Duplicate Block

Create a copy of any block with one click. Perfect for reusing successful designs.

Move Up/Down

Reorder blocks using the up/down arrows or drag handles.

Remove Block

Delete blocks you no longer need. Changes are saved automatically.

Edit Block

Click any block to open its editor in the sidebar. Customize content and styles.

Personalization Variables

Insert dynamic content variables in text blocks to personalize emails:

{{firstName}} - Contact's first name
{{lastName}} - Contact's last name
{{fullName}} - Contact's full name
{{email}} - Contact's email address
{{company}} - Contact's company name
{{city}} - Contact's city
{{country}} - Contact's country
{{customField}} - Custom field values

Simply type the variable name in curly braces, and it will be replaced with the actual contact data when the email is sent.

Styling Options

Each block and the email body can be customized with comprehensive styling options:

  • Colors: Background colors, text colors, border colors
  • Typography: Font family, size, weight, line height
  • Spacing: Padding, margins, gaps
  • Borders: Border width, style, radius
  • Gradients: Gradient color schemes for backgrounds
  • Responsive: Mobile-specific styling options

Subject Line & Preheader

Configure your email's subject line and preheader text:

  • Subject Line: The main email subject (required)
  • Preheader Text: Preview text shown in email clients
  • Preview Modal: Opens automatically when entering the builder
  • Character Count: Visual indicators for optimal length

Pro Tips

  • Use the live preview to test your email on different screen sizes
  • Save your design as a template for future campaigns
  • Use personalization variables to increase engagement
  • Test your email design before sending to ensure it looks perfect

Next Steps