fbpx
The Admin Bar

How To Set-Up Global Theme Settings Inside Elementor

Dec 16, 2020

By: Dapo Babarinde

Filed Under:

This page contains affiliate links in accordance with our affiliate policy.
☀ Read in Light Mode

Setting up typography, colors, button styles, backgrounds, form field styles etc. separately on each and every webpage can be such a tedious work. Consistency with design is a goal all web creators seek to achieve, and with more pages comes the daunting task of maintaining a consistent design.

Imagine after almost completing a project and the client says, “Hey, can you please change the font on the website from Montserrat to Source Sans Pro? I just feel it will look better…” Suppose you have to do that on each page, try to picture the look on your face when you hear that from your client.

How about being able to set-up theme style globally within the Elementor page builder? WordPress themes does allow for customizer settings, however, you will likely have to start over, if the need for a theme change arises.

With Elementor, you can easily set-up all theme styling straight from the plugin’s user panel and preserve your choice of styling for a long time on your website. Referring back to the case of a client asking for a font change, with the global style settings in Elementor, all you need to do is go to site settings inside Elementor and then the typography (under theme style) and change to the font you want. The cool thing is, this change is effected all over the website, so you don’t have to make the change page by page. Did I hear you say, Awesome?

Moving on, some of the most common global settings you can manage from inside Elementor are:

  • Typography
  • Buttons
  • Images
  • Form fields
  • Backgrounds
  • Link styles

All these customizing can be done with a few clicks and in a matter of minutes.

Note that before you create the settings, Elementor will first notify you to disable its default colors and fonts. To do that, navigate to Elementor on your dashboard, then click settings under Elementor. Here you will see the options to disable default colors and fonts.

Now, here’s how to set-up global theme style in Elementor

To Set Default Colors Globally in Elementor

(1) On the Elementor editor, click the hamburger icon on the top-left corner. This will open the Elementor Style & Settings configuration menu.

How To Set Up Global Theme Settings Inside Elementor

(2) Next, click on site settings. This will open another menu, from which you can select your styling option

How To Set Up Global Theme Settings Inside Elementor

(3) Now, click on Global colors under design system. Once you’re in, you can set your desired colors and then hit the UPDATE button to save your settings.

How To Set Up Global Theme Settings Inside Elementor

You can also name your colors, if you want to.

Set Default Fonts Globally in Elementor

(1) Follow steps in 1 above, only this time click Global fonts in step 3.

(2) Once inside the global fonts settings, you can choose your preferred fonts for primary, secondary, text or accent. You also get the option to add more font styles.

For Headings and link Typography

(1) Follow the steps mentioned above in 1, and get to site settings.

(2) Now, click on Typography under Theme Style. Here, you can tweak the colors and typography properties for paragraphs, body text, and all six headline texts.

How To Set Up Global Theme Settings Inside Elementor

Remember that changes made here will be effected across the entire website. For example, any change you make on an H2 headline text will reflect on ALL H2 headline texts on the website.

Set Default Buttons Globally in Elementor

(1) Follow the steps mentioned above in 1, and get to site settings.

(2) Now, click on Buttons under Theme Style. There are so much customization options available for your preferred button style. You can change the default typography for buttons, set default text shadow, choose default text color for button text, set default button background color, padding, border radius and lots more.

How To Set Up Global Theme Settings Inside Elementor Edited Html 6a4a3ea8

In the same way as explained above, you can also set up global theme styles for images and form fields. For images, you can select your desired border type, border radius and even add box shadow if you so wish.

Wrapping Up

There’s so much you can do with the Elementor global theme settings.

There are few plugins that extends the functionality of Elementor’s global theme settings; notable among them is AnalogWP which enables a more advanced level of global styling. The plugin has both free and paid versions with an extensive Elementor template library.

I hope you found this article helpful and become more consistent with designs on your websites.

Dapo
Dapo Babarinde
Ascend WP

Dapo is a website designer and agency owner. He runs AscendWP, a whitelabel WordPress development service that helps digital agencies scale their web design service. His favorite moments are when projects are completed and clients are happy or when he’s listening to the latest Afrobeats music.

More from The Bulletin Board

Kyle Van Deusen
Sep 17, 2021
Strategy

How I Use Email Marketing in My Agency

Email marketing has provided an effective, one-to-many strategy for my agency — here's a look at why and how I do it.
Kyle Van Deusen
Sep 15, 2021
Strategy

Why These 5 Things Will Help You Win More Proposals

I've found 5 things that make my proposals stand out, get signed, and protect myself from scope creep. Are these in your proposal?
Kyle Van Deusen
Sep 14, 2021
Content Marketing

Web Agency FAQ's

A growing database of frequently asked questions web agencies can answer for their customers.
Kyle Van Deusen
Sep 14, 2021
Kyle Van Deusen
Sep 13, 2021

Humans v. Algorithms: Who are you writing for?

As if writing content wasn’t hard enough on it’s own — you have to walk a fine line between making...
Kyle Van Deusen
Sep 10, 2021

Join Our Community

The Admin Bar Facebook group is at the heart of what we do. Join in on the daily conversation and get involved.
Join the Community
tab phone 4k member
© The Admin Bar (a Division of OGAL Web Design) — All Rights Reserved
crossmenu