How to use the "Code" module of Divi?

Updated on 26/03/2020 | Published on 15/07/2019 | 12 comments

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:

Exemple de code JavaScript
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 within the Code module, you will have to MINIMIZE this code. Otherwise, it will not work. Here's what this same miniature code looks like:

Note of 26/03/2020: it is no longer mandatory to minimize your code. It also works without the minification.

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:

ajouter du Javascript dans Divi
Add Javascript to the Divi Code module
  1. Add a Code module within the page where you need it.
  2. Vous prendrez soin d’ajouter les balises <em><strong><script></strong></em> et <em><strong></script></strong></em>
  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!

tutoriel débutant pour apprendre à utiliser 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 for Minimize the CSS. Once you are in possession of your Minimized CSShere's what you'll have to do:

Note of 26/03/2020: it is no longer mandatory to minimize your code. It also works without the minification.

Ajouter du CSS au sein du module Code de Divi
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 have to minimize the HTML before inserting it. within the Code module. To do this, you can use this online tool.

Note of 26/03/2020: it is no longer mandatory to minimize your code. It also works without the minification.

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 JavaScript, CSS or HTML, you will have to minimize this code before embedding it in your pages.. And above all, you will have to insert this code within 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.

comment utiliser le module Code Divi
how to use code module Divi

You should like it too:

8 fonctionnalités du Divi Visual Builder que vous devriez utiliser !

8 Divi Visual Builder features you should use!

Are you using all the features offered by the Divi Visual Builder? Some of them are little known and yet so effective! Discover now the 8 Divi options that will save you a lot of time! A great user experience in perspective!

Divi Layout Block : des modules Divi au sein de Gutenberg !

Divi Layout Block: Divi modules within Gutenberg!

Good news! Version 4.1 of Divi allows Divi Builder modules to be inserted into the WordPress Gutenberg editor. Your imagination knows no bounds! Can you imagine how much you can achieve with Divi and WordPress?

12 Commentaires

  1. sebastien jousset

    Bonjour, débutant j’aurai une question, sur le site cssfx il y a des effets CSS à copier coller. Comment fait on dans divi pour s’en servir, où doit on mettre le HTML ?

    D’avance merci.

  2. Lycia Diaz

    Salut Sébastien… Comme diraient les Inconnus : « j’ai pas tout compris, vous pouvez répéter la question » 😉 … Pour du HTML, un simple module de texte suffira, il suffit que tu passes en mode « texte » pour coller ton HTML… Pour le « CSSSFX »… désolée, je ne connais pas… Jamais entendu parlé… Sinon, pour du CSS « normal », tu peux l’insérer simplement dans le module « code » entre les balises < style > et < /style >

  3. Vdle

    Bonjour
    Je me demandé comment faire pour que lorsque je clique sur une photo, un lien s’ouvre avec une galerie photos et du texte mais or page du site ?
    Un peu comme un code qui redirige mais comment le créer ? Svp
    D’avance merci

  4. Lycia Diaz

    Hello,
    Il suffit que tu ajoutes un lien externe sur une photo. Ce lien doit mener à une galerie externe. Reste à savoir avec quoi tu pourrais faire cette galerie : Flickr peut-être ?

  5. Sarah

    Bonjour !

    Voici déjà un petit bout de temps que mon équipe et moi-même rencontrons des problèmes liés aux blocs de code ( plus précisément avec du code javascript ou JQuery).

    En effet, si un des blocs fonctionne correctement une première fois, il se peut que le code saute de manière aléatoire et nous n’en connaissons pas la cause.
    Soit c’est le code entier soit ce sont les balises script qui disparaissent, … ce qui fait apparaître le reste du code en format « texte » sur la page… (pas très pro)

    Quand un code saute, je retourne dans le bloc *code* pour le remettre dedans. Mais, dès que la page est sauvegardée le code disparaît du bloc à nouveau..

    Auriez-vous une idée du procédé que je devrais entreprendre afin d’éviter ces problèmes ?

    D’avance merci.

  6. Lycia Diaz

    Bonsoir Sarah,
    Ce bug est bizarre car je n’ai jamais eu aucun problème avec ce module. Je vois donc 2 solutions : soit il y a un conflit avec l’un de vos plugins (voire même avec WordPress ou Divi) soit le code présente une erreur.
    Je penserais peut-être pour la première solution si vous êtes sûre de votre code.
    Avez-vous essayé d’ouvrir un ticket sur le support d’Elegant Thèmes ?

  7. GUILLERM Arthur

    Bonjour,

    Je rencontre le même problème que Sarah.
    Le module code saute aléatoirement après un certain temps et le code n’est plus interprété. Seul certains noeuds textes restent, comme si le code était sanitizé.

    Je pense qu’il s’agit d’un dysfonctionnement du module. Je n’ai pas de conflit avec des plugins existants et je n’ai pas de doute sur l’exactitude du code (Export depuis des outils sérieux , Hubspot…)

  8. Lycia Diaz

    Ah, vous devriez le signaler

  9. Leslie

    Hello !
    J’aimerais mettre sur une page de mon portfolio la création d’un jeu « morpion » que j’ai codé. (Dossiers : .HTML .css et .JS)

    Si j’ai bien compris, je dois minimiser chaque écriture, puis, dans un bloc d’un page via DIVI builder, insérer chaque contenu dans l’onglet code. Respectivement , , … Et mon jeu apparaîtra ?

    Ça me paraît compliqué car j’ai des appels de dossier a dossier, donc peut être qu’il faudrait que je place les dossier dans mon WordPress ?

    Qu’en pensez vous ?

  10. Lycia Diaz

    Salut Leslie !
    Alors, maintenant ce n’est plus obligatoire de minifier le code. Il faut que je mette à jour l’article. Par contre, effectivement, ton « morpion » risque de ne pas fonctionner de cette manière à cause des appels à dossier. Il faudrait tester… Mais il faudra bien que tu héberges tes dossiers quelques part, certainement à la racine de ton site ? J’ai jamais fait ça donc c’est un peu flou… Peut-être que tu pourrais coder cela dans un thème enfant ??? Je peux pas plus t’aider… Désolée

  11. Quentin

    Bonjour, j’ai rencontré exactement le même problème que Sarah et Arthur. Le Module Code disparait une fois la sauvegarde effectué.

    Avez-vous trouvez une solution à ce problème ?
    S’il vous plait mentionnez moi si vous avez la solution car à ce jour je n’ai trouver aucune résolution.

    Merci d’avance
    Bien a vous

  12. Vikram Varma

    Great tip on how to insert JS using minifier. Thank you

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This