Comment ajouter des effets Hover Tilt à n'importe quel élément dans Divi

L'ajout d'effets d'inclinaison de survol à votre conception Web est l'une de ces façons amusantes et engageantes de donner vie à votre site Web Divi. Habituellement, ce type de conception nécessite un plugin ou un code plus avancé (comme dans ce tutoriel). Mais, ce processus est beaucoup plus facile en utilisant Tilt.js (un effet d'inclinaison de survol léger pour jQuery). Avec Tilt.js, vous pouvez facilement appliquer des effets d'inclinaison de survol à n'importe quoi en quelques minutes.

Dans ce tutoriel, nous allons vous montrer comment ajouter des effets d'inclinaison de survol à n'importe quel élément de Divi. En utilisant une combinaison d'extraits jQuery tilt.js et du générateur Divi, nous allons vous montrer comment ajouter des effets d'inclinaison de survol impressionnants à une image, une colonne de modules, une ligne, etc. Nous vous montrerons même comment ajouter des effets de parallaxe 3D surprenants.

Commençons!

Aperçu

Pour une démonstration en direct des fonctionnalités de ce didacticiel, consultez ce codepen.

Et voici un rapide aperçu de la conception que nous allons construire dans ce didacticiel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Les bases de l'utilisation de Tilt.js

Tilt.js est un effet d'inclinaison de survol de parallaxe léger pour jQuery. Avec seulement quelques lignes de jQuery, vous pouvez ajouter des effets d'inclinaison de survol à n'importe quel élément de la page. Il est livré avec jusqu'à 10 options (voir la documentation) qui peuvent facilement être ajoutées pour contrôler la conception et la fonctionnalité de l'effet d'inclinaison, y compris l' échelle et un bel effet d' éblouissement .

Au niveau le plus basique, une fois que vous accédez à la bibliothèque tilt.js, vous pouvez ajouter une classe CSS à l'élément que vous souhaitez incliner au survol, puis utiliser un simple extrait jQuery pour appliquer la fonction d'inclinaison sur un objet jQuery avec la même classe .

Par exemple, disons que vous ajoutez une classe CSS personnalisée à un module d'image nommé « et-js-tilt ».

Tout ce que vous devez faire après cela est d'ajouter l'extrait de code jQuery suivant pour ajouter l'effet d'inclinaison de survol à l'image.

$(".et-js-tilt").tilt();

Ensuite, vous pouvez définir des options supplémentaires pour l'effet d'inclinaison. Par exemple, vous pouvez ajouter un effet d'échelle et d'éblouissement avec l'extrait de code suivant.

$(".et-js-tilt").tilt({
  glare: true,
  maxGlare: 0.7,
  scale: 1.1
});

Le résultat serait celui-ci…

Pour un effet plus avancé, vous pouvez ajouter transform:translateZ() à n'importe quel élément enfant pour obtenir un effet de parallaxe 3D. Plus à ce sujet plus tard.

Maintenant que nous avons une compréhension de base de l'utilisation de tilt.js, explorons comment l'utiliser dans Divi.

Comment ajouter des effets Hover Tilt à n'importe quel élément dans Divi

Ajouter un effet Tilt Hover aux modules Divi

Ajoutez une ligne à trois colonnes à la section standard par défaut.

Ajouter un module d'images

Dans la première colonne, ajoutez un module image.

Remarque : vous pouvez utiliser n'importe quel module de votre choix. Il n'est pas nécessaire que ce soit un module d'image.

Téléchargez une image de votre choix. J'en utilise un du Homemade Cookies Layout Pack.

Ajouter une classe de module d'image

Sous l'onglet avancé, ajoutez la classe CSS suivante :

• Classe CSS : et-js-tilt

Cette classe sera utilisée plus tard comme sélecteur pour notre fonction d'inclinaison.

Copier et coller des modules d'images

Ensuite, copiez le module image et collez-en un dans chacune des deux colonnes restantes.

Vous pouvez remplacer les images en double par de nouvelles si vous le souhaitez. Assurez-vous simplement que chaque module d'image a la classe CSS "et-js-tilt".

Ajouter le tilt.js JQuery

Pour ajouter la bibliothèque tilt.js et l'extrait de code nécessaires pour incliner nos images, nous allons utiliser un module de code.

Tout d'abord, ajoutez une nouvelle ligne à une colonne sous la ligne existante.

Ajoutez ensuite un module de code à la nouvelle ligne.

Ensuite, nous devons accéder à la bibliothèque tilt.js en ajoutant un script qui importe tilt.js depuis leur CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Collez le script suivant dans la zone de code.

Utilisez le src suivant dans une balise de script pour importer la bibliothèque :

src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"

Ça devrait ressembler à ça:

Il est important d'importer tilt.js avant d'ajouter le code qui l'utilisera. Ainsi, après le script pointant vers tilt.js, ajoutez les balises de script nécessaires pour envelopper le JQuery que nous devons ajouter. Collez ensuite le JQuery suivant entre les balises de script .

jQuery(document).ready(function ($) {
  if ($(window).width() > 980) {

    $(".et-js-tilt").tilt({
      glare: true,
      maxGlare: 0.7,
      scale: 1.1,
      perspective: 300,
    });

  }
});

Notez que la fonction tilt() est à l'intérieur d'une instruction if qui s'exécutera lorsque la largeur du navigateur est supérieure à 980px. Cela garantira que l'effet ne se produit que sur le bureau.

Voici le résultat.

Ajout d'un effet Tilt Hover à la ligne

Comme nous l'avons mentionné précédemment, vous pouvez ajouter cet effet d'inclinaison de survol à n'importe quel élément de Divi. Cela comprend une ligne entière. De plus, vous pouvez ajouter un effet d'inclinaison à une rangée tout en conservant les effets d'inclinaison pour chacun des modules à l'intérieur de la rangée.

Voici comment procéder.

Dupliquer la ligne et ajouter une classe CSS unique à la ligne

Dupliquez la ligne d'images existante, puis ouvrez les paramètres de la ligne dupliquée. Sous l'onglet avancé, attribuez à la ligne une classe CSS unique comme suit :

• Classe CSS : et-row-js-tilt

Ajouter jQuery

Ajoutez ensuite le jQuery suivant sous la fonction d'inclinaison précédente pour appliquer une fonction d'inclinaison distincte à la ligne.

    $(".et-row-js-tilt").tilt({
      scale: 1,
      perspective: 1200,
    });

Notez que pour cet effet d'inclinaison, nous avons ramené l'échelle à 1 et augmenté la valeur de perspective afin que l'inclinaison soit plus subtile.

Voici le résultat.

Remarquez comment la ligne a une fonction d'inclinaison qui s'active lorsque vous survolez la ligne et que chacun des modules d'image a également le même effet d'inclinaison que nous avons ajouté précédemment. C'est ainsi que vous pouvez appliquer des instances d'effet d'inclinaison imbriquées.

Ajouter un effet Tilt Hover à une colonne avec plusieurs modules Divi

Dans certains cas, il est utile d'ajouter un effet d'inclinaison à une colonne de modules. Cela vous permettra de concevoir plusieurs modules au sein d'une colonne avec Divi, puis d'incliner tous ces éléments en une seule unité. Pour vous donner un exemple, nous allons ajouter un effet de survol inclinable à une colonne avec un module image, un module texte et un module bouton.

Ajouter une nouvelle ligne

Pour commencer, créez une nouvelle ligne de colonne un sixième deux tiers un sixième sous la ligne d'images précédente.

Ajouter un module d'images

Dans la colonne 2 (la colonne du milieu), ajoutez un nouveau module image.

Téléchargez une image dans le module et définissez l'alignement de l'image au centre.

Ajouter un module de texte

Sous le module image, ajoutez un module texte avec l'en-tête H2 suivant :

<h2>Local Organic</h2>

Mettez ensuite à jour les styles de l'en-tête 2 comme suit :

• Police du titre 2 : Berkshire Swash
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #000000
• Titre 2 Taille du texte : 60px (ordinateur de bureau), 32px (tablette), 20px (téléphone)
• En-tête 2 Hauteur de ligne : 1,2 em

Ajouter un module de boutons

Sous le module de texte, ajoutez un module de bouton.

Mettez à jour le texte du bouton pour lire « À propos de nous » et mettez à jour les paramètres de conception comme suit :

• Alignement des boutons : centerr
• Taille du texte du bouton : 18px
• Couleur du texte du bouton : #fff
• Couleur d'arrière-plan du bouton : #000
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 100 pixels
• Police des boutons : Sables mouvants
• Poids de la police du bouton : gras
• Remplissage : 16px en haut, 16px en bas, 30px à gauche, 30px à droite
• Box Shadow : voir capture d'écran

Paramètres de colonne

Une fois les trois modules terminés, ouvrez les paramètres de la colonne parent de ces modules (colonne 2) et mettez à jour les éléments suivants :

• Couleur d'arrière-plan : #f5cee6

• Remplissage : 50px (haut et bas), 20px (gauche et droite)

Ajout de la classe CSS à la colonne

Sous l'onglet avancé, ajoutez la classe CSS suivante :

• Classe CSS : et-column-js-tilt

Ajout du jQuery pour appliquer un effet d'inclinaison à la colonne

Pour ajouter l'effet d'inclinaison à la colonne, nous pouvons ajouter un autre extrait similaire de jQuery qui cible la classe CSS de la colonne. Collez l'extrait suivant sous l'extrait précédent ciblant la ligne.

    $(".et-column-js-tilt").tilt({
      scale: 1.1,
      perspective: 1000,
    });

Voici le résultat final.

Ajout d'un effet de parallaxe 3D aux éléments internes

Pour un effet d'inclinaison de survol plus avancé, nous pouvons ajouter un effet de parallaxe 3D aux modules internes de la colonne. En utilisant une combinaison de perspective et de transform:translateZ() , nous pouvons faire apparaître chacun des modules de la colonne dans l'espace 3D lorsque l'effet d'inclinaison du survol est actif.

Voici comment procéder.

Dupliquer la ligne précédente

Tout d'abord, dupliquez la ligne précédente avec l'effet d'inclinaison ajouté à la colonne du milieu.

Ajouter une classe de colonne unique

Mettez ensuite à jour la colonne du milieu (colonne 2) avec une classe CSS unique comme suit :

• Classe CSS : et-column-js-tilt-3d

CSS personnalisé

Pour vous assurer que les modules internes préservent l'effet 3D, ajoutez le CSS personnalisé suivant à l'élément principal de la colonne :

transform-style: preserve-3d;

Ajouter jQuery et CSS

Ajoutez ensuite quelques extraits de jQuery supplémentaires sous l'extrait de fonction d'inclinaison précédent ciblant la colonne comme suit :

    const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
      scale: 1.1,
      perspective: 1000,
    });
    columnTilt3d.on("tilt.mouseEnter", function (e) {
      $(e.target).addClass("tilt-active");
    });
    columnTilt3d.on("tilt.mouseLeave", function (e) {
      $(e.target).removeClass("tilt-active");
    });

Ce jQuery ajoute une autre fonction d'inclinaison de base à la colonne, tout comme l'exemple précédent. Cependant, le code bascule également une nouvelle classe (« inclinaison-active ») vers la colonne chaque fois que l'effet d'inclinaison est actif. Nous pouvons utiliser cette nouvelle classe pour appliquer une valeur transform: translateZ() à chacun des modules lors du survol de la colonne. Cela créera l'effet de parallaxe 3D pop-out.

Pour ce faire, ajoutez le CSS personnalisé suivant en haut de la zone de code/du contenu en veillant à envelopper le CSS dans les balises de style nécessaires.

  .et-column-js-tilt-3d.tilt-active .et_pb_image {
    transform: translateZ(100px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_text {
    transform: translateZ(40px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_button {
    transform: translateZ(50px);
  }

Découvrez maintenant le résultat final. Remarquez comment les trois modules apparaissent dans l'espace 3D lorsqu'ils tournent pendant l'effet d'inclinaison.

Résultats finaux

Voici un autre aperçu des résultats finaux de nos exemples.

Dernières pensées

Les effets d'inclinaison de survol offerts par Tilt.js sont vraiment amusants à expérimenter. Bien que j'aie utilisé quelques exemples de base dans ce didacticiel, vous pourriez facilement passer une journée sur le terrain à appliquer ces effets d'inclinaison de survol à l'une de nos mises en page prédéfinies ou sur votre propre site. Prendre plaisir!

J'ai hâte de vous entendre dans les commentaires.

À votre santé!