The Best Plugins and Tools for Adding CSS and JavaScript to Divi

One of the greatest advantages of Divi is its expandability with code. Adding code, such as CSS and JavaScript, to Divi can set your website apart from the competition and give your audience features that you can’t get anywhere else.

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.

In this article, we’ll look at the best plugins and tools for adding CSS and JavaScript to Divi and WordPress.

Why Use Plugins and Tools to Add CSS and JavaScript to Divi?

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.

Tools

CodePen

  • Google+
  • Facebook
  • Twitter

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.

You can create your HTML, CSS, and JavaScript in the CodePen Code Generator, generate your code by pasting the URL of your Pen into the generator, generate the compiled code, and then copy and paste the code into Divi. The advantage to this method is you can create your HTML, CSS, andJavaScript as separate files and then compile them once you have them working the way you want them to.

More Information

jQuery Function Generator

  • Google+
  • Facebook
  • Twitter

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.

More Information

Atom

  • Google+
  • Facebook
  • Twitter

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.

More Information

Sublime Text

  • Google+
  • Facebook
  • Twitter

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.

More Information

Brackets

  • Google+
  • Facebook
  • Twitter

Brackets is a code editor for Windows and Mac that’s designed with web developers and frontend developers in mind. It’s lightweight and includes inline editors, preprocessor support, live previews of your code, syntax highlighting, and more. It provides help without getting in the way. You can even expand the features with extensions such as the Beautify extension which provides formatting for JavaScript, HTML, and CSS. Once you’ve created your code you can copy and paste it into Divi.

More Information

Adding code to Divi

Divi Builder Code Module

  • Google+
  • Facebook
  • Twitter

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

  • Google+
  • Facebook
  • Twitter

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.

More Information

Plugins

Custom CSS and JavaScript Developer Edition

  • Google+
  • Facebook
  • Twitter

Our popular plugin, Custom CSS and JavaScript Developer Edition, adds a few new tools to your WordPress Appearance menu: one for Javascript and one for CSS. Each one has several tabs where you can add certain types of code. It improves performance by serving the custom CSS and JavaScript code through the filesystem rather than the SQL database. Keep code organized with virtual files that create tabs for each file. It includes syntax highlighting. It works with any WordPress theme and has a live preview.

For a detailed tutorial, see the article How to Add Custom CSS and JavaScript to your Divi Website with a Plugin. There’s also a free version that does not include the extra tabs and features but still allows you to use Javascript and CSS.

More Information

Simple Custom CSS and JS

  • Google+
  • Facebook
  • Twitter

Simple Custom CSS and JS adds a new menu to your WordPress dashboard with editors for HTML, CSS, and JavaScript. Once you’ve created your code you can choose where on the site the code with operate. Choose inline, external file, header, or footer. Add code to the frontend or backend. The syntax is highlighted.

More Information

Insert Headers and Footers

  • Google+
  • Facebook
  • Twitter

Insert Headers and Footers adds an area to WordPress with two fields where you can add HTML, CSS, or JavaScript: one for the header and one for the footer. It’s simple to set up and use. Your code will appear on any page or post that displays headers or footers.

More Information

CSS & JavaScript Toolbox

  • Google+
  • Facebook
  • Twitter

CSS & JavaScript Toolbox allows you to create code for specific locations on your website. Name the code, choose the location, and start creating the code in the editor. It includes syntax highlighting. Add templates from the code template manager. Create HTML, PHP, Javascript, or CSS and create backups of your code. Add code to pages, posts, custom posts, categories, etc. Add code to the frontend or the backend.

More Information

Custom css-js-php

  • Google+
  • Facebook
  • Twitter

Custom css-js-php lets you add custom CSS, JavaScript, and PHP to pages, posts, and custom post types. This plugin is a code-management system. It provides areas where you can paste your code, give it a title, and select where it should appear on your website (choose shortcode, header, or footer). You can disable any code you want with a click of a button.

More Information

Ending Thoughts

We have lots of plugins and tools to choose from when it comes to creating and adding CSS and JavaScript to Divi and WordPress. Each of the tools we’ve covered here is designed to be easy to use while still providing features to help you get the most out of your code.

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.

What’s your favorite way to add CSS and JavaScript to Divi? Let us know in the comments.

Randy Brown

Randy A Brown is a professional writer specializing in WordPress, eCommerce, and business development. He loves helping the WordPress community by teaching readers how to improve their websites and businesses. His specialties include product reviews, plugin and theme roundups, in-depth tutorials, website design, industry news, and interviews. When he's not writing about WordPress he's probably reading, writing fiction, or playing guitar.

Previous post
Next post

1 Comment

  1. Dan

    I am using a lot of CSS in a Divi website. One use involves background images. Is there a way to inject media queries for CSS in the Advanced – Section Module Settings of a section. My CSS in the Main Element is:

    background-image: url(/wp-content/uploads/2018/09/back-left-1.jpg), url(/wp-content/uploads/2018/09/back-right.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: left, right;
    background-size: contain, contain;

    Good article. Thanks!
    background-color: #f5f5f5;

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *


Receive notifications about our new blog posts.


Don’t leave before entering to win an iPad Pro! It’s Free!

You may be too early for our Black Friday specials, but you can still enter our competition! Leave your details below and you could win an iPad Pro!

Great you've entered our giveaway! Only one step remaining! Please check your email and confirm it.