You already know how to add custom css into the Divi theme options field. But, what if you start to get how the css works and want to add custom css to lots of different elements of your site?

Add CSS and JS Divi site

I do not use lots of plugins on my site (max. 12 plugins).

Yet, this one is always with my Divi sites:

Plugin: Simple Custom CSS and JS

YouDivi’s templates uses lots of custom CSS and JS. To keep every line of code well organised having this plugin is a must.

Here is a quick video on how to set it up the main.css and main.js in your Divi theme site.

Advantages of using a plugin to customize CSS and JS

01. Organize by categories all your edits and changes in your code.

Organising your code helps to write it faster and look for mistakes easier.

02. Load site faster by writting all CSS and JS in the <footer>.

By default, when you add code to the Divi theme options it all goes to the <head> part of the website. This means the code will load first, then the rest of the body – when the main information about your site is on. If you have too many lines of code it can bring the overall loading time way up!

Sometimes putting the code on the <head> part is necessary. When styling the menu, if it is loaded in the <footer> you may see some “ugly” transitions until the page fully loads and shows the CSS class that you want.

03. Add different colors to different code elements like Sublime Text.

When you get the handle of writting code, the difference between adding a color or a font size should be easy to see in order to make the way you write code faster. This plugin also helps in this way.

I also recommend to have Sublime Text installed in your computer, as it will be a powerful tool once you start writing CSS and JS daily.

Have fun playing with all the classes and ids of your next project! Happy coding guys!