Designing emails from scratch designing-an-email-content-from-scratch

Learn how to master email content edition. With Email Designer, you can create emails and templates starting with or without your own predefined content.

Here are the main steps to create and design an email content from scratch using the Email Designer:

  1. Create an email and open its content.
  2. Add structure components to shape the email. See Editing the email structure.
  3. Insert content components and fragments in the structure components. See Adding fragments and content components.
  4. Add images and edit the text of the email. See Inserting images.
  5. Personalize your email by adding personalization fields, links, and so on. See Inserting a personalization field, Inserting a link and Defining dynamic content in an email.
  6. Define the subject line of your email. See Personalizing the subject line of an email.
  7. Preview your email.
  8. Save your content, and proceed with your message after making sure that you have defined an audience and properly scheduled the sending.

You can also check out this introduction video.

NOTE
To avoid designing email content from scratch, you can use out-of-the-box content templates. For more on this, see Content templates.

Defining Email Structure defining-the-email-structure

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 edit the structure of an email:

  1. Open an existing content or create a new email content.

  2. Access the Structure components by selecting the + icon on the left.

  3. Drag and drop the structure components that you need to shape your email.

    A blue line materializes the exact location of the structure components before you drop it. You can drop it above, between or below any other component, but not inside.

    note note
    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.
  4. Several structure components composed of one or more columns are available.

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

Once the structure is defined, you are able to add content fragments and components to your email.

Using a preheader preheader

A preheader is a short summary text that follows the subject line when viewing an email from your inbox. The preheader delivers an higher open rate.

Select the Preheader edit box and complete the content.

You can add a Content block, a Dynamic content or a Personalization fields in the preheader content.

NOTE
Note that preheader is not compatible with all email programs. When not supported, preheader will not display.

Using content components about-content-components

Content components are raw, empty components that you can edit once placed in an email.

You can add as many content components as you want in a structure component. You can also move them inside the structure component or to another structure component.

Here is the list of the available components in the Email Designer:

Button

If you need to use multiple buttons, rather than editing each button from scratch, you can duplicate the Button component using the contextual toolbar.

You can also save buttons into fragments that can be reused. For more on this, see Creating a content fragment and Saving content as a fragment.

Select Fallback view to display the fallback image in the Email Designer.

Text

Use this component to insert text in your email. You can adjust the color, style and size of your text in Component Settings.

Divider

Use this component to insert a dividing line in your email. You can select the color, style and size of the breaking line in Component Settings.

HTML

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

NOTE
A free HTML component is editable with limited options. If all styles are not inlined, make sure to add the proper CSS in the head section of the HTML code, otherwise the email will not be responsive. Use the Preview button to test the responsiveness of your content (see Previewing messages).

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 fragments and components.

When you have a content that cannot be recreated, you can copy-paste the HTML code from the original email using the Html content component. Make sure you are familiar with HTML before proceeding.

NOTE
The new content will not be the exact copy of your original email, but the steps below will guide you through the creation of a message that will be as close as possible.

Before copying your content

  1. In your original email, identify the reusable sections from the sections that will be unique to each email that you will send.
  2. Save all the images and assets that you want to use.
  3. If you are familiar with HTML, split your original HTML content into different parts.

Video video-settings

Insert the video component into a structure component of your email and enter the video link in the Component Settings.

NOTE
Note that video is not compatible with all email programs. When not supported, fallback will display.

Image

Use this component to insert an image in your email.

Insert the image component into a structure component and click browse to upload an image file from your computer.

Social

Use this component to insert links to social media pages in your email. You can select which links you want to display and the size of their icon in Component Settings.

  1. Drag and drop the Carousel component inside a structure component.

  2. Browse to select images from your computer.

  3. From the Settings pane, set the number of thumbnails that you want in the carousel.

  4. Select a fallback image from your computer.

The carousel component is not compatible with all email programs. Upload a fallback to display an image instead when the carousel is not supported in the email.

NOTE
The carousel component is compatible with the following email platforms: Apple Mail 7, Apple Mail 8, Outlook 2011 for Mac, Outlook 2016 for Mac, Mozilla Thunderbird, iPad and iPad mini iOS, iPhone iOS, Android, AOL (Chrome, Firefox and Safari).

Related topics:

recommendation-more-help
3ef63344-7f3d-48f9-85ed-02bf569c4fff