How To Design an Email Template
Overview
After creating a template, the next step is to design its layout and content using the Email Builder.
The template editor provides a structured environment where you build your email step by step. Instead of adding content randomly, the process follows a clear order:
- define the layout
- add content elements
- apply styling
- review and validate
Following this structure ensures that your templates remain consistent, easy to manage, and responsive across devices.
Step 1: Open the template in the editor
To begin designing:
- Navigate to Email Builder → Templates
- Locate the template you want to work on
- Click Edit
This opens the Email Builder editor.
Step 2: Understand the editor workspace
The Email Builder editor is organized into three main areas:
- Content & Styles panel (left) Used to access layout options, content elements, and styling controls
- Editing canvas (center) Displays the email structure and content as you build it
- Properties panel (right) Shows editable settings for the selected element
These areas work together, meaning every action you take in the editor updates one of these panels.
Step 3: Build the layout structure
Start by defining the structure of your email.
To do this:
- Add a section to the canvas
- Choose a column layout for that section
At this stage, focus only on layout, not content.
A clear structure helps organize content and prevents layout issues later in the process.
Step 4: Add content elements
Once the layout is ready, you can begin adding content.
From the Content panel, insert elements such as:
- text areas
- images
- buttons
- dividers
Place these elements inside the sections and columns you created.
Each element represents a specific type of content within the email.
Step 5: Edit content and adjust properties
When you select an element on the canvas, its settings appear in the Properties panel.
From here, you can:
- update text content
- replace images
- adjust spacing and alignment
- modify visual settings
The panel changes dynamically depending on what you select.
Step 6: Apply styling and visual settings
To maintain consistency across your template, use the Styles panel.
This allows you to define:
- colors
- typography
- button appearance
- spacing rules
These settings help ensure your template follows a consistent design system.
Step 7: Review responsiveness
Before finalizing your template, check how it appears on different devices.
Use the Desktop / Mobile toggle to switch views.
This helps confirm that:
- layout adapts correctly
- content remains readable
- spacing is consistent
Step 8: Preview and validate
To review your template:
- Click Preview & Test
This allows you to:
- see how the email will appear to recipients
- verify layout and content
- identify issues before saving
Step 9: Save your template
After completing your design:
- Click Save
Your template is now updated and ready to be used in campaigns or further edited.
Notes
- Always define layout before adding content
- Use consistent styling to maintain visual coherence
- Check both desktop and mobile views before saving
- Use preview to validate the final output