Styling Visual Templates with Themes

October 12, 2019

Add custom style and organize your blocks with themes to easily carry designs across multiple visual 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.

Getting Started with Themes

Find your themes on the Themes & Blocks page. You can create a new theme by selecting the Create drop-down. The themes & blocks page

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. Viewing a theme with all it's blocks on the selected theme's page

The Theme Editor

There are two ways to set styling within the theme editor: using the Standard tab, or the Advanced tab.

Styling applied to the block will take precedence over theme styles.

Standard

Styling your theme is simplified in the Standard tab of the theme editor. Easily update common email design needs using the options provided. The standard tab within the theme editor with basic options for updating styles easily

Advanced

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. The Advanced tab within the theme editor with theme DML to set the style

dys-attributes

Inside a <dys-attributes> tag set new defaults for DML abstractions 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>

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 and easily 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" />

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 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. The add / remove blocks page with a list of blocks you can select or unselect from the theme

Choosing a Theme for a Template

Only the blocks that have been added to the theme will be available in the block tab of the visual editor. Selecting a theme while creating a new visual template 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.