Drag and Drop Landing Page Editor (Overview)

In this article we will be looking at some of the functionality that the drag and drop Landing Page tool has to offer.

“But wait!” I hear you say, “What would I use them for?” Well quite a lot actually! Below is a list of what our customers use them for…

  • Have an issue creating content on your web site to direct you recipients to from email, why not use a Landing Page?
  • Keeping the content reserved for the recipient e.g. content that you would like to keep on the public domain, such as offers, events, and competitor sensitive info!
  • Web Capture forms - Collecting and updating info on your contact records while you sit back and relax…well kind of!
  • Similar to the above, Preference Centers (the unsubscribes first page)
  • Personalised Content using contact data that you have stored against the contact record i.e. 'Hi Jack welcome to'
  • Dynamic Content is a great way to Personalise the page base again on what you have stored against the contact record. In this case we change the content of the page based on the contact record, rather than just displaying it.

These are just a few example of the great functionality that Landing Pages can provide!

If you have further question or simply would like to find out more that we don't cover in these help articles, please contact support or your account manager.

Creative - Landing Page


1. Select Creative/ Landing Pages
2. Select 'Add New Landing Page'
3. Select GatorCreator
4. Provide a name for your page
5. Click 'Create New Landing Page'

Selecting a Template

1. Select a template from one of the template directories.

There are three different template areas for you to choose from, as highlighted below. You can click on each of these tabs to preview the template options available to you.

Styled templates - examples of layouts using colour and imagery to help you visualise the look of your campaign. These are customisable once you select the template, and any changes you make will not overwrite this example template.

Basic templates - examples of templates in grey-scale with placeholders instead of images, providing you with a blank canvas to  build your Landing Page creative.

Custom templates - you'll find the templates our design team have created especially for you here, or ones that you have created yourself.

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.

Running The Wizard

1. Select the setup wizard

2. Click on the colours to customise the template according to your palette.

There are two colour swatch pickers available for you to select different colours from. You are also able to input hex codes, and over time you will see your custom colours appear in the Recently Selected tab. Click ‘Select’ when you have chosen your colour.

3. The second step after choosing your main colour palette is the overall style (a bit like CSS).

Here you can select the defaults for your 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 Landing Page canvas to build your creative.

These range from styling options, to function based blocks such as Java script or web capture controls.

The blocks highlighted on the left have the ability to be duel purpose i.e. either text and button, or web capture and button.

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

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

5. Next to 'Save and Exit', there is a dropdown arrow which allows you to save what you have done as a template.

6. The Icon allows you to save this block to your 'Library Blocks'.

7. The Icon allows you to add dynamic content rules to the block, so you are able to manipulate the content depending on arrival at this page.

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, if you're editing a module.

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

11.  'Return to Blocks' lets you finish editing and return to the main options.

Editing Core Modules

The options within the Block Style section apply to all blocks that contain text elements.

Any of the options applied to 'Selected Text Element' can be applied to all of the block, or all 'Text Element' blocks within the design which is a good time saving option.

Editing Text Button Block Style

 

1. Choose between one, two, three, or four column layout.

2. This is the background colour of the module.

3. As illustrated, this is the background image of the module.

4. As illustrated, this is the border width for the module.

5. As illustrated, this is the border style for the module.

6. As illustrated, this is the border colour for the module.

7. Padding controls the margin between the edge of the content and the content itself.

For the media element you have selected i.e. an image, you have many customisation options:

  1. This will determine how the image is aligned in its block. This can be left, right, or centre.
  2. Ticking this box allows you to hide the image.
  3. These options allow you to make the image full width on a mobile, or choose to hide it on a mobile device. This is useful if you don't think the image would work well in mobile view.
  4. Choose the background colour here.
  5. This allows you to show advanced border options. This is for changing different sections of the border in terms of width, style, and colour.
  6. This changes the overall border width for the selected element.
  7. This enables you to change the style of the border. This can be solid, dotted, dashed and more.
  8. This sets the colour of the border.
  9. This will round the corners of the border so they don't appear sharp.
  10. This gives the image a degree of padding which you can determine.

Editing Text Button Block Content

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 be able to add tracked links to surveys, web pages and document links. You can also point to other Landing Page pages to create a story board effect, using the symbols you may be familiar with from the GatorCreator email editor.