Email Builder Overview
The Email Builder is PostUp's drag-and-drop, no code email editor that allows you to design responsive emails without writing HTML. Whether you're creating a new email or editing an existing one, the builder provides a visual editing experience while still allowing you to access the HTML Editor or HTML Source Code whenever needed.
The Email Builder does not replace the traditional HTML editor. You can switch between editing modes at any time using the editor switcher located at the bottom of the content window.
Accessing the Email Builder
When creating or editing a mailing, select Email Builder from the editor switcher located at the bottom of the content window.
The editor switcher allows you to move between:
- Email Builder
- HTML Editor
- HTML Source Code
Select Email Builder to begin working with the drag-and-drop editor.
Choosing a Starting Point
When you first open the Email Builder, you are presented with a blank design canvas.
If you would like to begin with an existing design, open the ellipsis menu (Template Actions) in the upper-left corner of the builder and select Load Template.
From the Template Library, you can choose:
- A template provided by PostUp.
- A template previously saved by your team.
Once selected, the template is loaded into the builder where you can begin making changes.
If you prefer, you can continue working from the blank canvas and build your email from scratch.
For step-by-step instructions on locating and applying templates, see Working with Templates.
Understanding the Builder
Most of your work in the Email Builder centers around three primary concepts:
Rows
Rows define the structure of your email and determine how your content is organized on the page.
Rows support multiple column layouts and allow you to customize the appearance of each section of your email, including backgrounds, spacing, borders, mobile behavior, and visibility settings.
Every content block you add to your email is placed inside a row.
For a closer look at layout options and column behavior, see Working with Rows and Layouts.
Content Blocks
Content blocks are the individual elements that make up your email.
Available content blocks include:
- Title
- Paragraph
- Image
- Button
- Divider
- Spacer
- Table
- HTML
- Video
- Social Icons
- Menu
- Icons
Simply drag a content block into a row and customize it using the properties panel.
Each content block includes its own customization options. For detailed information on every block type, see Content Blocks Reference.
Properties
Whenever you select a row or content block on the design canvas, the Properties panel displays the customization options available for that item.
Depending on what is selected, the Properties panel allows you to modify options such as:
- Colors
- Padding
- Borders
- Alignment
- Typography
- Spacing
- Mobile behavior
- And many other settings specific to the selected item.
The available options change automatically based on the element you've selected.
Settings
The Settings tab controls the global appearance of your email, including fonts, colors, spacing, alignment, and background styling. These settings become the default values for your design, and newly added rows and content blocks inherit them automatically.
We recommend configuring your global settings before building your email to establish consistent branding throughout your design.
For a complete list of available settings and customization options, see Working with Settings.
Devices Preview
Before sending your email, use Devices Preview to review your design across multiple device types.
Preview supports:
- Desktop
- Tablet
- Mobile
- Dark Mode
Keep in mind that Preview provides an approximation of how your email will render. Since each email client displays HTML differently, the final appearance may vary depending on the recipient's device or email application.
You can use the Rendering tab in PostUp, powered by Litmus, which will perform a comprehensive rendering test across supported email clients and devices.
Saving Your Work
As you build your design, the Email Builder automatically saves your changes to the mailing you are currently editing. You will notice a version history tracking your changes as you go in the lower left hand corner of the canvas.
When you want to reuse a design for future campaigns, you can save it separately as a template.
Templates preserve your layout, content blocks, and design settings, making it easy to maintain consistent branding across future campaigns.
For details on creating and managing templates, see Working with Templates.
Working with HTML
Although the Email Builder provides a visual editing experience, you can switch between the Email Builder, HTML Editor, and HTML Source Code at any time using the editor switcher.
When you switch from the Email Builder to the HTML Editor or HTML Source Code, PostUp generates HTML from your Email Builder design.
Important: After switching to the HTML Editor or HTML Source Code, any changes you make directly to the HTML are not synchronized back into the Email Builder's rows and content blocks. Your previous state of the Email Builder content is presented.