New Drag & Drop Email builder for TractionNext

Summary

The Drag and Drop Email Builder in TractionNEXT is revamped to make it more user-friendly, providing more flexibility to the users.

Issues with the Current D&D Email Builder

We offer only two standard templates to choose from - Blank template & One column Layout. Most competitors offer several different layouts and themes under various categories that the user can use as a starting point.
The toolbar for text does not allow to change the font family. It is crowded with several icons for inserting a field, form, abandoned cart, etc.
Design elements like buttons cannot be easily customized on the email builder screen. Custom D&D blocks need to be built using HTML for every small edit.
When overriding one template with another, the original content is lost. There is no option to 'keep existing content'.
Spacer Elements are of three fixed heights of 20px, 40px and 60px.
The design elements like text, buttons are tied down to the placeholders (layout elements like one-column, two-column, etc.).
UI Issues - The Text inline toolbar is not fixed on top of the block when scrolling.

The New Drag and Drop Builder

This section highlights the major features that are part of the new D&D Email builder and comparison with the current one.

Template Section

Old Editor	New Editor
when a user clicks on the D&D editor, they will be seeing the Editor with a blank layout template added by default.	when a user clicks on the D&D editor, they will be seeing the page with ready to use predefined Email templates.
There is no option for a user to choose from a list of themes or to use as predefined Email templates.	The user can choose any of the templates or they can click on the button "No Thanks!" and will be directed to the D&D Editor in both the case.
User has to switch the view between standard and custom templates to select the Email template.	Here the user can view standard and custom templates on one screen.

Adding Custom template

Old Editor	New Editor
User has to create a custom template in the create custom template section each time they want to make some changes to a particular theme.	Email Templates Section: When creating a custom template, the user can choose to create the template from blank or customize any of the system predefined themes.
The user has to create the custom blocks in the create custom template section for each section of the template to use.	Email Campaigns Section: When drafting an email, the user can design either using a blank template or build the email using any of the system predefined themes or custom templates created earlier.
	Additionally, there will also be an option to 'Save as Template' for future use.

Choose a Theme

As a starting point, the user can 'Choose a Theme' from a set of Standard Themes under various categories/Custom Themes/start with a blank layout.

On selecting a theme, the user is taken to the email builder page which loads with the layout and content in the chosen theme or a blank layout as chosen.

Once the user selects a theme, the template gets loaded to the editor with all it’s style settings.

User can view the template style settings to the left-hand side, where they can find them below:

Setting to set the width of the template.
Settings for Logo.
Background colour settings for template body.
Colour settings for Button background, fonts and border.
Colour settings for Links.
Background colour settings for sections.
Option to enable or disable “View browser link”.
Option to add “Pre-header” content for the email.

Here the user can make their email ready up to 70%.(pending 30% is content and images)

The user can find the Change Theme button on the top, where they can click the button and change the theme as per their wish.

The Reset button at the top when clicked will reset back the whole template. All the changes done will be reverted back and the initial template will be visible. While doing so the user will be prompted with a confirmation message.

Drag-Drop Improvements

On the toolbox, the design elements are now separated from the content elements. This makes it possible to decide on the layout and then insert design elements into it as required.

Custom elements view

Edit Theme Properties

The theme properties include general settings such as background and body colors, button colors, logo settings etc. These properties can be edited using the 'Settings' option in the left panel.

Whenever a new design element is added to the email, it would be created using the theme properties.

Other options for text like Normal, Header 1, Header 2, etc may also include for the template and the settings for it will be common for the template like colour and font of Normal text; colour and font of Header 1, etc.

Design Element Properties

When clicking on an element (eg. button, social icons, etc.) in the email design, the properties are displayed on the left panel and can be edited from there. The Text Element properties can be edited using the inline toolbar.

Inline Toolbar for Text

The inline text toolbar will now include additional options for changing the font family. Icons for inserting personalized fields, form, abandoned cart, etc. would be grouped and displayed in the left pane. Refer to the below image...

Change Template Design

The user can choose to change a template after making layout and content changes. When changing the template, they can 'Keep Existing content' or 'Override existing'.

Template Preview

The preview popup may show both Desktop and Mobile preview instead of having separate options for both. Refer to the below image.

Difference between "Keep content as it is" & "Override the existing"

If the “Keep content as it is” is selected, the editor will load with the new theme styles but the content will remain unchanged.

If the “Override the existing” is selected, the editor will load with the new theme styles with the new content.

Image settings

Old Editor	New Editor
Not available	When an image is clicked to customize, the feature box is opened to the left, where the user can change the image, alter the size, position, add spacing and crop the image, etc.

Refer the below image...

Content editing toolbar

Old Editor	New Editor
Too long and going out of space and limits the addition of further tools.	Compact and extensible to add further tools.
	Font colour, font-family, custom fonts, etc. features are added.

Social links

Old Editor	New Editor
The user has no option to choose between the social links.	The User has the option to choose what social links he wants to add and remove.

Spacer

Old Editor	New Editor
Only few spacer options were available like spacer bar with height,20px, 40px, 60px etc.	The space bar can be dynamically dragged to increase the height of the spacer.

Content blocks

Old Editor	New Editor
None of the HTML elements inside the block is drag-gable and cannot be deleted as a single element.	All the HTML elements inside the block is drag-gable and can be deleted as a single element.
Users cannot change the positions of the elements from top to bottom and from bottom to top.	Users can change the positions of the elements from top to bottom and from bottom to top.
It is a fixed layout type.	It is not a fixed layout type.
Users cannot drag and drop any design elements like content, image, etc. into this lock.	Users can drag and drop any number of design elements like content, image etc. into this block.

Video & Audio

Old Editor	New Editor
Not Available	The user can only insert the URL of the video or audio file.(e.g. YouTube, Vimeo etc. )
	The user is not allowed to upload any video or audio file.
	Once the user ads the URL to the given video property input box,
	we will be displaying only the thumb image of the video to click and play the video on a new tab of the browser and not on the email.

Overview

You can create your design for any activity or event with our beautiful and attractive ready to use templates or design it from scratch with our blank canvas. These designs will have a professional look and responsive in nature. This new advanced email builder provides several new features to build your design easy.

How to use this New Drag & Drop email builder?

Drag & Drop email builder is used to design beautiful and attractive emails. It is used in Campaigns, Automation and Competitions. These emails can be saved.

Navigate to the Campaign module on the top menu.
Click on the ‘Create Email’ button on the top left corner.

Setup

Fill the details tab/page and move to the content and design tab/page. Refer below image…

Click on Advanced Drag & Drop Builder.

It opens a popup window like below…

Design categories are listed on the left-hand side e.g. Featured, Business etc..

All displays all the available templates.

You can select any template of your choice and start designing your email.

When you mouse hover on any ready to use template, two options appear i.e. Preview & Select.

Preview: It displays the full template that how it looks.

Select: To select the particular template for designing the email.

Let’s select a blank canvas by clicking on “No Thanks! I will create from blank’ button. It displays something like this. Now we select the layouts and drag and drop the various elements to design our email.

Select one column, two column and three column layouts as per your requirement.

Add the required elements to it and your email design is ready.

Alternatively, we can build custom blocks for you, which can then be dragged and dropped to build email templates.

Dynamic contents

These are the content that changes regularly based on user behavior, interaction, timing, interest and other parameters and generated at the moment a user requests a page.

To insert dynamic content, select the ‘Add dynamic content’ button

Enter your dynamic criteria by selecting from the drop-down menus and adding conditions where needed. Criteria can be based on any field OR contact list OR Contact segment within the database.

At any point of time, while designing your email, you can change or reset the theme by selecting the options ‘Change theme’ OR ‘Reset theme’.

Change theme

It does the following for you…

Change the theme and keep the contents it is. Or
Override the existing theme Or
Enable you to create the design from blank.

Refer to the below screen…

Reset theme

Once you click on the Reset theme, it displays the following popup…

Click on ‘Confirm’ will revert all the current changes.

Preview and Test

It enables you to see the preview of your design and send the test email before using it. You can send an email to more than one recipient.

You can see the preview of Desktop and Mobile versions.

Track Links

It is used to track the links used in your design. Click on it to view all the links. Refer to the below image…

It has several columns such as…

URL: displays the links used in the design.

Track: It helps to tracks the links when checked. When you launch a campaign and if someone clicked on this link, you will get a count that how many times it has been clicked and who is the user who clicked. These data are available in the Sent report and Hotspot. By default, all the links are checked.

Tracking name: if you have more links used in HTML, you can assign a friendly name for your ease.

Highlight: It helps you to highlight one of your links among several. At a time, only one link can be highlighted.

Articles in this section

Issues with the Current D&D Email Builder

The New Drag and Drop Builder

Custom elements view

Difference between "Keep content as it is" & "Override the existing"

Comments