The Drag and Drop Editor is a user-friendly tool designed to simplify the creation of email templates. With its intuitive interface, users can easily design and customize their content by dragging elements such as text, images, and buttons into place. This editor eliminates the need for coding knowledge, making it accessible for all users to create professional-looking emails efficiently.
Goals
- Learn how to select a starting template in the Drag and Drop Editor
- Learn how to navigate a new Drag and Drop Editor Template
- Learn about the Favorites feature of the Drag and Drop Editor
Selecting a Template Layout
When you first access the editor, you will be presented with a window that allows you to select the initial layout for the template. There are 4 tabs in this window: Basic Layouts, Featured Layouts, My Layouts, & Corporate Style.
Basic Layouts provide a basic template structure with no premade content.
Featured Layouts provide partially prepopulated templates to which you can make changes or add additional content.
My Layouts let you use a previously created Email Template that you saved, when creating a new Template (via the Save to My Layouts button).
Corporate Style allows you to save text/formatting styles within the editor so you can reuse those styles across your various emails.
You can see a preview of each template by hovering 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 Layouts 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. The Save to My Layouts function will allow you to save the template as a layout to use in the future. The My Layout section shows all layouts saved by the Save to My Layouts option. The layouts saved here are the ones saved by everyone in your organization.
Navigating the Drag and Drop Editor
When you create a new Drag and Drop template and open the editor, the template will open in a new window and will look like this by default:
As of version 11.4, you can edit your template directly within our Embedded Editor when using UCI. The editor will also display a Full Screen option that you can use to expand the editor window. You should see the following when selecting the Email Editor tab within the email send record in UCI:
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 five options: Preview, Test, Validations, Email Layouts and Save to My Layouts.
Test & Preview
The Test & Preview menu includes three options: Preview, Test Email, and Validations.
Preview
Preview 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 and a Dynamic Preview that will let you preview any FreeMarker personalizations as the selected recipient.
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.
The test email will come from "ClickDimensions Test Email" at "system@clickdimensions.com".
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 Layouts
Clicking Email Layouts 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.
Save to My Layouts
Save to My Layouts will allow you to name and save your current editor as a layout that can be re-used. Your saved layouts will be saved to the My Layouts section of the Email Layouts option.
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 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.
HTML Editor
The Designer and HTML Tabs allow advanced users to switch between the preview of their email in the Drag and Drop editor and the HTML code behind it in the HTML editor.
As of version 11.4, the HTML section allows you to access your Image Manager and Link Manager via the Insert Image and Insert Link options respectively. Version 11.10 added the ability to add Social Share links directly from the HTML tab. 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 Drag and Drop Editor Template
| Feature Added: 8.13.0 |
| Feature Updated: 12.1 |
| ClickDimensions Version Needed: 8.13.0 (9.6.0 for NEW branding) |