Créer une disposition verticale visqueuse de la ligne de temps dans Divi

Lorsque l’utilisateur fait défiler la page vers le bas, il est utile de créer une ligne de temps verticale permanente pour catégoriser le contenu par année et \/ ou mois. Les éléments de date collants restent fixés à côté du contenu afin de faciliter l’amélioration de l’expérience utilisateur que les utilisateurs apprécieront. Dans ce tutoriel, nous vous montrerons comment créer une disposition verticale complète de la ligne de temps dans Divi. La clé de cette conception est (1) de fournir une largeur personnalisée pour les colonnes afin que les éléments de date ne prennent pas trop d’espace horizontal sur l’appareil mobile et (2) de rendre l’année et le mois permanents et de limiter en permanence les sections (années) et les lignes (mois).
Bien que cette mise en page comporte de nombreuses applications, nous créerons une mise en page chronologique pour afficher une galerie de photos triée par mois et année. Allons – y! Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. 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 obtenir
Principaux éléments de la tablette personnalisée: largeur: 15%! Important Ouvrez ensuite les paramètres de la colonne 2 et ajoutez le même remplissage et CSS comme suit: remplissage: 1% à gauche, 2% à droite Élément principal CSS (tableau): largeur: 15%! Important Ouvrez ensuite les paramètres de la colonne 3 et mettez à jour les éléments principaux du padding et du CSS comme suit: padding: 1% left, 2% right CSS main element (Tablet): width: 70%! Important Une fois la première ligne terminée, nous pouvons copier les lignes pendant plusieurs mois. Doublez la ligne. Dans les lignes en double, supprimer le texte de l’année. Nous n’avons besoin que d’un an pour chaque section, car l’année se poursuivra jusqu’au haut et au bas de la section. Ensuite, ouvrez le texte du mois et mettez à jour l’abréviation du mois avec le nouveau mois. Copier des sections dans d’autres années tout comme nous copions des lignes dans d’autres mois, nous pouvons copier des sections entières dans d’autres années. Continuez à copier les sections que nous venons de créer pour le contenu 2020. Dans la section répétitive, mettre à jour le texte de l’année à la ligne 1, colonne 1, à « 2019 ». Vous pouvez poursuivre ce processus en créant d’autres années et mois pour la mise en page de la ligne de temps au besoin. Résultats finaux vérifier les résultats finaux. Le travail de conception de cette disposition de ligne de temps est axé sur la réactivité en fournissant la taille du texte et en déplaçant la largeur de colonne d’un style particulier. Mais avec les options intégrées de Divi, le positionnement collant des éléments de date est très facile. J’espère que cela sera utile pour les projets futurs. J’ai trouvé cela utile pour afficher l’historique des pages d’information, même pour les pages de ressources, les pages de téléchargement ou les mises à jour de produits. J’ai hâte d’entendre vos commentaires. Bonjour!