How to use the Divi Code module? This is a question I have often asked myself when I was just starting with Divi !

I had the impression that this module didn't work... And for good reason, I didn't know how to use it!

In this article, discover how and why to insert a CODE module in a Divi page.

  1. What is the purpose of the Divi Code Module?
  2. How to insert Javascript in Divi?
  3. How to insert CSS in Divi?
  4. How to insert HTML in Divi?
  5. In conclusion....

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - What is the purpose of the Divi Code Module?

The Divi Code module is simply used to add Code within a layout or a Divi section.

This is interesting because the code you add to a page will only act within that page and not on the entire site.

The Divi Code module therefore acts differently from plugins specialized in adding code such as Head and Footer Code for example.

The idea is to embed the custom code in one place. This is ideal to avoid loading a code on pages that do not use it and, therefore, avoid increasing the loading of your site.

The code you will be able to add thanks to this Divi module can be Javascript, CSS or HTML....

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

2 - How to insert Javascript in Divi?

This is what a JavaScript code looks like:

Example of JavaScript code
Example of JavaScript code
// When the user scrolls the page, execute myFunction 
window.onscroll =    function() {myFunction()};

// Get the header
var header = document.getElementById("myHeader");
   
//    Get the offset position of the navbar
var sticky =    header.offsetTop;

// Add the sticky class to the header when you reach    its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset    > sticky) {
    header.classList.add("sticky");
  }    else {
    header.classList.remove("sticky");
  }
   }

To insert it into the Code module, you must MINIMIZE this code. Otherwise, this one will not work. This is what the same minified code looks like:

window.onscroll=function(){myFunction()};var header=document.getElementById("myHeader"),sticky=header.offsetTop;function myFunction(){window.pageYOffset>sticky?header.classList.add("sticky"):header.classList.remove("sticky")}

To obtain this minified code, simply use an online tool called Javascript Minify. It's very easy.

Once you have the minified code, it will be enough:

add Javascript in Divi
Add Javascript to the Divi Code module
  1. Add a Code module within the page where you need it.
  2. You will take care to add the tags
  3. Then you will paste your code between the two.

Once you have saved your changes and left the Visual Builder, your Javascript code will work within your page. And only within this one!

beginner tutorial to learn how to use Divi

3 - How to insert CSS in Divi?

To add CSS within the Divi Code module, it is done in much the same way as adding JavaScript.

The difference is that you will have to use CSS Minify to minimize the CSS. Once you have your Minified CSS, here is what you will need to do:

Add CSS within the Divi Code module
Add CSS within the Divi Code module
  1. Add a Code module to the page where you need it: within a section or line for example.
  2. Add the tags
  3. Stick your minified CSS between the two tags.

Now, the added CSS will only act within this page.

4 - How to insert HTML in Divi?

You will have understood it, if you want to add HTML code within a Divi page, the method is the same as to add CSS or Javascript!

But as with the other two languages, you will need to minimize HTML before inserting it into the Code module. To do this, you can use this online tool.

You will take care to insert this minified code into tags and .

5 - In conclusion....

As you will have understood, if you enter raw code within the Divi Code module, it will not work.

Whether it is JavaScript, CSS or HTML, you will need to minimize this code before embedding it in your pages. And above all, you will have to insert this code into the tags that correspond to it (Style, Script, HTML or even Link, Meta etc.).

For more information, I invite you to visit the official page.

Attention, for security reasons, only site administrators can use this module.

how to use the Divi Code module
Aenean dictum suscipit sed luctus consectetur amet, at Aliquam

Pin It on Pinterest

Shares
Share This