Drag and Drop Email Editor (Overview)
Read the guide below to find out about core functions of the Drag and Drop editor:
Creative - Email
When creating a new email from the Creative tab, you'll be presented with the two options: GatorCreator (our drag and drop editor) or GatorMail (our HTML editor).
Select GatorCreator and Create New Email to begin.
Selecting a Template
Once you've selected GatorCreator to build your email creative, this is where you'll begin. There are four different template areas for you to choose from, as highlighted above. You can click on each of these tabs to preview the template options available to you.
1. Styled templates - examples of layouts using colour and imagery to help you visualise how your campaign could look. These are customisable once you select the template, and any changes you make will not overwrite this example template.
2. Basic templates - examples of templates in grey-scale with placeholders instead of images, providing you with a blank canvas to build your email creative.
3. Seasonal templates - examples of festive templates available for you to use.
4. Custom templates - you'll find the templates our design team have created especially for your instance here.
You can click on any of the templates to preview the full design, with the option to scroll, before choosing. When you have chosen a template you want to start customising, simply click the 'Select' button below it.
The first options you'll be presented with is whether you'd like to 1. run the setup wizard, or 2. go straight to the content. Please note, the editor is disabled until you have selected an option.
1. Yes, I'd like to run the setup wizard: You'll be presented with a few options to set your primary, secondary and tertiary colours (we recommend using your company colour palette).
2. No, take me straight to the content: as it says on the tin, get stuck in.
The Setup Wizard - Select Colours
Click on the colour tabs to customise the template according to your palette. Click 'Select' when you've chosen your colour.
There are four different colour swatch slots available to choose your colours, as well as being able to input hex codes, and once you've used the tool more, a recently selected tab.
The Setup Wizard - Styling Options
After choosing your main colour palette you can set the overall style (a bit like CSS).
Here you can select the defaults for page and module colours, font, size, and link styles.
Once you've completed this step, you can click 'Finish Wizard' to start customising your modules and content.
The blocks on the left show the various options you can drag onto the email canvas to build your creative. Unless marked with a number, the icon depicts the layout of the module.
1. Email Links: This is typically used in the pre-header of the email and contains 'View Online' and 'Send to a Friend' links.
2. Social Share: This block allows you to link to your social media pages using the official icons. You can add or remove using the dropdown list within this block.
3. Caption Social: This block allows you to add social links with a caption for your company details and any other text you wish to add.
4. Unsubscribe: This module contains the standardised opt out wording and link.
1. Content - edit the module you've selected.
2. Block style - edit the style of the module, such as font, colours, padding etc.
3. View the text version of your creative.
4. Test Centre - View your preview responsively, on desktop, inbox, and mobile. Also test the design with the Test feature.
5. Next to save and exit, there is a dropdown arrow which allows you to save what you have done as a template.
6. On each module you'll see the red bin icon, which allows you to delete that module.
Please note: there is no undo option.
7. This icon allows you to duplicate the module you have selected.
8. You'll also see the option to move the module by dragging it up or down the canvas.
9. If you're editing a module, 'Return to Blocks' lets you finish editing and return to the main options.
Your content is automatically saved as you make changes, so you only need to manually save when you're exiting the editor.
Editing core modules
The options in the section apply to all modules that contain text elements.
Editing text button block style
Please note: this is not a design, it is purely to help illustrate controls.
1. Choose between a one, two, three, or four column layout.
2. As illustrated, this is the background colour of the module.
3. Controls border settings. Border width must be specified for these to apply.
4. Padding controls the margin between the edge of the content and the content itself.
Editing text button block content
Double click on the text to edit the copy and how it looks. Highlight the text to update the format, such as underline, bold, colour, links and more.
You'll also be able to add tracked links, Landing Pages, surveys, confirmation opt in, unsubscribe and view online using the symbols you may be familiar with from using GatorMail editor.
When editing the Social Share module, the left menu will show the options available.
1. Delete row
2. Move up (or left on creative)
3. Move down (or towards the right)
4. Add another network: click here to select the available options.
5. Once you've finished, click return to blocks to continue customising your creative.
Remember to save your work regularly to avoid losing your design
In page style you can set the page background colours.
- Here you can select the colour you want your background to be. You can enter your HEX code or select a colour from the colour selector.
- You can also have an image as your background. This allows you to create much more personalised and gripping emails to match a theme or brand.
- If the image can't display in the recipients email client, then you can choose a background colour to fall back on. We highly recommend doing this to ensure your email design appears correctly.