Elementor Global Settings Explained – How to Correctly Set up the Site Settings for a Great Workflow

Get Elementor: https://be.elementor.com/visit/?bta=27702&nci=5383

Hosting I love and recommend for most clients and for those on a budget: https://www.hostg.xyz/SHBd2

🧙 Wizards of Webcraft – A series where I’ll be reviewing your websites – https://www.reialesa.com/wow/ Apply now!

How to Choose a Good Body Font for Your Website: https://youtu.be/F67u3KXncRw
Elementor Units Explained – How and When You Should Use PX, REM, EM, %, VH and VW: https://youtu.be/wKLXXE3Tq_c

A good workflow depends on automating whatever you can and making it as easy as possible for yourself. Global settings in Elementor are there for that exact reason. They’re also known as site settings. But not all of them are created equal and you don’t need to set everything up. Some things likely won’t even impact your website at all. And what’s the deal with Global Fonts and Typography? Isn’t that the same thing?

No, it’s actually not. But it is confusing. However, let’s start with the easiest thing first – global colors. Global colors are colors that you can use and reuse on your website with just a couple of clicks. If you change a global color in the site settings, it’s going to change anywhere it’s applied. So, you can pretty much change the entire color scheme of your website in a few clicks.

Global Fonts work the same way. Global fonts is where you should add in and style any fonts you plan to use throughout your website. So, all of the font families, the sizes, the weights, the line heights. And, as is the case with global colors, once you change a global font, it’s going to change anywhere it’s applied. Just make sure you make them responsive. You can do that the same way you make anything responsive in Elementor, just enter the tablet or mobile mode and change what you want to change.

Under Typography, you’re going to see H1, H2, H3 and so on. These are HTML H tags. And their only purpose is SEO. They have nothing to do with how your fonts actually look. These tags essentially tell search engines what your website is about and how it’s structured. The H1 tag is the most important and you should only use one H1 tag per page. But the heading the H1 tag is attached to doesn’t have to be bigger than others. In fact, I’ll often use smaller, more descriptive text with my more important H tags, because it’s better for SEO. So it’s about finding a balance between how your users read your website and how search engines read your website.

So, under typography, just change out the colors of the links. This will affect the links you add in your text editors. Otherwise, I recommend you leave everything else alone.

For your buttons, images and form fields, you can set up some basic styling in the site settings. I usually don’t, I just ignore these settings, because for these less common elements, I just copy and paste the style from one I already created. It’s easy and fast either way, so you can ignore these and not feel bad about it.

The same thing goes for the header and the footer. I always create my own headers and footers from scratch by using the theme builder, so these settings don’t even apply to them. Feel free to skip these entirely. When it comes to the site identity, these are the same settings WordPress gives you by default. Just set up your site name, description, logo and favicon. In Elementor, the site logo widget uses the logo you set here.

Under Layout, I recommend you set up the Content Width. Whatever amount you set here, that’s how large containers that are set to ”Boxed” will be by default. I also definitely recommend you set up the Container Padding if you’re unsatisfied with the 10 pixel padding that your containers have by default. Setting up the Gap between elements is a good idea as well. Just make sure your padding and your gap between elements are responsive if you need them to be.

The rest of the settings are not needed often. I rarely, if ever, use them and I don’t think you’ll be using them much yourself. I don’t use the Custom CSS feature under Site Settings either. I prefer adding my CSS directly into my admin bar by pressing ”Customize” and then ”Additional CSS’.

#elementor #globalsettings #sitesettings

Get in touch:


Don’t be shy! Let me know what you’d like to see next, ask me anything related to design or just simply say hi.

Please note that some of the above are affiliate links, which means I earn a commission if you make a purchase, at no additional cost to you. Thank you very much if you decide to use them!