The Drag and Drop Editor is an Email Template designer provided by Click. It provides features such as easily placeable content blocks, a beginner friendly interface, and mobile responsiveness to allow for a wider variety of template layouts and faster template production.
Goals
- Learn how to select a starting template
- Learn how to navigate around the template
- Learn about the Favorites feature
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 pre-made content.
Featured Layouts provide partially pre-populated 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 editor
When you create an email template and open the editor, the template will open in a new window and will look like this by default:
You can edit your template directly within our Embedded Editor. The designer will also display a Full Screen option that you can use to expand the window. You should see the following when selecting the Email Editor tab within the email send record:
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 designer 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 designer.
Save to My Layouts
Save to My Layouts will allow you to name and save your current designer 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 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.