Drag and Drop Editor: Setup

If you chose the Drag and Drop editor when you created your Email template, follow the steps here to create a great looking email! This editor automatically makes your email responsive, which means it will look good on smaller screens like phones as well as on larger screens.

It is currently not possible to create new Email Sends/Templates using this editor, and as part of our continuing plans to deprecate the Drag and Drop editor, cloning Email Sends/Templates using the Drag and Drop Editor while on version 12.1+ will automatically update their editor type to the New Drag and Drop editor.

From version 12.2, this will be released to and applied automatically to all versions as we move to fully deprecate the old editors.

NOTE: If you are using Internet Explorer, you must be on versions 9+ to use this editor. It will also work on Chrome and Firefox on a PC and on Safari on a Mac.

Goals

• Learn how to choose a layout in the Drag and Drop Editor
• Learn how to add blocks in the Drag and Drop Editor
• Learn how to style the content in the Drag and Drop Editor

Step 1: Choose a Layout

In the right hand column (the 'sidebar') there are different layouts to pick from. You can see the design area (the 'canvas') change on the left as you click on different layouts. You can always come back and change your layout choice and your content will shift to take on the new layout.

Step 2: Add Additional Blocks

Choose the CONTENT toggle at the top right to add more blocks. Click and drag a content type over to where you want it in your template.

Step 3: Style the Whole Email

Choose the STYLES toggle at the top right to edit the background and borders of the email as well as the text heading styles.

Change between page, header, columns, and footer to edit each section's styles.

Step 4: Style an Individual Block

You can click on a block and then, under Edit Content on the right, click on the Style button. This will let you set unique properties for just that block. You can also set an individual background color for the block here.

Step 5: Save

Always remember to save your work as you go! The save button is in the top left corner.

Additional Training: Check out the ClickDimensions Academy for more on this topic!