The Divi Find & Replace update was added back in Divi version 3.11 ( updated 07-26-2018 ) and added a new right-click option to Find & Replace various Divi Builder option settings.  By right-clicking on any Divi Builder setting and selecting the Find & Replace option, you can choose to search for that setting anywhere it appears in your page (or selected area) and then replace it with a new setting of your choice. This means that you can load a pre-designed Divi layout and quickly change the color scheme (plus fonts and any other Divi builder settings) for the entire page (or selected elements) in a couple of clicks.

search and replace in Divi

Control where to apply the Find & Replace

When you right click on a setting in the Divi Builder and choose the Find & Replace feature, you will be given a range of options to determine where the setting is applied on your page. You can choose to apply all changes to various locations or elements or to the page as a whole.

You can also use the checkbox in the Find & Replace options to select “Replace all found values within every option type, not limited to …” This expands the Find to look beyond the option type you are currently in and is useful when you need to get every instance of the setting changed at once, regardless of where it may be located.

find replace divi options

How to change a Divi layout color scheme with Find & Replace

In this example, we are going to use the free Divi Builder layout designed for a pottery studio home page to quickly change the color scheme using the Find & Replace right-click options. This page has 3 different colors that we will change that appear in 25 different locations on the page. By using Find & Replace we can edit just the 3 colors and have it reflected in all 25 places on our page which is a huge time saver. The image below shows us the default page layout, with the color locations highlighted and the finished page.

find replace divi color scheme

Change the main highlight color #fdb467

There is a light brown (#fdb467) main highlight color that is being used on buttons, links and social media icons. In total this color is used 20 times on the page and without Find & Replace it would need to be modified in each area separately. You could cut this down a little by copy and pasting styles, but this still requires a lot more steps than using Find & Replace.

To change the main highlight color on the page;

  • Open the settings for the 1st button at the top of the page which uses #fdb467 as the background color.
  • Open the Design tab and open the Button section
  • Right-click on the Button Background Color and click on the Find & Replace menu item
  • You can then add the new highlight color into the Replace With input as #5dade2
  • Check the Replace All checkbox at the bottom to replace all instances on the color
  • Hit the Replace button at the bottom and all 20 #fdb467 colors on the page will be replaced with #5dade2

change divi highlight color

Change the background colors #1e1d1c and #282624

Next, we are going to change the black (#1e1d1c) and off-black (#282624) background colors that are used in the 1/3 columns at the top of the page and on section backgrounds towards the bottom of the page.

change divi background color

To change the 1st background color on the page;

  • Open the row settings in the 2nd section which uses #1e1d1c and #282624 as the column background colors.
  • Open the Background section
  • Right-click on the Button Background Color for column 1 and click on the Find & Replace menu item
  • You can then add the new background color into the Replace With input as #006784
  • Check the Replace All checkbox at the bottom to replace all instances on the color
  • Hit the Replace button at the bottom and all #1e1d1c colors on the page will be replaced with #006784

To change the 2nd background color on the page;

  • Open the row settings in the 2nd section which uses #1e1d1c and #282624 as the column background colors.
  • Open the Background section
  • Right-click on the Button Background Color for column 2 and click on the Find & Replace menu item
  • You can then add the new background color into the Replace With input as #008789
  • Check the Replace All checkbox at the bottom to replace all instances on the color
  • Hit the Replace button at the bottom and all #282624 colors on the page will be replaced with #008789

column background replace color

This shows you the basics of how the Find & Replace feature works and how it can save you a lot of time when developing your website with the Divi Builder. The feature is not just limited to changing colors and will work with any of your settings and options within your Divi Builder. Just right-click in the builder and select Find & Replace. Hopefully this handy feature will save you some extra development time in your next Divi project.

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close