In this quick start guide, we'll briefly cover all the features inside of the Email Designer, our newest Email Editor.
To open the Email Designer, click the "Design" ribbon button within an Email Template or Email Send record with Editor Type = "Email Designer".
When you open the Email Designer, there are two primary sections:
- Stage, which is where you drop content blocks and rows while designing. This is the section on the left side of the screen.
- Sidebar, which is where many of the design elements can be customized. This is the section on the right side of the screen.
There is an icon that separates the stage and the sidebar. You can use this to minimize the sidebar at any time.
To begin designing on the stage, you must select a design element from the sidebar. The sidebar includes three tabs to help you create content.
Settings
The settings tab allows you to set defaults for your entire design. When working with rows and content, those design elements inherit these settings.
- Content area width
- Content area alignment
- Background color
- Content area background color
- Background image
- Default font
- Link color
Rows
Rows are the primary structural element for designs created in the Email Designer. Within your rows, you can customize the column structure. With a multi-column row, you can place content side-by-side in your design. Most importantly, rows act as a container for all of your content blocks.
The following options populate in the sidebar when working with rows:
- Row background color
- Content area background color
- Background image
- Content area border
- Content area rounded corners
- Vertical alignment
- Stack on mobile
- Stack order on mobile
- Hide on
As mentioned above, rows can include columns as well. As a result, there is a second section called Customize columns. You can use this section to modify the column structure. There is an +Add new button you can use to insert new columns. A separator icon populates between each column. Click and drag the icon to change the column structure.
For each individual column, you have the following options:
To toggle between columns, click on the column in the sidebar you want to modify. The selected column will be highlighted.
Content
There are several content blocks you can use while designing in the Email Designer. All content blocks include padding settings and hide-on settings in the sidebar.
Below we've listed all the available content blocks.
- Title
- Paragraph
- List
- Image
- Button
- Table
- Divider
- Spacer
- Social
- HTML
- Video
- Icons
- Menu
- Countdown Timer
- Autoplay Video
Mobile Design Mode
By default, the stage mimics what your design will look like on a desktop device. However, you can also use mobile design mode to build your content. This design mode uses a stage that mimics what the design will look like on a mobile device.
Most of the edits you make in mobile design mode are reflected on both the desktop and mobile versions. However, certain elements are marked with a mobile icon in the sidebar. These settings will only apply to the mobile version of your design.
For further information on this design mode, please see Mobile design mode.
Preview
The preview feature is fairly self-explanatory. You can use this feature to see what your design might look like on a desktop, phone, or tablet. You can also use the dark mode toggle to see how dark mode settings may impact your design, and can set a custom view pane resolution to preview your design at specific resolutions.
Note that the preview is an approximation based on the most popular devices and programs. This is particularly important when working with emails or using dark mode preview. Devices and email clients have different settings that may cause your design to render differently.
For further information, please see: