CommuniGator Resource CentreGatorCreator ArticlesDrag and Drop Email Editor (Overview)

Drag and Drop Email Editor (Overview)

Read the guide below to find out the core functionality of our 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.

Select a template to begin

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.

Where to begin

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 colours to customise the template according to your palette.

There are four different colour swatch pickers 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. Click 'select' when you've chosen your colour.

The setup wizard - styling options

The second step after choosing your main colour palette is 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.

Content blocks

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 row 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. Unsubscribe: this module contains the standardised opt out wording and link.

Core options

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. Preview your creative: with options to view your preview responsively, on desktop and inbox.

5. Your content is automatically saved as you make changes, so you only need to manually save when you're exiting the editor.

6. Next to save and exit, there is a dropdown arrow which allows you to save what you have done as a template.

7. On each module you'll see the red bin icon, which allows you to delete that module. Please note: there is no undo option.

8. The icon allows you to duplicate the module you have selected.

9. You'll also see the option to move the module by dragging it up or down the canvas.

10. If you're editing a module, 'return to blocks' lets you finish editing and return to the main options.

Editing core modules

The options in the section apply to all modules that contain text elements.

 

Editing text button block style

For the purpose of making it easier to visualise the two background colour options, this module has been recoloured. Please note: this is not a design, purely to help illustrate controls.

1. Choose between one or two column layout.

2. As illustrated, this is the background colour of the module.

3. As illustrated, this is the background colour of the content, within the module.

4. Controls border settings: border width must be specified for these to apply.

5. 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 zones, surveys, confirmation opt in, unsubscribe and view online using the symbols you may be familiar with from using GatorMail editor.

Social Share

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.

0 Comments

Add your comment

E-Mail me when someone replies to this comment