Ajouter JavaScript personnalisé dans Elementor : Page et niveau d'élément JS
L'extension Custom JS, qui fait partie de Master Addons Pro, vous offre un champ JavaScript à l'intérieur d'Elementor Ajoutez du code à une page entière à partir des paramètres de page, ou attachez-le à un seul widget, section ou conteneur à partir de son onglet Avancé Utilisez-le pour de petites interactions, formez des ajustements ou suivez des événements sans modifier les fichiers de thème ou bourrer les scripts dans un widget HTML.
Un espace de code dédié pour chaque page
Arrêtez de remplir les scripts dans des widgets HTML ou de les diffuser dans des fichiers globaux Cette extension ajoute un champ Custom JS dédié dans le Page Settings > Advanced tab. Tout code que vous écrivez ici ne s'exécute que sur cette page ou publication spécifique C'est la façon organisée de gérer des scripts ponctuels, le suivi des tests A/B ou des éléments interactifs uniques.
- Séparation propre : Gardez les scripts spécifiques à la page isolés de votre code à l'échelle du site Aucun risque de casser d'autres pages.
- Accès facile : recherchez instantanément votre code dans les paramètres de page sans fouiller dans le panneau Widgets.
- Meilleures pratiques intégrées : le champ se gère automatiquement
$(document).ready()pour vous, vous pouvez donc écrire directement votre logique de base.
JavaScript au niveau de la page et des éléments
Le code au niveau de la page est en cours de création dans Paramètres de page, Avancé, Personnalisé JS, et s'exécute sur cette page uniquement Le code au niveau de l'élément est en cours de lecture dans l'onglet Avancé de tout widget, colonne, section ou conteneur Dans le code au niveau de l'élément, le mot selector est échangé contre la classe CSS de cet élément, le script ne touche donc que cet élément.
- Pas de balises <script> et pas de wrapper prêt pour le document : le code est enveloppé dans
jQuery(document).readypour vous, et$travaux. - Les scripts s'impriment dans le pied de page, une fois le contenu chargé.
- Le code s'exécute sur la page en direct, pas dans l'aperçu de l'éditeur Elementor, alors vérifiez la page publiée après l'enregistrement.
- Chaque instance du sélecteur de mots est remplacée dans le code au niveau de l'élément Utiliser
$('selector')plutôt quedocument.querySelectorlà.
Comment ajouter JavaScript personnalisé dans Elementor
Ces étapes supposent que Master Addons Pro est actif et que votre rôle WordPress peut publier du HTML non filtré, ce que les administrateurs peuvent par défaut.
- Dans votre tableau de bord, accédez à Addons principaux, ouvrez l'onglet Extensions, activez JS personnalisé et enregistrez.
- Modifier la page avec Elementor.
- Pour toute la page, ouvrez Paramètres de page, puis Avancé, puis Personnalisé JS. Pour un élément, sélectionnez-le et ouvrez son onglet Avancé.
- Coller votre code sans <script> tags.
- Mettez à jour la page et testez-la sur l'URL en direct.
Trois exemples JS personnalisés Elementor
Collez n'importe lequel de ces éléments dans un champ JS personnalisé et modifiez les noms de classe pour qu'ils correspondent à votre page.
1. ajouter une classe à l'en-tête après le défilement (niveau de la page)
$(window).on('scroll', function () {
$('.site-header').toggleClass('is-scrolled', $(window).scrollTop() > 80);
});2. Basculez une classe lorsqu'un élément est cliqué (niveau d'élément)
$('selector').on('click', function () {
$(this).toggleClass('is-open');
});3. Envoyer un événement Google Analytics lorsqu'un bouton est cliqué (niveau de la page)
$('.cta-button a').on('click', function () {
if (typeof gtag === 'function') {
gtag('event', 'cta_click', { location: 'pricing' });
}
});Façons d'ajouter JavaScript dans Elementor comparées
Il y a trois voies communes La bonne dépend de l'endroit où le script doit s'exécuter Si vous avez également besoin de styles scoped à un élément, le gratuit Extension CSS personnalisée fonctionne de la même manière.
| Widget HTML | Code personnalisé Elementor Pro | Master Addons personnalisé JS | |
|---|---|---|---|
| Plan | Élémenteur Gratuit | Élémenteur Pro | Maître Addons Pro |
| Portée | La page sur laquelle se trouve le widget | À l'échelle du site, avec conditions d'affichage | Une page, ou un élément |
| Où vous l'écrivez | À l'intérieur d'un widget sur la toile | Un écran Code personnalisé dans le tableau de bord | Paramètres de la page ou onglet Avancé de l'élément |
| Balises de script | Nécessaire | Nécessaire | Pas nécessaire |
| Ciblez un élément | Écrivez le sélecteur vous-même | Écrivez le sélecteur vous-même | Utiliser le mot-clé du sélecteur |
Questions fréquemment posées pour JS personnalisé
Quand dois-je utiliser ceci au lieu d'un widget HTML ou des fonctions de mon thème.php ?
Utilisez-le pour les scripts qui appartiennent à une page ou à un élément, comme une calculatrice, un effet de défilement ou un événement de clic Pour le code dont chaque page a besoin, une option à l'échelle du site comme votre thème ou un plugin d'extraits de code est une meilleure maison Le widget HTML fonctionne aussi, mais les scripts finissent par être dispersés sur le canevas et sont faciles à manquer plus tard.
Le code est-il minifié ou optimisé pour les performances ?
Non. Le code est ajouté au fur et à mesure que vous l'écrivez, alors gardez-le court et bien rangé. Le seul changement apporté par Master Addons est d'échanger le mot-clé du sélecteur dans le code au niveau de l'élément contre la classe CSS de cet élément.
Que se passe-t-il si j'écris du JavaScript cassé ? va-t-il casser toute ma page ?
Il peut. Une erreur de syntaxe peut empêcher d'autres scripts sur cette page de s'exécuter Testez d'abord le code dans votre console de navigateur, et essayez-le sur un site de mise en scène si la page compte.
Puis-je utiliser cela avec les données dynamiques ou les variables d'élément ?
Directement, pas dans le champ JS lui-même Cependant, vous pouvez écrire JavaScript qui interagit avec les éléments de la page qui sont peuplés par des données dynamiques Par exemple, vous pourriez écrire un script qui lit le texte d'un titre rempli dynamiquement Vous utiliseriez des sélecteurs JavaScript normaux pour cibler ces éléments.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
