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!