The Best CSS Code Editor for Divi
In this post I’m going to reveal what I believe is the best CSS code editor for Divi and WordPress users that works just like Google Docs.
Introducing “Editey”
The Best CSS Code Editor for Divi
You wonder how I can claim that one code editor is better than another for Divi, so let me explain. Divi is a great tool for WordPress, both of which are browser based and availalbe from any device any time.
In a similar way, the Editey code editor is browser based. This super convenient tool integrates into Google Drive just like Google Docs. It’s has all the features you need in a code editor for CSS, and is available directly in Google Drive as an app. This is why I think Editey is the best CSS code editor for Divi.
This post is mostly about CSS, since this is one code language that a lot of Divi users are most familiar with. However, the entire suite of tools that Editey offers is not limited to CSS, but it includes separate apps for:
- HTML
- CSS
- JavaScript
- XML
- PHP
- TypeScript
- LESS
What Sets Editey Apart?
The Features Are So Cool!
Editey has some amazing features that make it super convenient.
- All your changes are automatically saved.
- You can use revision history to see old versions of the same file, sorted by date and who made the change.
- You can choose color schemes like light or dark mode.
- You can use all the features you expect in a code editor.
- Everyone can work together in the same document at the same time.
- Edit your files in your local Google Drive folder with any editor of your choice and let Editey pick up your changes automatically.
My Workflow with CSS Editey + Divi
I use tons of CSS in all of my Divi website designs. Here’s a quick look at my process utilizing CSS Editey for backups and searches.
Using CSS Editey for Seaching My Divi CSS
Searching is one of those requested features that would be very handy in Divi. I often find the need to search through my CSS and find a class or selector. That’s nearly impossible in Divi, especially since the box height is so small. I simply paste all my code into CSS Editey, use the Edit>Find and Replace tool, and make the change. If I want to see the chagne immediately, I quickly copy and paste the updated code back to Theme Options, or if I want to make more changes I wait until the end of the session and then copy the code back from CSS Editey to Divi Theme Options.
Using Edity for Divi CSS Backups
I had some trouble with Divi suddenly losing my CSS, so I soon learned that a backup was very important. As I build the site, I have CSS Editey open in one tab, Divi Theme Options in another tab, and the Visual Builder open in another tab on whichever page I am designing. At the end of each design session I simply copy all my CSS from Divi Theme Options to CSS Editey and it saves a backup. I also like to name my file something like “divi-site-backup-9-24-18.css.”
BONUS: My CSS Process in Divi
- I store my snippets in Trello.
- First, I use the page level CSS box for “live” editing to see things change
- Then I copy the CSS to the Divi>Theme Options>Custom CSS box. I keep it there for the duration of the build for convenience.
- Lastly, I back up the CSS in Editey in Google Drive
“Then I copy the CSS to the Divi>Theme Options>Custom CSS box. I keep it there for the duration of the build for convenience.”
Do you mean you remove all CSS code from the Custom CSS box once happy and add it to a child theme’s stylesheet?
Do you keep any CSS in the Divi sections, rows, modules on a page level in a layout-centralized manner, so that individual parts of a page can simply be saved in the library and re-used on other pages without fiddling with CSS code in a child theme’s stylesheet?
Hi Roland, great question! Yes, normally I take the CSS from Theme Options and add it to the child theme css file like you said. There can sometimes be problems with the loading sequence if the CSS is only left in Theme Options.
As for the second question, I typically don’t have any CSS in the modules, rows, sections, or page. Since I use classes instead of IDs, no matter where those items are on the website, the CSS still applies. If these are used to export into a new site, then the CSS can be included. Often what I do in that situation is use a code module included in the layout.
Hope that helps!