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. Name your new Email Design, and if you want to copy a previous design that worked well to use in a new Campaign, do so here.
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. 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 - Styling Options
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 Caption & Image block
The above block style options are visible when you click on a Caption & Image block. The first section of settings you are able to alter is the Block Style. Changes made to this section apply to the Block level, meaning the whole block rather than the individual Caption or Text elements. Choose how many columns you would like, and select the Alignement of the block - do you want your image to be on-top or below the caption? You can also edit the Padding and Border settings of the block here.
Clicking on the Text element of the block will bring up the above settings under the Block Style tab. Here you are able to change settings such as Text Family & Colour, the background colour of the Text element, as well as the Padding.
If you select the Image within the block, you are able to edit things such as its Alignment left/centre/right of the element), the background image of the element and the padding of the Image within the block. Scrolling down will give you more options such as Border Style and CSS Options.
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. We advise to, as much as possible, use the settings under Block Style to edit things like Font Size and Family, to keep the coding behind your email concurrent.
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 down (or towards the right)
3. Move up (or left on creative)
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.
- Changing the Content Background refers to the the bacgkground colour behind the blocks, rather than the whole email itself.
Scrolling down further will allow you to edit things such as Text Colour from a top level, as well as Link Colour and other page settings (which you might have set if you'd run the SetUp Wizard initially).