Drag and drop editor tutorial
In this article
Currently, there are two versions of the editor interface available on our platform (Editor and Beta Editor). Please follow the instructions that match the editor you see on your account or click here to check which version you're using.
Beta editor
Templates:
When you first start working on your design, you can choose an existing template from our library or start from scratch. Our EmailOctopus templates are available to customise either from the Templates tab or directly when creating a Campaign or an Automation. Once you've created a template and saved it in your Templates tab, you'll be able to select it during the campaign or automation set-up.
Rows and Columns:
Emails are built with rows that contain columns. These are the available options for rows.
To add a row, click and drag the row into the email body, in-between, before or after an existing row of your template. If you want to display text next to an image, select the row with two columns. To find out what type of row a template contains, click within the background area and see the green outline and label.
In the example below, if you wanted this row to have three columns, you would need to add a new three-column row (above or below) and click and drag each content block individually to a column in the new row. You can then delete the old row. The number of columns in an existing row cannot be changed so you would have to use a new row.
Add content blocks:
Within a row, you can click and drag to add content blocks in a column or edit the existing content blocks by clicking on them.
To edit a Button, click on it to view the menu on the left-hand side. Here, you can change the text, hyperlink it, and customise the look of the button.
The Radius curves the corners of a button. And if you click on the space surrounding the button, you can edit the whole block.
Changing background colours:
To change the background colour of a row or a content block, make sure the green outline highlights the desired row or block. Then, from Block, change the background colour.
To change the colour of the grey background of the email, click the back button if you have been editing a row or content. From Global Settings, you can go to the Whole Email section These are the default settings for the email template. Here, you can change the Background colour of your email.
To keep consistent colours throughout your email, note the 6-character HEX code next to the colour and copy and paste the code into other content or block settings. You can also add your brand colours in the Branding section to access them easily.
If you change the colour of a row containing a PNG image or button, you may need to change the background colour from the Block Settings to match it, or you can delete the HEX code, and the background will return to transparent.
Adding a link:
When adding a link into your campaign, it is best to use a hyperlink or a button. It's best practice not to add the entire URL string into your template, as these can trigger spam filters. To add a hyperlink to your text, highlight the word(s) you want to add the link to, find the Insert Link button from the text box menu and paste the URL you want to include in your email. This link will then be tracked in your reports when your subscribers "Click" on the link in your campaign.
Instructions to add a link to an image are here.
Personalise your message by adding your subscribers' First Name and more with Merge Tags.
Editing the spacing in your email:
Besides aligning an element, left, centre, or right, you can also change the space between content elements with padding and margins from the Block section. The padding creates space within the block around the element. Margin changes the space around the outside of the block. Here is an example:
You can also change the margin and padding of a row by clicking on the row. To change the width of the entire email, head to Global Settings and change the number in Content Width.
Mobile Preview:
To see what your template or campaign may look like on a mobile device, click on the Preview & test button in the Editor and toggle between Desktop and Mobile.
Using company fonts not on the Font Family list:
To make sure the font you see in the editor is the font your subscribers end up seeing in their email client, we recommend sticking to the fonts available in our Font Family list. It is possible to use other web fonts with bespoke HTML code in our Code your own email editor. However, if the font is not supported by an email client or mobile device, it will default to displaying a different font that their system supports.
Can't see the whole menu bar in the editor / Can't scroll down in the editor
Make sure that your browser is maximised to full width on your screen. There may be a second scroll bar inside the editor.
Editor
Templates:
When you first start working on your design, you can choose an existing template from our library or start from scratch. Our EmailOctopus templates are available to customise either from the Templates tab or directly when creating a Campaign or an Automation. Once you've created a template and saved it in your Templates tab, you'll be able to select it during the campaign or automation set-up.
Rows and Columns:
Emails are built with rows that contain columns. These are the available options for rows.
To add a row, click and drag the row into the email body, in-between, before or after an existing row of your template. If you want to display text next to an image, select the row with two columns. To find out what type of row a template contains, click within the background area and see the green outline and label.
In the example below, if you wanted this row to have three columns, you would need to add a new three-column row (above or below) and click and drag each content block individually to a column in the new row. You can then delete the old row. The number of columns in an existing row cannot be changed so you would have to use a new row.
Add content blocks:
Within a row, you can click and drag to add content blocks in a column or edit the existing content blocks by clicking on them.
To edit a Button, click on it to view the menu on the left-hand side. Here, you can change the text, hyperlink it, and customise the look of the button.
The Radius curves the corners of a button. And if you change the toggle from Content to Settings, you can edit the block (the space around the button).
Changing background colours:
To change the background colour of a row or a content block, make sure the green outline highlights the desired row or block. From Settings change the background colour.
To change the colour of the grey background of the email, click the back button if you have been editing a row or content. From Settings, you can go to sections for Header, Page, Body and Footer. These are the default settings for the email template. Here, you can change the Page – Background colour.
To keep consistent colours throughout your email, note the 6-character HEX code next to the colour and copy and paste the code into other content or block settings. You can also add your brand colours in the Branding section to access them easily.
If you change the colour of a row containing a PNG image or button, you may need to change the background colour from the Block Settings to match it, or you can delete the HEX code, and the background will return to transparent.
Adding a link:
When adding a link into your campaign, it is best to use a hyperlink or a button. It's best practice not to add the entire URL string into your template, as these can trigger spam filters. To add a hyperlink to your text, highlight the word(s) you want to add the link to, find the Insert Link button from the text box menu and paste the URL you want to include in your email. This link will then be tracked in your reports when your subscribers "Click" on the link in your campaign.
Instructions to add a link to an image are here.
Personalise your message by adding your subscribers' First Name and more with Merge Tags.
Editing the spacing in your email:
Besides aligning an element, left, centre, or right, you can also change the space between content elements with padding and margins from Settings. The padding creates space within the block around the element. Margin changes the space around the outside of the block. Here is an example:
You can also change the margin and padding of a row by clicking on the row. To change the width of the entire email, head to Settings and change the number in, Width.
Mobile Preview:
To see what your template or campaign may look like on a mobile device, select the Preview and test tab in the Editor and toggle between Desktop and Mobile.
Using company fonts not on the Font Family list:
To make sure the font you see in the editor is the font your subscribers end up seeing in their email client, we recommend sticking to the fonts available in our Font Family list. It is possible to use other web fonts with bespoke HTML code in our Code your own email editor. However, if the font is not supported by an email client or mobile device, it will default to displaying a different font that their system supports.
Can't see the whole menu bar in the editor / Can't scroll down in the editor
Make sure that your browser is maximised to full width on your screen. There may be a second scroll bar inside the editor.
