Tutorial template for You! |
|
Welcome to the beginning of your email design journey! Learn where to find the tools you'll need to create awesome email templates with the Drag & Drop designer. |
|
|
|
|
|
|
The Editor's Header includes the Breadcrumbs menu, Undo / Redo, Duplicate and Delete functions. |
|
• | Using the breadcrumbs you can select any element of your email structure. The selected element is always highlighted with the dominant color. | • | The Undo / Redo / Duplicate / Delete functions can be found in the header as well. | |
|
|
|
|
|
|
With the "Full width element" you can add 100% wide stripes to your email template. Useful for "header", "footer" and "promotion" blocks. |
|
• | By default the full-width element has only one cell, but you can switch to two cells. In this case you can set different background colors to the left and right sides. Example below. | • | When using two cells, you may decide which side should be on top in mobile with the L to R or R to L switches. | |
|
|
|
|
|
|
One cell full width element |
|
|
|
Two cell, primary background |
|
|
|
Two cell, secondary background |
|
|
|
|
The Box element (cell) is primarily used for grouping and styling different elements. |
|
Every element can be inserted into a Box (except for Full Width) and multiple boxes can be nested into each other. |
|
• | In the Position toolbox, you can style the padding (outer spacing) and margin (inner spacing) of the Box element. | • | You can also add different borders to your Box, using the Borders toolbox. You need to select the desired border and all styling options will appear. | • | Each box may have different background colors or even images. Note: Most Outlooks do not support background colors, so always have a fallback color! | • | You may decide if you want to hide the Box on mobile / desktop. Note: Gmail mobile app doesn't support the hide function! | • | You can also save the contents of your Box for future use with the complex / favorite element manager. | |
|
|
|
|
|
|
Box in a blue Full Width Element with white background 15 px margin 15 px border (dark grey) 15 px padding hidden on mobile |
|
|
|
|
|
|
With the Column element you can add 2 to 5 columns next to each other. |
|
Column elements can be nested into each other, so you can add even more than 5 columns to your template if necessary. |
|
• | In the Column toolbox you can select individual columns by clicking on them. The selected column is highlited in the dominant color. | • | You can set and lock the column widths one by one, and even decide if you want a given column to be visible on mobile. | • | You can also reorder columns in the right toolbox with simple drag and drop interactions. | • | In the Mobile settings toolbox you may switch of reordering and can also hide the whole structure on mobile. Note: Not supported in Gmail App! | |
|
|
|
|
|
|
1st Cell 300 px wide hidden mobile |
|
|
2nd Cell 300 px wide shown mobile |
|
|
|
|
|
Title and Text elements are used to input text based content to your email templates. |
|
You need to double click on Title and Text elements to bring up the text editor! The settings applied in the Typography toolbox on the right, can be overwritten by the built-in WYSIWYG editor. |
|
• | We advise you to use the Typography toolbox in the right menu, to define basic title and text styles including font type, size, line-height and also link style and color. | • | You can use the Spacing toolbox to add a bit of "air" around your Title or Text elements. | |
|
|
|
|
|
|
The Image element is used for adding visual content to your email templates. |
|
You don't need to add more than 600 px wide images to your email templates, since that's the ideal width for responsive email templates. |
|
• | In the Image settings toolbox you can add different link types and alt text to your image. | • | You can also define the alignment, size, position, borders and even add background color to your Image. | |
|
|
|
|
|
|
With the Button element you can add HTML based call to actions (CTAs) to your email templates. |
|
You need to double click on the Button text to bring up the built in text editor! |
|
• | In the Style toolbox you can adjust the button radius, choose link type and add URL. | • | In the Size toolbox you can decide if you want to use Fixed width or Fit tot text buttons and if you want your button to be Fluid on mobile or not. | • | Besides above settings you can define the alignment, position, borders and background color or image of the Button element. | |
|
|
|
|
|
|
We hope the above tutorial helps you to understand the basic elements of our email editor. Please feel free to reach out if you need additional help with your email designs or you want us to create custom responsive email templates for you! |
|
|
|
|
|
|
Tutorial email template - 2016 |
|
|
|
|
|
|
|