Global Styling

Style and design websites with freedom and flexibility.

With our editor we provide the option of both global and local styling.

Global Styling gives you the ability to change every aspect of every element, from overall font and colors, down to individual modules, buttons, text types, element spacing and much more.

Global styling has a number of clear benefits:

  • A single, central place to edit site-wide styling

  • A super-efficient way to differentiate from one design to another

  • A structured way to hand-over or take-over design of a website

basics in styling

Within global and local styling there are four main design elements to focus on - spacing, borders, backgrounds and typography. These define the design of rows, columns and modules, essentially the overall look and feel of the website. Watch the video below to see global and local styling in action.

SPACING

Margin determines the space outside an element while spacing determines the space on the inside. You can define margin and spacing for rows, columns and some modules.

BoRDERS

Adjust the styling of borders on rows, columns and some modules including the thickness, style (e.g. dotted) and color. You can also choose to round edges of elements.

background

You can easily define both global and local styling for your background settings including color, transparency and images to create unique affects across rows and columns.

typography

Typography is one of the most defining features of any website. Style elements like fonts, text sizes, colors and more for content elements like headers, content, buttons and more.

 

Framing

Within our own base-templates we have set up a number of possible options for the overall framing of your site:

Full Width

A template where the content area stretches the full width of the browser window.

Boxed

A template where the content area is boxed-in and centred in the browser window.

Side Menu

Coming soon, this is a template with a navigation menu and main content area side-by-side.

Global Layout Settings

Global Layout Settings include the Body, Main Wrapper and Content Wrapper. Adjusting these three settings allows you to design the overall frame of your website. You can create a unique feel for the website by adjusting the spacing, borders and backgrounds within these settings.

The illustration below shows the relationship between these three elements. Note that the Content Wrapper does not include the site's header or footer. Settings for these elements can create stunning and unique design for pages and websites as a whole.

Illustration of relationship between body, main wrapper and content wrapper.
 

Global Module styling

Within Global Styling you can define design and styling for modules, allowing you to style them down to the smallest detail, without even needing to code the CSS. The styling you define for modules here is the design that will be used as default when you then drag the modules onto the pages you're building. Remember you can always edit individual modules to edit "local" styling. watch the video below to learn more. 

 

Global Font & Color

The two crucial areas of Global Styling to understand are the Global Color palette, and the Body Font settings (which we will call Global Font).

Global Color

Global Color is where you set your colors to use on the website. We recommend using this as much as possible to increase efficiency.

We have set the three primary colors in our base templates' Global Color palette to a light, regular and dark version of the same color. This allows us to use these colors across the site for things like hover effects.

There are also three secondary colors which you can use in the same way, along with a range of grays for row backgrounds and uses elsewhere.

You can also use the custom colors to use less-common colors, if you need to add more.

Generally we would suggest sticking to no more than 2 main colors for a website.

Global Font

Global Font can be found under the Layout Settings > Body > Text area, where you can set an overall typeface to be used across the website.

Inheritance

Both Global Font and Global Colors (and all styling set globally) will be inherited by all the elements (assuming none have been over-ridden anywhere).

The inheritance also applies to any new pages you create, any new modules or features we release or anything you add to the site (for example e-commerce or blogs). Everything will inherit styles accordingly, assuming it has not been over-ridden locally.

All of this means that theoretically you can edit just one or two settings in the Global Styling section, and make very noticeable changes to your website.

Simple diagram explaining global color inheritance

Headers & Footers

The design of your website’s header and footer is very important both from a visual perspective but also for calls to action. Our editor gives you the ability to highly customise both your header and footer, just as you want. Build them up in the Global Styling area just like you build pages.

 

Local Styling / Page Styling

Local, or Page styling is done in the Pages area of the editor, where you build up the page and page structure. Local styling refers to the individual elements that you want to differentiate from the website's global, inherited style.