Style Guide

Use this page to style the base styles for the site

Colours

All the colours are set up under global colours in elementor’s site settings tab. Go there and change them and you’ll see them change in real time. Don’t change the names of the colours and try to match up the colours as close as possible to keep the integrity of the templates. Remember to set these colours in CSS under Reference Colours so that you can use them in CSS

Primary Colours

Primary Colour 1
Primary Colour 2
Primary Colour 3
Secondary Colour 1
Secondary Colour 2
Secondary Colour 3

Action Colours

Action Colour 1
Action Colour 2

Basic styles

Use the elementor site settings tab to set the basic styles of all the headings, body copy, links and secondary button (default button) styles. Below will show you a visualization of how it will look.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body Copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

A – Link

UL

  • List Item 1
  • List Item 2
  • List Item 3

OL

  1. List Item 1
  2. List Item 2
  3. List Item 3
Click here

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body Copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

A – Link

UL

  • List Item 1
  • List Item 2
  • List Item 3

OL

  1. List Item 1
  2. List Item 2
  3. List Item 3
Click here

Colour Variations

Use the elementor site settings tab to set the basic styles of all the Headings, body copy, links and secondary button (default button) styles. Below will show you a visualization of how it will look

Use Class: colour_option_one

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body Copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

A – Link

UL

  • List Item 1
  • List Item 2
  • List Item 3

OL

  1. List Item 1
  2. List Item 2
  3. List Item 3
Click here
Use Class: colour_option_two

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body Copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

A – Link

UL

  • List Item 1
  • List Item 2
  • List Item 3

OL

  1. List Item 1
  2. List Item 2
  3. List Item 3
Click here
Primary Button

Use class: primary_button

Click here
Primary Button

No class needed

Click here
Primary Button

Use class: tertiary_button

Click here
Primary Button

Use class: primary_button

Click here
Primary Button

No class needed

Click here
Primary Button

Use class: tertiary_button

Click here
Primary Button

Use class: primary_button

Click here
Primary Button

No class needed

Click here
Primary Button

Use class: tertiary_button

Click here