Comment créer une superposition d'images avec des conceptions d'animation d'obturation de texte fractionné dans Divi

Les superpositions d'images continuent d'être un atout de conception populaire lors de l'affichage d'images sur votre site Web. Non seulement ils offrent un moyen créatif de présenter des images, mais ils peuvent également rendre la visualisation des images plus amusante et attrayante pour les visiteurs, en particulier lorsque vous ajoutez des animations personnalisées lorsque vous survolez ou cliquez sur l'image.

Dans ce tutoriel, nous allons vous montrer comment créer une superposition d'image avec une animation d'obturation de texte fractionné dans Divi. Tout d'abord, nous allons vous montrer comment créer la superposition d'images personnalisées avec des volets de texte divisés. Ensuite, nous vous montrerons comment utiliser les options de transformation intégrées de Divi pour créer les trois conceptions d'animation d'obturateur de superposition d'images complètement uniques. Nous vous montrerons même quelques exemples de conceptions supplémentaires pour donner libre cours à votre créativité.

Allons-y et commençons !

Aperçu

Voici un aperçu des conceptions de superposition d'images de ce didacticiel.

Et voici un codepen qui montre le même design que celui utilisé dans ce tutoriel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les conceptions d'animation d'obturateur de texte divisé en superposition d'images de ce didacticiel, vous devez d'abord les télécharger à l'aide du 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.

Partie 1 : Création de la superposition d'images avec des obturateurs de texte fractionné

Pour cette première partie du tutoriel, nous allons construire la configuration initiale de la superposition d'images avec les volets de texte divisé. Une fois cela fait, nous pouvons ajouter une animation aux volets plus tard.

La ligne

Pour commencer, ajoutez une ligne à deux colonnes à la section normale.

Avant d'ajouter des modules, ouvrez les paramètres de ligne et mettez à jour la largeur de la gouttière :

• Largeur de gouttière : 2

Mise à jour de la colonne

La colonne sera le conteneur principal qui contiendra notre image et les éléments de superposition de l'obturateur. Ce sera également la cible principale qui lancera l'animation de l'obturateur en survol. En d'autres termes, lorsque le curseur se déplace à l'intérieur de la colonne, l'animation des éléments enfants (les volets) s'active et lorsque le curseur se déplace à l'extérieur de la colonne, l'animation se désactive.

Pour désigner notre colonne comme la « colonne d'obturation » et pour l'animer plus tard « au survol », ajoutez les classes CSS suivantes à la colonne :

• Classe CSS : survol de la colonne d'obturation

Mettez ensuite à jour les débordements en masqués afin que nous ne voyions pas les éléments transformés une fois qu'ils dépassent le conteneur de colonne pendant l'animation.

• Débordement horizontal : masqué
• Débordement vertical : caché

Ajout de l'image principale

Dans la colonne 1, ajoutez un module image. Cela servira d'image principale que nous allons nous asseoir derrière la superposition de l'obturateur.

Téléchargez une image dans le module d'image.

Réglez ensuite l'alignement de l'image au centre.

Création de l'obturateur supérieur avec du texte divisé

Maintenant que notre image est en place, nous allons ajouter le volet supérieur à l'aide d'un module de texte. Ajoutez un nouveau module de texte sous l'image.

Mettez à jour le contenu du module de texte en ajoutant le texte « divi » dans la zone du corps.

Sous l'onglet Conception, mettez à jour le style de texte comme suit :

• Police de texte : Poppins
• Poids de la police de texte : lourd
• Style de police de texte : TT
• Texte Couleur du texte : #ffffff
• Taille du texte : 200px (ordinateur de bureau), 30vw (tablette et téléphone)
• Espacement des lettres du texte : -0.03em
• Hauteur de la ligne de texte : 0em
• Alignement du texte : Centre

Ensuite, mettez à jour les options de dimensionnement et d'espacement :

• Largeur : 100 %
• Hauteur : 50 %
• Marge : 0px en bas

Sous l'onglet Avancé, mettez à jour les éléments suivants :

• Classe CSS : obturateur supérieur

Nous utiliserons la classe CSS pour activer et désactiver l'animation de transformation avec notre code plus tard.

Ajoutez ensuite ce CSS personnalisé à l'élément principal :

display:flex;
align-items:flex-end;
justify-content:center;

Ce code utilise flex pour s'assurer que le texte est aligné verticalement au bas du module. Étant donné que le texte a une hauteur de ligne de 0, le texte sera affiché comme divisé en affichant uniquement la moitié supérieure.

Pour positionner notre volet supérieur, nous devons d'abord masquer le débordement du texte puis lui donner une position absolue comme suit :

• Débordement horizontal : masqué
• Débordement vertical : caché
• Position : Absolu

Cela déplacera l'obturateur sur la moitié supérieure de l'image.

Création de l'obturateur inférieur avec le texte fractionné correspondant

Maintenant que notre volet supérieur est terminé, nous pouvons démarrer la création du volet inférieur en dupliquant le module de texte du volet supérieur.

Ensuite, ouvrez le module de texte en double et mettez à jour les éléments suivants :

• Classe CSS : obturateur supérieur

Mettez à jour le CSS de l'élément principal en remplaçant le "flex-end" par "flex-start" pour la propriété align-items. Voici le CSS final :

display:flex;
align-items:flex-start;
justify-content:center;

Avec « flex-start », le texte est aligné verticalement en haut du module. Et puisque le texte a une hauteur de ligne de 0, le texte sera affiché comme divisé en affichant uniquement la moitié inférieure.

Mettez ensuite à jour la position absolue avec un décalage vertical comme suit :

• Décalage vertical : 50 %

Cela amène le module de texte de l'obturateur à s'asseoir au-dessus de la moitié inférieure de l'image.

Le texte divisé sur les deux volets devrait maintenant être aligné comme une correspondance parfaite.

À ce stade, nous avons créé avec succès la configuration de notre superposition d'image d'obturateur de texte divisé. Cela se compose de la colonne de l'obturateur en tant que conteneur, de l'image principale, de l'obturateur supérieur qui se trouve dans la moitié supérieure de l'image et de l'obturateur inférieur qui se trouve dans la moitié inférieure de l'image.

Nous l'utiliserons comme une sorte de modèle de démarrage pour les prochains exemples qui incluront les animations d'effet d'obturateur utilisant les propriétés de transformation.

Partie 2 : Le Code

Pour ajouter la fonctionnalité de l'animation de l'obturateur, nous avons besoin de quelques extraits de CSS et JS à l'aide d'un module Code.

Ajoutez un nouveau module de code à la page. Nous pouvons l'ajouter à la colonne de droite de la toute première section supérieure que nous avons utilisée pour notre construction de superposition initiale.

Le CSS

Collez le CSS suivant dans la zone de code en vous assurant de l'envelopper avec les balises de style nécessaires :

  /* transition duration of shutter animation */
  .top-shutter,
  .bottom-shutter {
    transition: transform 1s;
  }
  /* disables all transform options created in
  Divi Builder for both shutters */
  .divi-transform-none .top-shutter,
  .divi-transform-none .bottom-shutter {
    transform: none;
  }
  .on-click {
    cursor:pointer;
  }

Ce CSS est vraiment simple. Tout ce qu'il fait, c'est appliquer transform: none aux volets à l'intérieur de la colonne avec la classe "divi-transform-none". Cette classe sera activée et désactivée avec JS pour créer l'animation. La transition : transform 1s définit simplement la durée de la transition (ou de l'animation) à 1 seconde.

Le JS

Après le CSS, ajoutez le JQuery suivant à la zone de code en vous assurant de l'envelopper avec les balises de script nécessaires :

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

La première partie du code ajoute la fonctionnalité qui bascule les animations de transformation de l'obturateur au survol chaque fois qu'une colonne a les classes "shutter-column on-hover divi-transform-none".

    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

La deuxième partie du code ajoute la fonctionnalité qui bascule les animations de transformation d'obturateur au clic chaque fois qu'une colonne a les classes "shutter-column on-click divi-transform-none".

    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });

Partie 3: Conceptions d'animation d'obturateur de texte divisé

Conception #1

Pour créer notre première conception d'animation d'obturateur, nous allons lancer le processus de conception en dupliquant la première section. Cela nous donnera une nouvelle section avec une superposition d'images prédéfinie avec les volets de texte divisés prêts à l'emploi.

Ajouter des propriétés de transformation à l'obturateur supérieur

Normalement, lorsque vous utilisez CSS pour animer quelque chose avec des propriétés de transformation, l'élément n'a initialement aucun style de transformation, puis le style de transformation est appliqué chaque fois que l'utilisateur survole ou clique sur l'élément. Dans Divi, nous allons inverser le processus et commencer par ajouter le style de transformation à l'élément en utilisant d'abord Divi Builder. Cela nous permet d'utiliser les options de transformation intégrées tout en éditant visuellement la conception. Ensuite, une fois que nous avons fini d'ajouter tous les éléments de conception de transformation, nous pouvons les désactiver initialement (à l'aide d'une classe CSS), puis l'activer et la désactiver lorsque l'utilisateur interagit avec la superposition.

Pour ajouter la conception de transformation au volet supérieur, ouvrez les paramètres du module de texte du volet supérieur et mettez à jour les éléments suivants :

• Échelle de transformation (X et Y) : 150 %
• Transformer l'axe Y de translation : -101%
• Origine de la transformation : en haut au centre

Si vous l'avez bien fait, l'obturateur supérieur ne sera plus visible, ce que nous voulons car nous voulons que toute l'image principale soit exposée après la transition d'animation.

Ajouter des propriétés de transformation à l'obturateur inférieur

Pour le volet inférieur, mettez à jour les options de conception de transformation suivantes :

• Échelle de transformation (X et Y) : 150 %
• Transformer l'axe Y de la translation : 101 %
• Origine de la transformation : en bas au centre

Ajouter une classe pour désactiver les conceptions de transformation initialement

Comme je l'ai mentionné plus tôt, une fois que nous avons terminé d'ajouter les conceptions de transformation nécessaires à notre animation d'obturateur, nous pouvons initialement désactiver ces conceptions de transformation en ajoutant une classe CSS.

En raison du code CSS personnalisé que nous avons ajouté précédemment, la conception apparaîtra sans aucune conception de transformation en place.

Ajouter une fonctionnalité au clic avec une seule classe

Pour que la même animation se déclenche au clic plutôt qu'au survol, il suffit de remplacer une seule classe dans la colonne.

Tout d'abord, dupliquez la colonne 1 avec notre premier exemple de travail au survol. Supprimez ensuite la colonne vide. Vous devriez maintenant avoir deux colonnes identiques avec les mêmes classes et le même contenu.

Ouvrez les paramètres de la colonne 2 et remplacez la classe "au survol" par la classe "au clic". Voici ce que devraient être les trois dernières classes :

• Classe CSS : obturateur-colonne au clic divi-transform-none

Résultat

Inverser l'animation de l'obturateur au survol

Si vous souhaitez que l'image principale soit affichée initialement découverte, puis ajoutez la superposition lors du survol de l'image (l'inverse de la façon dont cela fonctionne maintenant), vous pouvez supprimer la classe "divi-transform-none" dans la colonne utilisée pour l'obturateur . Cela vous donnera l'effet suivant.

Conception #2

Pour créer la deuxième animation d'obturateur, nous pouvons utiliser dupliquer la section précédente avec notre première animation d'obturateur.

Mettre à jour les volets

Utilisez ensuite la sélection multiple pour sélectionner les modules de texte du volet supérieur et du volet inférieur. Ensuite, ouvrez les paramètres d'élément pour les deux et mettez à jour les éléments suivants :

• Contexte : #ffffff
• Texte Couleur du texte : #000000
• Mode de fusion : écran

Résultat

Conception #3

Pour créer la troisième conception de superposition d'images d'animation d'obturateur, dupliquez la section précédente.

Ajouter une nouvelle image

Mettez ensuite à jour le module image avec une nouvelle image.

Mettre à jour les volets

Utilisez la multisélection pour sélectionner à la fois les modules de texte du volet supérieur et du volet inférieur et ouvrez les paramètres des éléments pour les deux afin de mettre à jour les éléments suivants :

• Contenu du corps : d

• Arrière-plan : rgba(0,0,0,0,9)
• Texte Couleur du texte : #ffffff
• Taille du texte du texte : 450 px (ordinateur de bureau), 70 vw (tablette et téléphone)
• Mode de fusion : multiplier

Ouvrez les paramètres du module de texte de l'obturateur supérieur et mettez à jour les options de transformation suivantes :

• Échelle de transformation (X et Y) : 100 % (par défaut)
• Transformer l'axe Y de translation : -101%
• Transformer l'axe Z de rotation : -45 deg
• Origine de la transformation : en haut à gauche

Mettez ensuite à jour les paramètres du module de texte du volet inférieur et mettez à jour les options de transformation suivantes :

• Échelle de transformation (X et Y) : 100 % (par défaut)
• Transformer l'axe Y de la translation : 101 %
• Transformer l'axe Z de rotation : -45 deg
• Origine de la transformation : en bas à droite

Résultat

Plus d'exemples et de possibilités

Voici quelques exemples de conceptions supplémentaires utilisant les mêmes techniques.

En voici un qui est similaire au design #2 mais sans l'échelle de transformation sur les volets. Il montre également comment l'effet lightbox fonctionne toujours sur l'image.

Et voici un autre exemple qui utilise transform translate pour faire glisser les volets horizontalement.

Résultats finaux

Dernières pensées

Créer des superpositions d'images avec des animations d'obturateur de texte divisé dans Divi peut être une approche efficace pour faire ressortir vos images et engager les visiteurs d'une manière nouvelle.

Espérons que cela stimulera votre créativité pour ajouter vos propres conceptions et transformer les effets d'animation en utilisant différentes couleurs, polices, modes de fusion, etc. Les possibilités semblent infinies.

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

À votre santé!