3 façons simples d’ajouter des scripts à votre site Elementor

Vous avez parfois besoin d’ajouter du JavaScript personnalisé à votre site Elementor, pour des animations, des calculatrices, Google Analytics, Tag Manager ou d’autres outils tiers.

La bonne nouvelle ? C’est plus facile que vous ne le pensez. Pas besoin d’être développeur.

Ce guide couvre trois méthodes simples, des options gratuites aux fonctionnalités d’Elementor Pro.

Table des matières

  1. Quand avez-vous besoin d’ajouter des scripts
  2. Méthode 1 : Widget HTML Elementor (Gratuit)
  3. Méthode 2 : Code personnalisé Elementor Pro
  4. Méthode 3 : Extension WPCode (Gratuite)

Quand avez-vous besoin d’ajouter des scripts à Elementor

JavaScript s’exécute dans le navigateur et ajoute des fonctionnalités interactives que le constructeur glisser-déposer d’Elementor n’offre pas nativement.

Cas d’utilisation courants :

  • Google Analytics, AdSense ou Tag Manager
  • Boutons de retour en haut de page
  • Calculatrices ou formulaires personnalisés
  • Bibliothèques tierces (animations, graphiques, etc.)
  • Suivi personnalisé ou gestionnaires d’événements

Passons maintenant aux méthodes.

Méthode 1 : Widget HTML Elementor (Gratuit)

Cette méthode fonctionne avec la version gratuite d’Elementor. Elle ajoute des scripts à des pages individuelles, pas à tout le site.

Étapes :

  1. Ouvrez votre page dans l’éditeur Elementor.
  2. Faites glisser le widget HTML sur votre page.
  3. Ajoutez votre JavaScript encadré de balises <script> :

html

<script>
// Exemple : bouton de retour en haut de page
let button = document.getElementById("back-to-top");

window.onscroll = function() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        button.style.display = "block";
    } else {
        button.style.display = "none";
    }
};

button.addEventListener("click", function() {
    window.scrollTo({ top: 0, behavior: "smooth" });
});
</script>
  1. Cliquez sur Mettre à jour et testez sur le front-end.

Idéal pour : Scripts spécifiques à une page (fonctionnalités ponctuelles, boutons personnalisés).

Limitation : Le script ne s’exécute que sur les pages où vous ajoutez le widget.

Méthode 2 : Code personnalisé Elementor Pro

Si vous avez Elementor Pro, la fonctionnalité Code personnalisé vous permet d’ajouter des scripts à l’échelle du site, parfait pour Google Analytics, les pixels de suivi ou les bibliothèques globales.

Étapes :

  1. Allez dans Elementor → Code personnalisé dans votre tableau de bord WordPress.
  2. Cliquez sur Ajouter nouveau.
  3. Donnez un titre à votre code (ex : « Google Analytics »).
  4. Collez votre script (y compris les balises <script>).
  5. Choisissez où l’insérer :
    • <head> (pour les codes de suivi, CSS)
    • début de <body>
    • fin de </body> (recommandé pour la plupart des scripts)
  6. Définissez une priorité (nombre bas = chargement plus précoce).
  7. Définissez des conditions (ex : « Site entier » ou pages spécifiques).
  8. Cliquez sur Enregistrer.

Idéal pour : Scripts à l’échelle du site, codes de suivi, bibliothèques tierces.

Conseil : Placez les scripts dans le pied de page (fin de </body>) chaque fois que possible pour éviter de ralentir le chargement des pages.

Méthode 3 : Extension WPCode (Gratuite)

Vous n’avez pas Elementor Pro ? WPCode (anciennement « Insert Headers and Footers ») est une extension gratuite qui ajoute des scripts d’en-tête/pied de page à l’ensemble de votre site.

Étapes :

  1. Installez et activez WPCode (gratuit sur WordPress.org).
  2. Allez dans Extraits de code → En-tête et pied de page.
  3. Collez votre script dans :
    • En-tête (pour <head>)
    • Corps (début de <body>)
    • Pied de page (recommandé pour la plupart des scripts)
  4. Cliquez sur Enregistrer les modifications.

Idéal pour : Scripts à l’échelle du site sans Elementor Pro.

Bonus : WPCode inclut une bibliothèque d’extraits prédéfinis (Google Analytics, CSS personnalisé, etc.).

Réflexions finales

Ajouter des scripts à Elementor ne nécessite pas d’expertise en programmation. Vous avez trois options solides :

  • Widget HTML pour des fonctionnalités rapides et spécifiques à une page
  • Code personnalisé Elementor Pro pour des scripts à l’échelle du site (si vous avez Pro)
  • WPCode pour des scripts à l’échelle du site (gratuit, fonctionne avec n’importe quel thème)

Commencez par la méthode la plus simple qui correspond à vos besoins. Testez d’abord sur un site de staging. Et encadrez toujours votre JavaScript de balises <script>.

Ce billet vous a été utile?
Offrez-nous un café!