In this support article pertaining to our drag & drop email editor, we will cover multiple aspects of your content elements. This includes sections regarding:
- Full width elements.
- Padding, Margins & Borders.
- Size & Alignment.
- Text editing & Styling.
- Custom fields/Personalization, Unsubscribe & View online.
On the top toolbox you can see the elements that you can use in your template. To add an element, simply drag&drop it at the desired place in your template. Elements can be added after each other or one inside another.
As the name suggests, the Full width element fills the email window horizontally, while its height adjust to its content. Its role is to give a full-width background to a section of your template. You can use it for headers, footers and highlights.
The Box is a container element for your content. It can contain one or more elements. The box (along with the table) provides responsive capability to your template, as it adjusts to the viewing window and sets the contained elements’ size accordingly:
If the Box has a background or a border, the content should have an offset inside, this is called Padding:
The size of the Padding can be set on the right panel. If you click on one number, you can set a side separately (top/right/bottom/left padding). And if you click on the PADDING label in the middle, you can set the Padding simultaneously on each side:
The Margin is the offset outside that separates the Box from other objects:
Similarly to the Padding, it too can be set individually for each side, or together for every side when clicking on the MARGIN label:
You have the option to set the Box’s borders on each side separately or you can set the same border to all sides:
First you have to select on the left which side you want to set and adjust the settings afterwards on the right:
If you click in the middle you can set all sides together. To delete a border you can select “None” for its Style, or you can set its Width to 0px.
The Background of a Box is usually used to give a distinct color background to an emphasized text or table:
The default background setting is transparent, and you can set a color if you want to distinct the Box’s content by background color.
An image can also be used as background. This is good in situations where you want to put text on an image, or you want to use a tiled image to have some geometric pattern or simulated fabric as background. When you have text on an image background, always check how they behave in mobile and tablet views. Because of the template’s responsiveness the element’s positions change according to the viewing size and this may affect how your text looks like on your image.
If you have set the default typography of your template carefully, then you will not have much trouble working with text. Usually all you have to do is to choose the right kind of text – Heading1, 2, 3 or Normal text – and set different options for emphasized text sections:
Text editing and styling
You have a convenient text editor built into our system to add text, set paragraph format (heading1-3 or normal) and styling options. You can activate it by double clicking on a text:
This is also the tool with which you can add links to the text.
If you would like to have a more easily changeable text later, you might consider using separate Text elements for different styled paragraphs.
Adding Custom fields, Unsubscribe & View online links
Using the build in text editor that’s activated by double clicking on text, you can then add custom fields (also known as personalization tags, etc) to your email:
Here is where you can also drop your Unsubscribe & View online links, required in all emails sent on behalf of your company.
The Spacing of a Text is like the Margin of a Box or an Image. Its role is to separate the text from other elements:
Just like in the case of Margin or Padding, you can set the Spacing of the Text on each side separately or together for all sides by clicking in the center on the SPACING button.
The Column is the tool for dividing text horizontally. It can be used in various ways and has a lot of useful options:
You can add up to five columns to a Column set. You set the width of the columns in in pixels according to the desktop view, but by that the columns in fact get a relative width in percent (relative to the total width). This makes the columns able to adjust their size when in different environments (for example different devices, different email clients).
You can rearrange the columns in the right panel by drag&drop, equalize them, or delete the selected one, if there are more columns than two:
Uses of Column
Image and text
Two column structure