Learn how to use Dotdigital’s EasyEditor to create and design email campaigns and landing pages.
EasyEditor is a powerful tool that allows you to create, edit, and style both email campaigns and landing pages without having to write a single line of HTML or CSS. The source code is available for you to edit if you want to, but the drag-and-drop functionality of EasyEditor allows you to build and style your content directly in the design view.
EasyEditor's user interface
In EasyEditor, email campaigns and landing pages are made up of groups of building blocks. Each block either acts as a structure element—like a column block—or a content element—things like text, images, buttons, and so on.
These blocks can simply be dragged and dropped onto the design canvas. A dotted line indicates a valid position for the block to be placed.
To learn more about the available building blocks, check out these articles for email campaigns and these articles for landing pages.
The available building blocks are displayed in the Build tab of the left side menu.
Some block types can contain other blocks. In the example below you can see a column block (1), with two text blocks (2,3) nested inside it.
Hover your cursor over a block to view the header bar. To move a block, select and hold the header then drag the block to a new position on the canvas.
In the top left of the header, the type of the block is confirmed (text, image, etc.).
In the top right of the header bar you can:
- Duplicate the block
- Delete the block.
When you duplicate a block, the duplicate appears directly below the block you selected. If the block you select contains other blocks, then all blocks are duplicated.
The EasyEditor toolbar is displayed above the design canvas. This toolbar is dynamic and changes depending on whether you're editing text or images. The relevant options for the content you’re working on become available to you automatically.
To expand an accordion menu in the tools area, select its header.
To switch between the Build and Styles options, select the relevant tab:
- Build - allows you to access and add drag-and-drop building blocks to your campaign.
- Styles - allows you to apply styles such as background colours and overall colour themes, borders and padding, and device display options.
If you select a text area on your template, the toolbar displays options related to working with text.
If you select an image, the toolbar switches to display image-related options. The Build tab also automatically expands the Images section.
Above the toolbar, there are a few other options available.
Here you can use the Undo and Redo tools, open a preview of your campaign or landing page, perform a test send of an email campaign, or access the Utilities menu which allows you to access the source code, among other options.
To learn more, check out the article Review tools for email campaigns: the Utilities menu.
You can also save your campaign or landing page using the SAVE button. For email campaigns, the SAVE & CONTINUE button takes you to the next step in the campaign creation process.
Style an email campaign or a landing page
You can use the Styles tab in the left side menu to:
- Change the background colour of a particular block, or change the colour theme of your entire email campaign. Learn more.
- Change the border and padding of a block. Learn more.
- Manage what content is shown, depending on which device it is viewed on. Learn more.
- Change the width of your email campaign. Learn more.
If you want to apply a particular button style or a text style, you can use the style manager.
Edit the HTML and CSS
Sometimes you may want to edit the source code of a campaign or landing page directly. To do this, select UTILITIES and then Edit source.
Editing the source code of email campaigns
To learn more, check out the article Edit the source code of an email campaign.
If you want email campaigns with custom code to still be compatible with EasyEditor’s design features, you must use our EasyEditor template markup when editing the source code.