How to Change Divi Theme Accent Color on One Page

Today I’m going to publish a quick Divi summer tip (note: this article was originally published in August 2017). If you ever wanted to change the accent color (the color of the links) on one particular page of your website, I will now let you know in this article how you can do it.

I decided to write about this, as I’ve just had one client who actually had her website divided into 2 different sections and wanted to use a different color scheme on the second section. So I will write a quick tutorial below on how to achieve it.

You maybe already know that it is possible to use custom CSS code for just one particular WordPress page or post created with the Divi Builder. It is a great feature that I find really useful, as you don’t have to apply custom CSS code to your whole website, but just one particular page. And we will use exactly this feature to achieve a different theme accent color on one page.

So, to set a custom accent color for one page (or post) of your WP website, just enter the following code into the Custom CSS field of that particular page:

 

a:link { color: #ff9a1a; }
.et_pb_contact_submit, .et_password_protected_form .et_submit_button, .et_pb_bg_layout_light .et_pb_newsletter_button, .comment-reply-link, .form-submit .et_pb_button, .et_pb_bg_layout_light .et_pb_promo_button, .et_pb_bg_layout_light .et_pb_more_button, .woocommerce a.button.alt, .woocommerce-page a.button.alt, .woocommerce button.button.alt, .woocommerce-page button.button.alt, .woocommerce input.button.alt, .woocommerce-page input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce-page #respond input#submit.alt, .woocommerce #content input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce a.button, .woocommerce-page a.button, .woocommerce button.button, .woocommerce-page button.button, .woocommerce input.button, .woocommerce-page input.button, .et_pb_contact p input[type="checkbox"]:checked + label i::before {
color: #ff9a1a;
}

 

This will change the color of all Divi clickable elements like links or buttons. You can leave out some of them that you don’t need. And don’t forget to replace my color code #ff9a1a; with your desired color.

You will find the custom CSS field for a page when you click on the Divi Builder settings icon on the top right corner (the hamburger icon) – check the screenshots below:

 

 

Finally, you might also like to check out my article on how to make images grayscale with CSS.