Comment utiliser le module « Code » de Divi ?

Mis à jour le 26/03/2020 | Publié le 15/07/2019 | 12 commentaires

Comment utiliser le module Code de Divi ? Voilà une question que je me suis souvent posée lorsque je débutais avec Divi !

J’avais l’impression que ce module ne fonctionnait pas… Et pour cause, je ne savais pas l’utiliser !

Dans cet article, découvrez comment et pourquoi insérer un module CODE dans une page Divi.

  1. À quoi sert le Module Code de Divi ?
  2. Comment insérer du Javascript dans Divi ?
  3. Comment insérer du CSS dans Divi ?
  4. Comment insérer du HTML dans Divi ?
  5. En conclusion…

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – À quoi sert le Module Code de Divi ?

Le module Code de Divi sert tout simplement à ajouter du Code au sein d’un layout ou d’une section Divi.

Cela est intéressant car le code que vous ajouterez à une page n’agira qu’au sein de cette page et non sur l’entièreté du site.

Le module Code de Divi agit donc différemment des plugins spécialisés en ajout de code comme Head and Footer Code par exemple.

L’idée est donc d’embarquer le code personnalisé à un seul endroit. Cela est idéal pour éviter de charger un code sur des pages qui ne l’utilisent pas et, de ce fait, éviter d’alourdir le chargement de votre site.

Le code que vous pourrez ajouter grâce à ce module Divi pourra être du Javascript, du CSS ou du HTML

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

2 – Comment insérer du Javascript dans Divi ?

Voici à quoi ressemble un code JavaScript :

Exemple de code JavaScript
Exemple de code JavaScript
// 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");
  }
   }

Pour l’insérer au sein du module Code, vous devrez absolument MINIFIER ce code. Sinon, celui-ci ne fonctionnera pas. Voici à quoi ressemble ce même code minifié :

Note du 26/03/2020 : il n’est plus obligatoire de minifier votre code. Celui-ci fonctionne aussi sans la 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")}

Pour obtenir ce code minifié, il suffit d’utiliser un outil en ligne nommé Javascript Minifier. C’est très facile.

Une fois que vous êtes en possession du code minifié, il suffira :

ajouter du Javascript dans Divi
Ajouter du Javascript dans le module Code de Divi
  1. D’ajouter un module Code au sein de la page où vous en avez besoin.
  2. Vous prendrez soin d’ajouter les balises <script> et </script>
  3. Puis vous collerez votre code entre les deux.

Une fois que vous aurez sauvegardé vos changements et quitté le Visuel Builder, votre code Javascript fonctionnera au sein de votre page. Et seulement au sein de celle-ci !

tutoriel débutant pour apprendre à utiliser Divi

3 – Comment insérer du CSS dans Divi ?

Pour ajouter du CSS au sein du module Code de Divi, cela se passe sensiblement de la même manière que pour ajouter du JavaScript.

La différence est que vous devrez utiliser CSS Minifier pour minifier le CSS. Une fois que vous serez en possession de votre CSS Minifié, voici ce que vous devrez faire :

Note du 26/03/2020 : il n’est plus obligatoire de minifier votre code. Celui-ci fonctionne aussi sans la minification.

Ajouter du CSS au sein du module Code de Divi
Ajouter du CSS au sein du module Code de Divi
  1. Ajoutez un module Code au sein de la page où vous en avez besoin : au sein d’une section ou d’une ligne par exemple.
  2. Ajoutez les balises <style> et </style>
  3. Collez votre CSS minifié entre les deux balises.

À présent, le CSS ajouté n’agira qu’au sein de cette page.

4 – Comment insérer du HTML dans Divi ?

Vous l’aurez compris, si vous souhaitez ajouter du code HTML au sein d’une page Divi, la méthode est la même que pour ajouter du CSS ou du Javascript !

Mais comme pour les deux autres langages, vous devrez minifier le HTML avant de l’insérer au sein du module Code. Pour cela, vous pourrez utiliser cet outil en ligne.

Note du 26/03/2020 : il n’est plus obligatoire de minifier votre code. Celui-ci fonctionne aussi sans la minification.

Vous prendrez soin d’insérer ce code minifié au sein de balises <html> et </html>.

5 – En conclusion…

Vous l’aurez compris, si vous saisissez du code brut au sein du module Code de Divi, celui-ci ne fonctionnera pas.

Que ce soit du JavaScript, du CSS ou du HTML, vous devrez minifier ce code avant de l’embarquer au sein de vos pages. Et surtout, vous devrez insérer ce code au sein des balises qui lui correspondent (Style, Script, HTML ou même Link, Meta etc.).

Pour en savoir plus, je vous invite à visiter la page officielle.

Attention, pour des raisons de sécurité, seuls les administrateurs du site peuvent utiliser ce module.

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

804 mots

3

Ça devrait vous plaire aussi :

Formation Divi PDF : un guide pas à pas

Formation Divi PDF : un guide pas à pas

Quoi de mieux qu’une formation Divi PDF pour maitriser ce thème WordPress, son Visual Builder et son Thème Builder ? C’est comme si un formateur s’invitait chez vous… Découvrez son contenu !

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