How to use the Live Editor

Chris Quiroz -

The Live Editor can be used if you wish to make changes to the text in your site and wish to see the changes live/ Try the live editor for making in page changes to the style of various and commonly used elements within your site, such as headings, titles and links. 

In this Article...

How to Use the Live Editor

Accessing the Live Editor

To access the live editor:

  1. You must be logged in as an administrator.
  2. Click on the Eye icon in the bottom left side of your administrative dashboard in order to access your Homepage.
  3. On your homepage, click the Edit mode button located in the top right hand corner of your page. 
  4. After accessing the live editor, your page will be in edit mode, ready for configuration.

How to Edit the Title of your Site

Although you can edit the text for the Title of your Site through The Basics, you can also edit the text and the style of the text through the Live Editor. You can also make these changes for the Subheading, Links and the Footer of your homepage To change the style of an element when in Edit Mode:

  1. Scroll over editable items.
  2. Editable elements will have a message saying "Click to edit this item"

The text of the homepage can be edited by Exiting Edit Mode as you do not need to be in Edit Mode to edit this text.

CSS Selector

After clicking on an element, a CSS selector dropdown will appear where you can configure the style for the element that was clicked. Depending on the element selected, change the:

Element Description
Font You can edit the Font of the text.
Font Size

You can edit the Size of the text. The sizes you can choose from are:

  • Default (Based on Theme of site)
  • Tiny
  • Small
  • Average
  • Large
  • Larger
  • Huge
Font Style

Change the style of the Font. You can only have one style applied at a time.

  • Normal
  • Bold
  • Italic
  • Bold & Italic
Visibility In some cases you may wish to Hide an element from your users. In which case you would change the visibility setting to Hidden. As an administrator the text will still appear as a faint watermark on the page, however when exiting the text will not appear. The rest of the page will also shift slightly so that you are not left with a white-space where the text should be.
Color Change the colour of the font.
Background Colour Change the Background Colour behind the font. NOTE: You cannot update the background colour for Links.
Custom Text

Adding Custom Text will override the text currently displayed on the page. For the Title and Subheading the original text will still be displayed within The Basics of the site. NOTE: You cannot update the background colour for Links.


Previewing Mobile Devices

To preview how your page will look in an alternative device:

  1. Click the monitor dropdown located in the toolbar
  2. Select the device to use in the preview.

The Devices you can select are:


  • Full (Desktop)
  • iPad (1024x768)
  • iPhone 4(320x480)
  • iPhone 5 (320x568)
  • Blackberry Z10 (345x521)
  • Nexus 4(384x598)
  • Nexus 7(966x603) 

Exit the Live Editor

To exit the live editor:

  1. Click Exit located on the toolbar at the top of the page.

Changes are saved automatically therefore you do not need to Save any changes before exiting the Live Editor.

Return to Top

CSS Editor

Use the CSS editor to add custom CSS to your page. 

To access the CSS editor:

  1. Click the live editor dropdown located on editor toolbar and select CSS editor.
  2. Add your own custom CSS using the editor.
  3. Once you've finished adding your CSS, Click Save to exit the CSS editor.
  4. Click Exit at the top of the page to exit live editor mode.

Return to Top

Editing Global Styles

Instead of editing each item on a one by one basis, edit the global styles of multiple elements.

To access the global styles:

  1. Click the live editor dropdown located on editor toolbar and select Edit global styles.
  2. Select from a variety of elements to edit from the entire site.
  3. After configuring your global styles, Click Exit at the top of the page to exit live editor mode.

Return to Top

Have more questions? Submit a request


Please sign in to leave a comment.