Les entreprises présentent souvent leurs services aux visiteurs en leur fournissant une description utile des étapes du processus. Par exemple, un concepteur de site Web peut montrer son propre processus de développement de site Web, ou une boulangerie peut montrer les étapes pour faire un Cupcake parfait. Avec Divi, nous pouvons utiliser l’effet de défilement intégré pour élever les étapes de traitement à un niveau complètement différent. Dans ce tutoriel, nous vous montrerons un moyen simple de visualiser les étapes du processus étape par étape lorsque les utilisateurs font défiler la page. Cela donnera une belle impulsion interactive au design, en mettant l’accent de façon créative sur le message attendu.
Un voyeur. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire. Télécharger le fichier
Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout.
Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Pour importer une mise en page dans une page, il suffit d’extraire le fichier zip et de faire glisser le fichier json dans Divi Builder. Commençons le tutoriel. Que devez – vous commencer?
D’abord, tu dois faire de ton mieux.
Dans la colonne 1. Ensuite, mettez à jour les marges 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 plusieurs sélections pour sélectionner deux modules dans la colonne 1 et les coller dans chacune des quatre colonnes restantes. Mise à jour du contenu des formulaires en double une fois que les formulaires en double sont en place, retournez et mettez à jour le contenu textuel et les images pour refléter les quatre étapes du processus.
Une fois terminé, votre conception devrait ressembler à ceci. Ajoutez l’effet de défilement à chaque colonne maintenant, nous sommes prêts à ajouter l’effet de défilement afin que chaque étape du processus clignote lorsque l’utilisateur fait défiler la page. Au lieu d’ajouter un effet de défilement à chaque module, nous ajoutons l’effet de défilement à chaque colonne afin qu’il s’applique à tous les modules du contenu. Pour créer un effet de défilement clignotant, nous utiliserons un effet de défilement de fondu vers l’intérieur et vers l’extérieur pour chaque colonne. L’idée est de commencer par une opacité de 0%, de continuer avec une opacité de 100%, puis de revenir à 0%.
Colonne d’effet de défilement 1 dans les paramètres de ligne, Ouvrez les paramètres de la colonne 1 et ajoutez l’effet de défilement suivant: dans l’onglet options de mélange intérieur et extérieur: activer le mélange intérieur et extérieur: est l’opacité initiale: 0% (sous 20% de vue) opacité moyenne: 100% (sous 25% – 45% de vue) opacité finale: 0% (sous 50% de vue) Effet de défilement colonne 2 ouvre les paramètres de la colonne 2 et ajoute l’effet de défilement suivant: dans l’onglet options vers l’intérieur et vers l’extérieur: activer le fondu vers l’intérieur et vers l’extérieur: est l’opacité initiale: 0% (sous 35% de vue) opacité moyenne: 100% (sous 40% – 60% de vue) opacité finale: 0% (sous 35% de vue)