So far, we have been talking about building blocks. However, in order for a block to be available for use in building an email, it needs to be added to a theme – a styled collection of blocks that will be available in the email editor.
A theme defines basic style elements for its blocks. In the block editor, you can preview how your block will look in different themes by selecting Preview in the Theme Assignment tab under Settings
Blocks can also be added to a theme from the:
Attributes for a theme can be set through the user interface in the Standard tab or with DML in the Advanced tab
dys-body
, dys-title
, dys-text
, and dys-a
(links)dys-palette
to create a color palette of up to 12 colors. These will be readily accessible inside of that themeUsing <dys-font>
allows you to add custom fonts to your theme
<dys-font href='https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap' name='Nunito Sans' />
When using web fonts, be sure to define a web-safe fallback font for users who aren’t able to view web fonts
font-family='Nunito Sans, Arial, sans-serif'
CSS defined inside <dys-style>
will automatically be rendered into the head tag of the email
<dys-style inline>
You can add CSS classes to most DML elements with the attribute css-class=”class-name”
<dys-font href='https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap'
name='Nunito Sans' />
<dys-attributes>
<dys-body background-color='#FFFFFF' max-width='600px' />
<dys-title color='#785589' font-family='Nunito Sans, Arial, sans-serif'
font-size='36px' line-height='46px' />
<dys-text color='#121212' font-size='16px' line-height='18px'/>
<dys-a color='#458FFD' text-decoration='none' />
<dys-palette colors='#458FFD,#1B6ACC,#00BDB1,#008A92,#785589,#634771'/>
</dys-attributes>
<dys-style>
.button a{
background-color: #00BDB1 !important;
}
</dys-style>
<dys-style inline>
.highlight-text {
background-color: #458FFD !important;
color: #FFFFFF !important;
}
</dys-style>
<dys-block>
<dys-row>
<dys-column>
<dys-title>
Changing Themes
</dys-title>
<dys-text>
The same <span class='highlight-text'>DML block</span> will look different
in different themes. Check out our
<a href='https://docs.dyspatch.io/blocks_and_themes/styling_with_themes/'>
Knowledge Base</a> for more information!
</dys-text>
<dys-button align='left' css-class='button' href='https://example.com/'>
Click Me
</dys-button>
</dys-column>
</dys-row>
</dys-block>