Summary
The Drag and Drop Email Builder in TractionNEXT is revamped to make it more user-friendly, provide 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 current one.
Template Section
|
Old Editor |
New Editor |
|
when a user clicks for the D&D editor, they will be seeing the Editor with blank layout template added by default. |
when a user clicks for 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 template 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 customise any of the system predefined themes. |
|
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 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 the 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 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 personalise fields, form, abandoned cart etc. would be grouped and displayed in left pane. Refer 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 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 customise, 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 tool bar
|
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. |
|
User cannot change the positions of the elements from top to bottom and from bottom to top. |
User 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. |
|
User cannot drag and drop any design elements like content, image etc. in to this lock. |
User can drag and drop any number of design elements like content, image etc. in to 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 design will have 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.
Login to the TractionNext website.
- 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 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 appears 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 the below screen…
Reset theme
Once you click on Reset theme, it display 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 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 into your design. Click on it to view all the links. Refer 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 count that how many times it has been clicked and who are the user who clicked. These data are available in 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.
Comments
0 comments
Please sign in to leave a comment.