Comment déployer des images sur le défilement pour promouvoir une galerie d'images dans Divi

Savoir comment déployer des images avec les effets de défilement de Divi peut être un élément de conception subtil et impressionnant pour aider à promouvoir une galerie d'images sur une page de destination. L'idée est d'engager les utilisateurs lorsqu'ils font défiler la page en déployant des images comme une main de cartes à jouer.

Dans ce didacticiel, nous allons créer une disposition de section propre pour promouvoir une galerie d'images comprenant une collection d'images qui se déploient lors du défilement. Vous pouvez utiliser toutes les images de votre choix avec cette conception et ce serait un bel ajout à n'importe quelle page de destination.

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

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.

Partie 1 : Création de la mise en page et du contenu fictif

Pour cette première partie du tutoriel, nous allons construire la mise en page de la section avec une ligne à deux colonnes qui a un titre et un bouton dans la colonne de gauche. Dans la deuxième partie, nous ajouterons les images en éventail dans la colonne de droite.

Paramètres de section

Avant d'ajouter quoi que ce soit à la mise en page, mettez à jour les paramètres de la section par défaut comme suit :

• Rembourrage: haut 10vw, bas 10vw
• Débordement horizontal : masqué
• Débordement vertical : caché

Ajout de la ligne

Ensuite, ajoutez une nouvelle ligne avec une structure de colonnes deux tiers un tiers.

Paramètres de ligne

Mettez ensuite à jour les paramètres de ligne avec une image d'arrière-plan personnalisée. J'en utilise un de la mise en page prédéfinie de la page de destination de la papeterie. Après cela, mettez à jour les éléments suivants :

• Taille de l'image d'arrière-plan : taille réelle
• Position de l'image d'arrière-plan : en haut à gauche
• Largeur maximale : 900 pixels

Ajout du module de texte pour créer le titre

Une fois la ligne prête, ajoutez un nouveau module de texte à la colonne 1 pour créer le titre.

Contenu du texte

Ajoutez l'en-tête H1 suivant au contenu du corps :

<h1>Our Gallery</h1>

Paramètres de texte

Mettez ensuite à jour les paramètres de texte comme suit :

• Police de titre : Bellefair
• Alignement du texte de l'en-tête (tablette et téléphone) : à droite
• Taille du texte de l'en-tête : 150 px (ordinateur de bureau et tablette), 110 px (téléphone)

Ajout du bouton

Sous le module de texte, ajoutez un nouveau module de boutons.

Texte du bouton

Mettez à jour le texte du bouton avec « Voir la galerie ».

Paramètres des boutons

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

• Alignement (tablette et téléphone) : à droite
• Taille du texte du bouton : 14 px
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #121212
• Largeur de la bordure du bouton : 0px
• Espacement des lettres des boutons : 3px
• Police des boutons : Montserrat
• Style de police des boutons : TT
• Marge : 7vw haut

Partie 2 : Création des images avec l'effet de défilement Fan-Out

Dans cette deuxième partie du tutoriel, nous allons créer les images avec l'effet de défilement en éventail. Nous allons commencer par l'image du milieu. J'utilise les images de la mise en page prédéfinie de la page Fashion Gallery. Ils doivent être tous de la même taille pour un design cohérent. Ceux que j'utilise sont 400px par 600px.

Création de l'image du milieu

Ajoutez un nouveau module d'image dans la colonne de droite.

Ensuite, téléchargez une image dans le module.

Paramètres d'image

Mettez à jour la largeur et la marge maximales pour les écrans mobiles comme suit :

• Largeur max (tablette et téléphone): 200px
• Marge (tablette et téléphone) : 0px restant

Création de l'image du milieu à droite

Pour créer la deuxième image (ou l'image du milieu à droite), dupliquez le premier module d'image.

Paramètres d'image

Ouvrez ensuite les paramètres du module d'image en double et mettez à jour les éléments suivants :

Position

• Position : Absolu

Origine de la transformation

• Origine de la transformation : en bas au centre

Effets de défilement

Sous Mouvement horizontal, mettez à jour les éléments suivants :

• Activer le mouvement horizontal : OUI
• Décalage de départ : 0 (à 20 %)
• Milieu de décalage : 0,5 (à 50 %)
• Décalage de fin : 0,5 (à 100 %)

Sous Rotation, mettez à jour les éléments suivants :

• Activer la rotation : OUI
• Rotation de départ : 0 deg (à 20 %)
• Rotation moyenne : 20 degrés (à 50 %)
• Rotation finale : 20 degrés (à 100 %)

Créer la bonne image

Pour créer la troisième image qui se déroulera à l'extrême droite, dupliquez la deuxième image que nous avons créée.

Mettre à jour les effets de défilement

Sous Mouvement horizontal, mettez à jour les éléments suivants :

• Décalage moyen : 1
• Décalage de fin : 1

Sous Rotation, mettez à jour les éléments suivants :

• Rotation moyenne : 40 degrés
• Rotation finale : 40 degrés

Si vous ne l'avez pas remarqué, nous augmentons essentiellement le décalage horizontal par incréments de 0,5 et le décalage rotatif par incréments de 20 degrés avec chaque image. Cela créera un espacement égal entre les images. Et parce que l'animation de l'effet de défilement est basée sur l'origine de la transformation en bas au centre, elle donnera l'impression que les images se déploient comme une main de cartes à jouer.

Étiqueter les images dans la zone des calques

Avant de créer les deux dernières images, mettons à jour les étiquettes des images actuelles afin de ne pas nous confondre.

Création de l'image du milieu à gauche

Pour créer l'image du milieu à gauche, nous pouvons dupliquer l'image du milieu à droite.

Ensuite, faites-le glisser au-dessus de l'image du milieu vers le haut de la colonne.

Vous pouvez également mettre à jour cette étiquette d'image.

Mettre à jour les effets de défilement

Ouvrez les paramètres de l'image du milieu à gauche et mettez à jour les effets de défilement suivants :

Sous mouvement horizontal…

• Milieu de décalage : -0,5
• Décalage de fin : -0,5

REMARQUE : Tout ce que nous faisons est de changer la valeur de décalage en négatif.

Sous Rotation…

• Rotation moyenne : -20 degrés
• Rotation finale : -20 degrés

Création de l'image de gauche

Enfin, créons l'image de gauche finale en dupliquant l'image de droite et en la faisant glisser tout en haut de la colonne.

Vous pouvez également mettre à jour l'étiquette.

Mettre à jour les effets de défilement

Ouvrez les paramètres de l'image de gauche et mettez à jour les effets de défilement :

Sous Mouvement horizontal :

• Milieu de décalage : -1
• Décalage de fin : -1

Sous Rotation…

• Rotation moyenne : -40 degrés
• Rotation finale : -40 degrés

Indice Z de la colonne 1

À l'heure actuelle, les images de la colonne à chevaucheront le contenu de la colonne 1. Pour modifier cela, ouvrez les paramètres de la colonne 1 et mettez à jour l'index z comme suit :

• Indice Z : 10

Ajout de nouvelles images et filtres

Maintenant, tout ce que nous avons à faire est de mettre à jour chacune des images avec de nouvelles/différentes.

Pour un effet unique, ajoutez les filtres suivants à toutes les images (en utilisant la sélection multiple) à l'exception de l'image de droite.

• Saturation : 20%
• Opacité : 85 %

Résultat

Voici le résultat à ce jour…

Rotation de la colonne

Pour modifier un peu le design, nous pouvons faire pivoter la collection d'images en faisant pivoter la colonne parent.

Pour ce faire, ouvrez les paramètres de la colonne 2 et ajoutez l'option de transformation suivante :

• Transformation Rotation Axe Z : 40 degrés

Résultat final

Voici le résultat final.

Bureau

Tablette

Téléphone

Dernières pensées

Dans ce tutoriel, nous avons appris à déployer des images en éventail à l'aide des effets de défilement de Divi, mais ne vous arrêtez pas là ! Vous pouvez facilement utiliser cette même technique pour déployer n'importe quelle collection de modules (je pense aux textes de présentation). J'ai limité la distance de décalage avec les effets de défilement de chaque image afin que le design ne soit pas vraiment fonctionnel (c'est-à-dire que vous ne pouvez pas vraiment voir chaque image dans son intégralité). Mais, vous pouvez augmenter les décalages pour rendre les images plus visibles si vous le souhaitez.

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

À votre santé!