Divi makes it very easy to change the color scheme. This is perfect if you purchase one of our templates or use a premade layout, but you want it to match your brand. The Divi Builder has several different ways you can do this, and it seems to be betting easier and easier to this. Each method I will show you has a time and place for it, which you will see if you watch the video and follow along. In this tutorial, I’m going to show you some of the built-in ways to change colors in Divi as well as show you how to do it with CSS. Let’s go!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
How To Use The Divi Builder Settings To Change Color Scheme In Divi
You can quickly and easily change the colors in the Divi Builder itself. There are some super handy efficiency tools like “Find and Replace,”“Extend Styles” and “Presets,” as well as filters like “Modified Styles.” Those will be very handy and allow you to update your color scheme in Divi very quickly. Let’s take a look at how these work.
NOTE: The video is the best place to learn for this tutorial!
Here are the four Divi Builder color-changing settings we are going to demonstrate:
Copy & Paste
Extend
Find & Replace
Presets
NEW: Global Colors (recent Divi update)
The image below shows an example of these options that would appear if you right-click the setting or click the ellipsis icon:
Copy & Paste Styles
This first one almost didn’t make the list because it is not the most efficient way to change colors in Divi. However, it is a way to do it, and it does come in handy. For example, to change the color of the H2 heading in this example, you would right-click on the color, select the “Copy Heading 2 Text Color,” and then go to another text module and right-click to “Paste Heading 2 Text Color.” This works fine if you are only changing a few items, but there are much better options if you want to change all the colors on the page or website.
Extend Styles
An even better way to change colors quickly is to use the “extend” feature. You can basically right-click on any setting in the Divi Builder and extend that value to other similar settings on the page. For example, if you right-click the H2 heading color and select “Extend Heading 2 Text Color” it would bring up a settings box like in the image below:
The dropdown selectors give you other options to extend it to any other modules like this:
There is also an option to choose where this change takes place, whether it is the selected modules in the entire page, or just in the current section, row, or column like shown here:
Find & Replace
Another way to change the color scheme quickly in Divi is with a similar tool but one that is even more powerful. When you right-click and select “Find & Replace,” it brings up a new settings window like this:
At first this feature appears similar to the extend styles, but there is an option to replace all that is super powerful. When this option is checked, the color replacement will not only affect the specific setting that you selected, but it will also affect any other setting and module that has that same color. This is super cool and powerful, essentially allowing you to change your color scheme in Divi with just a few clicks! Check out the video to see this in action!
Presets
The last option is probably going to be even more helpful, especially as this feature evolves in Divi. It’s hard to imagine an easier way to do this than find and replace, but presets does come with one super feature that none of the other three can match, and that is global power. So far, the three items we talked about only work on the current layout. But presets are global and affect the entire site, allowing you to set the color scheme of your entire Divi website very quickly. There are some caveats and things that Elegant Themes needs to recognize and address, but I can see this feature improving in the future and being a top feature of Divi.
To use the presets feature, simply choose “Apply Style To Active Preset.” This brings up a new warning box like this:
Notice the message here. Essentially it is saying it will affect all the other text modules on the website using this default presets.
If you want to learn more about presets and what I mean when I say there are issues with this method, check out my video on How To Use The New Divi Presets Feature.
Global Colors
Divi has released a new update on February 10th, 2021 to version 4.9 that includes a new global color managment system. This was not available when this tutorial was written or when this video was made, so I made a new video going over this new feature. This new global color system does not replace anything here, but rather takes it a step further. You still need to use the tools and processes shown here, but this other feature is absolutey important and you should check it out!
So now you know how to do this! Go have some fun with these tools! The next section is a complimentary lesson on how to change colors in CSS. If you purchase one of our child themes, you most likely will want to change the colors both in the builder like I’ve been showing you, but also in the CSS. This is easy to do as well, and I encourage you to keep going and learn how to do this in CSS as well!
How To Change The CSS Hex Colors In A Divi Child Theme
A Note To Our Divi Child Theme Customers
One of the reasons we are making this post is for our own customers. We use a system in our premium child themes that makes it super easy to change the color schemes, which means you can look at any of our demos and know that it is not limited to the color scheme you see. Usually we have two colors that needs changed, a main color and an accent color. The rest are strategically made with shades of gray. You can change these colors in the CSS of our child themes with a very simple process that involves copying the code into a code editor, using the find and replace tool for the hex color codes, and then pasting it back into the website.
NOTE: This is best demonstrated in the video accompanying this blog post.
Using A Code Editor
To change the hex colors in the CSS of one of our Divi child themes or layout packs, it works best to use a code editor. You could make the changes manually in the the code, but that would be very tedious. Using a code editor allows you to use a search and replace feature which will replace the colors in one click.
Download Brackets
There are many, many code editor options to choose from, but the one we use and recommend Visual Studio Code (made by Microsoft). You can download this program for free and install it on a Windows or Mac.
Copy & Paste The CSS
Once you have the code editor installed, create a new document. You can save this to your device with the extension .css. Select all of the CSS from the child theme style.css file. You can find this by going to your WordPress dashboard to Appearance>Theme Editor. From there, be sure to select the name of the child them in the upper right corner. Once that is selected, you will see a file called style.css which contains all of the CSS. Select it all and copy it to your clipboard. Next, paste the code into your CSS document in the code editor.
Find & Replace
Most code editors have a find and replace feature. In Visual Studio Code, this feature is located in the menu under “Edit>Find.”
Find…
The program will first prompt you input the code you want to locate in the file to replace. Go to your Divi>Theme Options to the color pallette and copy the six digit hex color. Paste this hex color into the box.
Replace with…
Next, the program will prompt you to input the code you want to use instead. Enter the six digit hex color of your choice.
Replace…
Once you the two values entered you can click to replace.
Copy & Paste Again
Now that you are done, make sure you select all and copy the entire CSS to your clipboard. Go back to the child theme’s style.css file and replace the old code with the updated code.
I hope you have enjoyed learning How To Quickly And Easily Change The Color Scheme In Divi. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe for more stuff like this.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
Divi Tutorials On YouTube
Our videos have views! Join subscribers and enjoy over video tutorials!
In this tutorial I will show you how to disable full site Divi Theme Builder template editing while working in the Visual Builder.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
Thanks for this great tip on how change the color scheme in divi theme 🙂
You’re welcome, Kirb! I hope this was helpful!