7+1 different ways to add CSS code to Divi

7+1 different ways to add CSS code to Divi

7+1 different ways to add CSS code to Divi

Fabio Sarcona
October 23, 2018

One thing is clear: Divi with its versatility, allows you to create any kind of layout. But very often, to get something really unique or simply to improve the standard look of Divi, you need to use CSS code.

In this article, I want to show you 7 different ways to add CSS code to your Divi site plus an advanced and efficient way to manage and maintain your CSS code.

Are you ready? Let’s go!

1. In your Theme options panel

This is perhaps the fastest and also the most used method, but personally I only use it to do quick tests of the code and never for normal use.

2. Within a module code

Andy Train in his post, called it “The Best Hidden Feature of Divi”. I’m talking about the module Code that allows you to add HTML, CSS and JS code to your page but the strong point of this method is the code that you will insert in the module, it will work only for that page, so without affecting the appearance of other pages or the performance of the entire site.

I myself have chosen to use the module code to add the CSS code needed for the Divi pre-made sections for sale on Needyesterday.

A method very appreciated by our customers because it allows to have all the code in a single section or row, and to be able to import and export them without the need to use a plugin to manage the HTML, CSS and JS code.

If you want to know more, I suggest you read Andy’s article, which explains in an excellent way all the various use cases.

3. In the Advanced tab of each section, row, or module

Personally I almost never use this option because I prefer to have the CSS code all in one place, but you can also use this option to add your own CSS.

Also, after one of the recent Divi updates, you can add custom code for the Hover state.
Note: This option only works when using the Visual Builder.

4. In the page settings

You can also add your CSS code in the page options, and as with the module code, the CSS code you add in the page options will only affect that specific page.

5. In the Theme customizer

Another interesting alternative for adding your CSS code is the “Additional CSS” field in the Theme Customizer.

6. In the style.css file of your Child Theme

If you ask me what method I recommend, I would definitely tell you to use a child theme and add your CSS code inside the style.css file. This will allow you to manage your custom CSS code efficiently because when you have to apply changes, you can open the file with your favorite editor and make changes quickly and easily.

7. CSS Inline

The inline CSS method is one of the least used methods and the reason is that it weighs down the web pages, so the performance will be worse and also “dirty” your pages because you would have CSS code scattered in various elements. A real fun when you have to do maintenance or even make a little change… 😀 lol…

8. Advanced method: Multiple stylesheets

As I mentioned at the beginning of this article, I want to show you an advanced and very efficient way to add and manage your CSS code.

This method uses multiple stylesheets with the advantage of separating your CSS code according to a specific part of the page (for example for the footer) or for example for add-ons like Woocommerce.

Here’s how this method works:

1. You have to create a folder inside your Child Theme and call it CSS;

Inside the folder, create .css files for each part or plugin to which you want to add your CSS code.

In the case of this example, I created 5 stylesheets for the:

  • blog.css;
  • header.css;
  • footer.css;
  • modules.css;
  • woocommerce.css.

Fabio but how do I create files with the .css extension? It’s very simple, you can create them using one of the various code editors like Sublime or Atom that you can download for free.

But to make our stylesheets work properly, we have to tell WordPress to load them and to do so we will use a simple function that loads the main style sheet /style.css and our individual stylesheets.The function will be added to the file function.php and below you can see how it looks:

I know that if you have little experience with PHP code, what you see may seem incomprehensible, but you just need to know that to load our stylesheets, you need a function like this to tell WordPress where your CSS code is and how to load it.

Note: To make it easier to understand this method, I have attached a Free Child Theme that I have created and that already includes the CSS folder and the PHP function shown above. In this way you can see closely how it works and of course you are free to use the child theme as the basis for any of your projects.

If you want to learn more about this topic, here are some great resources:

Conclusion

As you have seen, there are many ways you can use to add CSS code to Divi, but my advice is definitely to avoid adding css code in various parts of your site, because the management and customization could become a real nightmare. In many cases I happened to work on sites that had CSS code scattered EVERYWHERE!

I let you imagine my happiness … -.-

Did you like this tutorial? Do you have any questions? Let me know in the comments!

I am Fabio Sarcona, a freelance Web Designer/Developer with more than 6 years of experience. I am also a Divi Expert author of various tutorials and founder of Creative Child Themes and Needyesterday.

Follow Me