How to Update Colors in Divi with the Find & Replace Tool
In this tutorial, I will show you how to change your color palette and update colors in the Ramona Child Theme. This is not a deep dive into Divi’s color tools such as Global Colors. To learn more about the color management tools available to you in Divi, I recommend checking out this post on the Elegant Themes blog.
Note: I recommend having your colors picked out ahead of time as you will need your HEX values throughout this tutorial. The Divi Color Palette allows for eight colors. If you want to use the palette to help you select your colors, that works too.
1. Set Colors in the Color Picker Palette
In the sidebar, go to Divi > Theme Options.
Under the General tab (selected by default), there is a section called Colors Pickers Default Palette. Select each circle to update the colors. You can either enter the HEX values, if you know your colors ahead of time, or use the Color Picker. Once you’ve updated all the colors, hit Save Changes.
Note: This change will not actually update any colors throughout the site. This simply updates the color palette available to you when opening any module going forward.
From here, you can go page-by-page and begin adjusting colors. The exception is font colors as those will be adjusted when we update the font selections. In the next step, I’ll show you how to update the background of the Homepage hero section as an example.
2. Change the background color on the Homepage
In the sidebar, go to Pages > Locate the Home page link > Click on Edit With Divi to launch the builder.
Due to a header that overlaps with the first section on the page, you’ll need to open the Wireframe View. Click the purple circle button at the bottom center of the screen to expand the menu (if it’s not already expanded) > Select the icon on the far left that looks like a rectangle with two squares below it.
Once in the Wireframe View, open the first section (the blue frame) by clicking on the gear icon. Once the section is open, you can switch back to the Desktop View to see your changes as you make them. Just select the desktop icon in the lower-left corner of the screen. Within the Section Settings, expand the Background section and select the color of your choice.
Hit the green checkmark to Save changes.
Save the page before exiting.
3. Change the colors of the timeline dots on the Experience Page
The Experience page and Services Alternative page use a timeline feature with a colored dot. Rather than changing each of those elements individually, we’ll use a shortcut to update those colors all at once.
In the sidebar, go to Pages > Experience > Edit with the Divi Builder > Hover over the first blurb (the gray frame) and click the gear icon to open the module.
Select the Design tab > Expand the Image & Icon section.
Under Image/Icon Background Color, right-click on the current color (the bigger circle with the eyedropper), and in the flyout menu, select Find & Replace.
Under the Find This section, keep the current color selected. From the Within dropdown box, select All Modules. From the Throughout dropdown box that appears, select This Section. Select the color you want to change to and check the box to Replace All. Hit the blue Replace button. Once the module refreshes hit the green checkmark button to Save changes.
Save the page before exiting.
Repeat these steps on the Services Alternative page if using that layout.