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 lamp;rsquoutiliser pour afficher une série damp;rsquoétapes sur la page, ainsi que les étapes du processus, et plus encore. Avec lamp;rsquoeffet de défilement de Divi, pouvez créer une ligne de temps! Dans ce tutoriel, nous montrerons comment utiliser lamp;rsquoeffet 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, lamp;rsquoeffet de défilement a un point damp;rsquoexécution qui guide lamp;rsquoutilisateur le long de la ligne de temps, mettant en évidence chaque événement lorsque lamp;rsquoutilisateur défile.
Regarde ça! Téléchargement gratuit Divi timeline Layout pour obtenir les graphiques de ce tutoriel, devez damp;rsquoabord les en utilisant les boutons ci dessous. Pour accéder au téléchargement, devez abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci dessous. En tant que nouvel utilisateur, recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! êtes déjà sur la liste, il suffit de saisir votre adresse e mail ci dessous et cliquez sur . Vous ne serez pas « ré abonné » ou recevrez un courriel supplémentaire. Télécharger le fichier
Inscrivez à Divi Newsletter et nous enverrons par courriel une copie du dernier paquet de mise en page de la page damp;rsquoatterrissage Divi, ainsi quamp;rsquoun grand nombre damp;rsquoautres ressources, conseils et astuces Divi gratuits. Suivez nous et serez bientôt maître Divi. êtes déjà abonné, entrez votre adresse e mail ci dessous et cliquez sur pour accéder au paquet Layout.
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 damp;rsquoextraire le fichier zip et de faire glisser le fichier json dans Divi Builder. Commençons le tutoriel. Que devez commencer à faire
Iziare, devrez faire ce qui suit: si ce namp;rsquoest 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 lamp;rsquooption créer à partir de zéro. Ensuite, recherchez et sélectionnez le paquet de mise en page Brewery dans lamp;rsquoonglet mise en page par défaut. Sélectionnez ensuite la mise en page de la page damp;rsquoinformation sur la brasserie et cliquez sur le bouton utiliser cette mise en page. Après cela, 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 damp;rsquoinformation sur la brasserie pour ajouter des éléments de conception accrocheurs à la mise en page de conception et à lamp;rsquoeffet de défilement. Les principales caractéristiques de la mise en page sont notamment le positionnement créatif des panneaux damp;rsquoaffichage en tant quamp;rsquoéléments damp;rsquoévénements sur la ligne de temps. Lamp;rsquoaxe 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 lamp;rsquoutilisateur fait défiler la page.
On y va. Partie 1: créez la section titre en supprimant damp;rsquoabord les sections indésirables et en assurant que la mise en page de la Brewery est correctement chargée dans la page en utilisant Divi Builder. Pour cette conception, nous namp;rsquoutiliserons 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 damp;rsquoajouter une valeur de décalage prévisible de lamp;rsquoeffet 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. Namp;rsquoanimez pas avant damp;rsquooublier, sortons lamp;rsquoanimation par défaut que avez ajoutée à toutes les icônes Blurb. Lamp;rsquoindex Z est flou, puis lamp;rsquoindex Z est réglé à 1. Cela garantit que le cercle que nous ajouterons plus tard se trouve derrière lamp;rsquoicône de dessin. Créer un séparateur de cercle en cours damp;rsquoexécution lamp;rsquoétape suivante consiste à créer un séparateur de cercle, à le placer absolument, puis à le déplacer en ligne droite damp;rsquoune icône bleue à lamp;rsquoautre (300 pixels) au fur et à mesure que Défilez. Ajouter un nouveau module séparateur dans Blurb 1. Sélectionnez ensuite non dans le séparateur damp;rsquoaffichage 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 lamp;rsquoicô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 lamp;rsquoonglet 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
Camp;rsquoest la hauteur exacte de Blurb. Sur lamp;rsquoonglet redimensionner vers le haut et vers le bas Activer lamp;rsquoé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 que le déclencheur damp;rsquoeffet de mouvement est réglé en haut de lamp;rsquoé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 damp;rsquoimpulsion à lamp;rsquoicône floue lorsque le cercle de défilement lamp;rsquoatteindra ou lorsque lamp;rsquoicône atteindra 50% (Centre) de la fenêtre. Pour créer un nouveau distributeur damp;rsquoimpulsions, ouvrez la fenêtre de vue des calques et copiez le distributeur nouvellement créé. Ajoutez lamp;rsquoeffet de défilement Pulse et highlight, puis activez les paramètres du séparateur de copie et mettez à jour lamp;rsquoeffet de défilement suivant: sur lamp;rsquoonglet mouvement vertical, ouvrez Activer le mouvement vertical dans lamp;rsquoonglet 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 damp;rsquoêtre réglé à un peu plus grand que Lamp;rsquoicône Blurb. Cela produira un effet damp;rsquoimpulsion 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 damp;rsquoéléments damp;rsquoé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 quamp;rsquoils restent dans lamp;rsquoordre damp;rsquoorigine (définition 1, exécution 1, impulsion 1).
- Renommer ensuite le module duplicate comme suit: blurb2 runner2 pulsulo2 mettre à jour lamp;emplacement où le séparateur de cercle 2 fonctionne, puis utiliser
- 1 comme dernière touche, nous ajustons le premier séparateur de cercle de course (Runner 1) de sorte quamp;rsquoil 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. Lamp;rsquoidé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. Jamp;rsquoai hâte damp;rsquoentendre vos commentaires. Bonjour!
Téléphone, ajouter ce qui suit: Direction: RTL Puis ajoutez le CSS personnalisé suivant à lamp;rsquoimage Blurb: padding left: 15px dans lamp;rsquoonglet téléphone, ajoutez ce qui suit: padding left: 0px
