- Overview
- Layout
- Properties panel (content, rows, settings)
- Adding and dragging Content
- Preview
- Showing structure
- Timeline: Undo and Redo
- Step 1 - Choosing your overall email settings
- Component properties
- Color and color memory
- Step 2 – Dragging rows into your email
- Selecting structural components
- Deleting and cloning rows
- Sections
- Row and column properties
- The "Do not stack on mobile" option
- Padding
- Border
- Saving rows
- Step 3 - adding content blocks in your rows
- Text blocks
- Global font
- Mirror and Unsubscribe links
- Merge tags and more personalization options
- Images and the File manager
- File manager
- Actions
- Dynamic images
- Buttons/CTA
- Dividers
- Social links
- HTML blocks
- HTML syntax within blocks
- Video
- Icons
- Selecting a content element
- Move, clone, and delete elements
- A few words of best practices
- Email optimum size
- Screen size when using Email Builder
Overview
The Message Builder is an intuitive drag-and-drop email editor integrated into the Designer module. The idea behind the Builder is to offer you flexibility of design by separating the structure of the message from its content. Each section of the message can use a different design.
To access the Message Builder, enter its tab when creating or editing an email.
Please note that the Message Builder and HTML Editor work separately, if you start creating a design in Message Builder, the HTML Editor tab will be greyed out and vice-versa.
Layout
The Message Builder tab is divided into two distinct parts. The editing stage on the left, where you can place and edit content, and the properties panel on the right.
To use the builder, drag structural and content elements from the panel to the stage and edit their properties in the panel. You can do so with content items (e.g., text or image blocks) as well as structural elements. You can even directly drop image files into image blocks (instead of uploading from your computer or URL).
Properties panel (content, rows, settings)
The properties panel is contextual: it always displays the properties of the element you selected in the stage. If no items are selected, the panel serves as a menu from which you can select draggable components.
The panel is divided into three default sections: Content, Rows, and Settings
- 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 message.
Adding and dragging Content
To add a new item, drag it from the panel onto the stage. When you move the item around the stage, the editor highlights the place where it is going to be dropped.
"Drag it here" marks the place where the item will be inserted
Preview
By clicking the "preview" button you can see how the message you are creating will be displayed in web browsers and on mobile phones.
You can switch back and forth between the "desktop" and "mobile" displays.
Note: it is possible to have for example Android vs Iphone previews via the tools button (blue button on the right hand side, then email clients preview button).
You will firstly need to save your design and then this button will appear, giving you the option to have previews on all sorts of devices.
Please note that this link will take you to a separate page and is not hosted on our platform.
Show structure
The function of the "show structure" button is to make the designing of the structure easier. Click it to make visible all limits between structural elements: rows and columns. The limits are shown in the image below as dashed lines.
Timeline: Undo and Redo
Look at the three icons in the lower left corner of the stage.
Timeline, undo, and redo icons
The arrow to the left allows you to undo the most recent action. The arrow to the right, to redo the next action in the timeline. You can view the timeline by clicking the icon farthest to the left.
You can move forwards and backwards over the timeline
You can click on any action to restore the stage to the state after the action.
Step 1 - Choosing your overall email settings
This tab within the properties panel allows you to edit the settings which will affect the whole message.
Email-wide settings
You can define, among others, the width of the message field, the background and link colors, and the default font (see "text editing" below).
It is a good practice to make the width no wider than 600 px, which is a maximum for the majority of classical email clients.
Component properties
Some controls used in the Message builder are the same for multiple kinds of elements.
Color and color memory
While you can type color values by hand, the Message Builder allows you to pick color using graphical controls. It also remembers previously selected (and typed) colors, so that you can better control the palette of your message.
Color picker with color memory
When you hover over colors stored in memory, the tooltip will display the color value.
Step 2 – Dragging rows into your email
Once you have setup your overall email settings you can create the structure by dragging the rows you want to add.
Rows can be selected from the "rows" section of the properties panel, dragged to the stage, and dropped where you want them.
Drag a row to the left menu to create the overall structure of your email
The row you select determines the number of columns, making rows suitable for different uses. You could use the single-column row to introduce a large image to represent a product line or a banner, then a series of two-column rows to show individual products from this line.
Selecting structural components
When you hover over a structural element (row), the Message Builder highlights it. It also shows an icon with arrows you can grab to move the row around.
The handle to move structural components is located on the left
Click on the row in the stage to select it. The properties panel will switch to display the properties of the selected element.
Deleting and cloning rows
When you have selected a structural component, you can use the icon showing two squares to clone it or the bin icon to delete it.
Sections
By adding (or cloning) rows containing the same configuration (number, size) of columns you can create distinct sections for your message.
Row and column properties
Selecting a row allows you to set properties for it, such as background color or image.
For each row, you can set properties for individual columns: background color, padding and border.
The "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 the “Do not stack on mobile” option.
Padding
Padding is the internal distance within a block separating the content from the border. It can be defined for many content elements and some structural elements too (columns).
You can set the same padding for all sides
You can type the value by hand or click the "+" and "_" buttons to increase or decrease it by five.
Flipping the "more options" switch allows you to set different padding for each side of the block.
Border
To make the border visible, you need to make it at least a pixel wide and non-transparent.
A 2px-wide dotted border
By default, all borders surrounding the column element are the same. By using the "more options" switch, you can set a different border color, width, and style for each side.
Example of solid, dotted, and dashed borders
Saving rows
Once you've added content to your row, thus finalizing it, you can easily save it by clicking outside the content's row, on the row's structure, to find the icon of disk (see capture 1 below).
If you click on the "disk" icon, you'll save your block and be able to re-use in your next designs. The saved blocks will be stored under "Designer > Saved contents", which is the library of all time saved blocks ready to be used in your recurring designs (see capture 2 below).
Step 3 - adding content blocks in your rows
Now that you have configured the overall settings of your email as well as added the rows in your email, you will be able to add content blocks within the rows.
This section focuses on tools and options which become available when working with specific types of content blocks.
Please note that you must add your content within the same rows if you want for 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 when viewing it on responsive screens.
For example, when adding your blocks, if you want to display the name of a product or a price under an image, you will need to add a block of text right under the relevant image within the same row.
A few things for you to be aware regarding content blocks:
- Blocks can be duplicated, including blocks which contain variables (stores, products, receipts, abandoned carts loops).
- Blocks cannot be placed on top of each other and must be displayed in the way suggested in the available sets.
- 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 > padding (see further down 'padding section').
- Currently, it is not possible to add hover effects when the mouse is on a specific block.
- Finally, it is not possible to make a whole block clickable, however you can insert links behind the images, CTA, text block….
Text blocks
Selecting a text block opens a menu bar from which you can set font and text properties (font size and color, bold, italics etc.).
The bar with text formatting options
Global font
If you select "global font" as the font family, the text block will use the font selected in the message settings as global. This gives you central control over the fonts in your design.
Note: it is not possible to download your own fonts. The reason why you cannot use your own fonts is because the fonts available in the Message Builder are the fonts recommended in terms of email deliverability practices.
Mirror and Unsubscribe links
To insert mirror page and unsubscription links, highlight the text and select one of the two options in the "special links" sub-menu.
Merge tags and more personalization options
The "merge tags" button provides you with a list of tags to insert values from the database, from system and custom fields. The "more" button opens the "functions" dialog containing the whole library of syntaxes available in the previous version of the editor, including conditional blocks and product loops.
If you type @ and then the first letters of the field you want to display, an auto-completion will help you to write the right syntax. This is the fastest way to write personalization, unless you know your variables by heart.
Images and the File manager
When you add a new image block, you can fill it by dropping an image file from another window or by clicking the "browse" button.
It opens the file manager which allows you to upload images and look for them online.
Please note that it is not possible to add .tiff images in the Message Builder.
File manager
The file manager stores all images uploaded or found online by all users of the Splio universe.
The "insert" button selects an image and returns to the Buidler. You can double click on each image to see zoom it in.
You can sort images by name, date, size, or type, and display them as either tiles, as in the image above, or a list. You can also create folders to organize your image collection.
There is no limit to the number of images and documents you can upload in the File manager.
Actions
Select from the drop-down menu the action performed upon clicking on the image. When the recipient clicks on it, it will open the default software or app they use for the channel selected. If you created a default email to send a request to the Customer Service, then it will open Outlook if it is their default email client.
Dynamic images
Dynamic images are images that change depending on one or more values that are "passed" to the system that delivers them. Those urls can contains some variables, such as an email, a customer ID, a date, etc.
https://spliotraining.com/images/?imageBanner={{customer_ID}}
The variables are merge 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...) 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 Urlc 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…
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, you can use whatever syntax and/or characters you wish to use when using this feature except for the ‘?’ which can only be used once in your url and for " which could result in breaking your link.
Buttons/CTA
Buttons are an elegant way to mask links in the message. With a button, you can have a clickable area with text inside it.
Buttons can open new browser windows for the specified URL, send mails, SMS, or make phone calls (the final effect depends on the device used by the recipient). You can also use the text editing tools to modify the button text.
You can define text and background color, alignment, padding, and border. With a special "border radius" option you can make the button corners rounded.
Dividers
With dividers you can put more space between sections of the message. You can set the properties for the separating line or make the divider transparent.
Divider options
Note: it is not possible to have vertical separators for your blocks, however the space between columns can be edited and therefore should cover this need. To edit this just select your block and edit the padding space.
Social links
The "social" content block is a collection of icons providing links to social media sites. By default it contains Facebook, Twitter, Instagram, and LinkedIn icons, but you can remove those you don't like or add others.
Provide a link for each icon leading to your page within the social media site. The switch by each icon allows you rename it and provide alternate text.
You can also add other social networks, like WeChat, Youtube, Snapchat, using the “Add another icon” button:
Note: it is not possible to customize the colour of the social icons with your own colours however you have the option to choose from several sets of colours available in the menu.
HTML blocks
These blocks enable you to paste (or type) chunks of HTML code directly into your email messages. This enables many kinds of advanced content, from product recommendations, to dynamic maps, personalized ads, and more.
HTML blocks can be considered as an "expert" feature, since using your own code may affect how the message is rendered in email clients. For instance, it is up to the author of the HTML code to ensure that the code adjusts to the screen size (it's called the "responsiveness" of the message). Make sure to use HTML that is email compliant and responsive.
This is also the place where you can use advanced conditional blocks and product loops. In a nutshell, you should use the text blocks for personalization if you are not an HTML expert, and the HTML block if you have more knowledge and you want to make more complex personalization.
HTML syntax within blocks
The message builder allows a limited HTML vocabulary to ensure responsiveness and deliverability of messages. It will try to close open tags and to 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.
Video
For a video block to work, you need to provide a URL to the media. The Message Builder only works with YouTube and Vimeo URLs.
Once uploaded, the block will show the preview image of the video which is set in the original video.
The options for video blocks include the ability to hide it on desktop computers or mobile devices (this way you can have two versions of the block, one for each device type).
Icons
The icons content block enables you to have several images (with or without copy) places next to each other without the use of rows.
Click on Add new icon to add the first icon for your collection and click on Change image to select an image from the file manager/your library. You can then edit the image with the image editor if needed. Click on "More options" to adjust the position of the icon, add a link or an alternative text. If you need to reorder the icons, drag the icon box in the content properties area.
- 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)
Selecting a content element
When you hover the mouse pointer over the stage, the Message Builder highlights items you can click.
Hovering the mouse pointer shows a handle, a tooltip, and the content label
The message builder highlights the element you hover over and gives it a border. There is a handle on the right (the icon with stars), you can use it to move the element.
Click the left mouse button to select the highlighted element. The properties panel changes to display its properties.
Properties for an image element
The three icons in the upper right corner of the panel allow you to delete, clone, and deselect the element.
Move, clone, and delete elements
Click and hold the icon with arrows to drag the element around the stage. The Builder will show you where you can drop it.
Example of dragging an image element
A few words of best practices to finish...
Email optimum size
For optimum deliverability, we recommend that the size of your email should not be higher than 100 ko as 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.