Comment flasher progressivement les étapes d'un processus avec les effets de défilement de Divi
Publié: 2020-03-01Les entreprises informent souvent leurs visiteurs sur leurs services en offrant une illustration utile des étapes de leur processus. Par exemple, une agence de conception de sites Web peut montrer son processus de développement Web ou une boulangerie peut présenter ses étapes pour créer le cupcake parfait.
Avec Divi, nous pouvons faire passer les « étapes d'un processus » à un tout autre niveau en utilisant les effets de défilement intégrés. Dans ce didacticiel, nous allons vous montrer un moyen simple de flasher progressivement les étapes d'un processus au fur et à mesure que l'utilisateur fait défiler la page. Cela donnera au design un joli coup de pouce interactif qui mettra l'accent de manière créative sur le message voulu.
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 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.
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 :
- Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
- Choisissez l'option « Construire à partir de zéro ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Comment flasher progressivement les étapes d'un processus avec les effets de défilement de Divi
Pour créer notre mise en page pour flasher les étapes d'un processus au défilement, nous devons commencer par ajouter une nouvelle ligne.
Création de la ligne à quatre colonnes
Pour commencer, ajoutez une ligne de quatre colonnes à la section.
Avant de commencer à ajouter des modules/contenus aux colonnes, ouvrez les paramètres de la ligne et mettez à jour les éléments suivants :
- Largeur de gouttière : 2
- Largeur maximale : 80 %
Assez simple jusqu'à présent. Commençons maintenant à ajouter du contenu.
Ajout de contenu (étapes) à chaque colonne
Étant donné que cette conception comporte un effet de défilement qui fait clignoter les étapes d'un processus, chacune de nos colonnes contiendra l'une des étapes. La colonne 1 contiendra du contenu pour illustrer l'étape 1. La colonne 2 contiendra le contenu de l'étape 2. Et ainsi de suite.
Ajouter un module de texte à la colonne 1
Ajoutez un nouveau module de texte à la colonne 1.
Contenu et conception du module de texte
Mettez ensuite à jour le contenu du texte comme suit :
Ouvrez l'onglet Conception et mettez à jour les paramètres suivants :
- Police du texte : Lato
- Poids de la police de texte : gras
- Couleur du texte du texte : #fc6d71
- Police de titre 2 : Oswald
- Titre 2 Épaisseur de la police : Léger
- Titre 2 Taille du texte : 32 px
- En-tête 2 Espacement des lettres : 1px
- Titre 2 Hauteur de ligne : 1,3 em
- Marge : 0px en bas
- Rembourrage : 10 % haut, 10 % bas
- Largeur de la bordure : 1px
- Couleur de la bordure : rgba (166 166 166 0,16)
Ajouter un module d'image à la colonne 1
Une fois le module de texte en place, ajoutez un module d'image sous le module de texte dans la colonne 1.
Mettez ensuite à jour la marge de l'image comme suit :
Copier et coller le contenu de la colonne 1
Pour accélérer le processus de conception, nous pouvons utiliser la sélection multiple pour sélectionner les deux modules de la colonne 1, puis les coller dans chacune des quatre colonnes restantes.
Mettre à jour le contenu des modules en double
Une fois les modules en double en place, revenez en arrière et mettez à jour le contenu du texte et les images pour refléter chacune des quatre étapes du processus.
Une fois terminé, votre conception devrait ressembler à ceci.
Ajout d'effets de défilement à chaque colonne
Nous sommes maintenant prêts à ajouter les effets de défilement pour faire clignoter chaque étape du processus lorsque l'utilisateur fait défiler la page. Au lieu d'ajouter des effets de défilement à chacun des modules, nous ajouterons l'effet de défilement à chaque colonne afin que l'effet soit appliqué à tous les modules du contenu.
Pour créer l'effet de défilement clignotant, nous allons utiliser l'effet de défilement Fading In et Out pour chaque colonne. L'idée est de commencer l'effet en commençant par 0% d'opacité, de continuer jusqu'à 100% d'opacité, puis de redescendre à 0%.
Colonne 1 Effets de défilement
Dans les paramètres de ligne, ouvrez les paramètres de la colonne 1 et ajoutez l'effet de défilement suivant :
Sous l'onglet Options de fondu entrant et sortant :
- Activer les fondus entrants et sortants : OUI
- Opacité de départ : 0% (à 20% viewport)
- Opacité moyenne : 100 % (à 25 %-45 % de la fenêtre d'affichage)
- Opacité finale : 0 % (à 50 % de la fenêtre d'affichage)
Effets de défilement de la colonne 2
Ouvrez les paramètres de la colonne 2 et ajoutez l'effet de défilement suivant :
Sous l'onglet Options de fondu entrant et sortant :
- Activer les fondus entrants et sortants : OUI
- Opacité de départ : 0 % (à 35 % de la fenêtre d'affichage)
- Opacité moyenne : 100 % (à 40 % - 60 % de la fenêtre d'affichage)
- Opacité finale : 0 % (à 65 % de la fenêtre d'affichage)
Colonne 3 Effets de défilement
Effets de défilement de la colonne 4
Ajout d'un titre
Comme touche finale, nous pouvons ajouter un titre à notre mise en page. Pour ce faire, ajoutez une nouvelle ligne à une colonne sous la ligne actuelle.
Ajoutez ensuite un module de texte à la ligne avec le contenu suivant :
Sous l'onglet Conception, mettez à jour les éléments suivants :
- Alignement du texte : Lato
- Titre 2 Épaisseur de la police : Léger
- Titre 2 Style de police : TT
- Titre 2 Couleur du texte : #fc6d71
- Titre 2 Taille du texte : 70px (ordinateur de bureau), 40px (tablette), 24px (téléphone)
- Espacement des lettres de l'en-tête 2 : 0,5 em
Résultat final
Pour voir le résultat sur une page en direct, vous devrez ajouter un espace supplémentaire au-dessus et au-dessous de la section pour voir l'effet de défilement du début à la fin. Un moyen simple de le faire est d'ajouter des marges supérieure et inférieure à la section.
Voici le résultat.
Dernières pensées
L'illustration des étapes d'un processus ne doit pas nécessairement se limiter à une image statique ou à un graphique. Avec l'effet de défilement de Divi, vous pouvez donner vie à l'illustration en faisant progressivement clignoter chaque étape au fur et à mesure que l'utilisateur fait défiler la page. Et, puisque l'effet de défilement est ajouté à chaque colonne, vous pouvez facilement modifier les modules/contenus dans chaque colonne sans perturber la fonctionnalité. Espérons que ce sera une technique utile à ajouter à votre boîte à outils de conception.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!