DocumentationCampaign Standard Documentation

Get started with the Email Designer quick-start

Last update: Mon Sep 13 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • User

The Email Designer provides four ways to create emails.

You can create an email starting fresh in the Email Designer:

  1. You can create an email from a blank canvas by easily adding structure and content components and personalize their content to send a delivery quickly. You can also fully manage style elements. For more information, get started quickly or see the complete documentation.

  2. You can create an email from an out-of-the-box template by selecting a template and building your new email content from here. Learn more

You can also create an email with existing content:

  1. You can convert an existing HTML content (created externally or in the legacy editor). Learn more
  2. You can import an existing HTML content straight away in compatibility mode. Learn more
Without content
With content
Creating an email from scratch
Converting an existing HTML content
Building content from an out-of-the-box template
Importing an existing HTML

Designing emails with the editor without-existing-content

NOTE
In both creation strategy, it is crucial to fill in the subject line before sending your email. Learn how to Add a subject line.

Creating an email from scratch from-scratch-email

You can create an email easily, add components and personalize their content to send a delivery quickly. You can adapt the styling options to your content if needed. For more on managing style settings and inline attributes, see Editing email styles.

  1. Create an email.
  2. Close homepage.

Adding a subject line add-a-subject-line

Subject lines are mandatory when sending an email. For more information, see Defining the subject line of an email.

  1. Go the Properties tab of the Email Designer home page (accessible through the home icon) and fill in the Subject section.

Adding structure components add-structure-components

Structure components will define the layout of your email. For more information, see Defining the structure of an email.

In Structure components, drag and drop components for the layout you want to use.

NOTE
You can select different content layouts that will add up in your email.

Adding content components add-content-components

You can add several content components to your email such as image, text and buttons. For more information, see Content components.

  • Image

    1. In Content Components, drag and drop image into one of your structure components.
    2. Click Browse.
    3. Select your image file from your computer.

  • Text with personalization

    1. In Content Components, drag and drop text into one of your structure components.
    2. Click on the component and enter your text.
    3. To add a personalization field, click Insert personalization field in the toolbar.
    4. Select the field you need, such as First Name.

  • HTML

    1. In Content Components, drag and drop HTML into one of your structure components.
    2. Click Show the source code.
    3. Enter your HTML content.
    4. Click Save.

    If you are familiar with HTML, you can copy-paste the HTML code from the original footer using the Html content component. For more on this, see About content components.

Styling your email component

You can adjust your email styling, for example by changing the padding of a component. For more on managing style settings and inline attributes, see Editing email styles.

  1. Click on your Text component.
  2. On the right, in the palette, go to Padding.
  3. Click the lock icon to break synchronization between top and bottom or right and left parameters.
  4. Adjust Padding as you need.
  5. Click Save.

You can now save and send your email.

Building content from an out-of-the-box template building-content-from-an-out-of-the-box-template

You can build an email from out-of-the-box templates such as customer welcome messages, newsletters and reengagement emails and personalize them.

  1. Create an email and open its content. For more on this, see Creating an email.
  2. Click the home icon to access the Email Designer home page.
  3. Click the Templates tab.
  4. Choose an out-of-the-box HTML template.
    The different templates present various combinations of several types of elements. For example, ‘Feather’ templates have margins while ‘Astro’ templates do not have ones. For more on this, see Content templates.
  5. Go the Properties tab of the Email Designer home page (accessible through the home icon) and fill in the Subject section.
  6. You can combine these elements to build a number of email variants. For example, you can duplicate an email section by selecting a structure component and clicking Duplicate from the contextual toolbar.
  7. You can move the elements around using the blue arrow on the left to drag a structure component below or above another. For more on this, see Editing the email structure.
  8. You can also move components around to change the organization of each structure element. For more on this, see Adding fragments and components.
  9. Modify the content of each element according to your needs: images, text, links.
  10. Adapt the styling options to your content if needed. For more on this, see Editing email styles.

Using an existing email content with-existing-content

If you want to build a framework of modular templates and fragments that can be combined to reuse in multiple emails, you should consider converting your email HTML into an Email Designer template.

Converting HTML content converting-an-html-content

This use case offers a quick way to convert HTML email into Email Designer components. For more on this topic, see Converting HTML content.

CAUTION
This section is for users who are familiar with HTML code.
NOTE
Like the compatibility mode, a HTML component is editable with limited options: you can only perform in-place edition.

Importing and editing an HTML email compatibility-mode

When you upload a content, it must contain specific tagging to be fully compliant and editable with the WYSIWYG editor of the Email Designer.

For more on converting an existing email into an Email Designer-compatible email, see this section.

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