How to Quickly Make Site-wide Color Changes to Your Divi Website

by | Nov 18, 2020 | DIVEMBER, Divi Tutorials | 11 comments

Welcome to D I V E M B E R (Divi + November) here at Divi Life! All month long during November we’re going LIVE on Facebook & YouTube, and publishing new tutorials, freebies, new product features, new product releases, and more! Make sure you subscribe to our email list so you don’t miss any of the action or awesome free stuff! And, follow us on Facebook & YouTube to be notified when we go LIVE.

In this tutorial, I’m going to show you how to quickly (and easily) make site-wide color changes on your Divi website!

There are some excellent efficiency/workflow features built into DiviΒ such as “Find & Replace” and “Extend Styles”, among others. However, these features are limited to the single page that you’re editing. Plus, it’s only content within the Divi Builder. Any colors that are outside of Divi, such as in the Theme Customizer, Plugin Settings, custom CSS from Theme Options, etc. can not be edited with these tools.

When Would I Need to Make Site-Wide Color Changes to my Divi Website?

There’s a lot of different scenarios when this would come in handy, but I’ve laid out a few common scenarios that are likely to come up for a lot of users.

  1. When Using a Premium Divi Child Themeβ€” Premium Divi Child Themes are like starter websites or templates. They can be purchased from places (such as here at Divi Life) and can give you a huge head start on a website project by having a completed design to customize. However, unless you love the included color scheme, you will likely want to change things up. Rather than going to each page and manually changing the colors, you can use the method in this tutorial to change colors site wide super easily!
  2. When your client wants to change color schemes last minuteβ€” For web designers, this happens more often than we’d like to admit. The client decides they don’t like the current color scheme and wants it changed throughout the site. Well now you can change the colors EVERYWHERE all from one place, without pulling your hair out.

How to Make Sitewide Color Changes on Your Divi Website

  1. Install the Better Search Replace Plugin
  2. Search for the color you want to change, and replace with the updated color

That’s as easy as it gets! Of course you can repeat the steps for as many different colors as you need to update.

Note: We recommend doing a full website backup first, just incase anything goes wrong!

Step 1: Install the Better Search Replace Plugin

Install the Better Search Replace Plugin by Delicious Brains. There are others, but make sure you don’t use one that simply RENDERS the change. We want it to actually CHANGE it in the database. We want to be able to remove the plugin once we’re done with it. If it renders the change then it forces us to keep the plugin installed.

Step 2: Search for the Color You Want to Change, and Replace with the Updated Color

Before you do this step, make sure you do a full backup (and download the backup) just in case. Since we’re actually making changes to the database, you want to make sure you can quickly revert in case something goes wrong.

Now you can navigate to Tools > Better Search Replace, and enter the color value you want to change in the Search For field, and the color you want to change it to in the Replace with field, as shown in our screenshot below.

As shown above, make sure to check the box to make it “Case-Insensitive” so it will ignore capital and lowercase letters.

You can also leave the box checked for “dry run” to see what happens. Think of it as a practice to see how many tables/cells were affected, and another chance to double check your inputs.

Then, uncheck the dry run box and click the Run Search/Replace button again to commit the changes. You’ll then see a confirmation message like this:

And that’s it! You can obviously repeat these steps as many times as necessary for additional colors.

It’s important to note that sometimes caching can keep changes from showing. It’s possible for some of the changes to show, but the color to not be updated everywhere. This is due to the different ways that styling is saved throughout a website. Make sure you clear your website caches all the way.

Before:

After:

Pretty easy, huh?Β (the logo was updated separately since it’s an image and not a color within the website)

Don’t forget to subscribe below to get access to all the Divi tutorials and freebies we’re adding this month!

11 Comments

  1. Avatar

    Hello,
    Here is a really simple and practical plugin!
    Thanks for the tutorial

    Reply
  2. Avatar

    Replay in Austin, Texas.
    Thanks for the tip on the plug-in and tutorial. I’m so excited to use this time saver!!

    Reply
  3. Avatar

    Great plugin and an outstanding time saver! Love it 😍

    Replay: South Carolina

    Reply
  4. Avatar

    I have used that plugin 100 times for url or http to https… but never ever did I think to use for anything else! MIND BLOWN. Thank you for another great tutorial.

    Reply
    • Avatar

      You’re welcome! Glad it was helpful πŸ™‚

      Reply
  5. Avatar

    Replay: Pennsylvania

    Tim as always great information. I’ve always been hesitant to use search and replace type plugins. I feel a little more confident now and look forward to putting color changes into practice.

    Reply
  6. Avatar

    Great tip. Wondering if it would also replace colors that have an opacity or in gradients?

    Reply
    • Avatar

      Yes, absolutely. It will work for gradients automatically, since the gradient will have the color as-is included in the code. But for colors with the opacity, you will need to search for the exact RGBA color value with the exact opacity, and then replace it will the exact color you want and opacity.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This