Comment créer un effet de défilement de calques extensibles pour engager des illustrations d'applications dans Divi

La présentation d'une application ou d'un produit sur votre site Web ne doit pas nécessairement se limiter à des images ou des graphiques statiques. Avec les effets de défilement de Divi, vous pouvez donner vie aux illustrations d'applications en ajoutant une animation subtile et efficace qui engage les visiteurs. Dans ce tutoriel, nous allons découvrir un moyen simple de créer un effet de défilement de calques extensibles dans Divi. Il suffit de trois images (ou captures d'écran) avec les mêmes dimensions et toute la magie intégrée du constructeur Divi.

Allons-y et commençons.

Aperçu

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 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.

Création de l'effet de défilement des calques extensibles pour une illustration d'application engageante dans Divi

Ajouter une rangée

Commençons par ajouter une ligne à 2 colonnes (un demi-moitié).

Ajouter une marge temporaire à la section

Pour pouvoir prévisualiser les effets de défilement plus tard, ajoutez des marges supérieure et inférieure à la section comme suit :

• marge: 80vh haut, 80vh bas

Ajouter 3 images en tant que calques

Nous allons créer trois images qui serviront de trois couches à l'illustration de l'application. L'idée est d'utiliser trois images (ou captures d'écran) des fonctionnalités de l'application qui sont de la même taille/dimensions afin que les images s'emboîtent parfaitement les unes sur les autres. Ensuite, nous déplacerons les trois calques à l'aide des effets de défilement Divi.

Commençons par la première image.

Créer l'image 1

Ajoutez un module d'image dans la colonne de gauche.

Ensuite, téléchargez la première image dans le module. N'oubliez pas de vous assurer que les trois images auront les mêmes dimensions. Celui-ci mesure 500px par 1050px.

Paramètres de l'image 1

Ouvrez les paramètres du module image et mettez à jour les éléments suivants :

Largeur et marge

• Largeur : 300 px (ordinateur de bureau et tablette), 150 px (téléphone)
• Alignement du module : à gauche
• Marge : 0px en bas

Frontière

• Coins arrondis : 40px
• Largeur de la bordure : 15 px
• Couleur de la bordure : #ffffff

Boîte ombre

• Box Shadow : voir la capture d'écran
• Position verticale de l'ombre de la boîte : 0px
• Force du flou d'ombre de la boîte : 48px
• Couleur de l'ombre : rgba(0,0,0,0.2)

Créer une image 2

Pour créer l'image 2, dupliquez l'image 1.

Mettez ensuite à jour le module d'image en double avec une nouvelle image aux mêmes dimensions (500px par 1050px).

Paramètres de l'image 2

Ensuite, supprimez la frontière en mettant à jour les éléments suivants :

Frontière

• Largeur de la bordure : 0px

Nous n'avons pas besoin de bordure pour cette image, mais nous devons remplacer l'espacement des bordures par un remplissage pour nous assurer que les images s'empilent de manière transparente.

Rembourrage

• Remplissage : 15 px en haut, 15 px en bas, 15 px à gauche, 15 px à droite

Position

Mettez ensuite à jour la position de l'image 2 sur Absolu. Cela fera que l'image chevauchera parfaitement l'image 1.

• Position : Absolu

Pour plus d'informations, consultez notre article complet sur la façon d'utiliser la position absolue dans Divi.

Effets de défilement

Il est maintenant temps d'ajouter l'effet de défilement qui déplace notre calque (image 2) lors du défilement vers le bas de la page.

Mettez à jour les effets de défilement comme suit :

Sous l'onglet Mouvement vertical …

• Activer le mouvement vertical : OUI
• Décalage de départ : 0 (à 0 % de la fenêtre)
• Mid Offset : 0 (à 0 % de la fenêtre)
• Décalage de fin : -1 (à 100 % de la fenêtre)

Sous l'onglet Mouvement horizontal …

• Activer le mouvement horizontal : OUI
• Décalage de départ : 0 (à 0 % de la fenêtre)
• Décalage moyen : 1 (à 50 % de la fenêtre)
• Décalage de fin : -1,5 (à 100 % de la fenêtre)

Sous l'onglet Entrée et sortie en fondu…

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

Créer une image 3

Une fois tous les effets de défilement ajoutés à l'image 2, nous sommes prêts à créer l'image 3.

Ouvrez le menu des paramètres en bas du générateur et sélectionnez le bouton Couches pour déployer la fenêtre contextuelle des couches. Ensuite, dupliquez le module d'image 2 dans la colonne 1 pour créer l'image 3. L'utilisation de la fonction de calques pour cela est utile car il est difficile de sélectionner des modules qui se chevauchent.

Ouvrez maintenant les paramètres de l'image en double (image 3) et téléchargez une nouvelle image. Assurez-vous de garder les mêmes dimensions (500px par 1050px).

Image 3 Effets de défilement

Sous l'onglet Avancé, mettez à jour les options des effets de défilement pour l'image 3.

Sous l'onglet Mouvement vertical , mettez à jour le décalage du mouvement vertical comme suit :

• Décalage de fin : -2 (à 100 % de la fenêtre)

Sous l'onglet Mouvement horizontal , mettez à jour le mouvement horizontal comme suit :

• Décalage moyen : 2 (à 50 % de la fenêtre)
• Décalage de fin : 3 (à 100 % de la fenêtre)

Sous l'onglet Fading In and Out , mettez à jour les paramètres Fading In et Out comme suit :

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

Résultat

Découvrez le résultat jusqu'à présent.

Ajouter une inclinaison de transformation à la colonne 1

C'est un bel effet tel qu'il est, mais nous allons incliner la colonne pour créer davantage un effet 3D.

Ouvrez les paramètres de la colonne 1 et ajoutez un décalage de transformation comme suit :

Transformer l'inclinaison (axes X et Y): 8deg

Cela créera un bel effet 3D sur les couches en expansion.

C'est ça!

Facultatif : ajouter un CTA à la colonne 2

Nous pouvons maintenant ajouter n'importe quel titre et bouton (ou n'importe quel CTA) à la colonne de droite avec des effets de défilement complémentaires. Consultez le téléchargement gratuit de cette mise en page ci-dessus pour obtenir le même CTA dans cette illustration.

Résultat final

Voici le résultat final.

Et voici comment il s'empile sur tablette et téléphone.

Utiliser des images d'un pack de mise en page Divi

Les images utilisées dans ce didacticiel sont des images fictives de Shutterstock et sont également présentées sur notre page de démonstration des effets de défilement.

Pour modifier le design en fonction de vos propres besoins, vous pouvez utiliser des images de nos packs de mise en page gratuits ou créer vos propres captures d'écran. Voici un exemple de conception utilisant les images du Mobile App Layout Pack. J'ai également ajouté un arrière-plan dégradé pour compléter les images claires utilisées pour les calques en expansion.

En quelques minutes, nous avons un tout autre design !

Dernières pensées

L'effet de défilement des couches extensibles est une solution élégante pour présenter des applications ou des produits sans avoir à recourir à des techniques CSS plus compliquées ou à l'édition de photos. Et, vous pouvez utiliser cette même technique pour illustrer à peu près n'importe quoi. J'aime à quel point il est facile de changer les images pour les vôtres et d'incliner toute la collection d'images/calques avec une option simple dans Divi. Espérons que cela vous donne une inspiration qui vous permettra de créer des designs Divi incroyables.

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

À votre santé!