First published 20 Februrary 2018. Updated 09 March 2022.
Divi caters to all needs of its users. It satisfies professional and experienced developers who know the ins and outs of the framework and can manipulate it to achieve advanced functions and designs. The theme also caters to new users, particularly those who haven’t come to grips with writing code, by allowing them to make design and styling enhancements directly from the Divi Builder.
First things first, the plugin is extremely easy to use. It has a minimalistic interface that is neither cluttered nor complicated, and there is no need for setup or configuration to begin.
With this, adding CSS and JavasScript code via the plugin will end up reducing the load put on the database and will increase your website’s performance.
Next, the plugin ships with a number of features, including:
Once the file has finished downloading, head to your WordPress website and navigate to Plugins > Add New.
Once you have arrived at the plugin menu, click the Upload Plugin button and select the plugin .zip file from your download folder. Next, click Install and wait for the installation to run its course. Then, click Activate.
Here is a demo set-up of three blurb modules pulling in the default Divi styling.
Extremely straightforward, users can start entering their custom CSS code right into the editor.
Here is the final result:
As mentioned above, the plugin comes in a premium version, available for purchase starting at $ 30 directly from Aspen Grove Studios.
While the free plugin is great, the pro version comes with even more incredible features that seasoned developers will love. In the developer edition of the plugin, you’re able to:
- Use multiple files. Helping you navigate all of the code on your website, with the premium version, you’ll be able to use multiple files (i.e. header.css, footer.css, style.css etc.) all within the same code editor interface. This extremely organized system sees the multiple files structured by tabs, so they’re ridiculously easy to access, move between and edit.
- Use SCSS. For advanced developers who are already well versed in CSS, the premium plugin allows the use of the Sass CSS extension, a more robust and efficient way of writing CSS, within the editor.
- Import and export files. To save time and speed up development, users of the pro plugin can easily import and export their various .css and .js files between sites. The premium version includes the option of batch exporting multiple files, seeing each and every file in the editor console included and downloaded into one single .zip file.
The plugin is super easy to use, it’s free, and when the need justifies its price, the premium Developer Edition of the plugin ships with incredibly useful features all geared to help you write code better and faster.
If going the plugin route is not for you, and you’d still like to explore other CSS options, remember there are several other ways to add CSS and code to Divi.
We want to hear from you!
Thanks for reading!
Looks great but the plugin says at installing its not tested on the version of wp. Can i just use it?
Yes you can use it… the developer is very well trusted and probably just hasn’t updated that info in the repository yet.
Merci Lycia de ce post, et de la pertinence des articles de votre blog ! Cest vrai que depuis que jutilise DIVI, ma liste dextensions a fondu comme neige au soleil. Ainsi que les conflits et bugs en résultant. Jai mis également au placard une liste de scripts devenus inutiles. Et pour vous citer, ceci nest que la partie visible de l’iceberg. La contre partie est peut-être que la prise en main de DIVI devient complexe si on veut connaître toutes ses fonctions. Mais heureusement linterface est bien pensée et offre lessentiel en première vue. Elegant theme fait vraiment un travail remarquable !
I use “Simple Custom CSS and JS” for the same thing. It’s a free plugin although there is a ‘premium’ version but I’ve not needed the extra functionality of this. I did donate to the developer though as I’ve found the plugin extremely useful on a couple of websites now.
Perhaps someone can tell me which method of adding CSS is best for SEO.
In the light of Google’s recent updates on page speed and mobile, I’d like to know what the most lightweight solution really is.
Looks like an interesting plugin. Entertaining as well is the need to revert colour to color.
And now that you’ve broached the subject of using a plugin (premium or otherwise), might I suggest an examination of cssHero?
IMHO, served without any affiliation (csshero.org), it is the quickest most global way to attack anything and everything css-styleable in Divi.
Cheers from 12 West,