The centre area is your canvas, a live preview of how the finished product will look like.
Here you add the Elements and Assets necessary to build your Email.
Elements are the containers of images, text and other types of content you would normally add into an Email. Assets, on the other hand, are a combination of Elements inside a row. When you create an asset, you're essentially saving the row for future use in an Email. You can find them in the Design Panel, inside the editor.
The Email is composed of rows and columns, each column being a part of a row. Drag and drop items into your canvas from the Design Panel to design your Email. The limit of Assets and Elements is four per row or column.
The canvas is all things Email design: where you build your Templates and your Assets for future use. However, we have dedicated articles where you can read more about Templates & Assets.
About Elements & Assets
To design your Email, you will be working with Elements and Assets.
Click on an item below to expand:
How to Add Elements into the Canvas
You get to choose the exact placement of the Element before adding it into the canvas. Here's a quick guide for how they behave depending on where you drop them in the canvas.
Only Elements can be placed inside an existing row, since an asset is already a row.
1. Choose your Element.
2. Click on it, and drag it towards the canvas. Don't drop it yet.
3. The line indicator will point to the place where the Element will be placed. Take a look at the images below to see how it should look when you add Elements into the canvas.
Click on an item below to expand:
This is how the canvas will signal that you are dropping the Element into a new row.
This is how the canvas will signal that you are dropping the Element into a new column.
This is how the canvas will signal that you are dropping the Element into an existing row with no other Elements in it.
This is how the canvas will signal that you are dropping the Element into an existing column with no other Elements in it.
This is how the canvas will signal that you are dropping the Element into an existing row that has one or more Elements in it. Adding an Element to a row will create a new column.
This is how the canvas will signal that you are dropping the Element into an existing column that has one or more Elements in it.
How to Clone an Element
1. Click on the Element you would like to clone.
2. On the right, the Element Options will open in the Design Panel.
3. Scroll to the bottom of the Element Options, and click Clone.
Your Element will be cloned directly under the original, in the same row.
How to Add Assets into the Canvas
1. On the Design Panel, click on the Assets tab.
2. Locate the Asset you wish to add to your Email and drag it onto the canvas.
3. Drop it into the canvas like you would with any other Element.
Assets are rows, and not Elements, and therefore they can only be added as a new row.
To read more about how to create an Asset, head over to our dedicated article about creating an Asset.
How to Move an Element or Asset
The Elements you place in the canvas are not static. Here's how to move them around the canvas after they've been placed.
Assets cannot be moved, since they are already rows. Rows, for now, cannot be moved either. We will notify you once this feature becomes available. Nevertheless, it is possible to move a specific Element from inside an asset into a new or existing row.
To move an Element, first click and hold it. Then scroll around and drop it wherever you wish to place it.
How to Delete an Element
1. Click on the Element you wish to remove.
2. Click on the red x on the top right corner of the Element.
How to Remove an Asset
You can remove an asset by deleting all the Elements within the row, one by one, but the row will remain. To do that, simply follow the steps above on deleting an Element. Here are the instructions on how to remove an asset and its container row.
1. Locate the asset you wish to remove, and click on the row in the Structure Panel.
2. Head over to the Design Panel, where Row Settings is now shown, and click Delete.
3. Are you sure? Click Delete. Otherwise, Cancel.
How to Delete an Asset
Here's how to delete an asset from the Design Panel. You may also do this from the Assets tab.
1. Click the Assets tab in the Design Panel.
2. Locate the asset you wish to delete, and click on the red X.
3. Are you sure you want to delete this asset? If yes, click Delete. Otherwise, click Cancel.
The text version of an email is a simplified version that contains only the text content of the email, without any pictures or any other sorts of media.
While in the Email Editor, access the Preview. There you can toggle the Desktop, Mobile and Text version, and the canvas will change accordingly.
To view the text version as a part of a particular segment, click the segments under View segments.
Do I need a text version for my email?
Most likely, yes. Emails that contain a simple text version have an improved deliverability rate, as certain email clients tend to flag emails without a text version as spam.
Consider the accessibility factor. Recipients who have difficulties reading may use accessibility features to read email.
It may be difficult for certain apps, clients or browsers to display HTML content in some devices. An email with a text version will increase the popularity of the emails due to more devices being able to display it properly.
Also, it is worthy to mention that some people prefer the text version of emails due to their simplicity.
Your email will be displayed differently depending on the device it's opened with.
Here's an overview of how each Element will be displayed in mobile versus desktop, as well as the differences in placement.
Click on an item below to expand:
Mobile and Desktop Device Visibility
Would you like to make a row visible only in the mobile or the desktop version of your Email? Or would you like to make it visible in both?
Click on the icons under Show on to choose on which device(s) the row will be visible. You must choose at least one device, as it is impossible to deselect both.
The icon on the left represents desktop and the icon on the right represents mobile.
Stacking Elements on Mobile View
The desktop version of your email will display the rows and columns as you have arranged them in the Email Editor. However, the mobile version will stack the Elements on top of each other.
The Elements are stacked from left to right. If the width of an Element exceeds the width of the mobile view, it will be resized to fit.
See the example below:
The list Element will be centred in the mobile view, even if it's set to left or right alignment in the desktop view.
The menu Element will be centred in the mobile view, even if it's set to left or right alignment in the desktop view.