Custom CSS in your Landing Page

In our Landing Page Editor we have now added the ability to use Custom CSS and CSS Classes on blocks.
This allows you to achieve a higher level of customisation for your page such as button hover colours and animations.

We strongly advise that if you want to use this feature you have an advanced knowledge of CSS. This is to ensure you do not cause design issues within your email designs and templates.

 

 

CSS Overview

When using the Custom CSS feature you must do so in this order.

First, click into the block itself and type in the class name, located under the 'Block Style' tab.
Then you can go into the 'Page Style' tab, select 'Add Custom CSS' and add in your CSS for each class specified.

Please Note: Whilst this feature is available to use in GatorCreator for your email designs, we do not recommend doing so unless you are confident it will render well across all email clients.

Adding Classes to Individual Blocks

First you need to add a CSS Class to the required block. If you wish to add multiple classes then please separate them with only a space.

To do this:

  1. Select the block you wish to add the class to.
  2. Select 'Block Style'.
  3. Add the CSS Class.

 

Adding in your Custom CSS

  1. To add in your CSS make sure you have not got an element/block selected then click on 'Custom CSS'. This will bring up the above box.
  2. Add in your CSS.
  3. Select 'Add Custom CSS'.

 

Any styling added to blocks and elements in your page design via the side bar have a higher display priority than the custom CSS you set.
So if an element is not displaying as styled you need to check the side bar design features aren't overwriting your CSS.