OpenByt - Votre source ultime de connaissances gratuites sur WordPress

Elementor et JavaScript : Développement avancé de sites web dynamiques

f Lin

Elementor is a famous page builder for WordPress, but by combining it with JavaScript, you can break through its basic functionality to create even more advanced interactivity and visual effects. This guide’ll explore combining Elementor with JavaScript to elevate your website development skills and create a dynamic, interactive user experience. This guide is aimed at developers with knowledge, including complex code examples and advanced techniques.

Pour commencer

Let’s get started!

Étape 1 : Intégrer JavaScript aux pages Elementor

Elementor doesn’t have a direct ‘Custom Code’ option to add JavaScript, but there are a few effective ways to do so.

  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: Give your snippet a name that helps identify its purpose (e.g., “Page Load Animation Script”).
      • 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. Generally, it’s recommended to load scripts in the 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.
        • This ensures that all page elements are available, preventing errors caused by attempting to manipulate elements that haven’t loaded.
    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:

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) ;
    }) ;
  }
}) ;

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:

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" ;
    }) ;
  }) ;
}) ;

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:

Exemple:

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

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"
  }) ;
}) ;

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é

Elementor’s form widget is very useful, but we can add more functionality with JavaScript, such as form validation or post-submission animations.

  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é: If you’ve created a subscription form in Elementor and assigned the class 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:

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 }) ;
        }
      }) ;
    }) ;
  }
}) ;

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 as the code type and add the JavaScript code to handle the button’s interaction.
      • 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. Give the global widget a descriptive name (e.g., “Interactive Button with GSAP Animation”).
    • 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: Ensure that the button behaves as expected across different pages where it’s used. Make sure that clicking the button triggers the JavaScript actions correctly.
    • 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.

Quitter la version mobile