How to Use Elementor Site Settings

Hi All it’s Ziv from Elementor,

Today I will show you how to use Elementor Site Settings, an easily accessible panel within the Editor where you can globally define your site’s settings.. all from one place. It syncs your team and your clients around how everything on your site should look and behave..Empowering you to create a cohesive design system and maintain consistency across your site.

Let’s check it out!

Inside any page you edit with Elementor, go to the panel on the left, and click on the top left icon. Then choose Site Settings.

Let’s start with Design System, which includes Global colors & fonts, and as it sounds.. Allows you to Manage Your Site Colors and Fonts More Consistently.

Let’s check out Global colors first.

(Global Colors offer you a more efficient workflow.)
You start by choosing your site’s four basic Global Colors… Then, go into any color style in Elementor, and set it to be one of the four colors.

For example, in this animated headline widget.. Instead of having a custom colour, I’ll click on the globe icon and set the headline to get the secondary colour and the Animated text the Primary one.. Note that the icon is blue now, indicating a global colour is set… and hovering over it shows you which one
[visual: set the headline + animated text colour from (custom) black to secondary + primary >

You can also add as many custom colors to the Global List, simply add it in the colour picker [visual: add #F33880 ] and click “create new global colour” … I’ll rename it “New Primary – Red”… and..then Click create to add it to the list
Now, let’s add it to some more elements on the page, As you can see,.. You can use these colours anywhere throughput your site

You can use these colors anywhere throughout your site. [visual: assign it to the same widgets: Heading + Button Background (from custom black)] Cool!

Let’s go back to Global Colors via this shortcut. [visual: use the shortcut in color style] and change the one we just added. As you can see, your entire site’s color scheme changes according to the new Global Color. [ visual: change the colours, finish at Orange: #FFB918 ] I’ll go ahead and change the name as well…. “New Primary – Orange”

Using the same logic of Global Colors,.. Global Fonts gives you control of your site’s text styles.

You start by choosing your site’s basic Global Font Styles.. As you can see, you can give each style it’s own set of typography. You can also give them a specific name, so it’s easier to work with. [ visual: click on some to demonstrate > click on navigation field to demonstrate ]

Update and, go to any widget that contains text, and choose the global style you want. [visual: set the “Summer 2020” text and set it to Primary, Text > back to Secondary]

You can also customize your own Global Fonts beyond the basic list and name them however you like. Simply set the typography and add it to the list like so…
[visual: family: Mountains of Christmas, size: 30 | give it a name: “New Secondary” > hit create] … then.. use it anywhere throughout your site…

Let’s check out this page,.. As you can see I already assigned the New Primary Orange Colour to a couple of elements on this page,… as well as the New Secondary Typography style.

Let’s change them and see how it affects the site.. First I’ll change the color [visual: via site settings > colours > change to purple: #F338AD > Change Name: – Purple] (find fix for section 2 z-index issue)

Next, In Global Fonts.. I’ll also change the New Secondary Style.. to a different font family and tweak it a bit [visual: change to Mouse Memoirs > Line-Height: 1 Letter Spacing: 1] ,… okay great, let’s update and go back to the previous page. Cool, Everything is updated accordingly!

These features are perfect for making changes to a website’s color scheme and typography without having to touch any code or CSS files, all from one place within the editor…you’ll be able to do it once, and know exactly which elements will be affected across your site,..
making website-rebranding, for example, a piece of cake (and fun) ! [visual: set animated text “bonsai tree” to primary text colour > set section second (via navigator or a patch) colour to New Primary Purple > set “summer 2020” typography back to Secondary ]

[visual: go to site settings > Theme Style ] Site Settings also includes Theme Style, which allows you to take over the global design layer normally handled by the theme..
This way you can set fallback styles for various (basic HTML) elements, such as, Headings, Buttons, Images and Form Fields.. No matter the theme you use.

These styles only come into play as a fallback, [visual: close site settings > click on button, clear background colour] if no definitions were set and can be used together with Global Colours and Fonts to create an even more streamlined Design System.

Just make sure to disable default colours and fonts from the settings page to make it work.
Just make sure default colours and fonts from the settings page.. are disabled .. to make it work. [visual: not via the shortcut > a simple cut to the settings page]

Click on additional settings to take you to Elementor Settings in the dashboard, and make sure to disable default colours and fonts to make it work.

Let’s check it out.. As you can see, you can change the [visual: change background colour to red: ] fallback style however you like. And You can also set it to be one of the global colours or fonts, giving you even more control in maintaining consistency across your site.

We have a dedicated video showing you Theme Style’s abilities, be sure to check it out so you can use it together with Global Colours & Fonts in the appropriate places.. [visual: show setting the buttons background colour to the new global colour]

Let’s move on to some more settings.
In site identity, you can easily set your site name and description.. And here.. You can easily upload and choose your site’s Logo…. and Favicon.. also known as the tab or bookmark icon.. it’s main purpose is to help visitors locate your page easier when they have multiple tabs open. [visual: pan zoom toward the tab]

In background, you can style the default background of all pages on your site.. globally.. from one place. Simply choose the background type, and style it to your liking [visual: click on both option to demonstrate gradient and classic options]

In Layout.. you can control the default layout settings of your site, such as content width and page layout, just to name a few.
For example,.. if you want Elementor pages to automatically be set to canvas when creating them, simply define that here and you’re good to go!
You can also set your Responsive Breakpoints.. over here..

In Lightbox you can set all the default styling of Elementor Lightboxes. We have a dedicated video showing you all of the Lightbox features, so be sure to check it out!

And last but not least, add your custom CSS over here, to really fine-tune the elements on your page.

Well that’s it!
Now you know how to use Elementor Site Settings,.. and use it to sync your team and your clients around how everything on your site should look and behave..
Empowering you to create a cohesive design system and maintain consistency across your site.
Saving you a lot of time while making editing easier and more efficient.

Have fun styling around and don’t forget to subscribe to our YouTube channel for more tips and tutorials!

Ciao For Now