Start 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. From the Email Designer home page, select the Design from scratch option.

  2. Start designing your email content by drag and dropping Structure components to define the layout of your email.


    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.

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


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

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

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

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

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

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


    Learn more about links and message tracking in this page.

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


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

  10. 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 this page.

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

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

On this page