[Beta]{class="badge informative"}
Use brand themes for email content email-brand-themes
With themes, non-technical designers have the ability to create reusable email content design guidelines that align to a specific brand and styling. Themes empower marketers to leverage visually appealing, brand-consistent emails faster and with less effort, and provide advanced customization options for unique design needs.
Theme guidelines and limitations themes-guidelines
As you work with themes, keep the following guidelines and limitations in mind:
-
When you create an email or email template from a blank canvas (design from scratch), you can choose Theme mode to start building your content using a theme to apply specific styling that fits your brand and design. If you choose Manual mode, you cannot apply a theme unless you reset the design for the email or email template.
-
Fragments are not cross-compatible between the Theme mode and Manual mode in the email content. To use a fragment in email content where a theme is applied, the fragment must also be created in Theme mode.
-
Changes to a custom theme do not automatically cascade to all emails or email templates that already use it. Edit the content for each to refresh the theme.
-
If you delete a theme, it does not affect any email or email template where it was already applied.
Create a brand theme create-theme
Define your own brand theme that you can apply to your email and email template content in your future email content.
-
Access the theme tools using one of the following methods:
-
Create a new email template and click Edit email template to launch the Design your template page.
-
Click … More at the top-right of the email content design space and choose Change your design.
In the confirmation dialog, click Change template to open the design page.
-
-
In the design page, choose Create or edit themes.
-
Select the default theme, or use any of the Adobe themes to use as the starting point.
note note NOTE If you want to use one of your custom themes (My themes) as a starting point, you can duplicate it and change the theme name when you edit the theme. -
Click Create.
The Create a theme page provides a canvas with the existing elements of all types of text, buttons, and containers from the starting theme.
-
Use the right navigation to access the different theme style tabs and change the theme settings:
The visual elements change on the canvas as you define the new theme settings. If the result is not what you want, you can click the Undo (
-
When your theme definition is complete, click Save.
-
Click Close to return to the Create a theme page, and then Cancel to return to the design page.
You can then choose Design from scratch to open the visual design space and use the theme for the email or template.
General settings
In the General settings tab, define the basic parameters for your theme:
-
Enter a unique Theme name.
-
Adjust the Viewport width for the email content (body). Use the up and down arrows to increase or decrease the width, or enter the value (in pixels).
Colors
Select the Colors tab and use the settings to define the theme color palette.
-
Click Edit to display the color palette that includes the colors for your theme.
Choose a Preset to use a color scheme for the theme, or adjust each color in the set. You can also use a combination of both.
For the selected color square at the top, you can set the color by entering a known RGB, HSL, HSB, or hexadecimal value. Or, you can use the color slider and the color field to select the color.
Click the Back arrow to close the color palette tools.
-
Click Add variant to create multiple color variants, such as a light and dark mode, where each variant has its own color palette and nuance controls. You can have up to six variants.
For each variant, click the Edit (
For each color that you want to change for the variant, move the toggle to the left or right to disable or enable it. For an enabled color setting, click the color square to choose the color.
accordion Variant color settings The settings are grouped according to type:
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 Type Settings Description General 
These settings allow you to set colors for body, structures, containers, backgrounds, links, grids, and borders. Headings 
These settings apply to Headingelements, where you can set text and border colors for each of six heading levels. Expand each heading level that you want to set the color for the variant.Paragraphs 
These settings apply to Paragraphelements, where you can set text and border colors for each of three paragraph types. Expand each paragraph type that you want to set the color for the variant.Buttons 
The settings apply to button elements, where you can set the fill color, border color, and text color for each of the three button presets: Primary, Secondary, and Tertiary.
Text settings
In the Text settings tab, you can set the global font types, styles, and sizes that you want to use for your theme. For more granular control, you can also edit these parameters for heading and paragraph types.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Type | Settings | Description |
| Global |
|
Set the Font library to Standard or Google Fonts. Then, choose the font family that you want to use. These global text settings are applied throughout, unless you set different text styles for the heading levels and paragraph types. |
| Headings |
|
For the heading level that you want to set, select H1, H2, and so on. Set the Font library to Standard or Google Fonts. Then, choose the font family, size, and style. Choose the Text alignment: Left, Centered, Right, or Justified. |
| Paragraphs |
|
For the heading level that you want to set, select P1, HP, and so on. Set the Font library to Standard or Google Fonts. Then, choose the font family, size, and style. Adjust the Line height as needed. Choose the Text alignment: Left, Centered, Right, or Justified. |
Spacing and border
In the Spacing tab, you can set the padding and margin for the different element types. For Select type, choose the content type. Then, set the padding, margins, corners, and borders that are applicable for that element type.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Type | Settings | Description |
| Margins |
|
Choose the Margin icon to display settings that replicate the CSS margin parameter, which controls to the space outside a component border and separates it from other components/elements. It creates a gap around the component to influence its positioning and the layout of surrounding content. Set the margin values in pixels according to your design needs. You can set the margin for all sides, the top-botton, the left-right, or each side of the component independently. Click the Lock and Unlock icons to synch or unsynch the top-bottom and left-right margin values. |
| Paddings |
|
Choose the Padding icon to display settings that replicate the CSS padding parameter, which is the space between the content of a component/element and its border. The padding provides internal spacing that you can use to control the distance between the content and the border of the component. Set the padding values in pixels according to your design needs. You can set the padding for all sides, the top-botton, the left-right, or each side of the component independently. Click the Lock and Unlock icons to synch or unsynch the top-bottom and left-right padding values. |
| Corners |
|
Choose the Corners icon to display settings that replicate the CSS border-radius parameter, which defines the radius of the component/element corners. Set the numerical value according to the curve that you want for the corners. A value of 0 (default) produces a squared corner. |
Move the Border toggle to the right to enable the border display options and set them according to your design criteria:
-
To set the Border size (line width), click the up and down arrow icons to increase or decrease the number of pixels.
-
To set the Border style, choose a value from the list of standard CSS
border-stylevalues, such as Solid, Dotted, and Dashed. -
To determine where the border is displayed, select each Border position checkbox.
Buttons
In the Buttons tab, you can set different attributes (other than color) for button elements, such as border radius (shape), text, and size. You can change the settings for each of the three button presets: Primary, Secondary, and Tertiary.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Type | Settings | Description |
| Text |
|
Set the Font library to Standard or Google Fonts. Then, choose the font family, size, and style. Choose the Text alignment: Left, Centered, Right, or Justified. |
| Border |
|
Move the Border toggle to the right to enable the button border display options and set them according to your design criteria. Set the Border size (line width) by increasing or decreasing the number of pixels. Set the Border style by choosing a value from the list of standard CSS border-style values, such as Solid, Dotted, and Dashed. |
| Size |
|
For the Height option, click the up and down arrow icons to increase or decrease the number of pixels. An empty value (Auto) is the default and sizes the height of the button according to its contents. For the Width, use the toggle to set the width by pixels or percentage. For a percentage width, use the slider to set the percentage value. The percentage determines the button size based on the content box of the containing block, which excludes padding and borders. For example, a value of 50 sets the button width to 50% of its containing block content width. For a pixel-based width, click the up and down arrow icons to increase or decrease the number of pixels. An empty value (Auto) is the default and sizes the width of the button according to its contents. |
Divider
In the Divider tab, you can set the line styling and container settings for a divider component.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Type | Settings | Description |
| Line |
|
Set the Border style by choosing a value from the list of standard CSS border-style values, such as Solid, Dotted, and Dashed. |
| Container size |
|
For the Height option, click the up and down arrow icons to increase or decrease the number of pixels for the component/element. An empty value (Auto) is the default and sizes the height according to its contents (line styling). For the Width, use the toggle to set the width by pixels or percentage. For a percentage width, use the slider to set the percentage value. The percentage determines the element width based on the content box of the containing block. For example, a value of 50 sets the divider width to 50% of its containing block content width. For a pixel-based width, click the up and down arrow icons to increase or decrease the number of pixels. An empty value (Auto) is the default and sizes the width of the divider according to its contents. |
| Alignment |
|
Choose the horizontal alignment within the containing block: Left, Centered, or Right. |
Grid
In the Grid tab, you can control column and row gaps for a grid element:
-
Column gap - Click the up and down arrow icons for either to increase or decrease the number of pixels for the gap between the grid columns. Or you can enter a number in the field.
-
Rows gap - Click the up and down arrow icons for either to increase or decrease the number of pixels for the gap between the grid rows. Or you can enter a number in the field.
Edit a theme
You can edit a theme using the same workflow and tools that you use when you create a theme. The difference is that you select the My themes tab and select the custom theme that you want to change.
Use the rail on the right to navigate through the different tabs and change theme settings:
The displayed visual elements change as you change the settings. If the result on the canvas is not what you want, you can click the Undo (
When your theme changes are complete, click Save.
Manage custom themes
You can manage your custom themes using the same workflow and tools that you use when you create a theme. The difference is that you select the My themes tab and manage your themes within the displayed list.
If you have a large list of custom themes, use the Search field and other filters to reduce the displayed list. As you manage your list of available themes, you can edit, delete, or duplicate a custom theme at any time.
Edit a theme
-
Select the theme that you want to change and click Edit at the top right.
-
Use the navigation on the right to use the different styling tabs and change theme settings:
The displayed visual elements change as you change the settings. If the result on the canvas is not what you want, you can click the Undo icon at the bottom of the right rail. Click the Redo icon to re-apply the change.
-
When your theme changes are complete, click Save.
Delete or duplicate a theme
When you locate the theme, click the More menu (…) icon at the lower right of the theme card and choose the action that you want to take:
-
Duplicate - Choose this action to duplicate the theme. The new theme is identical with Copy of appended to the name of the original. You can change the name when you edit the theme.
-
Delete - Choose this action to remove the custom theme. In the confirmation dialog, click Delete.
note note NOTE Deleting the theme does not affect any email or email template where it is applied already.
Use a theme for email content authoring use-email-theme
When you create a new email or email template, you can choose to use a brand theme that streamlines the content authoring process and makes sure that the design aligns with defined standards. For a new fragment, you can also apply a theme before you save the fragment. The fragment remains in Theme mode from that point and is compatible to add to emails and email templates that are also in Theme mode.
-
Select one of the following actions:
-
Select an email template that incorporates a theme (created in Theme mode). The theme that is specific to each template is automatically applied.
-
Use the Design from scratch option and select Use Themes to start with a predefined styling theme.
note important IMPORTANT If you choose the Manual Styling mode, you must reset the email design to apply a theme. If you choose Themes mode, only fragments that are also created in Themes mode are available to add to the email content.
-
-
In the email design space, click the Themes (
The default theme or the theme applied to the template is displayed. You can switch between the color variants for this theme.
-
Click the arrow next to the displayed theme to view the list of available custom and Adobe themes.
-
Click My themes and select your custom theme.
-
Click outside of the list.
The newly selected custom theme applies the styles to all email components in the canvas. You can toggle between the color variants.
-
If you need to override the theme styles for a selected component, click the Unlock component styles (
In the confirmation dialog, click Unlock.
Select the Styles tab in the right panel to change the settings for the component.
Change the theme for your email content
For an email or email template created in Theme mode, you can change the theme at any time. The email content remains unchanged, but the styles are updated to reflect the new theme.
-
Open the email or email template in the design space.
-
Click the Themes (
The applied theme is displayed in the right panel.
-
Click the arrow next to the displayed theme to view the list of available custom and Adobe themes.
-
Select another theme.
-
Click outside of the list.
The selected theme applies the styles to all email components in the canvas. You can toggle between the color variants.