One of the most popular questions about using code with Divi is how to add it. There are actually a lot of options when it comes to creating and adding your code.
Plugins provide interfaces that are easy to use. They keep your code separate from your theme, so if you make any changes to the theme the code isn’t affected. Another advantage in plugins is there are a lot of options and you can choose the interface and features that work best for you. Some even include tools to highlight the syntax or test the code before going live.
Tools allow you to create and test code before adding the code to your website. They often provide features that are created specifically for developers such as, highlight the syntax, creating code libraries, advanced testing features, compiling the code when it’s ready, sharing your code with a team or with the public, etc.
You can create code either within Divi or with another tool and paste the code into Divi. CodePen is an online social development environment where developers can create and share code or work with teams to create their code. Create pens, projects, posts, collections, and more.
jQuery Function Generator
The Divi Space jQuery Function Generator is an online tool that makes it easy to create your code to paste into Divi. Choose what you want to do from the drop-down box (such as add CSS, add an element, animate an element, etc.). Next, choose when you want the code to execute (when the page loads, when an element is clicked, on hover, etc.). Finally, choose how you will add the file to Divi.
Each step adds a level of code to the code box. Once you’ve made all of your selections you can then add your custom code and then simply copy the code to paste into Divi.
Atom is a code editor for Windows. It has a smart UI that simplifies navigation. Features include context-aware auto-completion, an outline view, go to definition, and find all references. It also includes document formatting, hover-to-reveal information, and diagnostics to show errors and warnings. It has lots of advanced features such as collaboration tools and GitHub integration. Once your code is complete simply copy and paste into Divi.
Sublime Text is a code editor for Windows, Mac, or Linux with powerful editing features. It includes a clean user interface with folders, tabs, and syntax highlighting. Tools include multi-select so you can rename variables at the same time, a goto anything feature to quickly jump to files and functions, goto definition to navigate the source, and lots more. It’s designed with performance in mind. Create your code and then copy and paste into Divi.
Adding code to Divi
Divi Builder Code Module
The Divi Builder includes a code module, allowing you to add code to any page or post. Add shortcodes or static HTML. The module includes Content, Design, and Advanced tabs just like the other Divi modules.
Divi Theme Options Integration Tab
In the Divi Theme Option is an Integration tab where you can enable code for the header, body, single top, and single bottom. Each one has a different field where you can paste in your code. It includes syntax highlighting.
Simple Custom CSS and JS
Insert Headers and Footers
For more information about adding CSS to Divi see the article 5 Ways to Add CSS to Divi. If you’re interested in learning more about coding with Divi be sure to check out the Transforming Divi with CSS & jQuery Course.