Elementor est un célèbre constructeur de pages pour WordPress, mais en le combinant avec JavaScript, vous pouvez dépasser ses fonctionnalités de base pour créer une interactivité et des effets visuels encore plus avancés. Ce guide explore la combinaison d'Elementor et de JavaScript pour améliorer vos compétences en matière de développement de sites web et créer une expérience utilisateur dynamique et interactive. Ce guide s'adresse aux développeurs ayant des connaissances, y compris des exemples de code complexes et des techniques avancées.

Pour commencer

• Elementor Pro: La version Pro d'Elementor offre des fonctionnalités plus flexibles et des options de personnalisation, qui sont parfaites pour un développement avancé.
• Les bases du JavaScript: Nous utiliserons le JavaScript vanille et quelques bibliothèques populaires pour mettre en œuvre des animations et des fonctions interactives.
• Installation de WordPress: Vous devez avoir un site WordPress qui fonctionne bien et sur lequel Elementor Pro est installé.

Commençons !

Étape 1 : Intégrer JavaScript aux pages Elementor

Elementor n'a pas d'option "Custom Code" directe pour ajouter du JavaScript, mais il y a quelques moyens efficaces de le faire.

1. Utilisation du plugin WPCode:
   • Installer le plugin WPCode: Vous pouvez utiliser la fonction Code WPC pour ajouter du JavaScript personnalisé sans modifier la page d'accueil du thème. functions.php fichier.
     • Naviguez jusqu'à Plugins > Ajouter un nouveau dans le tableau de bord de WordPress.
     • Rechercher Code WPC et cliquez sur Installer maintenantalors Activer.
   • Ajouter du JavaScript à l'aide de WPCode:
     • Aller à Extraits de code > Ajouter un extrait dans le tableau de bord de WordPress.
     • Cliquez sur Ajoutez votre code personnalisé (nouvel extrait) et sélectionnez JavaScript comme type de code.
     • Nommez votre extrait: Donnez à votre extrait un nom qui aide à identifier son objectif (par exemple, "Script d'animation de chargement de page").
     • Insérer du code JavaScript: Collez votre code JavaScript dans l'éditeur de snippets.
     • Choisir le placement: Décidez si le script doit être chargé dans le En-tête ou Pied de page. En règle générale, il est recommandé de charger les scripts dans le répertoire Pied de page pour s'assurer que tous les éléments sont déjà chargés.
       • Le chargement de JavaScript dans le pied de page garantit que l'ensemble du document HTML est analysé et disponible, ce qui réduit les risques d'erreurs dues à l'interaction avec des éléments qui ne sont pas encore présents sur la page.
     • Définir les règles d'insertion: Indiquez où le script doit s'exécuter (par exemple, l'ensemble du site ou des pages spécifiques).
     • Enveloppez JavaScript dans DOMContentLoaded: Veillez à ce que le code soit exécuté après le chargement de la page afin d'éviter les erreurs.
       • Cela permet de s'assurer que tous les éléments de la page sont disponibles et d'éviter les erreurs dues à la manipulation d'éléments qui n'ont pas été chargés.
   Exemple:

document.addEventListener("DOMContentLoaded", function() {
console.log("JavaScript s'exécute après le chargement de la page") ;
}) ;

Ce simple script confirme que votre JavaScript fonctionne correctement après le chargement de la page.

Utiliser le widget HTML dans Elementor:

• Glisser-déposer le widget HTML: Une autre façon d'ajouter du JavaScript est d'utiliser le widget HTML d'Elementor.
  • Modifiez la page avec Elementor et faites glisser l'élément Widget HTML à l'endroit souhaité.
  • À l'intérieur du widget, ajoutez votre code JavaScript enveloppé de <script> étiquettes.
• JavaScript en ligne: Cette méthode est utile pour ajouter du JavaScript qui s'applique à un élément ou une partie spécifique de la page.

Exemple:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    console.log("Inline JavaScript via HTML widget");
  });
</script>

Cette méthode est utile lorsque vous souhaitez que JavaScript ne s'exécute que sur une section particulière de la page, ce qui vous permet de mieux contrôler la fonctionnalité.

Étape 2 : Ajout d'une interactivité dynamique avec JavaScript

Après avoir intégré JavaScript, nous pouvons commencer à ajouter des effets dynamiques, tels que les clics sur les boutons et les effets de survol.

1. Ajout d'une animation de clic de bouton:
   • Créer un bouton interactif: Ajoutez un élément de bouton en utilisant Elementor, et donnez-lui une classe pour le ciblage (par exemple, bouton animé).
   • Ajoutez du JavaScript pour gérer les événements de clic: Utilisez JavaScript pour mettre en œuvre une animation de clic simple, par exemple en redimensionnant le bouton ou en changeant sa couleur.
   Exemple:

document.addEventListener("DOMContentLoaded", function() {
  const button = document.querySelector(".animated-button") ;
  if (button) {
    button.addEventListener("click", function() {
      button.style.transform = "scale(1.2)" ;
      button.style.backgroundColor = "#ff6347" ; // Changez la couleur en tomate
      setTimeout(() => {
        button.style.transform = "scale(1)" ;
        button.style.backgroundColor = "" ; // Reprendre la couleur
      }, 300) ;
    }) ;
  }
}) ;

• Ce code agrandit le bouton et change sa couleur lorsqu'on clique dessus, puis le ramène à sa taille et à sa couleur d'origine après un court délai.

Exemple détaillé: Supposons que vous ajoutiez un bouton avec la classe bouton animé sur votre page Elementor. Avec le code ci-dessus, cliquer sur le bouton créera un bref effet d'agrandissement et de changement de couleur, ce qui le rendra plus attrayant visuellement pour les utilisateurs.

Ajouter un effet de survol à une grille d'images:

• Créer une grille d'images: Utilisez Elementor pour créer une grille d'images et attribuez un nom de classe à chaque image (par exemple, image-grid-item).
• Ajoutez du JavaScript pour gérer les événements de survol: Utilisez JavaScript pour ajouter des effets de survol, tels que l'entrée et la sortie en fondu, afin d'améliorer l'expérience de l'utilisateur.

Exemple:

document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll(".image-grid-item").forEach(item => {
    item.addEventListener("mouseenter", () => {
      item.style.opacity = "0.7" ;
      item.style.transition = "opacity 0.3s ease-in-out" ;
    }) ;
    item.addEventListener("mouseleave", () => {
      item.style.opacity = "1" ;
    }) ;
  }) ;
}) ;

• Ce code modifie l'opacité de chaque élément d'image lorsque la souris le survole, ce qui rend l'expérience de l'utilisateur plus attrayante.

Exemple détaillé: Ajoutez une grille d'images dans Elementor et attribuez la classe image-grid-item à chaque image. Avec ce code, les utilisateurs verront un effet de fondu subtil lorsqu'ils survoleront les images, ce qui ajoutera une couche de sophistication au site.

Étape 3 : Améliorer les effets visuels avec les bibliothèques d'animation JavaScript

Les bibliothèques d'animation JavaScript telles que GSAP peuvent vous aider à créer des animations complexes et fluides.

1. Intégrer la bibliothèque d'animation GSAP:
   • Charger GSAP: Chargez la bibliothèque GSAP à l'aide de WPCode ou du widget HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

Animer les éléments Elementor avec GSAP:

• Ajouter une animation GSAP: Utilisez GSAP pour ajouter des animations aux éléments d'Elementor, comme l'insertion d'une grille d'images au chargement de la page.

Exemple:

document.addEventListener("DOMContentLoaded", function() {
  gsap.from(".image-grid-item", {
    duration : 1,
    opacity : 0,
    y : 50,
    stagger : 0.2,
    ease : "power2.out"
  }) ;
}) ;

• Grâce à ce code, chaque élément d'image s'affichera en fondu séquentiel à partir du bas lors du chargement de la page, ce qui créera une transition fluide et d'aspect professionnel.

Exemple détaillé: Créez une grille avec plusieurs images à l'aide d'Elementor, et attribuez la classe image-grid-item. Lorsque la page se charge, chaque image s'insère en douceur par le bas, l'une après l'autre, ce qui peut s'avérer très efficace pour créer une expérience visuelle attrayante pour les visiteurs.

Étape 4 : Ajouter des animations basées sur le défilement avec ScrollTrigger

Déclencheur de défilement est un plugin GSAP qui vous permet de déclencher des animations en fonction des actions de défilement de l'utilisateur - idéal pour créer des effets de défilement dynamiques.

Déclencheur de défilement est un plugin GSAP qui vous permet de déclencher des animations en fonction des actions de défilement de l'utilisateur - idéal pour créer des effets de défilement dynamiques.

1. Charger le plugin ScrollTrigger:
   • Ajouter un déclencheur de défilement: Après avoir chargé GSAP, intégrez ScrollTrigger comme suit :

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

2. Créer des animations déclenchées par le défilement:

Ajouter des effets de défilement: Créez des animations qui se déclenchent lorsque les utilisateurs font défiler des sections spécifiques de votre page.

document.addEventListener("DOMContentLoaded", function() {
  gsap.registerPlugin(ScrollTrigger) ;
  gsap.from(".section-title", {
    scrollTrigger : {
      trigger : ".section-title",
      start : "top 80%", // L'animation démarre lorsque le titre de la section est visible
      end : "top 30%",
      scrub : true
    },
    duration : 1.5,
    opacité : 0,
    y : -50,
    ease : "power3.out"
  }) ;
}) ;

• Lorsque les utilisateurs font défiler l'écran jusqu'à l'élément .section-title, celui-ci se glisse par le haut, créant un effet visuel dynamique qui donne de la vie à votre page.

Exemple détaillé: Supposons que vous ayez un titre de page ou de section avec la classe section-titre. Le code ci-dessus fera glisser le titre depuis le haut au fur et à mesure que l'utilisateur fait défiler la page, offrant ainsi une expérience de défilement plus fluide et plus attrayante. Vous pouvez personnaliser les déclencheurs de début et de fin pour contrôler le moment où l'animation commence et se termine.

Étape 5 : Améliorer les formulaires Elementor avec du JavaScript personnalisé

Le widget de formulaire d'Elementor est très utile, mais nous pouvons ajouter plus de fonctionnalités avec JavaScript, comme la validation de formulaire ou les animations post-soumission.

1. Exemple de validation de formulaire:
   • Ajouter la validation aux champs du formulaire: Utilisez JavaScript pour ajouter une validation simple à un formulaire Elementor.

document.addEventListener("DOMContentLoaded", function() {
  gsap.registerPlugin(ScrollTrigger) ;
  gsap.from(".section-title", {
    scrollTrigger : {
      trigger : ".section-title",
      start : "top 80%", // L'animation démarre lorsque le titre de la section est visible
      end : "top 30%",
      scrub : true
    },
    duration : 1.5,
    opacité : 0,
    y : -50,
    ease : "power3.out"
  }) ;
}) ;

Exemple détaillé: Si vous avez créé un formulaire d'abonnement dans Elementor et que vous avez attribué la classe forme-élémentLe code ci-dessus permet de s'assurer que les utilisateurs saisissent une adresse électronique valide avant de soumettre le formulaire, ce qui réduit les entrées non valides et garantit des données de meilleure qualité.

2. Rétroaction sur l'animation après la soumission:

• Ajoutez un retour d'information visuel après la soumission: Ajoutez un effet d'animation après une soumission de formulaire réussie pour améliorer l'expérience de l'utilisateur.

Exemple:

document.addEventListener("DOMContentLoaded", function() {
  const form = document.querySelector(".elementor-form") ;
  if (form) {
    form.addEventListener("submit", function(event) {
      event.preventDefault() ; // Empêche la soumission par défaut pour simuler un retour d'information
      gsap.to(form, {
        duration : 0.5,
        opacity : 0,
        onComplete : function() {
          form.reset() ;
          gsap.to(form, { duration : 0.5, opacity : 1 }) ;
        }
      }) ;
    }) ;
  }
}) ;

• Ce code masque progressivement le formulaire après sa soumission, le réinitialise, puis le fait réapparaître en fondu, fournissant ainsi un repère visuel aux utilisateurs.

Exemple détaillé: Utilisez le widget de formulaire dans Elementor, attribuez la classe forme-élémentAvec le code ci-dessus, les utilisateurs verront le formulaire s'effacer après la soumission, puis réapparaître, ce qui constitue une confirmation fluide et visuellement attrayante de la réinitialisation du formulaire.

Intégrer ces fonctionnalités dans Elementor en tant que bouton permanent

Pour rendre ces fonctionnalités JavaScript accessibles directement dans Elementor et créer un bouton réutilisable avec ces fonctionnalités intégrées, suivez les étapes suivantes :

1. Créez un bouton avec le widget Elementor Button:
   • Utilisez Elementor pour créer un élément de bouton sur la page en faisant glisser le bouton Widget bouton sur votre page.
   • Personnalisez le texte, la taille, le style et les autres propriétés du bouton comme vous le souhaitez.
   • Dans le cadre de la Avancé attribuez une classe CSS unique au bouton (par ex, bouton d'action intégré). Cette classe CSS sera utilisée pour identifier le bouton en JavaScript.
2. Ajoutez du code JavaScript pour gérer la fonctionnalité des boutons:
   • Pour rendre le bouton interactif, nous devons ajouter du code JavaScript qui écoute les événements liés au bouton, tels que le clic ou le survol.
   • Utilisez le Plugin WPCode pour ajouter votre JavaScript à l'ensemble du site web :
     • Installez et activez le Plugin WPCode dans le répertoire des plugins WordPress.
     • Naviguez jusqu'à Extraits de code > Ajouter un extrait.
     • Choisissez JavaScript comme type de code et ajoutez le code JavaScript pour gérer l'interaction du bouton.
     • Veillez à spécifier que le code doit être exécuté sur Frontend et sélectionnez l'emplacement où exécuter le script (de préférence dans le répertoire Pied de page pour s'assurer que tous les éléments ont été chargés).

Exemple de code:

document.addEventListener("DOMContentLoaded", function() {
  const button = document.querySelector(".integrated-action-button") ;
  if (button) {
    button.addEventListener("click", function() {
      // Exemple : Déclencher un effet d'animation sur le bouton lorsqu'il est cliqué
      gsap.to(button, { duration : 0.5, scale : 1.2, ease : "power2.out" }) ;
      setTimeout(() => {
        gsap.to(button, { duration : 0.5, scale : 1 }) ;
      }, 500) ;
    }) ;
  }
}) ;

Ce code est à l'écoute d'un événement de clic sur le bouton et déclenche une animation à l'aide de GSAP. Le bouton s'agrandit jusqu'à 1,2 fois sa taille, puis revient à sa taille d'origine, créant ainsi un effet visuel pour l'utilisateur.

1. Enregistrer le bouton en tant que widget global:
   • Après avoir configuré le bouton et testé que la fonctionnalité JavaScript fonctionne, vous pouvez enregistrer le bouton en tant que fichier Widget global dans Elementor.
   • Pour ce faire, cliquez avec le bouton droit de la souris sur le widget bouton et sélectionnez Enregistrer comme global. Donnez au widget global un nom descriptif (par exemple, "Bouton interactif avec animation GSAP").
   • En l'enregistrant en tant que widget global, vous pouvez réutiliser ce bouton sur différentes pages sans avoir à reconfigurer les paramètres ou le code JavaScript à chaque fois.
2. Test et personnalisation du bouton:
   • Testez le bouton: Assurez-vous que le bouton se comporte comme prévu sur les différentes pages où il est utilisé. Assurez-vous que le fait de cliquer sur le bouton déclenche correctement les actions JavaScript.
   • Personnaliser la fonctionnalité: Vous pouvez encore améliorer la fonctionnalité du bouton en ajoutant d'autres fonctions JavaScript, telles que des animations personnalisées, des appels API ou des interactions avec d'autres éléments de la page.
3. Rendez le bouton permanent avec un style et un comportement personnalisés:
   • Vous pouvez styliser le bouton à l'aide d'une feuille de style CSS personnalisée supplémentaire. Utilisez la fonction CSS personnalisé ou la section WordPress CSS supplémentaire pour appliquer des styles uniques au bouton.

Exemple de CSS personnalisé :

.integrated-action-button {
  background-color : #ff6347 ;
  couleur : #fff ;
  border-radius : 5px ;
  padding : 15px 30px ;
  transition : background-color 0.3s ease ;
}
.integrated-action-button:hover {
  background-color : #e5533d ;
}

1. Cet extrait CSS donne au bouton une couleur personnalisée et des bords arrondis, et change la couleur au survol pour fournir un retour d'information visuel.
2. Intégrer des fonctionnalités JavaScript supplémentaires:
   • Si vous souhaitez ajouter des fonctionnalités plus complexes, telles que l'envoi d'un formulaire, le basculement d'éléments de la page ou l'appel d'API externes, vous pouvez étendre le code JavaScript en conséquence.
   • Exemple d'ajout d'un journal de console et de basculement de la visibilité d'un autre élément lorsque l'on clique sur le bouton :

document.addEventListener("DOMContentLoaded", function() {
  const button = document.querySelector(".integrated-action-button") ;
  const targetElement = document.querySelector(".target-element") ;
  if (button && targetElement) {
    button.addEventListener("click", function() {
      // Consigner le message dans la console
      console.log("Button clicked, performing actions...") ;
      // Basculer la visibilité de l'élément cible
      targetElement.style.display = targetElement.style.display === "none" ? "block" : "none" ;
    }) ;
  }
}) ;

En suivant ces étapes, vous pouvez créer un bouton dans Elementor avec une fonctionnalité JavaScript intégrée qui peut être réutilisée sur l'ensemble de votre site web, améliorant ainsi la cohérence et l'efficacité de votre flux de développement. Il est ainsi facile d'ajouter des interactions et des animations avancées aux pages Elementor sans avoir à configurer manuellement chaque bouton individuellement.

Conclusion

En combinant Elementor avec JavaScript, vous pouvez créer des interactions plus avancées et dynamiques sur votre site web WordPress. Cette approche de développement avancée améliore considérablement les capacités de conception de vos pages et aide votre site web à se démarquer. Qu'il s'agisse d'utiliser le JavaScript vanille pour contrôler les éléments de la page ou d'exploiter des bibliothèques d'animation comme GSAP pour des transitions fluides, la combinaison d'Elementor et de JavaScript peut offrir une expérience utilisateur exceptionnelle.

Grâce à ces exemples détaillés, vous pouvez commencer à expérimenter des interactions et des effets plus complexes. J'espère que ce guide éveillera votre créativité ! Si vous avez des questions ou si vous avez besoin d'aide, n'hésitez pas à me contacter.