If you’re using the Elementor version of Membership Site Builder templates, you can change the colors and fonts of the templates to match with your own brand within a few minutes. In this step-by-step guide, I’ll show you how you can change the fonts and colors for all the page templates quickly in just a few clicks!
The steps I’ll cover in this article will work for both the Keap and ActiveCampaign versions of Memberium.
What are Elementor Global Settings
Elementor Global Settings or Elementor Global Site Settings are a group of powerful design tools that allows you to control the design features such as colors, fonts, layout, logo, favicons, buttons, and much more from one central design area. Elementor identifies it as the Design System.
The Elementor Global Settings allow you to design or edit the elements and reflect the result on the entire site across all the pages you have on your site. It helps you stay consistent across the site and saves tons of time. The Elementor Design System controls an immense variety of settings but for keeping it simple I’ll cover just 3 of them – global colors, global fonts, and buttons. That’s all you need to know for editing your Membership Site Builder templates.
You can access Elementor Global Settings by going to any Elementor page or post and click the Edit with Elementor button at the center. When you edit the page with Elementor, you’ll see a hamburger menu icon on the upper left corner of the page. See the below screenshot…
On clicking the hamburger menu icon you’ll see the site settings screen as below…
Change the Colors On All Your Site’s Pages Instantly & Access Your Brand Colors Instantly Through Elementor
Elementor global colors setting allow you to change the color of the elements on all the pages in one go. The way it works is, you have a list of global colors as you see in the above image which you can use or edit.
These global colors are assigned to each Elementor element you have on your page. You need to carefully plan and assign global colors to the elements so that you can edit the set of desired elements only by editing one global color.
For example, all the headings or titles should be assigned one global color so that when you need to change the color of headings or titles on all the pages you’ll edit just that particular global color and the color of the headings or titles on all the pages will be changed.
The good news is we have already assigned global colors for all the elements in all the Membership Site Builder templates.
To find out which global color is assigned to the given element, you’ll select the element and go to the Style tab at the top, and hover on the globe icon.
Using global color for Elementor buttons is extremely useful because Elementor allows you to choose 4 different colors for each button element. Apart from choosing a background color and text color for the button you can select a different set to display background and text color when someone hovers over the button.
Choosing all 4 colors every time you use a button is time consuming. Using a global color for the button is a much smarter way to edit the button colors.
If you want to add a new global color you can click on the Add Color button and assign that color to the desired elements.
Manage and Change the Fonts Your Site Uses
Global Fonts is extremely useful for saving various font settings that you can use frequently on your Elementor pages. The most important thing about the Global Fonts setting is you don’t just select the font type but you can save size, weight, style, and few other settings as well.
Once saved, you can use all of those settings simply by assigning that global font to any element. You can use the global font for the button also.
This is a huge time saver since there is a minimum of 3 settings you need to define every time you use fonts. Saving global fonts for headings, subheadings, text, and button text will save you a lot of time as you’ll need at least 3 of those on each and every page on your site.
All the Elementor Membership Site Builder Templates Use Elementor’s Global Style Settings
Memberium now offers 3 different versions of Membership Site Builder page templates built with Elementor page builder for both Memberium for ActiveCampaign and Memberium for Keap versions.
The page templates for both the CRMs are slightly different than each other based on the functionalities they offer but all the template packs consist of ready to use page templates for the most commonly used pages in a membership site or an online program.
Apart from the attractive design combined with features offered by Memberium, and Keap or ActiveCampaign functionalities, these page templates are equipped with the Elementor Global Settings. You will be able to edit the colors and fonts on these page templates within minutes to match with your own brand.
I have listed step by step instructions for editing global colors and fonts in the Membership Site Builder templates below which will work for both versions of page templates, using Memberium for Keap or Memberium for ActiveCampaign.
How to Edit Global Colors in Elementor With the Membership Site Builder Templates
With Membership Site Builder templates you don’t need to go to Site Settings every time you need to edit the global color. You can edit the global colors from the page itself. Below step by step instructions will explain how you can edit the global colors in the Membership Site Builder page templates.
How to Edit Colors Fonts, Default Text and Headings
Step 1
Go to the page you need to edit and click on the ‘Edit with Elementor’ button in the center
Step 2
Select the element you need to edit the color of the font in and click on the globe icon from the Style tab. You can hover on the globe icon to identify which global color you need to edit. You’ll also see a tick mark on the global color in the list below indicating that global color is assigned to the selected element.
Step 3
Click on the Settings icon to access the Global Colors under Site Settings
Step 4
Now you can click on the color you want to edit, in our example White, and choose a different color from the color picker. The moment you change the color, you’ll see the change will reflect for all the fonts which are assigned that color. Here you can see the color of the title, description, and button text has changed.
How to Edit Button Colors
Step 1
Select the button element and go to the Style tab and click on the globe icon.
Elementor allows you to choose 2 separate colors for the button element under 2 different tabs, Normal and Hover. By default, the Normal tab is selected. For editing the Hover settings, you can click on the Hover tab.
Step 2
Click on the Settings icon as shown in the below screenshot to go to the Global Colors list under the Site Settings. You will be able to identify which global color you need to edit based on a tick mark you see in the Global Colors panel. In our case, it’s a ‘Primary CTA Button’ color.
Step 3
Now you can go ahead and click on the ‘Primary CTA Button’ color and pick another color from the color picker or add the color code. As soon as you change the color, the background color for all the buttons will be changed.
How to Edit Colors of Sections and Columns
Step 1
Select an Elementor section you want to edit and click on the globe icon for the color under the Background section on the Style tab.
If you need to edit the color of the columns, you can select the column element and click the globe icon from the Style tab.
You’ll follow the same steps as below for editing the background color for the columns.
Step 2
Click on the Settings icon to access the global colors under the Site Settings option. As shown in below screenshot the selected section uses a global color named ‘Secondary’ which you want to edit.
Step 3
Click on the Secondary color and choose another color of your choice from the color picker. If you have a color code you can directly enter the color code.
Once you change the color you can preview the change for the top section you selected.
You’ll need to click the Update button to save the change. Once saved, the change will appear on other pages too for the elements that use Secondary global color. Here is another example page that uses Secondary color.
How to Add or Remove a Global Color
If you need to add more colors as global colors to use you can follow the below steps
Step 1
Select a Text Editor, Heading, or Button element and under the Style tab, click on the globe icon.
You can select other elements too but it’s easier to locate the color with the above mentioned elements.
Step 2
Click on the Settings icon on the Global Colors panel
Alternatively, you can also click on the hamburger menu icon on the upper left corner of the page and go to the Site Settings > Global Colors option.
Step 3
Now you’ll see the list of global colors. To add a new global color click the ‘Add Color’ button at the bottom.
Step 4
A new blank global color will be added. You can click on the blank color and choose a color of your choice from the color picker or add a color code.
Rename the global color by clicking the placeholder text, in this case, New Item #8, and type a name for the global color.
Removing a global color is easy. As you follow above mentioned steps and see the list of global colors, you can hover the cursor near the global color to make the ‘delete’ icon appear. You can click the ‘Delete’ icon to remove the color from the global color’s list
If you delete a global color that is already assigned to the elements, by default, in absence of that global color the first global color in the list of Global Colors will be assigned to the element. In this case, it will be the ‘Primary’ global color.
How to Assign or Cancel a Global Color Setting for an Individual Element
Step 1
Select the element you want to assign or cancel a global color for.
Note: Under the Style tab if you see the globe icon is blue the element is assigned a global color, if not the global color is not assigned.
Step 2
Click on the globe icon and select a global color from the list for assigning to the element.
Once you assign the global color, the globe icon will appear in blue color.
To cancel the global color setting for that particular element, you’ll click the color next to the globe icon. The globe icon will turn Grey which indicates the global color is not assigned to it anymore.
How to Change Elementor’s Global Fonts With the Membership Site Builder Templates
Elementor offers multiple settings for global fonts. You can increase or decrease the size, select the font family, and choose the weight to set thickness.
You can also style the global fonts in different ways. You can embolden or italicize the fonts, use an underline, overline, or strikethrough line, choose letter case, and even control the space between letters and rows. I have covered each option in detail in this next section.
Step 1
Select any element that contains fonts and click on the globe icon under the Style tab
Step 2
Click on the Settings icon for accessing the saved global fonts
Step 3
Click on the Edit icon for the global font you want to edit.
You can select the font family from the dropdown, increase or decrease font size and select the weight of the font which is basically how thick you want the fonts to be.
The Transform setting allows you to set if you want the global fonts to transform the text in uppercase, lowercase, capitalize or leave them normal. This can be very useful for consistency. For example, you can choose uppercase for headings or titles on your page, so when you apply the global font to heading or title even if the text is not in uppercase the global font will transform it according to your setting.
The Style setting helps you choose if you want the text to be italic, oblique, or normal. And the Decoration setting offer options to underline, overline, or strikethrough (Line Through) the text.
You can also control how much space you want between two rows and between letters with Line-Height and Letter Spacing options.
How to Change Set Global Fonts
Step 1
Select the element you want to change the global font for and click the globe icon under the Style tab
Step 2
Select any global font from the list and click on the Update button to save the changes.
How to Add or Remove a Global Font
Step 1
Select an element that supports fonts like Heading, Text Editor, or any other and click on the globe icon from the Style tab
Step 2
Click on the Settings icon for the global font to go to the Global Fonts under Site Settings
Alternatively, you can click the hamburger icon and directly go to the Global Fonts option.
Step 3
Now, from the Global Fonts section under the Site Settings, you will click the Add Style button. It will add a new blank global font for you to edit.
Step 4
Click on the edit icon for the new global font and set various options like font family, size, weight etc. I’ve already covered each option in the above section.
If you want to delete a global font you can continue following the next step.
Step 4
When you hover the cursor near the edit button, a Delete icon will show up. Click the delete icon and confirm your choice in the pop up you’ll see next.
You need to be careful when you delete the global font. If a global font is assigned to any element throughout your site, that element will lose the setting and by default, it will be assigned the first global font in the Global Fonts list, in this case, Primary Title/ Heading as you can see in the above screenshot.
How to Assign or Cancel Global Font Setting for an Individual Element
Step 1
Select an element you want to assign a global font to and click the globe icon from the Style tab.
Step 2
Click on the global font you want to assign to the selected element from the list. It will apply all the global font settings such as size, font family, weight, and any other style or decoration you’ve set for that global font.
Step 3
Click on the Update button to save the changes.
How to Change the Colors in the Footer Area
The colors in the footer are not controlled by Elementor. To edit the colors in the footer you will go to the Appearance > Customize setting from your WordPress admin dashboard.
You’ll find the Footer Bar option under Footer.
From the Footer Bar settings, you’ll be able to change the colors for the background, links and the text. You can also change the color of the border if you wish.
Here is an example of us changing the footer background color.
If you want to control the link and text color in the footer bar with CSS, you can add the CSS from the Appearance -> Customize -> Additional CSS screen.
Best Practices for Using Global Colors and Fonts
Global colors and fonts are powerful features and they can save a tremendous amount of time one may spend otherwise styling individual elements. However, proper planning is required to use these features effectively for avoiding confusion in the future.
Below are some of the best practices you will keep in mind while using global colors and fonts for using them effectively:
- It is always advisable to keep the global colors and font settings as simple as possible in terms of naming and assigning to the elements.
- The effectiveness of global colors and fonts lies in assigning them carefully to the Elementor elements on the pages. You want to make it stupid simple so that if someone else needs to edit the pages he shouldn’t struggle to understand which elements are controlled by which global font or color. Consistency is crucial for optimum use of global fonts and colors.
- Another important thing is naming the global fonts and colors in a self explanatory way. The easiest way is to use standard names of elements you find in a typical web page, like heading, subheading, button, CTA button, text, background etc. This way if you need to change the color or font of headings or text on the page, you can edit and change them consistently on the entire site.
- You should avoid using too many global fonts and colors on the site since it may create unnecessary confusion such as which global fonts and colors are assigned to which elements etc.
Conclusion
Throughout this article, I showed how global fonts and colors can save you time and help you stay consistent across the pages on your site. The step by step instructions covered in this article will help you edit the Elementor versions of Membership Site Builder templates for Memberium for ActiveCampaign and Keap, quickly and effectively to match with your own brand.
