The great strength of Divi is that you can produce fabulous looking, feature rich websites… without ever touching a single line of code.
Of course, if you do know a little CSS, you can get even more creative because when using the Divi Builder, every module, row and section can be customised using your own CSS rules.
The problem with CSS is that if you aren’t using it all the time, you quickly forget the syntax and have to keep looking it up.
But finally you can say goodbye to forgetting that pesky CSS syntax because Divi now has a fully-featured code editor that makes writing and editing code so much easier and enjoyable.
The code editor comes with syntax highlighting, error reporting, autocomplete, colour picking, multi-line select, search, find and replace and more!
My Affiliate Links Disclosure
Hi everyone. Just to let you know that many of the links on this site are my affiliate links. What that means is that if you click one of them and buy something… I get a commission. It doesn’t cost you anything extra and I only recommend things that I’ve tried and tested, so please, please, please… use my links.
An introduction to Divi’s dedicated code editor
The new code editor will probably be used mostly to add custom CSS but it can also be used to add code to the Code Module and to various areas in the Divi Theme Options.
Wherever you add code, the code editor is going to make the whole process quicker, easier and much less error prone.
This short video by Nick Roach of Elegant Themes introduces the new code editor, runs through some of its key features and explains why it will now be much easier to write high quality error free code:
Improved Code Editing For Divi! – Today we are introducing a fully-featured code editor to Divi, greatly enhancing the experience when adding custom CSS and other custom Code in the Visual Builder and Divi Theme Options.
Join Elegant Themes and download the Divi theme today.
Complete with a 10% discount!
Divi’s dedicated code editor for Custom CSS and adding code to Code Modules and Divi Theme Options
There are three locations where the code editor will appear and allow you to add your own custom code:
#1 When working with the Visual Builder
When using the Visual Builder, you can use the code editor to add custom CSS to modules and to the page.
#2 When adding code to Code Modules
The code editor will also be available to check your code when writing custom code in Code Modules.
#3 When adding code within the Divi Theme Options
And when you’re working within the Divi Theme Options, the code editor will be available for both the custom CSS and integration settings.
Key features of the Divi Dedicated Code Editor
The new Divi Code Editor is a fully-featured code editor that makes writing and editing code so much faster, easier and more enjoyable.
Features include syntax highlighting, error reporting, autocomplete, colour picking, multi-line select, search, find and replace and more.
Here is a brief description of the code editor’s major features:
- Smart Syntax Highlighting – The Divi code editor features rich syntax highlighting, which makes it much easier to read and understand your code.
All the code you write is colour coded and formatted automatically and lines are numbered for easy reference.
This feature makes writing, editing and trouble shooting your code quicker, easier and far less error prone. - Warning and Error Reporting – Syntax errors in your custom HTML or CSS can cause a whole lot of problems and let’s face it, even the best of us make mistakes.
But when you write custom code with the code editor, Divi will automatically detect any problems and let you know how to fix them… pretty neat eh? - Autocomplete and Suggestions – Smart autocomplete and suggestions within the code editor makes writing your custom code a lot faster.
Tags are closed automatically as you add them and suggested values are displayed as you add new variables and properties. - Easy Colour Picking – Colour pickers appear automatically for all colour values inside the new code editor.
You can use these colour pickers to explore colour options, or you can just type in your desired colour value. - Multi-Select – Using Ctrl+Click and Alt+Drag allows you to select multiple lines or multiple values at once so that you can make quick batch adjustments.
- Search, Find and Replace – The code editor comes with built in search functionality that makes it easy to find specific pieces of code.
You can also find and replace values if you need to make changes across the entire document.
More Custom CSS Options to Complement the Divi Code Editor
And to complement the editor, Elegant Themes have gone through every Divi module, row and section to make sure that custom CSS options are available for every major element.
They’ve filled any gaps and added more than a dozen new settings that will make it easier than ever to customise Divi using your own custom CSS.
More Custom CSS Options – We went through all Divi modules and added new custom CSS options for all major module elements.
Let the new Dedicated Divi Code Editor become your perfect companion
You may never have to write a single line of code when using Divi because Divi’s presets are pretty good.
But if you do need to make a few tweaks that can only be achieved using custom code, then the Divi code editor will be your perfect companion.
With Syntax Highlighting to make it easier to understand your code, Autocomplete and Suggestions to help you write your code and Warning and Error Reporting to make sure that your final code is correct… the code editor will hold your hand every step of the way.
Why not use Divi on your next project?
If you’d like to add a little custom code using Divi’s Dedicated Code Editor, on your next project, then please feel free to use my Divi theme 10% discount link below.
437,821 Customers Are Already Building Amazing Websites with Divi. Join the Most Empowered WordPress Community on the Web.
We offer a 30-Day Money Back Guarantee, so joining is Risk-Free!
Elegant Themes
Join Elegant Themes and download the Divi theme today.
Complete with a 10% discount!
Credits:
My thanks and gratitude to Elegant Themes for the graphics and video of the Divi Dedicated Code Editor, used in this post.
