[Limited availability]{class="badge informative"}

Apply themes to your email content apply-email-themes

AVAILABILITY
This capability is in Limited Availability. Contact your Adobe representative to gain access.

With themes, non-technical users have the ability to create reusable content that fits a specific brand and design language by adding custom styling on top of the standard templates.

This feature empowers marketers to leverage visually appealing, brand-consistent emails faster and with less effort, while providing advanced customization options for unique design needs.

Guardrails and limitations themes-guardrails

  • When creating an email from scratch, you can choose to start building your content using a theme to quickly apply a specific styling that fits your brand and design.

    If you choose the Manual Styling mode, you won’t be able to apply any themes unless you reset your email.

  • Fragments are not cross-compatible between the Use Themes and Manual Styling modes.

    • To leverage a fragment in a themed content, this fragment must have been created itself using themes. Learn more

    • When using a fragment in email content, make sure you are applying a theme that you have defined for this fragment. Failing to do so may cause display issues, especially in Outlook 2021 and previous versions. Learn more

  • If using a content created in HTML, you will be in compatibility mode and you cannot directly apply themes to this content.

    • To apply themes, you must first save the imported content as a new template, then convert this template into a theme-compatible content. You can then use this template to create your email content. Learn how to convert a template created with manual styling in this section.

    • You can also still convert your imported HTML content. Learn more

Create a theme create-and-edit-themes

To define a theme that you can leverage in your future email contents, follow the steps below.

  1. To get started, create a new content template.

  2. Select the Create or edit themes option.

  3. Select an Adobe theme. In this example, select the Default theme and click Create.

  4. You can also select a custom template from the My themes tab and click Edit to update it.

  5. In the General settings tab, start defining your theme by giving it a specific name suiting your brand. You can adjust the default viewport width for your emails and also export the current theme to share it across sandboxes.

  6. Use the rail on the right to navigate through the different tabs and update your design settings.

  7. From the Colors tab:

    • Use the Edit button to set up a Color palette with default colors for your brand. Select a Preset to quickly create a color scheme, or adjust each color of your theme individually. You can also use a combination of both.

    • Click Add variant to create multiple color variants, such as light and dark mode, where each variant of your theme has its own color palette and nuance controls.

    • For each variant, click the Edit icon to edit any individual element. You can use the default palette that you have created, or any custom colors.

  8. In the Text settings, you can set the global font that you want to use for your entire theme. For a more granular control, you also can edit each heading and paragraph type to adjust the font, size, style, and so on.

  9. In the Spacing tab, select an individual element from the list to properly space it between the different components.

  10. Using the other tabs on the right, you can manage separately each button element, divider, additional image formatting, and grid layout spacing for this theme.

  11. Click Save to store this theme for future use. It is now displayed in the My themes tab.

Apply themes to an email content apply-themes-email

To apply default or custom styling themes to a content template or an email, follow the steps below.

  1. In Journey Optimizer, add an email action to a journey or campaign, or create an email content template, and edit the email body.

  2. You can either select one of the following actions:

    • Select a built-in email template to open the Email Designer. A default theme specific to each template is automatically applied.

    • Design a new content from scratch and select Use Themes to start with a predefined styling theme.

      note caution
      CAUTION
      If you choose the Manual Styling mode, you won’t be able to apply any themes unless you reset your design.
      To leverage a fragment in a themed content, this fragment must have been created itself using themes. Learn more
  3. Once in the Email Designer, click the Themes button on the right rail. The default theme or the template’s theme is displayed. You can switch between the two color variants for this theme.

  4. Click the arrow next to the theme currently used. The list of available custom and Adobe themes displays.

  5. Click My themes and select a theme that you created.

  6. Click outside of the drop-down list. The newly selected custom theme automatically applies its styles to all email components. You can toggle between the color variants if any.

  7. When a theme is selected in a content template, you can click the Edit theme button to update it. Learn more

    {width="40%"}

    note note
    NOTE
    This option is not available when using themes in email contents.
  8. If you leverage a theme using several color variants, you can choose a specific variant for a given structure component. This allows you to define a color variant for the whole content, and use a different variant for just one specific structure.

    note note
    NOTE
    You cannot perform this action on content components.

    To do this, select a structure component, click the Use specific theme’s variant option from the Styles tab on the right, and apply the desired variant to that structure.

    In this example, the first color variant of the current theme is applied to the whole email content, but the third color variant is applied to the selected structure. You can see that the body and viewport background colors for that specific structure are different from the rest of the content.

You can switch themes at any time. The email content remains unchanged, but the styles are updated to reflect the new theme.

Unlocking styles unlocking-styles

When a component is selected, you can unlock its style using the dedicated icon in the Styles tab.

{width="90%"}

The selected theme is still applied to that component, but you can override its styling elements. If you change themes, the new theme is only applied to the styling elements that were not overriden.

For example, if you unlock a text component, you can change the font color from black to red:

{align="center" width="80%" modal="regular"}

If you change themes, the font color is still red for that component, but the background color for this component will change with the new theme:

{width="80%"}

Leverage themes in a fragment leverage-themes-fragment

To leverage a fragment in a template or email with themes applied, this fragment must have been created itself using themes. Otherwise, you will not be able to use this fragment in your themed content.

To create a fragment compatible with themes, follow the steps below.

  1. In Journey Optimizer, create a visual fragment and click Create to design the content of your fragment. Learn how

  2. Select Use Themes to start with a predefined styling theme.

    {width="100%"}

    note caution
    CAUTION
    If you choose the Manual Styling mode, you won’t be able to apply any themes unless you reset your fragment design.
  3. Once in the Email Designer, you can start building your fragment.

  4. Click the Themes button on the right rail. The default theme is displayed. You can switch between the different color variants for this theme.

    {align="center" width="100%" modal="regular"}

  5. You can select other themes to preview your fragment content. To do so, select the arrow next to the default theme and click Select themes.

    {width="40%"}

  6. You can navigate between the Adobe themes and My themes tabs, and select up to five compatible themes (from both tabs) for your fragment.

    {width="70%"}

    note caution
    CAUTION
    When using the fragment in an email content, make sure you apply a theme that you have defined for this fragment. Failing to do so may cause display issues, especially in Outlook 2021 and previous versions.
  7. Click Close.

  8. Select again the arrow next to the Default theme. You can now toggle between the different themes you just selected to preview each style rendering.

    {width="90%"}

  9. Click Select themes again to add more themes or change your selection.

Make a template compatible with themes theme-convertor

Journey Optimizer allows you to convert an template which was created using manual styling into a theme-compatible content. This can be particularly useful if you created content templates before themes were introduced into Journey Optimizer, or if you are importing external contents.

  1. Open an email content template and edit its content using the Email Designer.

  2. Select the Themes icon on the right rail and click the Generate theme from content button.

    {width="100%"}

  3. The Create a theme window opens. Journey Optimizer automatically detects the styling elements and consolidate them into a new theme.

    {width="90%"}

  4. Provide a name for your theme.

  5. Make your own adjustments as needed, just like you do when creating a theme from scratch, such as adding a color variant, editing fonts, etc. Learn how

    {width="90%"}

  6. Click Save to store this new theme for reuse. You can now apply this theme to your contents such as any other theme. Learn how

recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76