The NEW Drag and Drop Editor is the latest Email Template editor provided by ClickDimensions. The editor takes the existing functionality of the Drag and Drop Editor, such as easily placeable content blocks, a beginner friendly interface, and mobile responsiveness, and combines it with the flexibility of the Block Editor to allow for a wider variety of template layouts and faster template production.
Goals
- Learn how to select a starting template in the NEW Drag and Drop Editor
- Learn how to navigate a new NEW Drag and Drop Editor Template
- Learn about the Favorites feature of the NEW Drag and Drop Editor
Selecting a Template
When you first open the editor, you will be presented with a window that allows you to select the initial layout for the template. There are two tabs in this window: basic and featured. Basic layouts provide a basic template structure with no premade content, while featured layouts provide partially prepopulated templates to which you can make changes or add additional content.
You can see a preview of each template by mousing over it and clicking the Preview button that displays in the top right corner.
Click the Select button to choose they layout you want to use.
NOTE: You can use the Email Templates button in the toolbar to choose a new layout at any time after starting your template. However, if you do chose a new layout, it will overwrite the existing content in the editor.
Navigating the NEW Drag and Drop Editor
When you create a new Drag and Drop 2.0 template, the template will look like this by default:
The template is made by assembling Sections containing Content Blocks. Sections are sub-sections of the template that contain Content Blocks. Sections can be styled independently and cloned to duplicate just a certain piece of the template. Content Blocks allow you to easily add specific types of content into a Section of the email template.
The top of the editor window contains a toolbar with four options: Save, Save & Close, Test & Preview, and Email Templates.
Test & Preview
The Test & Preview menu includes three options: Preview, Test Email, and Validations.
Preview
Preview option opens a pop-up window that shows how the template will display on a desktop or mobile email client once sent out. The Preview window also includes an Inbox Preview button for the template.
Test Email
Test Email allows you to specify one or more email addresses to send a test copy of your template to in order to confirm that the template displays how you want it to in your inbox.
Validations
Validations will automatically check if the FreeMarker used in your template is correctly formatted and alert you to any problems. A Spam Assassin check will also be run to let you know how likely the template is to be treated as spam if sent out in its current form.
Email Templates
Clicking Email Templates in the toolbar will re-open the initial layout selection window, allowing you to choose a new layout. If you do chose a new layout, it will overwrite the existing content in the editor.
Editor Sidebar
The right-hand sidebar contains two tabs: Elements and Global Style.
Elements
The Elements tab contains allows you to add Sections and Content Blocks to the template by clicking on them and dragging them into the editor.
The Elements tab also contains a Saved Sections subsection that allows you to easily add previously created and saved sections, such as a footer containing social links and your contact information, into the template. Saved Sections are discussed in more detail in the NEW Drag and Drop Editor Sections article.
Global Style
The Global Style tab contains general styling options for the template as a whole.
Within the Global Style tab, the following settings can be managed:
Background
- Background Image: set a Background image for the whole template. This Image will appear behind the sections within the template; it will not be applied to the Sections themselves. If both a background image and background color are set for the template, the background image will take precedence and be displayed.
- Background Color: Set a background color for the whole template. This color will appear behind the sections within the template; it will not be applied to the Sections themselves. If both a background image and background color are set for the template, and the template is sent to an email client that doesn't support background images, the background color will be displayed instead.
Section Width
- Section Width: Set the width of the Sections in the template to 600px or the full width of the preview window.
NOTE: to maximize display compatibility across different email clients and devices, the actual content placed within Sections and Content Blocks in the template will not exceed 600px regardless of whether Section Width is set to 600px or Full Width. This setting only denotes whether the background color or image of the Section is also restrained to 600px or stretches across the full width of the preview window in which the email is being viewed.
Border
- Add a border to the template and set the border size, color, style and corner radius
Typography
- Set hyperlink font color and styling
- Set font properties for general text and heading styles within the template.
Designer/HTML Tabs
As of version 10.7, the Designer/HTML Tabs allow advanced users to switch between the preview of their email and the HTML code behind it.
Once the HTML code is edited, it is not possible to switch back to the Designer tab, so it is recommended that code edits only be performed after the design of the email is complete.
Add Content to the NEW Drag and Drop Editor Template
| Feature Added: 8.13.0 |
| Feature Updated: 10.7.0 |
| ClickDimensions Version Needed: 8.13.0 (9.6.0 for NEW branding) |