Use the Email Designer content components

When creating your email content, Content components allows you to further personalize your email with raw components that you can edit once placed in an email.

You can add as many content components as you need inside one or more structure components, which define the layout of your email.

Add content components

To add content components to your email and adjust them to your needs, follow the steps below.

1. In the Email Designer, use an existing content or drag and drop Structure components into your empty content to define the layout of your email. Learn how

2. To access the Content components section, select the corresponding button from the Email Designer left pane.

   

3. Drag and drop the content components of your choice inside the relevant structure components.

   

   NOTE

   You can add several components into a single structure component and into each column of a structure component.

4. Adjust the attributes and styling for each component using the Settings and Style tabs on the right. For example, you can change the text style, padding or margin of each component. Learn more about alignment and padding

   

5. From the advanced menu of your Content component, you can easily delete or duplicate any content components as needed.

   

Container

To apply specific styling to a group of content components, you can add a Container component and then add your desired content component(s) inside it. This enables you to apply a distinct style to the container, which will differ from the style applied to the content components inside.

For example, add a Container component and then add a Button component inside that container. You can use a specific background for the container, and another one for the button.

Button

Use the Button component to insert one or multiple buttons into your email and redirect your email audience to another page.

1. From Content components, drag and drop the Button component into a Structure component.

2. Click your newly added button to personalize the text and to have access to the Settings and Styles tabs in the Email Designer right pane.

   

3. From the Link menu, add the URL you want to redirect to when clicking the button.

4. Choose how your audience will be redirected with the Target drop-down list:

   • None: opens the link in the same frame as it was clicked (default).
   • Blank: opens the link in a new window or tab.
   • Self: opens the link in the same frame as it was clicked.
   • Parent: opens the link in the parent frame.
   • Top: opens the link in the full body of the window.

   

5. You can further personalize your button by changing styling attributes such as Border, Size, Margin, etc. from the Component settings pane.

Text

Use the Text component to insert text into your email, and adjust the style (border, size, padding, etc.) using the Styles tab.

1. From Content components, drag and drop the Text component into a Structure component.

2. Click your newly added component to personalize the text and to have access to the Settings and Styles tabs in the right pane of the Email Designer.

3. Change your text with the following options available in the toolbar:

   

   • Change text style: apply bold, italic, underline or strike through to your text.
   • Change alignment: choose between left, right, center or justified alignment for your text.
   • Create list: add bullet or number list to your text.
   • Set heading: add up to six heading levels to your text.
   • Font size: select the font size of your text in pixels.
   • Change font color: choose the color of your font.
   • Insert link: add any type of link to your content.
   • Edit image: add an image or an asset to your text component. Learn more about asset management
   • Change font color: choose the color of your font.
   • Add personalization: add personalization fields to customize the content from your profiles data. Learn more about content personalization
   • Show the source code: display the source code of your text. It cannot be modified.
   • Enable conditional content: add conditional content to adapt the content of the component to the targeted profiles. Learn more about dynamic content
   • Duplicate: add a copy of your text component.
   • Delete: delete the selected text component from your email.

4. Adjust the other styling attributes such as text color, font family, border, padding, margin, etc. from the Styles tab.

   

Divider

Use the Divider component to insert a dividing line to organize the layout and content of your email.

You can adjust styling attributes such as the line color, style and height from the Settings and Styles tabs.

HTML

Use the HTML component to copy-paste the different parts of your existing HTML. This enables you to create free modular HTML components to reuse some external content.

1. From Content Components, drag and drop the HTML component into a Structure component.

2. Click on your newly added component, then select Show the source code from the contextual toolbar to add your HTML.

   

3. Copy-paste the HTML code you want to add to your email and click Save.

   

Image

Use the Image component to insert an image file from your computer into your email content.

1. From Content components, drag and drop the Image component into a Structure component.

   

2. From the Settings tab, click Browse to choose an image file from your assets or Import media to upload an asset to Adobe Experience Manager Assets.

   To learn more about Adobe Experience Manager Assets, refer to Adobe Experience Manager Assets documentation.

   NOTE

   To ensure your links remain active and avoid any expiration issues, we recommend using Adobe Assets instead of relying on a source URL for your images.

3. You can also directly search in Adobe Stock with the Find Adobe Stock photos option.

4. Click your newly added component and set up your image properties:

   • Image title lets you define a title to your image.
   • Alt text lets you define the caption linked to your image. This corresponds to the alt HTML attribute.

   

5. You can also choose to Find similar Stock photos. Learn more

6. From the Styles tab, adjust the other styling attributes such as margin, border, etc. or adding a link to redirect your audience to another content from the Component settings pane.

Social

Use the Social component to insert links to social media pages into your email content.

1. From Content Components, drag and drop the Social component into a Structure component.

2. Select your newly added component.

3. In the Social field of the Settings tab, choose which social media you want to add or remove.

   

4. Choose the size of your icons through the dedicated field.

5. Click each of your social media icons to configure the URL to which your audience will be redirected.

   

6. You can also change the icons of each of your social media if needed from your Assets.

7. Adjust the other styling attributes such as style, margin, border, etc. from the Styles tab.

Offer decision

Use the Offer decision component to insert offers into your messages. The decision management engine will pick the best offer to deliver to your customers.

1. From Content Components, drag and drop the Offer decision component into a Structure component.

2. Click Add to select your Offer decision.

   

3. From the drop-down, select your Placements. Then, select the the Offer decision you want to add to your content and click Add.

   

4. From the Offer decision tab, you can preview or change the inserted Offer.

Learn how to add personalized offers into an email in this section.