Use cases
Create your own customized SmartBlock layouts to use as template, so that your SmartBlocks have different styling and configurable options to the system default layouts.
Add new configurable options into a SmartBlock, for example, you can use HTML to add a new field through the Layout editor, which can then be adjusted in the UI at a SmartBlock level.
Adjust the defaults of a layout to match your branding. This creates a new account-level layout with defaults all configured to match your branding.
Create a shared layout, so one layout is shared by multiple SmartBlocks. Adjusting that one layout then changes all SmartBlocks that have been created from it.
If you request a bespoke layout from our Service team, the layout editor is used to create these.
Types of SmartBlock layouts
There are 3 types of SmartBlock layouts:
System default layouts
These are layouts supplied by us, as default, for every account. You can’t edit these layouts directly, but you can save amended layouts based on default layouts as new account-level layouts. You see these in the Layouts step when creating a new SmartBlock.
Account-level layouts
These are layouts you have created, or we have created for you, which are specific to your account. They are identified by a person icon in the top right.
These layouts are shown in the Layouts step when creating a new SmartBlock.
SmartBlock-level layouts
These are layouts attached to a particular SmartBlock only. To edit the layout for a SmartBlock, edit the SmartBlock then select the Edit Layout (</>) icon.
Web vs email layouts
The layout editor allows for the creation of different layouts for different channels, notably email and web. This is due to the differing nature of support for HTML and JavaScript in email, when compared to a web page.
The system default layouts are built to have a good level of compatibility with their intended channel. However, if you are building your own HTML, or making significant changes, you need to be aware of what works for email vs web.
The Placement setting option on the Other Settings tab controls whether a layout shows as available for use in a SmartBlock aimed at email use, web use or both.
There are two elements required in an email layout that are not required when deploying to the web:
An element with a class name of
imagecontainer. This tells the system that everything inside that element should be converted to a dynamic image, and is also used to identify links for tracking. The HTML and CSS applied to the elements under this still work, but the final result generated in the Slot is converted to an image.
You must place this element correctly, so the final HTML is valid; for example, put the class on a table cell and not a table tag, as the latter would mean you’re left with a table containing no rows or cells, which is not valid.
The
data-imageindexattribute. This is added to the same element as theimagecontainer class, for example:
<td class="imagecontainer" data-imageindex="{{ loop.index0 }}">
This is used to tell the system what number image to use, mainly for SmartBlocks which include multiple images, like Recommendation SmartBlocks.
The other important thing to be aware of is the final HTML. As email clients support a more limited selection of HTML, it’s generally advisable to stick with tables for layout and use inline styling rather than CSS elsewhere in the layout. This is especially true if you plan to use the layout with the Send time option.
This option is only available on certain ESPs.
If you’re using the Open time option, which generates dynamic images, you can use more complex and more modern HTML inside the imagecontainer element, as this is parsed on the our servers and turned into an image, rather than relying on the email client to interpret the HTML.
Resources such as Can I Email are useful for understanding what should work in an email client.