Use content components content-components
When creating your email content, Content components allow you to personalize your email with raw, empty components that you can use once placed in an email.
You can add as many Contents as needed 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.
-
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
-
Drag and drop the Content of your choice inside the relevant structures.
note note NOTE You can add several components into a single structure and into each column of a structure. -
Adjust the options for each component using the contextual Settings tab. For example, choose to display it on desktop or mobile devices only, or both. You can also manage link options from this tab. Learn more about managing links
-
Adjust the styling attributes for each component using the Style tab. For example, change the text style, padding, or margin of each component. Learn more about alignment and padding
-
From the advanced menu of your Content on the right pane, 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 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. Use a specific background for the container and another one for the button.
Button buttons
Use the Button component to insert one or multiple buttons into your email and redirect your email audience to another page.
-
From the Contents list, drag and drop the Button component into a Structure component.
-
Click your newly added button to personalize the text and access the Settings and Styles tabs.
-
From the Settings tab, in the URL field, add the URL to redirect to when clicking the button.
-
Choose how the content is displayed using 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.
-
Further personalize your button by changing styling attributes such as Border, Size, Margin, and others 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.
-
From the Contents menu, drag and drop Text into a Structure component.
-
Click on your newly added component to personalize the text and access the Settings and Styles tabs.
-
Change your text with the following options available from the contextual 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 lists 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 component’s content to the targeted profiles.
-
Adjust other styling attributes such as text color, font family, border, padding, margin, and others from the Styles tab.
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.
HTML HTML
Use the HTML component to copy and paste parts of your existing HTML. This enables you to create free modular HTML components to reuse external content.
-
From Components, drag and drop the HTML component into a Structure component.
-
Click on your newly added component, then select Show the source code from the contextual toolbar to add your HTML.
Image image
Use the Image component to insert an image file from your computer into your email.
-
From the Content menu, drag and drop Image into a Structure component.
-
Click Browse to choose an image file from your assets. You can also choose to Import your media.
To learn more about uploading and adding assets in ÃÛ¶¹ÊÓƵ Experience Manager, refer to ÃÛ¶¹ÊÓƵ Experience Manager as a Cloud Service documentation.
-
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.
-
Click your newly added component and set up your image properties using the Settings tab:
- Image title lets you define a title for your image.
- Alt text lets you define the caption linked to your image. This corresponds to the alt HTML attribute.
-
Add a link to redirect your audience to another content. Learn more
-
Adjust other styling attributes such as margin, border, and others using the Styles tab.
Social social
Use the Social component to insert links to social media pages into your email content.
-
From the Components menu, drag and drop the Social component into a Structure component.
-
Click your newly added component.
-
In the Social field of the Settings tab, choose which social media you want to add or remove.
-
Choose the size of your icons in the Size of images field.
-
Click on each of your social media icons to configure the URL to which your audience is redirected.
-
Change the icons of each of your social media if needed in the Source field.
-
Adjust other styling attributes such as style, margin, border, and others from the Styles tab.