Utiliser l’effet de défilement pour concevoir la disposition du calendrier Divi

La mise en page de la chronologie est utile pour de nombreuses applications différentes sur le site, en particulier lorsque cela semble bon sur les appareils mobiles. Vous pouvez l’utiliser pour afficher une série d’étapes sur la page, ainsi que les étapes du processus, et plus encore. Avec l’effet de défilement de Divi, vous pouvez créer une ligne de temps! Dans ce tutoriel, nous vous montrerons comment utiliser l’effet de défilement pour concevoir une mise en page complète du calendrier Divi. La chronologie est flexible, élégante et réactive. De plus, l’effet de défilement a un point d’exécution qui guide l’utilisateur le long de la ligne de temps, mettant en évidence chaque événement lorsque l’utilisateur défile.
Regarde ça! Téléchargement gratuit Divi timeline Layout pour obtenir les graphiques 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 à faire
Iziare, vous devrez faire ce qui suit: si ce n’est pas déjà fait, installez et activez le thème Divi. Créez une nouvelle page dans WordPress et utilisez Divi Builder pour éditer la page à l’avant (Visual Builder). Sélectionnez l’option créer à partir de zéro. Ensuite, recherchez et sélectionnez le paquet de mise en page Brewery dans l’onglet mise en page par défaut. Sélectionnez ensuite la mise en page de la page d’information sur la brasserie et cliquez sur le bouton utiliser cette mise en page. Après cela, vous pouvez commencer à concevoir dans Divi.
Créer une disposition de ligne de temps avec effet de défilement dans Divi cette disposition de ligne de temps se compose de deux parties principales: la section titre et la section ligne de temps. Nous utilisons la mise en page par défaut de la page d’information sur la brasserie pour ajouter des éléments de conception accrocheurs à la mise en page de conception et à l’effet de défilement. Les principales caractéristiques de la mise en page sont notamment le positionnement créatif des panneaux d’affichage en tant qu’éléments d’événements sur la ligne de temps. L’axe est en fait le bord gauche de la ligne dans la moitié droite de la fenêtre. Et les effets de défilement sont ajoutés à plusieurs modules séparateurs qui ont été convertis en cercles colorés qui seront positionnés et déplacés avec un décalage précis au fur et à mesure que l’utilisateur fait défiler la page.
On y va. Partie 1: créez la section titre en supprimant d’abord les sections indésirables et en vous assurant que la mise en page de la Brewery est correctement chargée dans la page en utilisant Divi Builder. Pour cette conception, nous n’utiliserons que la partie de la ligne de temps affichée au bas de la page. Supprimer toutes les sections au – dessus et au – dessous de cette section afin de ne conserver que cette section. Cette partie devrait être en bas à gauche. Ajouter une nouvelle section ajouter une nouvelle section sous la section par d éfaut et la faire glisser en haut d
La hauteur définie par la longueur unitaire en pixels. Cela nous permettra d’ajouter une valeur de décalage prévisible de l’effet de défilement, qui est également basée sur la longueur unitaire en pixels. Comme nous allons déplacer un cercle le long du module Blurb par incréments de 300 Px, une valeur de hauteur doit être définie pour effectuer cette opération. N’animez pas avant d’oublier, sortons l’animation par défaut que vous avez ajoutée à toutes les icônes Blurb. L’index Z est flou, puis l’index Z est réglé à 1. Cela garantit que le cercle que nous ajouterons plus tard se trouve derrière l’icône de dessin. Créer un séparateur de cercle en cours d’exécution l’étape suivante consiste à créer un séparateur de cercle, à le placer absolument, puis à le déplacer en ligne droite d’une icône bleue à l’autre (300 pixels) au fur et à mesure que vous Défilez. Ajouter un nouveau module séparateur dans Blurb 1. Sélectionnez ensuite non dans le séparateur d’affichage et spécifiez une couleur de fond pour le séparateur: couleur de fond: # e94558 Bouclez le diviseur de sorte que le diviseur soit arrondi, réglez la largeur et la hauteur à la même valeur (50 Px) et réglez le rayon du bord \/ filet à 50%. Largeur: 50 Px hauteur: 50 Px filet: 50% Ensuite, placez le séparateur derrière l’icône bleue en mettant à jour ce qui suit: position: décalage horizontal absolu: – 27px 1 après avoir positionné le séparateur de cercle, nous pouvons ajouter un effet de défilement pour créer le mouvement du cercle de mouvement. Sur l’onglet mouvement vertical… Activer le mouvement vertical: s décalage initial: 0 (dans 0% viewport) décalage moyen: 0 (dans 50% viewport) décalage final: 3 (dans 75% viewport) Note: le décalage final est de 3 pour 300 Px, de sorte que la ligne de division se déplace du haut du flou au bas du flou à 300 Px près
– C’est la hauteur exacte de Blurb. Sur l’onglet redimensionner vers le haut et vers le bas… Activer l’échelle supérieure et inférieure: s Échelle initiale: 50% (sous 50% de vue) Échelle moyenne: 50% (sous 55% – 70% de vue) décalage final: 90% (sous 75% de vue) Assurez – vous que le déclencheur d’effet de mouvement est réglé en haut de l’élément. Créer un séparateur de surbrillance du poignet le séparateur suivant que nous devons créer ajoutera un effet de surbrillance d’impulsion à l’icône floue lorsque le cercle de défilement l’atteindra ou lorsque l’icône atteindra 50% (Centre) de la fenêtre. Pour créer un nouveau distributeur d’impulsions, ouvrez la fenêtre de vue des calques et copiez le distributeur nouvellement créé. Ajoutez l’effet de défilement Pulse et highlight, puis activez les paramètres du séparateur de copie et mettez à jour l’effet de défilement suivant: sur l’onglet mouvement vertical, ouvrez… Activer le mouvement vertical dans l’onglet redimensionnement vers le haut et vers le bas: non… Échelle de départ: 100% (sous 50% de vue) Échelle moyenne: 160% (sous 51% – 54% de vue) décalage final: 130% (sous 55% de vue), ce qui fait que le séparateur de cercle est brièvement ajusté à 160 avant d’être réglé à un peu plus grand que L’icône Blurb. Cela produira un effet d’impulsion et donc un effet de lumière. Étiqueter les trois premiers modules pour une meilleure organisation, étiqueter le premier groupe de trois modules comme suit: blurb1 corridor 1 pulseo1 Copier les trois premiers modules maintenant nous devons poursuivre ce processus pour créer plus d’éléments d’événement dans une ligne de temps avec un effet de défilement. Pour ce faire, copiez et collez les trois premiers modules ci – dessous, en veillant à ce qu’ils restent dans l’ordre d’origine (définition 1, exécution 1, impulsion 1).

Renommer ensuite le module duplicate comme suit: blurb2 runner2 pulsulo2 mettre à jour l’emplacement où le séparateur de cercle 2 fonctionne, puis utiliser
Téléphone, ajouter ce qui suit: Direction: RTL; Puis ajoutez le CSS personnalisé suivant à l’image Blurb: padding left: 15px dans l’onglet téléphone, ajoutez ce qui suit: padding left: 0px

1 comme dernière touche, nous ajustons le premier séparateur de cercle de course (Runner 1) de sorte qu’il commence par la première icône Blurb. Pour ce faire, ouvrez les paramètres de Runner 1 et mettez à jour ce qui suit: compensation initiale: – 4

Résultats finaux Vérifiez les résultats finaux sur votre bureau et votre appareil mobile. L’idée finale Divi timeline Layout a un design élégant et des effets de défilement qui sont très utiles aux utilisateurs. De plus, la conception semble avoir des possibilités infinies de changement pour explorer de nouveaux effets. Nous espérons que cette mise en page sera utile pour votre prochain projet. J’ai hâte d’entendre vos commentaires. Bonjour!