Overall email settings
How to use rows
Adding content into rows
Previewing your design
Tips & best practices
Message Builder is an intuitive drag-and-drop email editor integrated into the Designer module. To access Message Builder go to "New Email" in Designer or use the shortcut (N+E on your keyboard). Please note that Message Builder and the HTML Editor are not compatible: if you start creating a design in Message Builder, the HTML Editor tab will be greyed out and vice-versa.
In Message Builder, content are elements you can place in your message, such as text boxes, image blocks, etc. Rows define the structure of the message and provide room to place content elements. Settings are options affecting the whole email. This article is structured following this logic and highlighting the most useful features and tips. We have not listed all features available but only selected a few which you may not necessarily know about or understand from "first sight".
Overall email settings
This tab allows you to edit some settings which will affect the whole email. You can define for example the width of the message field, the background, link colors, and the font.
We recommend that your email should be no wider than 600 px, which is a maximum for the majority of classical email clients.
Using the color memory
You can enter your hexadecimal codes in Message Builder or pick colour using graphical controls. Once entered, the tool will remember previously selected (and typed) colours, so that you can better control the palette of your message and be more efficient each time.
How to use rows
Once you have set up your overall email settings you can move on and create the structure of your design by dragging and dropping rows. Rows are the equivalent of lines.
They can be duplicated, deleted, and saved for future use (once the content has been added to it).
Row properties and options
Selecting a row allows you to edit properties such as:
- background colour
- background image
- padding (internal distance within a block separating the content from the border)
- borders
- adding more columns
- do not stack on mobile option (when a row contains more than one column, the content in each column will be displayed horizontally by default on desktop devices, and vertically on mobile. You can deactivate this behavior by using this option)
- hide on mobile/desktop
Saving rows
Once you've added content to your row, you can easily save it by clicking outside the content's row, on the row's structure, to find the icon of the disk (see below).
If you click on the "disk" icon, you'll save your block and be able to re-use it in your next designs. The saved blocks will be stored under "Designer > Saved contents".
Adding content into rows
We have listed below some of the highlights of the content which you can insert in Message Builder.
Note that you must add content within the same rows if you want the content to be displayed in a responsive way (i.e image + button). If you add your blocks in separate rows, they will be considered as separate content and therefore may result in your email being displayed with content in the wrong places when viewing it on responsive screens.
A few things to be aware of regarding content:
- If you wish to add a grouped effect to your blocks, you can play around with the padding. Simply select the block and go to the control menu of the content > padding.
- It is not possible to add hover effects when the mouse is on a specific block.
- It is not possible to make a whole block clickable, however, you can insert links behind the images, CTA, text block, etc.
Mirror and unsubscribe links (available when adding "Text")
Those can be found in a text block > special links > links and then inserted in the text block directly.
Merge tags and more personalization options (in text blocks)
The "merge tags" button provides you with a list of tags to insert from your database (system and custom fields). The "more" button will open a window containing the whole library of syntaxes available.
If you type "@" and then the first letters of the field you want to display, an auto-completion menu will help you find it from your database fields.
Dynamic images
Dynamic images can change depending on one or more values that are "passed" to the system that delivers them. Those URLs can contain some variables, such as an email, a customer ID, a date, etc.
https://spliotraining.com/images/?imageBanner={{customer_ID}}
The variables are merged tags in the URL and are replaced with actual values (e.g. the ID of a customer, the email of the recipient, the name of the person, etc.) at the time the email is sent or the landing page is rendered.
Dynamic images are an option within an image block and can be used when inserting product images within product loops. For more details on loops, you can refer to our dedicated article.
Enter the Url to the dynamic content in the "Dynamic Url" field.
Pass variables within this Url to which your server can respond with appropriate graphics or content.
The dynamic images can be for example personalized cards, product recommendations, ads, etc.
Please note that the Dynamic URL field will only be available when an image file has been selected for that image content block.
If you enable the dynamic image but leave the URL field empty, the HTML of your email will be generated and will use the static image as usual therefore ignoring the dynamic settings.
Finally, when using this feature, you can use whatever syntax and/or characters you prefer except for the ‘?’ which can only be used once in your URL, and for quotes, which could result in breaking your link.
HTML syntax within blocks
Message builder allows a limited HTML vocabulary to ensure responsiveness and deliverability of messages. It will try to close open tags and remove tags, such as iframe or script, which are known to cause deliverability issues and are not allowed by the majority of popular email clients.
Using icons
The icons content enables you to have several images (with or without copy) placed next to each other without the use of rows. There are a few functions that are specific for icons such as:
- Icon size (16, 32, 64 and 128px)
- Icon spacing (i.e. spacing between icons, from 0 to 20px)
- Icon padding (padding applied to each icon)
Using the menu
The menu feature allows you to create a "hamburger menu" on mobile when you enable the option "mobile menu" at the bottom of the options available.
Warning: this option only works on iOS.
Dynamic content
To get more information on this feature, refer to our dedicated article.
Countdown
To get more information on this feature, refer to our dedicated article.
Previewing your design
By clicking the "preview" button you can see how the message you are creating will be displayed in web browsers and on mobile phones.
If you wish to use our email clients preview (this is an option that may or may not be enabled on your universe), you will first need to save your design. If the option is present, go to the "tools" button (blue button on the right-hand side, then "email clients preview" button).
This link will take you to a separate page and is not hosted on our platform.
Tips & best practices
-
Dragging elements
When dragging elements of content into a row, always make sure you see the text "drag it here" as shown below:
-
Undo and Redo an action
If you wish to undo or redo an action, you will find three icons in the lower-left corner of Message Builder in the edition menu. You can also view the timeline by clicking the icon farthest to the left. Remember to always save your design as you go.
-
Email optimum size
For optimum deliverability, we recommend that the size of your email should not be higher than 100 ko. The lighter your email is, the easier your images will be displayed on telephones, especially if the connection is bad. If your email is heavier than 100ko, it will be truncated and your users will not be able to view it fully.
-
Screen size when using Email Builder
We recommend that you use a desktop screen when creating your emails in Message Builder for optimum screen size.