Lorsque lamp;rsquoutilisateur 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 lamp;rsquoamélioration de lamp;rsquoexpérience utilisateur que les utilisateurs apprécieront. Dans ce tutoriel, nous 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 damp;rsquoespace horizontal sur lamp;rsquoappareil mobile et (2) de rendre lamp;rsquoanné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, 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 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 lamp;rsquoannée. Nous namp;rsquoavons besoin que damp;rsquoun an pour chaque section, car lamp;rsquoannée se poursuivra jusquamp;rsquoau haut et au bas de la section. Ensuite, ouvrez le texte du mois et mettez à jour lamp;rsquoabréviation du mois avec le nouveau mois. Copier des sections dans damp;rsquoautres années tout comme nous copions des lignes dans damp;rsquoautres mois, nous pouvons copier des sections entières dans damp;rsquoautres 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 lamp;rsquoannée à la ligne 1, colonne 1, à « 2019 ». Vous pouvez poursuivre ce processus en créant damp;rsquoautres 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 damp;rsquoun style particulier. Mais avec les options intégrées de Divi, le positionnement collant des éléments de date est très facile. Jamp;rsquoespère que cela sera utile pour les projets futurs. Jamp;rsquoai trouvé cela utile pour afficher lamp;rsquohistorique des pages damp;rsquoinformation, même pour les pages de ressources, les pages de téléchargement ou les mises à jour de produits. Jamp;rsquoai hâte damp;rsquoentendre vos commentaires. Bonjour!
Créer une disposition verticale visqueuse de la ligne de temps dans Divi
