Design your email content in the user interface

Once you have created your message, you can start creating your email content.

  1. From your newly created message, select Email designer in the Body section.

  2. In the Email Designer home page, choose how you want to design your email from the following options:

    • Select Design from scratch to use the email designer capabilities to create your email content. Learn more

    • Select Start from template to create your email from a built-in list of templates. Note that you cannot create other templates.

    • Select Code your own to enter or paste HTML raw code. Learn more.

    • Select Import HTML to import an HTML file or .zip folder. Learn more.

Design from scratch

The Email Designer allows you to easily define the structure of your email. By adding and moving structural elements with simple drag-and-drop actions, you can design the shape of your email within seconds.

To start building your email content with the email designer, follow the steps below:

  1. After selecting the Design from scratch option, start designing your email content by drag and dropping Structure components to define the layout of your email.

    NOTE

    Note that stack of columns are not compatible with all email programs. When not supported, columns will not be stacked.

    Once placed in the email, you cannot move nor remove your components unless there is already a content component or a fragment placed inside.

  2. Add as many Structure components as needed.

    Select the n:n column component to define the number of columns of your choice (between 3 and 10). You can also define the width of each column by moving the arrows at the bottom of each column.

    NOTE

    Each column size cannot be under 10% of the total width of the structure component. You cannot remove a column that is not empty.

  3. From the Content components drop-down, you can add as many Content components as you need in your structure component. Learn more about Content components.

  4. Each component can be further customized with the Component settings section. For example, you can change your text style, the padding or margin of your component. Learn more about alignment and padding.

  5. From the Assets picker, you can directly add assets stored in the Assets library to your email. Learn more about asset management.

    Double-click the folder which contained your assets and drag and drop the asset you want to add to your email.

  6. Add personalization fields to customize the content from your profiles data. Learn more about content personalization.

  7. In the Links tab in the left pane, check the list of all the URLs of your content that will be tracked. You can modify their Tracking Type, Label and Tags if needed.

    NOTE

    Learn more about links and message tracking in this page.

  8. If needed, you can switch to code editor to further personalize your email by clicking Switch to code editor from the advanced menu. For more information on the code editor, refer to this page.

    NOTE

    You will not be able to use the visual designer for this email after switching to the code editor.

  9. Click Show preview to check your email rendering. You can choose the desktop or mobile view.

    For more information on how preview your email, refer to Preview and test your messages.

  10. When your email is ready, click Save & Close.

Your email content can now be used in a message. Learn how to send a message.

Create the text version of an email

It is recommended to create a text version of your email body, which is used when HTML content cannot be displayed.

By default, the Email Designer creates a Plain text version of your email, including personalization fields. This version is automatically generated and synchronized with the HTML version of your content.

If you prefer using a different content for the plain text version, follow the steps below:

  1. From your email, select the Plain text tab.

  2. Use the Sync with HTML toggle to disable synchronization.

  3. Click the check mark to confirm your choice.

  4. You can then edit the plain text version as desired.

CAUTION
  • Changes made in Plain text view are not reflected in HTML view.

  • If you re-enable the Sync with HTML option after updating your plain text content, your changes will be lost, and replaced with text content generated from the HTML version.

Use a preheader

A preheader is a short summary text that follows the subject line when viewing an email from your email client. The preheader can help you better track and customize your emails.

  1. From the Email designer, add a Structure components to start designing your email.

  2. From the Body settings right pane, click Edit next to the Preheader field to add content.

  3. Add your preheader. You can further personalize it by clicking the Add personalization icon.

  4. From the Edit Personalization window, you can add Content block, Dynamic content or Personalization fields.

  5. Click Validate to check your personalization syntax.

  6. Click Save.

Your preheader is now configured for your email.

Background settings

When it comes to setting backgrounds with the Email Designer, Adobe recommends the following:

  1. Apply a background color to the body of your email if required by your design.
  2. In most cases, set background colors at the column level.
  3. Try not to use background colors on image or text components as they are difficult to manage.

Below are the available background settings that you can use.

  • Set a Background color for the whole email. Make sure you select the body settings in the navigation tree accessible from the left Palette.

  • Set the same background color for all structure components by selecting Viewport background color. This option enables you to select a different setting from the background color.

  • Set a different background color for each structure component. Select a structure in the navigation tree accessible from the left Palette to apply a specific background color only to that structure.

    Make sure you do not set a viewport background color as it may hide the structure background colors.

  • Set a Background image for the content of a structure component.

    NOTE

    Some email programs do not support background images. When not supported, the row background color will be used instead. Make sure you select an appropriate fallback background color in case the image cannot be displayed.

  • Set a background color at the column level.

    NOTE

    This is the most common use case. Adobe recommends setting background colors at the column level as this allows for more flexibility when editing the whole email content.

    You can also set a background image at the column level, but this is rarely used.

Adjust vertical alignment and padding

In this example, we will adjust padding and vertical alignment inside a structure component composed of three columns.

  1. Select the structure component directly in the email or using the Navigation tree available in the left-hand menu.

  2. From the toolbar, click Select a column and choose the one that you want to edit. You can also select it from the structure tree.

    The editable parameters for that column are displayed in the Column settings menu.

  3. Under Vertical alignment, select Bottom.

    The content component moves to the bottom of the column.

  4. Under Padding, define the top padding inside the column. Click the lock icon to break synchronization with the bottom padding.

    Define the left and right padding for that column.

  5. Proceed similarly to adjust the other columns’ alignment and padding.

  6. Save your changes.

You can underline a link and select its color and target in the Email Designer.

  1. In a Text Content component where a link is inserted, select your link.

  2. In the Component settings menu, check Underline link to underline the label text of your link.

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

    • 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.

  4. To change the color of your link, click on Link color.

  5. Pick the color you need.

  6. Save your changes.

Add inline styling attributes

In the Email Designer interface, when you select an element and display its settings on the side panel, you can customize the inline attributes and their value for that specific element.

  1. Select an element in your content.

  2. On the side panel, look for the Styles Inline settings.

  3. Modify the values of the existing attributes, or add new ones using the + button. You can add any attribute and value that is CSS-compliant.

The styling is then applied to the selected element. If the child elements do not have specific styling attributes defined, the styling of the parent element is inherited.

On this page