Drag and Drop Editor

The left sidebar contains the following tools:

• Content
• Blocks
• Body
• Images
• Uploads

Click and drag the tools you want to use from the left sidebar in the 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.

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.

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

Select from the following content modules:

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

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

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:

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.

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.

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:

1
{% if profile.traits.product_title == "Sneakers" %}
2
  Hey, view our latest sneakers!
3
{% elsif profile.traits.product_title == "Sandals" %}
4
  Hey, check out these sandals!
5
{% else %}
6
  Hey, check out our latest footwear.
7
{% endif %}

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

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.

After you design the email, click Create Email Template.

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