Using Custom CSS in DIVI

Adding Custom CSS in DIVI Webpages.

Divi! One of the most popular Theme Builders comes with flexible tools to develop an incredible website in a few clicks. It has some functionality which attract not only learner or bloggers but also Website Designer / Developers. Implementing our own CSS is among such feature of Divi which make Normal Users or I.T. Professional use Divi again & again.

You can’t only add custom CSS using Divi Theme Builder to Single Web Page but can also embed it from Multiple Pages to a particular Module’s smallest part & many more. This make Divi really versatile and user-friendly WordPress page builder. Divi  comes with Built-in Custom CSS Inputs which allows Users to add Advanced Responsive CSS codes.

Here we have listed down several ways to add or embed custom CSS to pages created using Divi Theme, as well as illustrate where to add custom CSS is convenient & where you can use embed CSS which will make your Website load faster.

Divi has several ways to Additional CSS to our website never mind if it’s Section, Row, or a single module. we can’t list them all but have listed the most used methods which will surely make your work run smoothly.

1. Embed Inline CSS in the module’s content.
2. Add CSS in the Advanced tab of the modules, Rows, or Sections.
3. Using Theme Customizer to Add CSS.
4. Embed CSS in Divi Builder of page or Blog Settings.
5. Inserting Code module in Page for including CSS.
6. Appending “style.css” file of Divi child theme.
7. Including CSS in Custom CSS Box of Divi Theme Options dashboard.

Where not to Add CSS.

If you haven’t installed any of Divi Child Theme that mean you are using core DIVI theme then don’t ever add your CSS to style.css file (Appending “style.css” file of Divi child theme). You don’t have to worry in case of using Divi Child Theme you may alter & add custom CSS in style.css. It is because DIVI overwrite style.css file whenever Divi is updated.

Do you like to know What is Divi? How to Use Divi Theme Builder?

Why Some CSS doesn’t work in Divi.

1. Incorrect CSS

CSS code you have used might contain some syntax errors check whether you have closed all opening parentheses or else use the CSS Checking tool to check your CSS code syntax. Some tools are listed below

2. Class or Id is used Incorrect or doesn’t exist.
You may have delete or recreated module, row & section using Divi’s Front End Editor later on you forget to give it a Class / Id or have given another name. Cross check your structure in such case.

3. Cache Memory.
Nowadays Web hosting uses Cache Memory to load your website faster & reduce duplicate CSS Loading. Some Wordpess site has Plugins to manage Cache. While designing Webpages this cache is not cleared frequently result in old CSS is rendered even though you have altered it many time. So while designing your website, it’s better to disable the cache system. Once everything is running smoothly enable it again.