One of the great things about using the Divi framework is that you don’t need to be a code loving developer to make a unique and lasting WordPress website.
While Divi certainly caters to the more intricate needs of developers, non-coders and newbies can also enjoy the process of creating a website by simply using the various styling and design options already present in the theme.
For those who find themselves curious about code, learning the ins and outs of CSS and its relationship to HTML will only grow your Divi web design skills from strength to strength.
Another amazing aspect of the Divi framework is that its users have plenty of options when it comes to how they’d like to design their websites. This also extends to how they’d like to add CSS to their Divi website.
Last week we shared a blog post that detailed 5 different ways that Divi users can add CSS to their websites. These five options include:
- Inline CSS added to the content section of a module
- Custom CSS Box in the Divi Theme Options dashboard
- Advanced options tab of the sections, rows and individual modules
- Divi Builder Page Settings of an individual page
- Divi child theme style.css file
This week we’ll be showing you another way to add CSS to your Divi theme, this time by using a very handy plugin.
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 incredible features, including:
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.
Extremely straightforward, users can start entering their custom CSS code right into the editor.
Mentioned above, the plugin comes in a premium version, available for purchase for USD 14.99 directly from Potent Plugins.
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, be sure to read our previous blog post which discusses 5 Ways to Add CSS to Divi.
We want to hear from you!
Thanks for reading!
Featured Image via Unsplash