Styling Emails with Themes
Add custom style and organize your blocks with Themes to carry designs across multiple emails. 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 emails with the email builder.
Getting Started with Themes
Find your themes on the Themes page. You can create a new theme by selecting Create New Theme on the top right corner.
Choose a theme to view a list of the blocks and block folders that have been added to the theme with the theme item at the top.
Clicking on the theme from the list will open the theme editor where you can edit all of its default styling. Select the Manage Blocks button to add or remove blocks associated with the theme.
The Theme Editor
There are two ways to set styling within the theme editor: using the Standard tab, or the Advanced tab.
Standard Theme Editor Tab
Styling your theme is simplified in the Standard tab of the theme editor. Update common email design needs using the options provided.
Enable All Editable Styles for Blocks
Enable all editable styles for all elements with an editable attribute, regardless of editable style declarations.
Disable this requires each editable style that email builders will need to adjust in the email builder to be declared in the element's editable-styles attribute.
Enable Custom Layouts
Enabling custom layouts option allows email builders to create custom blocks on the fly from within the email builder.
Disabling this option limits your team to building with your team's pre-established blocks.
Advanced Theme Editor Tab
More customization is available within the Advanced tab, where you can use Dyspatch Markup Language (DML) to further customize your blocks and emails. Learn more about theme DML in the DML documentation.
dys-attributes
Set new defaults inside a <dys-attributes> tag for DML components like <dys-text>. You can also establish your theme's branding colors with <dys-palette>, which will be available in the email editor on editable elements. This lets your team write less DML code in the block editor and create more generic blocks that can be used in multiple themes.
<dys-attributes>
<dys-body background-color='#F7F7F7' max-width='600px' />
<dys-title level='h1' color='#414141' font-family='Oxygen, Helvetica neue, sans-serif' font-size='32px' line-height='46px' />
<dys-text color='#777777' font-family='Oxygen, Helvetica neue, sans-serif' font-size='16px' />
<dys-a color='#FF6F6F' text-decoration='none' />
<dys-palette colors='#F7F7F7,#777777,#FF6F6F,#414141' />
</dys-attributes>dys-font
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. Add a separate dys-font tag for each custom font you'd like to import into your theme.
<dys-font href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700&display=swap" name="Oxygen" />dys-style
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>Adding Blocks to Themes
Add blocks to a theme to make them available in email builder. To add multiple blocks to a theme, select the theme on the Themes page and click Manage Blocks.
Blocks can be added to the theme by clicking the block's row from the list. Blocks can be assigned to multiple themes.
To add a block to one or more themes from the Block Editor, go to the Settings > Theme Assignment tab in the block editor and toggle the slider to the right of a theme to Active.
You can also manage the themes a block is assigned to when viewing the block in a theme, or the block list. Find the block and select Theme Assignment from the block's drop-down menu.
Assigning Themes to Workspaces
Make your teams' email building process flawless by assigning and excluding workspaces from a theme.
Set workspace access levels for users and teams so that each team only has access to the themes they need.
Toggle which workspaces a theme is assigned to by selecting the theme from the Theme page, then selecting Workspace Assignment from the " " menu icon.
Choosing a Theme for an Email
When creating a new email, you will be prompted to select a theme.
If you'd like to change an email's theme after it's been created, select the theme name from above the blocks panel and click Change Theme.
The theme's styles will be automatically applied to the email's preview, when testing with device previews or send to self, and when exporting the email. You can see which theme is being used in an email at the top of the blocks tab within the email editor.
