Explore the Drag & Drop Email Editor

Overview

The MessageGears Drag-and-Drop Editor provides a method of creating email templates without the knowledge of HTML and CSS.

This guide walks you through creating an email template, with personalization elements, using the Drag and Drop editor. You’ll learn how to best utilize features of the editor such as using Saved Rows to enable more efficient template creation as you go. We’ll cover:

• Navigating to the Drag & Drop Editor
• Exploring the Drag & Drop Editor
• Building and Formatting Content
  
  • Content
  • Adding and Formatting Rows
  • Row Properties
  • Creating Saved Rows
  • Template Settings Tab
• Using Personalization in the Drag & Drop Editor
  • Dynamic Content & Display Conditions
• Preview and Testing Your Template

For more information, check out our training materials in MessageGears University, or reach out to your CSM to get registered!

Navigating to the Drag & Drop Editor

To utilize the Drag and Drop Editor, you must have the Message portion of the MessageGears platform enabled. 

To navigate to the editor from the main dashboard select (1) Message, and then (2) Templates. 

Once on the Templates page, select (3) Create Template.

You’ll need to fill out some basic information about your Template to begin. On this screen, you’ll add a Name for your template, an optional description, and a Sample Audience. 

A Sample Audience will pull a sample from your selected audience so that you can preview any personalization elements with real user data. If your template will not include personalization, you can skip this step. 

Select Continue. 

You’ll then enter a Template Overview screen. From here, you’ll select Create Email Content which will bring you to the Drag and Drop editor.

Exploring the Drag and Drop Editor

Once you enter the Drag and Drop Editor, you’ll see the Content Section on the right side of the screen, along with tabs for Rows and Settings. 

Editor Tabs Breakdown

Content: The different content types available to you for dragging into your template. Each content type will have its own set of properties available to you for editing. 

Rows: Rows are containers for Content. You can fit multiple content modules inside a Row, and Rows have their own properties and settings. You can save Rows and build a repository of useful Rows to streamline your workflows. 

Settings: The Settings tab houses the general settings for your entire template such as content area width, alignment, background color, etc. Similar settings can also be set at the Content or Row level. A Template’s background image or background color will be overwritten by any other background image or background color options defined at the Row or Content level. 

Building and Formatting Content

Content

To pull content into your template, select a content type and drag it into the blue content block area. In the example below, we’ve added a Text content block and can now see some of the (1) Content Properties associated with this content type. 

Editing capabilities are also available in a (2) pop-up formatting modal that allows you to edit selected portions of the text or content within the selected content module, and also add things such as links and merge tags.

Adding and Formatting Rows

There are two ways to add or create Rows in your template:

1. You can drag multiple pieces of content underneath or above each other so that they are grouped in the same Row. To confirm that your content is in the same row, hover to the right or the left of your content until you see a Row highlighted containing your content. 
2. You can select a preconfigured or saved Row design from the Rows menu and then add content. 

There are a few options available to you in the Rows drop-down menu. 

• Empty: These are stock Row configurations that have various column numbers and sizes to help you design your template. 
• Default: These pre-designed Row templates include various column, image, button, and text options. 
• Saved Rows: Saved Rows will be stored under the category name you assign when you create a Saved Row. 

Row Properties

Row settings are slightly different from what you would find at the Content or Template level. Selecting the padding space on a row opens the Row Properties.

You will find the following properties to configure:

• Lock/Unlock Row
• Backgrounds
• Borders
• Layout
• Display Conditions

Creating Saved Rows

1. Select the Row that you’d like to save. 
2. Select the disc icon. 
3. Fill out the form that is displayed with Name of your row, any Tags that would help organize your rows, and the Category name, which will be what is displayed in the Row drop-down menu. 

Template Settings Tab

In the Settings tab, you can adjust settings that will impact your whole template. The settings include:

• Content area width
• Content area alignment
• Background color
• Content area background color
• Default font
• Link color

Using Personalization in the Drag & Drop Editor

To include a personalization component in your content, you must first have Sample Data connected and configured. Sample Data is a subset of the Audience you’ve selected to use.

There are two ways to add personalization fields to your content:

1. Use the (1) Personalization Helper, denoted by the <#> symbol above the Content/Rows/Settings menu. 
2. Use the (2) Merge Tags button in the pop-up modal when a content block is selected. 

Inside the Personalization Helper, you will see all recipient attributes available to you for personalization, along with other items like Mapped Data Sources, MessageGears Functions, and Freemarker examples. 

To add a personalization tag, click the attribute you want to use. This copies it to your clipboard. You can then paste it in the area needed. 

If you use the Merge Tag option, you’ll see the same list of Recipient Data attributes. When you click an item it immediately drops the tag wherever your cursor is. 

Dynamic Content & Display Conditions

You can make your content dynamic for each recipient by utilizing Display Conditions. 

Display Conditions are rules set within your Audience’s advanced data settings that determine when specified content appears for each user based on selected user attributes. Whoever manages and builds your audiences would be the person to help configure these. 

Once set at the Audience level, Display Conditions can be found under Dynamic Content in the Row settings. Applying these conditions will cause your template to either display or hide the Row based on the selected conditions. 

Preview and Testing Your Template

To Preview your template, select the Preview and Test button. 

Once in the Preview screen, you can click through the recipients in your Sample Audience to see how the template’s personalization and display conditions shift by recipient. 

You will also have the ability to send a test email to yourself or a group of people to see what your email will look like once it gets to inboxes.