Drag and Drop Editor

Free x
Team x
Business ✓
+
Engage Premier ✓
?

Engage Premier requires a Business tier account and includes Engage Foundations and Unify.
See the available plans, or contact Support.

Use Twilio Engage to build email templates with a what you see is what you get (WYSIWYG) Drag and Drop Editor. Use drag and drop tools to design the template layout and include user profile traits to personalize the message for each recipient.

You can navigate to the Drag and Drop Editor from the Select Editor screen:

  • When you build a new email template or edit an existing one.
  • From a Send Email step in a Journey.

From the Select Editor screen, select Drag and Drop Editor and click Build Email.

The Drag and Drop Editor consists of a left sidebar with design modules and an email canvas.

The left sidebar contains the following tools:

Click and drag the tools you want to use from the left sidebar in the email canvas.

Email canvas

Use the canvas to organize and preview the email template for both desktop and mobile. Drag and drop content modules from the sidebar into the canvas and arrange the layout as desired.

Select content in the canvas and return to the left sidebar to set properties for the selected content.

Design for desktop or mobile

Navigate between desktop or mobile to design the email template for both formats. Toggle between desktop or mobile in the left sidebar or use the buttons in the bottom right corner of the email canvas.

Mobile view doesn’t contain all design options that are available for desktop. For example, upload image capabilities are only available when you edit for desktop. However, content that you add for desktop will also display for mobile devices by default. See content modules for more on content that’s only available to edit for desktop.

Responsive design

Use responsive design settings in the sidebar to hide specific content for either desktop or mobile.

Add content modules

Select from the following content modules:

Module   Description
Columns   Adds columns to the email body. After you place a column in the email canvas, use the left sidebar to set column and row properties, as well as responsive design settings.

Columns allow you to organize the email layout by adding sections to drop other content modules in, such as buttons or images.
Button   Use this tool to add a button to the canvas, then edit button properties in the sidebar:

Action: Use the Action Type dropdown menu to select the action that occurs when the button is clicked. Learn more about link actions.
Action properties can only be set when you edit for desktop.

Button Options: Select button text and background color along with the width and alignment.

Spacing: Set spacing and border attributes for the button.

General: Adjust the container padding to determine the amount of space between the button and column border.

Responsive Design: Hide the selected button for desktop and mobile.
Divider   The divider separates columns, rows, or content in the email with a visible divider line.
Heading   Adds heading text to the email. Set text properties, add actionable links, and personalize the text with merge tags.
HTML   Use this tool to add HTML to the email body. Note that you can only add HTML when you edit for desktop.
Image   Adds an image. You can format image properties and add a link. Image uploads are only available when you edit for desktop.
Menu   Adds a responsive menu to the email. After you add a menu to the canvas, edit the following properties:

Menu Items (desktop only)
To add menu options:
1. Click Add New Item.
2. Enter the menu text.
3. Select the action type that occurs when you click on the menu option.

Styles: Menu style for font, layout, padding, and more.

General: Properties for the menu container padding.

Responsive Design: Hide the selected menu for desktop or mobile.
Text   Adds a text section to the email. Set text properties and include actionable links. Add merge tags to personalize the email with user profile traits.

Add blank columns or predefined content blocks

Use the Blocks tool to add both blank columns and pre-existing content blocks to the email. Drag empty column blocks in the canvas to organize the layout, then drag and drop content tools inside the column blocks.

Predefined content blocks allow you to add content such as:

  • Unsubscribe blocks
  • Heading blocks
  • Image blocks
  • Saved blocks

Email body attributes

Use the body tool to apply general style and link attributes to the entire email canvas.

Email body attributes include:

  • Text and background color
  • Content width and alignment
  • Font family
  • Link color and underline

To modify style attributes for specific content in the email, select a content block in the canvas and edit attributes in the left sidebar.

Add an image

Use the images tool to add images to your email. Scroll through available images in the left sidebar or use the search tool.

Select and drag and image into the canvas, then return to the sidebar to set image properties:

Image Property   Description
Image   Upload a new image (up to 10 MB), add an image url, and adjust the image width. You can also add alternate text to display with the image.
Action   Use the image link drop-down menu to select link actions that occur when a recipient clicks on an image.
General   Adjust container padding, which determines the amount of space between the image and column border.
Responsive Design   Hide selected images for an email viewed on either desktop or mobile.

Upload an image

Use the Uploads tool to upload an image for the email template. Click Upload Image to select an image stored locally or drag and drop images in the sidebar dropzone.

The maximum image file size you can upload is 10 MB.

Use the Action Type drop down menu in the sidebar to select the action that occurs when a recipient clicks on the link, button, or image in the email template.

Select from the following link actions:

  • Open Website: Directs you to a website. Enter a URL and choose to open the website in the same tab or a new one.
  • Send Email: Sends an email based on the email recipient, subject, and body you enter.
  • Call Phone Number: Makes a phone call to the number you enter.
  • Send SMS: Sends an SMS message to the phone number you enter.

It’s always best practice to include an unsubscribe link in the emails you build. Engage adds an unsubscribe link to templates, which you can edit at any time. For more on email unsubscribe links, view SendGrid’s best practices.

Add an unsubscribe link as a button:

  1. Select the button in the email canvas and navigate to Action settings in the left sidebar.
  2. Set Action Type to Open Website.
  3. Click Special Links > Unsubscribe.

Add an unsubscribe link to text:

  1. Select the text that you want to convert to an unsubscribe link.
  2. Click the link icon in the text toolbar.
  3. In the Insert/Edit link window, set Action Type to Open Website.
  4. Click Special Links > Unsubscribe, then click Save.

You can alternatively add a predefined unsubscribe link content block.

Engage also adds a manage preference link to templates. The manage preference link lets your customers opt in and out of email groups on an individual basis instead of unsubscribing from all your campaigns. For more information, see subscription groups.

Personalize with merge tags

Add merge tags in the Drag and Drop Editor to personalize your message with user profile traits.

  1. Select any heading or body text in the email canvas. From the text toolbar, click Merge Tags.
  2. Select the profile traits to include from the drop down menu.
  3. Based on cursor placement, Engage adds merge tags to your email template.

Engage supports liquid templating to create dynamic content in the email design editor and the SMS editor.

For example, use {% if %}, {% elseif %}, and {% else %} tags to call a product by name if known, or use a default message:

{% if profile.traits.product_title == "Sneakers" %}
  Hey, view our latest sneakers!
{% elsif profile.traits.product_title == "Sandals" %}
  Hey, check out these sandals!
{% else %}
  Hey, check out our latest footwear.
{% endif %}

To view more examples related to your use case, visit the LiquidJS docs.

Content validation

For all content editors in Engage, you’ll see alerts for any issues in your template, such as invalid profile traits or incorrect liquid syntax. Engage both flags template issue(s), and displays recommended next steps. While you can save these templates, you must fix any issues before using them in Engage campaigns.

Save the template

After you design the email, click Create Email Template.

Next steps

  • Learn more about building email templates to include in your Engage campaigns.

  • You can learn about the HTML Editor for both code and visual editing capabilities from a single view.

once you create an email with the Drag and Drop Editor, you can’t modify it with the HTML Editor, and vice versa.

This page was last modified: 22 Apr 2024



Get started with Segment

Segment is the easiest way to integrate your websites & mobile apps data to over 300 analytics and growth tools.
or
Create free account