DocumentationCampaignCampaign Web User Interface

Use content components content-components

Last update: Mon Feb 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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

You can add as many Contents as you need inside a Structure, which defines the layout of your email.

Add Content components 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 a Structure into your empty content to define the layout of your email. Learn how

  2. Drag and drop the Content of your choice inside the relevant structures.

    img-md
    modal-image
    note note
    NOTE
    You can add several components into a single structure and into each column of a structure.

  3. Adjust the options for each component using the contextual Settings tab. For example, you can choose to display it on desktop or mobile devices only, or both. You can also manage link options from this tab. Learn more on managing links

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

    img-md
    modal-image

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

Container container

You can add a simple container inside which you add another content component. This allows you to apply a specific styling to the container, which is different from the component used 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.

modal-image

Button buttons

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

  1. From the Contents list, drag and drop the Button component into a Structure component.

    img-md
    modal-image

  2. Click your newly added button to personalize the text and to have access to the Settings and Styles tabs.

    img-md
    modal-image

  3. From the Settings tabs, in the URL field, add the URL you want to redirect to when clicking the button.

  4. Choose how your the content is displayed 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.
    img-md
    modal-image

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

Text text

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

  1. From the Contents menu, drag and drop Text into a Structure component.

    img-md
    modal-image

  2. Click on your newly added component to personalize the text and to have access to the Settings and Styles tabs.

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

    img-md
    modal-image
    • 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.
    • Edit image: add an image or an asset to your text component.
    • Show the source code: display the source code of your text. It cannot be modified.
    • Duplicate: add a copy of your text component.
    • Delete: delete the selected text component from your email.
    • Add personalization: add personalization fields to customize the content from your profiles data.
    • Enable conditional content: add conditional content to adapt the content of the component to the targeted profiles.

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

    img-md
    modal-image

Divider 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 Styles tab.

modal-image

HTML 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 Components, drag and drop the HTML component into a Structure component.

    img-md
    modal-image

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

    img-md
    modal-image
NOTE
To simply make an external content compliant with the Email Designer, Adobe recommends creating a message from scratch and copy the content from your existing email into components.

Image image

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

  1. From the Content menu, drag and drop Image in a Structure component.

    img-md
    modal-image

  2. Click Browse to choose an image file from your assets. You can also choose to Import your media.

    To learn more on how to upload and add assets in Adobe Experience Manager, refer to Adobe Experience Manager as a Cloud Service documentation.

    img-md
    modal-image

  3. Navigate through your folders to locate the specific asset you need, or use the search bar to find it efficiently.

    Once you’ve found the asset you’re looking for, click Select.

    img-md
    modal-image

  4. Click your newly added component and set up your image properties using the Settings tab:

    • 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.
    img-md
    modal-image

  5. You can add a link to redirect your audience to another content. Learn more

  6. Adjust the other styling attributes such as margin, border, etc. using the Styles tab.

Social social

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

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

  2. Click your newly added component.

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

    img-md
    modal-image

  4. Choose the size of your icons in the Size of images field.

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

    img-md
    modal-image

  6. You can also change the icons of each of your social media if needed in the Source field.

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

recommendation-more-help
c39c2d00-ba9a-424b-adf9-66af58a0c34b