RBA Cash Rate: 4.35% · 1AUD = 0.67 USD · Inflation: 4.1%  
Leading Digital Marketing Experts | 1300 235 433 | Aggregation Enquires Welcome | Book Appointment
Example Interest Rates: Home Loan Variable: 5.20% (5.24%*) • Home Loan Fixed: 5.48% (6.24%*) • Fixed: 5.48% (6.24%*) • Variable: 5.20% (5.24%*) • Investment IO: 5.74% (6.40%*) • Investment PI: 5.49% (6.32%*)

How to Define Global Colours in Elementor

The website we deliver is built on top of a complete and comprehensive Elementor installation. Elementor is a third-party site-builder that sits on top of WordPress which permits full control over the design of pages. A small but significant Elementor feature is the assignment of Global Colours. The Global Colour panel permits you to quickly alter the colours of certain objects site-wide via a single panel. We have assigned custom global colours to a large number of objects on your page, such as the primary header banner colour and secondary colours - this makes is very easy to create or alter most of the styles on your website.

  Locating the Global Colours in Elementor

Access Global Colours is made from a page opened up in Elementor, so we'll use the 'Test Page' that we include on most installations. This page is used when we screenshare for the purpose of demonstrations. Open 'Pages' from your WordPress administration dashboard and scroll down to the 'Test Page'. Click on 'Edit with Elementor' and wait a few seconds for the page to load.

Edit Test Page in Elementor

  Pictured: The 'Test Page' is used when we screenshare for the purpose of demonstrations. Open 'Pages' from your WordPress administration dashboard and scroll down to the 'Test Page'. Click on 'Edit with Elementor' and wait a few seconds for the page to load.

Once the page loads, we'll use the menu in the top-left to navigate our way to the 'Global Colours' options. Select the hamburger menu item in the top left, select 'Site Settings', then select 'Global Colours'. The Global Colours' panel is returned to the page. In this mode you cannot edit pages, so once the options sre defined we're required to select the 'X' in the top right of the 'Global Colours' panel to return to normal editing mode.

Elementor Global Colours

  Pictured: Select the hamburger menu item in the top left, select 'Site Settings', then select 'Global Colours'. The Global Colours' panel is returned to the page. In this mode you cannot edit pages, so once the options sre defined we're required to select the 'X' in the top right of the 'Global Colours' panel to return to normal editing mode.

The screenshot below shows the options made available within Version 3.9 of the website framework (September 2023). A large number of options are added to the Version 4 framework. Select each of the colours in turn and select as appropriate. Selecting each colour will apply it to the screen as a preview. When complete, click 'Update'.

Elementor Global Colours

  Pictured: The screenshot shows the options made available within Version 3.9 of the website framework (September 2023). A large number of options are added to the newer Version 4 framework. Select each of the colours in turn and select as appropriate. Selecting each colour will apply it to the screen as a preview. When complete, click 'Update'.

Most of the stylistic options for various website features are defined in Yabber, so the Elementor options apply to the standalone Elementor design.

You can obviously come back to the Global Colours panel at any time.

  Need to Update Styles?

While unlikely, there are times where updating the Global options may cause your website to return a wishy-washy rendering. To update Elementor's CSS style files, select the Elementor option From the WordPress administration dashboard and then follow the 'Tools' menu option. Click the 'Regenerate Files & Data' button.

Elementor Regenerate Files and Data

  Pictured: To update Elementor's CSS style files, select the Elementor option From the WordPress administration dashboard and then follow the 'Tools' menu option. Click the 'Regenerate Files & Data' button.

The action should correct any wonky stylistic errors. If an invalid page is returned yet again, select 'CTR-SHIFT-R' in turn (but hold down together) on your PC to force a refresh of your browser cache.

■ ■ ■

  Elementor Design FAQs

Elementor is the third-party site-builder shipped with our website framework. We've created a large number of blocks and features that are associated with most modules we build. The following set of FAQs relates to Elementor Design and Customisations that are not connected to Yabber.

The website we deliver is built on top of a complete and comprehensive Elementor installation. Elementor is a third-party site-builder that sits on top of WordPress which permits full control over the design of pages. A small but significant Elementor feature is the assignment of Global Colours. The Global Colour panel permits you to quickly… [ Learn More ]

  Related FAQs

Share this FAQ

Share on Facebook
Share on Twitter
Share on Linkdin
Share on Pinterest