How to Disable Astra Global Colors In Elementor

If you use Elementor with the Astra theme on your WordPress website, you may have experienced global color issues.

The Astra theme offers the Global Color Palette feature, enabling you to manage colors throughout your website.

This feature allows you to incorporate your brand colors into Astra’s global colors, which can then be utilized anywhere, including Elementor Global Colors.

If you do not wish to use the Astra color palette and prefer to use the Elementor color palette instead, you can disable it using custom code snippets.

Let’s begin,

How to Disable Astra Global Colors in Elementor?

When you Go to your Astra Theme Customizer > Global > Colors you will see the option to set Global colors on it.

Again if you Open any page with Elementor and go to the style tab and under the color option the same theme color is available to you.

If you don’t want those colors to appear in your Elementor panel then you can follow the below steps to disable it.

Step-by-Step Guide to Disabling Astra’s Global Colors

Method 1: Modify the functions.php File

1. Access Astra Theme Customizer:
   • Navigate to Astra Theme Customizer > Global > Colors to view and set global colors.
2. Open Elementor:
   • Open any page with Elementor, go to the Style tab, and observe the theme colors available under the color option.
3. Add Custom Code Snippet:
   • Insert the following code snippet into your theme’s functions.php file to disable Astra Global Colors in Elementor:

# Disable Astra Global Colors In Elementor

add_filter( 'astra_disable_global_colors_in_elementor', '__return_true' );

Tip: Use an Astra Child theme to preserve these changes during theme updates.

Method 02 – Using Code Manager Plugin

1. Install WPCode Plugin:
   • Go to Plugins > Add New, search for “WPCode,” and install and activate the plugin.

2. Add Custom Code Snippet:
   • Navigate to Code Snippets > Add Snippets.
   • Select “Add Your Custom Code (New Snippet)”.
   • Paste the provided code snippet, set the code type to PHP, name the snippet for easy reference, and activate it.

# Disable Astra Global Colors In Elementor
add_filter('astra_disable_global_colors_in_elementor', '__return_true');

Now You can Paste the given code, make sure to change the code type to php snippet, add a name to the code to remember it, and activate the code snippet.

After that Astra Global Color won’t appear in Elementor Color settings.

Conclusion

Disabling Astra’s Global Colors in Elementor ensures that your Elementor color settings remain uncluttered, allowing you to fully control your design palette. Follow the steps above to apply the necessary filter and streamline your color management.

If you have any questions, feel free to ask in the comment section.

By following these methods, you can effectively manage your site’s colors and optimize your workflow in WordPress, ensuring a cohesive and efficient design process