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