Comment créer une transition d'image détachée avec les effets de défilement de Divi

Les effets de défilement de Divi nous permettent de créer des animations de transition exceptionnelles qui peuvent impressionner les visiteurs avec un design accrocheur. Les images, en particulier, peuvent mettre en valeur la puissance de ces effets de défilement de manière surprenante. Dans ce tutoriel, nous allons expliquer étape par étape comment créer une transition d'image en échappée avec les effets de défilement de Divi. Cet effet était à l'origine présenté sur la page de démonstration. L'effet consiste à découper les images au préalable à l'aide d'un éditeur de photos comme Photoshop (c'est assez facile à faire). Une fois les images découpées, tout ce que nous avons à faire est de les ajouter à Divi et d'utiliser les effets de défilement intégrés pour que la magie opère.

Commençons.

Aperçu

Voici un aperçu de la conception pour aujourd'hui.

Vous pouvez également voir la démo originale en direct de la conception sur la page de démonstration sous le titre « L'exercice ne doit pas être ennuyeux ».

Téléchargez GRATUITEMENT la mise en page Breakaway Image Transition Divi

Pour mettre la main sur la mise en page de ce tutoriel, vous devrez d'abord la 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 sur votre page, extrayez simplement le fichier zip et faites glisser le fichier JSON 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.

En plus de la configuration Divi ci-dessus, vous aurez besoin de :

• Deux images (au moins 1080px par 540px)
• Un logiciel de retouche photo comme Photoshop pour découper les images avant de les ajouter à Divi.

Partie 1 : Découper les images dans Photoshop

Avant de pouvoir commencer à créer notre design dans Divi, nous devons découper nos deux images qui seront utilisées pour l'effet de défilement de transition de rupture. Les deux images devront être recadrées pour qu'elles mesurent exactement 1080px par 540px. Après cela, ils doivent être coupés en 8 parties égales (4 en travers, 2 en bas). Une fois prêts, nous pouvons les enregistrer sur notre ordinateur et télécharger les tranches d'images sur notre site. Commençons par la première image.

Image #1

Recadrage de l'image

La première chose que nous devons faire est de recadrer l'image afin qu'elle ait les dimensions exactes de 1080px par 540px. Vous pouvez utiliser n'importe quel logiciel de retouche d'image pour le faire. Dans Photoshop, vous pouvez utiliser l'outil de recadrage.

Découper l'image

Ensuite, cliquez pour utiliser l'outil de découpe et sélectionnez l'image entière. Cliquez avec le bouton droit sur la tranche/l'image et sélectionnez l'option Diviser la tranche.

Dans la zone d'option Diviser la tranche, mettez à jour les éléments suivants :

Diviser horizontalement en :

• 2 tranches vers le bas, régulièrement espacées
• 270 pixels par tranche

Diviser verticalement en :

• 4 tranches de diamètre, régulièrement espacées
• 270 pixels par tranche

Cliquez ensuite sur OK.

Enregistrement des tranches d'image

Nous avons maintenant une image découpée en 8 blocs égaux, chacun d'eux 270px par 270px.

Pour enregistrer les tranches d'image, accédez à Fichier > Exporter > Enregistrer pour le Web.

Choisissez ensuite le format de fichier et cliquez sur Enregistrer.

Dans la boîte contextuelle, assurez-vous de mettre à jour les éléments suivants :

• Enregistrer sous : [entrez le nom des images]
• Format : Images seulement
• Paramètres : Paramètres par défaut
• Tranches : toutes les tranches

Cliquez ensuite sur Enregistrer.

Maintenant, toutes vos tranches d'images seront enregistrées sur l'ordinateur, prêtes à être téléchargées sur Divi.

Image #2

Pour créer la deuxième image nécessaire à cet effet de défilement de transition d'image détachée, nous devons suivre le même processus (recadrage, découpage et enregistrement) que celui utilisé pour créer la première image.

Faire pivoter les tranches d'image

Cependant, en raison du fonctionnement de l'effet de défilement rotatif, chacune des tranches d'image qui composent la deuxième image devra être pivotée de 90 degrés vers la gauche ou vers la droite.

Pour faire pivoter une image, vous pouvez utiliser Photoshop ou le logiciel de retouche d'image intégré de votre système d'exploitation (vous pouvez même utiliser la galerie multimédia WordPress pour modifier et faire pivoter les images après les avoir téléchargées sur votre site.).

Voici un guide sur la façon dont les images doivent être pivotées dans leur position d'origine lors du découpage de l'image.

Voici l'image originale.

Voici comment les tranches d'image doivent être tournées avant de les télécharger sur votre site.

Ceci est nécessaire pour que nous puissions éventuellement obtenir l'effet de défilement suivant.

Maintenant que les deux images sont recadrées, découpées, enregistrées et pivotées, vous êtes prêt à les ajouter à votre site Divi. Vous devriez avoir un total de 16 images (8 de l'image 1 et 8 de l'image 2).

Partie 2 : Création de l'effet de défilement de transition d'image de rupture dans Divi

Une fois les tranches d'image prêtes, nous pouvons commencer le processus de conception dans Divi. Voici comment procéder.

Ajouter la ligne n° 1

Pour commencer, créez une ligne à quatre colonnes.

Paramètres de ligne

Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

• Largeur de gouttière : 1
• Largeur maximale : 1080px (ordinateur de bureau), 540px (tablette et téléphone)
• Remplissage : 0px en haut, 0px en bas
• Débordement horizontal : visible
• Débordement vertical : visible

Mettre à jour le remplissage de la section

Puisque nous allons positionner notre deuxième rangée absolument au-dessus de la première rangée, nous devons retirer le rembourrage supérieur (et inférieur) de la section afin qu'il ne perturbe pas la position de la deuxième rangée. Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

• Remplissage : 0px en haut, 0px à gauche

Ajout des images

Dans la première ligne, nous allons ajouter chacune des 8 images/tranches qui composent la première image. Les images doivent être positionnées dans les colonnes exactement comme elles ont été découpées dans Photoshop (4 en travers et 2 en bas).

Voici une illustration de chaque image étiquetée avec un numéro. Voici à quoi cela devrait ressembler une fois que toutes les images ont été ajoutées à la ligne.

Image #1

Ajoutez le premier module d'image à la colonne 1.

Téléchargez ensuite la première tranche d'image dans le module.

Effets de défilement

Sous l'onglet Avancé, ajoutez les effets de défilement suivants à l'image.

• Activer les fondus entrants et sortants : OUI
• Opacité de départ : 100 % (à 20 % de la fenêtre d'affichage)
• Opacité moyenne : 100 % (à 20 % de la fenêtre d'affichage)
• Opacité finale : 0 % (à 50 % de la fenêtre d'affichage)

Cliquez sur l'onglet Échelle et mettez à jour les éléments suivants :

• Activer la mise à l'échelle vers le haut et vers le bas : OUI
• Échelle de départ : 100 % (à 20 % de la fenêtre)
• Échelle moyenne : 70 % (à 32 % – 48 % dans la fenêtre d'affichage)
• Échelle de fin : 100 % (à 60 % de la fenêtre d'affichage)

Cliquez sur l'onglet Rotation et mettez à jour les éléments suivants :

• Activer la rotation : OUI
• Rotation de départ : 0 deg (à 0 % de la fenêtre d'affichage)
• Rotation moyenne : 0 deg (à 20 % de la fenêtre d'affichage)
• Rotation finale : -90 degrés (à 60 % de la fenêtre d'affichage)

L'effet de défilement ressemblera à ceci lors du défilement vers le bas de la page.

Image #2

Pour créer l'image #2, dupliquez l'image #1 et placez le duplicata dans la colonne 2.

Mettez à jour le module d'image en double avec l'image #2.

Mettre à jour l'effet de défilement

Nous allons conserver la plupart des mêmes effets de défilement reportés de l'image #1. La seule chose que nous devons changer est la rotation. Accédez à l'onglet avancé et modifiez la rotation finale à 90 degrés (au lieu de -90 degrés) afin qu'elle tourne dans le sens opposé.

• Rotation finale : 90 degrés

Image #3

Pour créer l'image n°3, copiez et collez l'image n°1 dans la colonne 3, puis changez l'image en image n°3.

Image #4

Pour créer l'image n°4, copiez et collez l'image n°2 dans la colonne 4 et mettez l'image à jour avec l'image n°4.

Image #5

Pour créer l'image n°5, dupliquez l'image n°1 de sorte que le doublon se trouve directement en dessous dans la colonne 1.

Mettez à jour l'image à l'image #5. Mettez ensuite à jour l'effet de défilement Fading In et Out comme suit :

• Opacité de départ : 100 % (à 0 % de la fenêtre d'affichage)
• Opacité moyenne : 100 % (à 0 % de la fenêtre d'affichage)
• Opacité finale : 0 % (à 40 % de la fenêtre d'affichage)

Mettez ensuite à jour l'effet de défilement Scaling Up and Down comme suit :

• Échelle de départ : 100 % (à 0 % de la fenêtre)
• Échelle moyenne : 70 % (à 12 % – 28 % dans la fenêtre d'affichage)
• Échelle finale : 100 % (à 40 % de la fenêtre d'affichage)

Et enfin, mettez à jour l'effet de défilement rotatif comme suit :

• Rotation de départ : 0 deg (à 0 % de la fenêtre d'affichage)
• Rotation moyenne : 0 deg (à 0 % de la fenêtre d'affichage)
• Rotation finale : 90 degrés (à 40 % de la fenêtre d'affichage)

Image #6

Pour créer l'image n°6, dupliquez l'image n°5 et déplacez-la dans la colonne 2 (sous l'image n°2).

Mettez à jour le module image avec l'image #5. Réglez ensuite l'effet de défilement rotatif dans la direction opposée (-90 degrés) comme suit :

• Rotation finale : -90 degrés

Image #7

Pour créer l'image n°7, dupliquez l'image n°5 et déplacez-la sous l'image n°3 dans la colonne 3. Mettez ensuite à jour le module d'image dupliquée avec l'image n°7.

Image #8

Pour créer l'image n°8, dupliquez l'image n°6 et déplacez-la sous l'image n°4 dans la colonne 4. Mettez ensuite à jour le module d'image dupliquée avec l'image n°8.

Maintenant, toutes les tranches d'image ont été ajoutées à la ligne 1 avec l'effet de défilement échappé.

Voici à quoi ressemble le résultat jusqu'à présent.

Ajouter la ligne n° 2

La conception de la deuxième rangée d'images ne prendra pas beaucoup de temps. Tout ce que nous avons à faire est de dupliquer la ligne #1, de mettre à jour toutes les images avec les bonnes, puis de lui donner une position absolue.

Allez-y et dupliquez la ligne #1.

Mettre à jour les images de la ligne 2

Rappelez-vous les images pivotées que nous avons créées pour l'image #2. Maintenant, tout ce que nous avons à faire est de télécharger chacun d'eux à l'emplacement correct du module d'image dans la ligne #2.

Mettre à jour les effets de défilement d'image

Une fois que les nouvelles images pivotées sont en place, nous devons supprimer l'effet de défilement Fading In et Out de toutes les images de la rangée #2.

Faites-le, déployez le mode d'affichage filaire et utilisez la sélection multiple pour sélectionner les 8 images de la ligne 2. Ouvrez ensuite les paramètres de l'une des images sélectionnées pour déployer les paramètres de l'élément. Sous l'option Effet de défilement en fondu entrant et sortant, mettez à jour les éléments suivants :

• Activer les fondus entrants et sortants : NON

Rang de position #2

Notre dernière étape consiste à positionner la rangée #2 directement derrière la rangée #1. Un moyen simple de le faire est de donner la ligne et la position absolue. Ouvrez les paramètres de la ligne 2 et mettez à jour les éléments suivants :

• Position : Absolu
• Emplacement : Centre supérieur

Résultat final

Pour voir le résultat, vous devrez peut-être donner à votre section une marge importante en haut et en bas ou créer d'autres sections au-dessus et en dessous du dessin. Cela vous donnera l'espace dont vous avez besoin pour voir correctement l'effet de défilement.

Voyons le résultat final.

Et le voici sur mobile.

Dernières pensées

Cette transition d'image détachée est une conception impressionnante en soi, mais vous pouvez facilement l'utiliser pour transmettre un message de type transformation aux visiteurs (comme un avant et un après). Et vous n'avez pas non plus à vous contenter de cette conception. N'hésitez pas à expérimenter différents effets de défilement pour créer des transitions d'images encore plus étonnantes. Avez-vous des idées?

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

À votre santé!