On the left side of the editor, you will find different components, such as Elements. Under the Elements tab are the components needed to compose your message, such as text and images. The Elements tab contains the following:
Elements
The following elements are available for use:
- Heading
- Text
- Image
- Button
- Social
- Navigation
- Divider
- Spacer
- Video
- Timer
- RSS
- Product (available to eCommerce only)
- Recommendation (available to eCommerce only)
- Form feedback
- Custom
Concepts
A few of the concepts below are adjustable in different elements. The effect differs per application:
Padding
Elements are placed in rows and columns. Padding can be applied independently from an element, but here we'll be referring to padding as space around the elements.
You can apply padding on all sides: the top, bottom, left and right. Let's say you've added a heading with padding: 0, it will look like this:
The text is situated all the way to the left. Above and below is some spacing to support the height of the text. If you adjust the padding to 20 for example, this is what it will look like:
Now you can see more space around the element Header.
Background color
A background color can be applied to a row, column and a section, but also to an element. If you insert a video and add padding to it for example, a background color will show. This color will also be visible when the element doesn't load at the receiver's end.
Looking at the example below, we can see the following:
- The background color of the section (dark blue)
- The background color of the row (light blue)
- The background color of the element (yellow)
Corner radius
A radius gives you the option for rounded corners. A corner radius of 0 is square. But the higher the number, the more rounded the corner. You can add a corner radius to these elements: Image, Button, Video and Timer. Here's two examples:
An image without corner radiuses
An image with a corner radius of 30
Alignment
You can align an element left, right or centre. Here's an example:
The header and text are aligned left and the button and image are centre aligned in the column. It aligns an element in a row or column. If you were to align the button left, it would look like this:
Border style
It's possible to place a border around an element. This is what it looks like when you place a border around the Image element:
There are different border style options to choose from: none, solid, dotted and dashed.
Auto width
Elements are set to an auto width by default.
When you move the slide switch to the left, you can adjust the width to your choosing based on a percentage or pixels. The default setting is 100 percent. This percentage applies to the element based on the width of the row or column in which the element is placed.
Here's an example: The button is placed in a two column structure and auto width is applied. The width of the button adapts to a size increase of the text.
If you switch off auto width, the button width is set to 100 percent by default. As you can see below, the button will be filled over the width of the column (padding included).
The width is adjustable in percentage and pixels, so it is also possible to reduce the width. Here's an example of a width set to 80 percent:
FAQ's
Select the element and you will see additional options appear next to the element:
Click the trash can icon.
Click on the first icon to duplicate.