Styling Templates with Themes

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.

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.

The themes 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. Update common email design needs using the options provided.

The standard tab within the theme editor with basic options for updating styles

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 components like <dys-text>. You can also establish your theme's branding colors with <dys-palette>, which will be available in the visual editor on elements with editable styles. 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 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.

<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 multiple blocks to a theme, select the theme on the Themes page and click Add / Remove Blocks.

The add / remove blocks page with a list of blocks you can select or unselect from the theme

Blocks can be added to multiple themes, making it easy to share common blocks across themes. To add a block to one or more themes from the Block Editor, go to the Themes tab and toggle the slider to the right of a theme to Active. The themes tab in the block editor with a list of themes that can the block can be added to by toggling from inactive 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.

Change a the themes a block is assigned to by selecting the drop-down menu on a block

Pinning Blocks to 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 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.

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.

Didn't find what you're looking for?

Ask our support team, we're here to help!

Contact Support