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:
- Create an email and open its content.
- Add structure components to shape the email. See Editing the email structure.
- Insert content components and fragments in the structure components. See Adding fragments and content components.
- Add images and edit the text of the email. See Inserting images.
- 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.
- Define the subject line of your email. See Personalizing the subject line of an email.
- Preview your email.
- 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.
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:
-
Open an existing content or create a new email content.
-
Access the Structure components by selecting the + icon on the left.
-
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. -
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.
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.
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.
Before copying your content
- In your original email, identify the reusable sections from the sections that will be unique to each email that you will send.
- Save all the images and assets that you want to use.
- 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.
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.
Carousel carousel-settings
-
Drag and drop the Carousel component inside a structure component.
-
Browse to select images from your computer.
-
From the Settings pane, set the number of thumbnails that you want in the carousel.
-
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.
Related topics: