Style Guides: Overview

The Style guide controls how your pages look. Or at least what the default colours and style settings should be.

Here’s a quick Table of Contents to help you navigate this guide:

• Two Types of Pages that Use Style Guides:

  • For 2.0 Landing Pages and Site Pages

  • For System and Community Pages

• Create a New Style Guide or Switch to an Existing One

• Review All Your Style Guides or Change the Default Style Guide

If you prefer to learn using videos, check out our How-to Video on Style Guides. For more in-depth knowledge, our Training Workshop on Style guides explains this in detail! 

Types of Pages that Use Style Guides

Now, there are two types of pages that use Style Guides.

• 2.0 Landing Pages and Site Pages - These are all the pages that you can build and design yourself (either inside or outside a site). You will be able to choose a style guide for the pages and then use those colors while creating your designs.
  
  

• System and Community Pages - These are the pages that Simplero creates for you (for example: your order forms, scheduling link booking page, worksheets, surveys...). Some of the colours on these pages can be defined using style guides. 

Here’s how it works: 

For 2.0 Landing Pages and Site Pages:

You can have as many style guides as you like and use them for pre-formatting the Sections, Rows, Columns, and Elements on your pages. 

You’ll normally want to start by defining your style guide first before you build your page sections.

The style guide for these pages comes from the style guide of the Landing Page, or the style guide of the Site (if it’s a Site page).

For Site pages, go to Marketing >> Main Website or Content >> Sites and switch your site to the New Community Experience. Here’s our guide on how to do that. Then select the Style Guide tab:

You can also press the View site in new tab icon in the top right-hand corner:

Then press the “S” menu in the top left-hand corner and choose Edit Style Guide from the dropdown menu:

For Landing Pages, head to Marketing >> Landing Pages, open the page and click on the Style Guide button:

Now you can customise its colours, fonts, buttons, borders, and shadows:

You’ll notice that in every level of the page (Sections, Rows, Columns, Elements) you can click on the title to open the Format Settings on the right sidebar.

We’ll pull the colours set up on the style guide, but you can override/customise them using the 3 dots option on the far right for each of them:

You can also find these settings by clicking on the Section, Row, Column or Element on the Navigation List on the right:

For System and Community Pages:

New Community Experience and System pages such as Scheduling Links and Order Forms use style guides to determine the colours and fonts, among other styling features. 

These pages can use one of the following style guides:

• Site Style Guides - if the URL is linked to that site

• The Default Style Guide - if the URL is not linked to a site 

  • The changes in your default style guide affect all system pages and community pages (when not linked to a site)

If you want to know what each one of the colours in these style guides affect, head to this guide.

The changes in your default style guide affect all system pages and community pages.

Create a New Style Guide or Switch to an Existing One: 

To create a new style guide or pick from another existing style guide, click on the Style Guide button and press Switch at the top left of the style guide editor:

Then click on Create a new style guide or select from the existing ones:

NOTE!

• Style guides are available across your account and can be used in multiple landing pages at the same time.

• If you make any changes to a style guide that is used across multiple landing pages, these changes will apply to all of them unless you’ve used custom formatting.

Style guides are available across your account and can be used in multiple Landing Pages or Sites at the same time.

WARNING! If you make any changes to a style guide that is used across multiple landing pages or sites, these changes will apply to all of them unless you’ve used custom formatting.

Review All Your Style Guides or Change the Default Style Guide 

You can edit your current Style guides under the Marketing tab >> Style Guides:

To change your default Style guide to a different one, hover over any other available Style guide or create a new one, then click on Make default:

To edit a style guide click on the grey pencil icon:

On the left side bar you'll find Colours, Fonts, Buttons, Borders, and Shadows settings:

Inside Colours and Fonts, you'll notice there's a System colours and System font section:

They determine colours and fonts used by default in system pages (pages that do not belong to a site or community).

The editors across Simplero also pull colours from your Default Style Guide colour palette, as well as the Site Style Guide colour palette if you are in the context of a site.

You can add as many custom colours as you need on the Account and/or Site style guide, so they are available to you on the editor:

IMPORTANT NOTE! Order forms use the Main Website style guide unless you navigate to the order form through a different site that uses its own Style guide. You can learn more about how the colours for order forms and other system pages work in this guide.