Insérer du code javascript avec un widget Elementor

Sommaire

Dans ce petit tuto, nous allons voir comment ajouter un script JS à votre page faite avec Elementor

Ajout du widget HTML

On insère le widget HTML depuis la sidebar d’Elementor n’importe où, après le bloc de votre choix (petite astuce : on peut – et je vous encourage à le faire – renommer les blocs Elementor en double-cliquant sur leur nom dans la petite palette du Navigateur. De toute façon, on ne verra pas ce bloc sur la page et vous pouvez copier/coller le code suivant, que je commenterai après.

<script>
    document.addEventListener('DOMContentLoaded', function() {
        jQuery( function($) {                
            $('#conteneur').on('click', function(){ 
                alert('Coucou'); 
            }); 
        })
    })
</script>

Commentaires sur le code

  • On insère d’abord les balises <script>
  • On ajoute un écouteur d’événement sur document pour que l’exécution du code survienne quand le DOM est entièrement chargé, ce qui nous permet de cibler n’importe quel élément html.
  • Puis j’affecte la variable globale jQuery à la variable classique jQuery : $ (ça va + vite à taper et ça économise de l’espace).
  • Enfin, c’est du jQuery très classique avec lequel on attache une action à un élément html (ici un id #conteneur).
  • Une petite boîte d’alerte pour tester et le tour est joué 😉

Pour finir

Juste un mot pour être complet sur ce widget, dont la fonction initiale est d’insérer du code html à l’endroit de sa position dans le DOM. Pour insérer du html, rien de plus simple, aucune balise particulière à insérer, par exemple, on va afficher un titre

<h1>Un titre</h1>

Votre titre devrait apparaître là où vous l’avez inséré (aidez-vous du navigateur d’Elementor pour bien le positionner).

Pour terminer, on le colore en rouge avec le code suivant

<h1 class="test">Un titre</h1>
<style>
    .test { color: red; }
</style>

Je mets les balises de style après pour être sûr que l’élément est bien chargé.

A bientôt pour d’autres tutos

Jack

Vos réactions

Laisser un commentaire

Votre adresse e-mail 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.

Verified by MonsterInsights