How to Add Custom CSS to Your Divi Website

by | Jan 6, 2021 | Divi Tutorial

In this tutorial, we show how to add custom CSS to a WordPress website built using the Divi theme. Divi is a powerful theme that also comes with a front-end page builder. As such, you typically don’t need to worry about CSS as you can style pages and elements via the page builder directly.

How to Add Custom CSS to Your Divi Website __ Image 1

Although, there are instances where you need fine-tuned control over some elements that Divi does not control. In such situations, you may need to add your own custom CSS to handle the job. This tutorial covers four different ways to add your own custom CSS to a Divi WordPress website.

**Note that all methods shown in this tutorial will save your custom CSS through theme updates. If you make any changes to Divi’s core theme files (style.css) you will lose all custom CSS once the Divi theme updates.

Method 1: WordPress’ Customization Tab

On the WordPress backend, navigate to Appearance >> Customization >> Additional CSS. When you open this tab, you will be able to add any CSS code needed for your specific purpose. Be aware that any CSS added here is applied site-wide. This means that the CSS could apply on any page of your website, so be cautious about your changes.

How to Add Custom CSS to Your Divi Website __ Image 2

If you use Method 1, you can see the changes your CSS makes in real-time across your site. You can view the changes you make without saving so you can always revert in case you mess up. Using Divi, you can also switch between desktop, tablet, or mobile view to see the impact of your CSS on all common screen types.

Method 2: Divi’s Theme Options

On the WordPress Divi backend, navigate to Divi >> Theme Options >> General. On Divi’s Theme Options General tab, scroll down to the bottom of the page and you will see a section named “Custom CSS.” This section is where you can add your own custom CSS to your WordPress Divi website. Note that any CSS code that you apply here will also be added site-wide.

How to Add Custom CSS to Your Divi Website __ Image 3

Method 2 is simple to use and quick to make changes. Just note that when you save changes via Method 2, you will need to refresh any web page to see the update live.

Method 3: A Child Theme

A child theme is a subset of a main parent theme that allows you to make slight modifications while maintaining a majority of the original theme. Every child theme consists of it’s own style.css file where you can add in your own custom CSS. To create/access the style.css of your child theme, you will likely need FTP access and a code editor to make the changes. Again, any CSS added here will also be applied site-wide.

How to Add Custom CSS to Your Divi Website __ Image 4

Method 4: Divi’s Page Settings

All methods mentioned above apply CSS site-wide. If you want to add custom CSS to a specific page only, Method 4 may be best. Navigate to the page you want to add the custom CSS to and then open Divi’s Visual Builder. Once the visual builder is open, click on the Page Settings button (circular button with 3 dots at the bottom of the page) and go to the Advanced tab. On there, add your page’s custom CSS code to the Custom CSS section and whatever you add here will ONLY be applied to this particular page.

How to Add Custom CSS to Your Divi Website __ Image 5

Method 4 is a good option when individual pages need specific CSS. A benefit of this approach is that all CSS changes will only apply to the given page and cannot impact the rest of your website. A downside is that if your website has lots of pages, it may become difficult to remember and manage the pages with specialized CSS.

Final Tips, Tricks, and Resources

  • Comment your CSS: Always comment your CSS to remember the intention of each CSS snippet. Comments will allow you to keep your code neat and organized. Even a simple comment such as “Changes menu color” will do wonders.
  • Be Precise: Give elements classes and ids so you can always target specific elements and your CSS changes will only apply to the elements you intend to target. Especially since CSS could apply sitewide, you need to be cautious about your CSS rules.
  • Keep Learning: Check out the resources at W3 Schools to learn more about CSS, CSS functions, CSS selectors, and more.

Divi Theme

Divi is one of the best WordPress themes and one of the most powerful front-end website builders on the market. Divi is easy to use for beginners and allows endless design expression for professionals. Divi simplifies the hassles website development to make more time for website design. If you are interested in purchasing Divi, click the link below.

Need additional help?

If you have any questions about the content in this post, please feel free to reach out! We’d love to hear from you.

If you need a new website, a website redesign, or consultation related to any website question, please contact us today! We can schedule a consultation with you to get on track and work towards a solution to your problem. Redsence is ready to help you redefine your online presence today.

Disclosure: Some of the links on our Redsence Blog Posts to any recommended products are “affiliate links.” This means if you click on the link and purchase the item, we do receive a small reward for referring you to the product. It is no extra cost to you.

Related Posts