Add custom style and organize your blocks with themes to easily carry designs across multiple templates. Fonts, background image, link color, and more can be set with the theme editor. Once a theme is created you can handpick only the blocks your theme needs to empower anyone on your team to create design compliant email templates with the visual editor.
Find your themes on the Themes & Blocks page. You can create a new theme by selecting the Create drop-down.
Choose a theme to view it with all the blocks that have been added to the theme. The theme itself is the first element, selecting the theme will open it in the theme editor or you can click Add / Remove blocks to change the blocks in the theme.
There are two ways to set styling within the theme editor: using the Standard tab, or the Advanced tab.
Styling your theme is simplified in the Standard tab of the theme editor. Update common email design needs using the options provided.
More customization is available within the Advanced tab, where you can use Dyspatch Markup Language (DML) to further customize your blocks and templates. Learn more about theme DML in the DML documentation.
Inside a <dys-attributes>
tag set new defaults for DML components like <dys-text>
. This way your team can write less DML code in the block editor and create more generic blocks that can be used in multiple themes.
<dys-attributes>
<dys-body max-width='600px' background-color='#F7F7F7' />
<dys-text line-height='21px' font-size='14px' font-family='Oxygen, Helvetica neue, sans-serif' color='#777777' />
<dys-a color='#FF6F6F' text-decoration='none' />
</dys-attributes>
Add custom fonts with <dys-font>
tag by including the URL to the hosted font and the name of the font. With <dys-font>
you can safely include your web fonts or any hosted fonts.
<dys-font href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700&display=swap" name="Oxygen" />
Use <dys-style>
when you need to add CSS to the theme, CSS written inside will be rendered in the <head>
tag of the email.
<dys-style>
h1 {
color: #CCCCCC;
}
</dys-style>
Add blocks to a theme to make them available in visual editor. To add blocks to a theme select the theme on the Themes & Blocks page and click Add / Remove Blocks. Blocks can be added to multiple themes, making it easy to share common blocks across themes.
Pin blocks in a theme to save users time and ensure consistency across your templates. New templates will automatically include pinned blocks for the theme and only administrators will be able to remove them. Pin important blocks that need to be in every template like headers, footers, and legal information.
You can pin a block by going to the Themes & Blocks page and clicking the theme you want to change. Find the block you want pinned and select the "Pin to Templates" option in the drop-down menu.
Only the blocks that have been added to the theme will be available in the block tab of the visual editor.
The theme's styles will be automatically applied to the visual template's preview, in testing with device previews or send to self, and when exporting the email. You can see which theme is being used in a visual template at the top of the blocks tab within the visual editor.