We all love Divi. It’s a great theme on which to build any type of website. Since getting involved in the various Divi communities I’ve seen some amazing websites built using Divi, from ecommerce stores to non profit web sites, each as good looking as the next.
While Divi can do pretty much anything from either the Customiser or the Page Builder, there is that odd occasion where you need it to do something a little different. If you’re working with Divi, at some point you are going to need to write some custom CSS to style an element or two just the way you like it. If you’ve never dabbled in CSS before, this could be quite a daunting task.
Enter SiteOrigin’s CSS Editor.
The SiteOrigin CSS Editor is a visual CSS Editor For WordPress that anyone can use. Designed for both beginners and advanced CSS users, it offers an intuitive interface that allows you to customise any element of your website. (If you are familiar with Firebug for Firefox or the Chrome developer tools you’ll love the SiteOrigin CSS Editor.)
With its simple visual controls, a code editor that includes selector and attribute auto-complete and the ability to work with any theme (yep this will work on Divi, Extra and just about any WordPress theme out there), the SiteOrigin CSS Editor is my go to plugin whenever I need some custom CSS for a website.
And best of all, it’s 100% free, and always will be. Who can turn down an offer like that.
Take a look at the video below to see some of it’s amazing features.
( In case you’re wondering about that accent, Greg from SiteOrigin is a fellow Capetonian, so maybe I’m a little biased 😉 )
I will have to compare this to CSS Hero, http://www.css hero.org, which I use on all my sites, but costs money.
I’ll be honest, I’d tried CSS Hero after using SiteOrigins CSS editor and I preferred the simpler SiteOrigin tool. However I’d be interested to hear your feedback, as a CSS Hero user.
I am concerned about overwriting of the CSS when a theme is updated.
Where does the revised CSS reside? Is it in a child theme?
WordPress has its own CSS Stylesheet Editor (under the Appearance menu) which is separate from any installed theme. The Site Origin CSS Editor uses this, but builds on top of it. So any styles added via this editor are theme independent.