Defining the email structure

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

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

    email_designer_structure_components

    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:

    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.

    email_designer_n-n-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.

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

Adding fragments and content components

With the Email Designer, after adding structure components to your email, you can define their content. To do that, you need to add elements inside each structure component.

There are two categories of content elements that you can use: fragments and content components.

About fragments

A fragment is a reusable component that can be referenced in one or more emails.

To make the best use of fragments in the Email Designer:

When added to an email, fragments are locked by default. If you want to modify a fragment for a specific email, you can break the synchronization with the original fragment by unlocking it in the email where it is used. The changes will not be synchronized anymore.

To unlock a fragment inside an email, select it and click the lock icon from the contextual toolbar.

des_unlocking_fragment

That fragment becomes a standalone component that is not linked anymore to the original fragment. It can then be edited as any other content component. See About 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.

  • Carousel

    For more on this, see Using the carousel component.

  • Divider

  • Html

    Use this component to copy-past 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).

  • Image

  • Social

  • Text

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

  2. Browse to select images from your computer.

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

  4. Select a fallback image from your computer.

    des_carousel_fallback

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

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

Inserting elements into an email

To define the content of your email, you can add content elements in the structure components you have placed beforehand. See Editing the email structure.

  1. Access the content elements by selecting the + icon on the left. Select Fragments or Content components.

  2. If you already know the label or part of the label of the fragment you want to add, you can search for it.

    email_designer_fragmentsearch
  3. Drag and drop a fragment or content component from the palette to a structure component of the email.

    email_designer_addfragment

    Once an element is added to the email, it can be moved inside the structure component or to another structure component in the email.

    email_designer_movefragment
  4. Edit the element to match the exact needs of this email. You can add text, links, images, and so on.

    Note:

    Fragments are locked by default when added to an email. You can break the synchronization with the original fragment if you want to modify the fragment for a specific email, or make your change directly in the fragment. See About fragments.

  5. Repeat this procedure for all elements you need to add to your email.

  6. Save your email.

Now that your email structure is populated, you can edit the style of each content element. See Editing an element.

Note:

If a fragment is modified, the changes are automatically propagated in the emails where it is used. For more on this, see About fragments.

Creating a content fragment

You can create your own content fragments to use them as needed in one or more emails.

  1. Go to Resources > Content templates & fragments and click Create .

  2. Click the email label to access the Properties tab of the Email Designer.

  3. Specify a recognizable label and select the following parameters to find the fragment later in new emails:

    • Because fragments are only compatible with emails, select Delivery from the Content type drop-down list.

    • Select Fragment from the HTML type drop-down list to be able to use this content as a fragment in your emails.

    email_designer_createfragment
  4. If needed, you can set an image that will be used as a thumbnail for the fragment. Select it from the Thumbnail tab of the template properties.

    email_designer_createfragment_thumbnail

    This thumbnail will be displayed next to the fragment's label when editing an email.

  5. Save your changes to return to the main workspace.

  6. Add a structure component and a content component that you can customize as needed.

  7. Once edited, save your fragment.

The fragment can now be used in any email built with the Email Designer. It appears under the Fragments section of the Palette.

Note:

You cannot insert personalization fields inside a fragment unless it is used in an email. To do this, you need to unlock this fragment. See About fragments.

Saving content as a fragment

When editing an email with the Email Designer, you cannot directly save part of that email as a fragment.

You need to copy-paste the HTML corresponding to the section that you want to save into a new fragment.

Note:

To do this, you need to be familiar with HTML code.

To save as a fragment some email content that you created, follow the steps below.

  1. When editing an email in the Email Designer, select Edit > HTML to open the HTML version of that email.

  2. Select and copy the HTML corresponding to the part that you want to save.

  3. Go to Resources > Content templates & fragments and click Create .

  4. Click the email label to access the Properties tab of the Email Designer and select Fragment from the HTML type drop-down list.

  5. Select Edit > HTML to open the HTML version of the fragment.

  6. Paste the HTML that you copied where appropriate.

  7. Switch back to the Edit view to check the result and save the new fragment.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy