To change the theme colors in Elementor, you use the Site Settings to modify your Global Colors.
Changing your theme's default colors is a fundamental step in branding your website and ensuring visual consistency across all pages. Elementor provides a straightforward way to manage these key colors through its Global Colors feature. By adjusting these settings, you can define your brand's primary, secondary, text, and accent colors that are then easily applied throughout your site.
Here is exactly how you change the theme colors using Elementor's Global Colors:
Step-by-Step Guide to Changing Elementor Theme Colors
Utilizing the Global Colors feature within Elementor ensures that your color scheme is unified across your entire website, making future updates much easier.
- Edit any page in Elementor: Open any page or post on your WordPress site that you typically edit with Elementor. Click Edit with Elementor to enter the editor interface.
- Click on the Hamburger button: Once inside the Elementor editor, look for the three horizontal lines (often called the "Hamburger" icon) in the top left corner of the sidebar panel. Click this icon to open the Elementor menu.
- Go to Site Settings: In the menu that appears after clicking the hamburger icon, select Site Settings. This option controls global settings for your entire website.
- Select Global Colors: Within the Site Settings menu, find and click on Global Colors.
- Change Your Theme Colors: In the Global Colors panel, you will see options to modify your default color palette. Here you can change the primary, and secondary colors, text, and accent colors of your theme. Click on each color swatch to open a color picker and choose your desired shade. You can also assign custom names to these colors for easier identification.
| Global Color Type | Typical Usage |
|---|---|
| Primary | Main brand color, buttons, key elements |
| Secondary | Complementary color, backgrounds, supporting elements |
| Text | Body text color |
| Accent | Links, highlights, call-to-action elements |
After making your changes, make sure to click the UPDATE button at the bottom of the Site Settings panel to save your new global colors. These changes will then be reflected across all elements on your site that are linked to these global color settings.
By using Global Colors, you streamline your design process. If you ever need to update your brand colors, you only have to change them in this one location, and they will update everywhere they are used on your site, saving significant time and effort.
