Comment créer une mise en page de chronologie verticale collante dans Divi
Publié: 2020-10-14La création d'une chronologie verticale peut être extrêmement utile pour catégoriser le contenu par année et/ou par mois lorsque l'utilisateur fait défiler la page. Les éléments de date collante restent fixes à côté du contenu pour un boost UX pratique que les utilisateurs apprécieront.
Dans ce tutoriel, nous allons vous montrer comment créer une mise en page complète de la timeline verticale collante dans Divi. Les clés de cette conception sont (1) de donner à vos colonnes une largeur personnalisée afin que les éléments de date ne prennent pas trop d'espace horizontal sur mobile et (2) de rendre l'année et le mois collants, avec des limites collantes sur la section (pour l'année) et rangée (pour le mois).
Bien que cette mise en page ait des applications à multiples facettes, nous allons créer une mise en page chronologique pour présenter des galeries de photos classées par mois et par année.
Commençons!
Aperçu
Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.
Téléchargez la mise en page GRATUITEMENT
Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.
Cliquez sur le bouton Importer.
Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.
Cliquez ensuite sur le bouton importer.
Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devrez effectuer les opérations suivantes :
- Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
- Choisissez l'option « Construire à partir de zéro ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Partie 1 : Construire le cap du bâton
Le premier élément que nous allons concevoir est le titre collant qui restera fixe en haut de la page lors du défilement.
Ajouter une rangée
Pour commencer, ajoutez une disposition de colonnes deux cinquièmes trois cinquièmes à la section.
Texte de l'en-tête de gauche
Dans la colonne de gauche, nous allons ajouter l'en-tête de la chronologie qui sera sur le côté gauche de la page. Pour ce faire, ajoutez un module de texte dans la colonne de gauche.
Ajoutez ensuite le texte « Timeline » dans le corps du module de texte.
Sous l'onglet Conception, mettez à jour les styles de texte suivants :
- Police du texte : Oxygène
- Poids de la police de texte : gras
- Style de police de texte : TT
- Texte Couleur du texte : #666666
- Taille du texte : 50px (ordinateur de bureau), 30px (tablette), 18px (téléphone)
- Hauteur de la ligne de texte : 1 em
- Alignement du texte : à droite
Ensuite, mettez également à jour le remplissage :
- rembourrage : 5px haut
Texte de l'en-tête de droite
Pour créer l'en-tête du contenu de la galerie sur le côté droit de la page, copiez le module de texte dans la colonne de gauche et collez-le dans la colonne de droite.
Ensuite, ouvrez les paramètres du module de texte en double et mettez à jour les éléments suivants :
- Texte Couleur du texte : #c22969
- Alignement du texte : à gauche (ordinateur de bureau), à gauche (tablette)
Paramètres de ligne
Pour nous donner l'espace dont nous avons besoin sur mobile, nous devons mettre à jour les paramètres de ligne comme suit :
- Largeur de gouttière : 1
- Largeur : 100 %
- Largeur maximale : 1280px
- Rembourrage : 10 pixels en haut, 10 pixels en bas
Sous l'onglet avancé, ajoutez le CSS personnalisé suivant à l'élément principal sur la tablette :
display:flex; flex-wrap:nowrap;
Paramètres de la colonne de gauche
Comme nous utilisons une largeur de gouttière de ligne de 1, il n'y a pas d'espacement entre les colonnes. Pour ajouter un espacement suffisant, ouvrez les paramètres de la colonne 1 et mettez à jour le remplissage comme suit :
- Rembourrage (bureau) : 10px en haut, 10px en bas, 20px à gauche, 20px à droite
- Rembourrage (tablette) : 10px en bas, 10px à gauche, 10px à droite
Ensuite, nous souhaitons remplacer la largeur de la colonne de gauche par défaut sur la tablette et le téléphone afin qu'elle corresponde à 30 % de la largeur de la ligne. Cela correspondra à la largeur de colonne que nous allons ajouter aux colonnes de la chronologie ci-dessous.
Pour ce faire, ouvrez les paramètres de la colonne de gauche (colonne1) et ajoutez le CSS suivant à l'élément principal de la tablette :
width: 30% !important;
Pour la colonne de droite, nous voulons ajouter le même rembourrage que nous l'avons fait dans la colonne 1. Et nous allons ajouter une bordure gauche à la colonne pour servir de séparateur comme suit :
- Rembourrage (bureau) : 10px en haut, 10px en bas, 20px à gauche, 20px à droite
- Rembourrage (tablette) : 10px en bas, 10px à gauche, 10px à droite
- Largeur de la bordure gauche : 2px
- Couleur de la bordure gauche : #333333
Nous voulons également que la largeur de la colonne de droite corresponde à 70 % de la largeur de la ligne. Pour mettre à jour la largeur de la colonne, ouvrez les paramètres de la colonne 2 et ajoutez le CSS suivant à l'élément principal sur la tablette :
width: 70% !important;
Paramètres de section
Pour terminer la conception du titre, ouvrez les paramètres de la section et mettez à jour la couleur d'arrière-plan :
- Couleur d'arrière-plan : #222222
Ensuite, mettez à jour le remplissage de la section :
- Remplissage : 0px en haut, 0px en bas
Pour rendre la section persistante, accédez à l'onglet Avancé et mettez à jour les éléments suivants :
- Position collante : coller au sommet
Partie 2 : Création de la chronologie collante
Cette prochaine partie de la conception est l'endroit où nous créons la partie de la chronologie collante de la mise en page. La clé ici est de concevoir la première section, la rangée et les modules avec tous les éléments en place. Ensuite, nous pouvons dupliquer chaque section ou ligne selon les besoins.
Ajouter une section
Pour commencer, ajoutez une nouvelle section régulière sous la section de titre que nous venons de terminer.
Avant de commencer à ajouter nos lignes et notre contenu, ouvrez les paramètres de la section et mettez à jour les éléments suivants :
- Remplissage : 0px en haut, 0px en bas
Ajouter la ligne, les styles de ligne et la structure de colonne
Ensuite, créez une ligne de colonne d'un cinquième d'un cinquième de trois cinquièmes à la section.
Pour démarrer la conception de la ligne, copiez les styles de la ligne dans la section d'en-tête ci-dessus et collez-les dans la nouvelle ligne.
Ouvrez ensuite les paramètres de la nouvelle ligne et mettez à jour les éléments suivants :
- Remplissage : 50 pixels en haut, 50 pixels en bas
Ajoutez ensuite le CSS personnalisé à l'élément principal sur la tablette comme suit :
display:flex; flex-wrap:nowrap;
Créer l'année collante
Le premier élément de date collante pour la chronologie sera l'année. Cet élément de texte « année » restera en haut de la section lors du défilement.
Pour créer l'élément de texte année, ajoutez un nouveau module de texte à la colonne 1.
Ajoutez ensuite le texte « 2020 » au corps.
Sous l'onglet Conception, mettez à jour les styles de texte comme suit :
- Police du texte : Oxygène
- Poids de la police de texte : gras
- Taille du texte : 40px (ordinateur de bureau), 24px (tablette), 18px (téléphone)
- Alignement du texte : à droite
Pour que l'année reste en haut de la section, mettez à jour les éléments suivants :
- Position collante : coller au sommet
- Décalage supérieur collant : 50px
- Limite collante inférieure : section
Créer le mois collant
Pour créer le texte du mois collant, copiez le module de texte contenant l'année collante et collez-le dans la colonne 2.
Ensuite, ouvrez les paramètres du nouveau module de texte dans la colonne 2 et mettez à jour le corps du texte avec "dec" (l'abréviation du mois).
Le texte du mois doit rester en haut de la ligne au lieu de la section, alors mettez à jour la limite collante comme suit :
- Limite collante inférieure : ligne
Ajout du contenu de la galerie
Dans la colonne la plus à droite (colonne 3), nous allons ajouter le contenu qui correspond au mois/à l'année spécifique. Dans ce cas, nous allons ajouter un module galerie pour afficher une galerie d'images.
Pour créer la galerie, ajoutez un module galerie dans la colonne 3.
Ajoutez ensuite au moins 6 images à la galerie (ou autant que vous le souhaitez) et mettez à jour les éléments suivants :
- Nombre d'images : 6
- Afficher le titre et la légende : NON
- Comment Pagination: NON
Sous l'onglet Conception, mettez à jour les éléments suivants :
- Rembourrage : 3% à gauche, 3% à droite
Pour créer un espacement personnalisé entre les éléments de la galerie, ajoutez le CSS personnalisé suivant au CSS de l'élément de la galerie :
padding: 0 1% 2% 1%;
Mettre à jour les largeurs et l'espacement des colonnes
Comme nous l'avons fait pour les colonnes de la section des en-têtes, nous allons donner à nos colonnes un espacement et des largeurs personnalisés (un mobile) afin qu'elles s'alignent avec les en-têtes et aient une belle apparence sur tablette et téléphone.
Colonne 1
Ouvrez les paramètres de la colonne 1 et mettez à jour les éléments suivants :
- Rembourrage : 1% à gauche, 2% à droite
Sous l'onglet avancé, ajoutez le CSS personnalisé suivant à l'élément principal sur la tablette :
width: 15% !important;
Ensuite, ouvrez les paramètres de la colonne 2 et ajoutez le même remplissage et CSS comme suit :
- Rembourrage : 1% à gauche, 2% à droite
Élément principal CSS (tablette) :
width: 15% !important;
Ouvrez ensuite les paramètres de la colonne 3 et mettez à jour le remplissage et le CSS de l'élément principal comme suit :
- Rembourrage : 1% à gauche, 2% à droite
Élément principal CSS (tablette) :
width: 70% !important;
Dupliquer la ligne pour des mois supplémentaires
Une fois la première ligne terminée, nous pouvons dupliquer la ligne pour des mois supplémentaires.
Dupliquez la ligne.
Dans la ligne en double, retirez le texte de l'année. Nous n'avons besoin que d'un an par section puisque l'année restera en haut et en bas de la section.
Ensuite, ouvrez le texte du mois et mettez à jour l'abréviation du mois avec un nouveau mois.
Dupliquer la section pour des années supplémentaires
De la même manière que nous avons dupliqué la ligne pour des mois supplémentaires, nous pouvons dupliquer toute la section pour des années supplémentaires.
Allez-y et dupliquez la section que nous venons de créer pour le contenu 2020.
Dans la section en double, mettez à jour le texte de l'année dans la ligne 1, colonne 1 avec l'année « 2019 ».
Vous pouvez continuer ce processus pour créer des années et des mois supplémentaires selon les besoins de la disposition de votre chronologie.
Résultat final
Découvrez le résultat final.
Dernières pensées
L'essentiel du travail de conception pour cette mise en page de chronologie est de la rendre réactive en donnant les tailles de texte et la largeur de colonne des styles spécifiques aux mobiles. Mais, le positionnement collant des éléments de date est extrêmement facile avec les options intégrées de Divi. Espérons que cela vous sera utile pour de futurs projets. Je peux voir que cela est utile pour présenter une chronologie de l'historique pour une page à propos ou même pour une page de ressources, une page de téléchargements ou des mises à jour de produits.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!