Comment créer une chronologie avec le module Blurb de Divi

Dans cet article, nous allons vous montrer comment créer facilement une chronologie simple mais élégante avec vos modules Blurb de Divi. Nous combinerons les différentes options fournies par les modules et les lignes pour obtenir le résultat que vous pouvez voir ci-dessous. L'exemple que nous allons partager est basé uniquement sur les options intégrées de Divi, ce qui signifie que vous n'aurez pas besoin d'ajouter de code CSS supplémentaire ! Nous veillons également à ce qu'il soit aussi beau sur ordinateur que sur mobile.

Résultat

L'apparence d'une chronologie est obtenue avec deux éléments de conception ; la ligne qui traverse les trois modules Blurb et les chiffres. La version de bureau ressemble à ceci :

Et la version mobile ressemble à ceci :

Commençons!

Comment créer une chronologie avec le module Blurb de Divi

Abonnez-vous à notre chaîne Youtube

Ajouter une section standard

Couleur d'arrière-plan de la section

Commencez par ajouter une nouvelle section standard et utilisez 'rgba(0,0,0,0.12)' comme couleur d'arrière-plan.

Remplissage de section

Accédez à l'onglet Conception et utilisez un rembourrage supérieur de « 300px ».

Ajouter une ligne à trois colonnes (chronologie)

Arrière-plans de colonne

Une fois que vous avez créé la section, ajoutez-y une ligne à trois colonnes. Dans l'onglet Contenu de cette ligne, utilisez '#e09900' comme couleur d'arrière-plan de la colonne 1, '#0c71c3' comme couleur d'arrière-plan de la colonne 2 et '#8300e9' comme couleur d'arrière-plan de la colonne 3.

Dimensionnement

Passez à l'onglet Conception et utilisez les paramètres suivants pour la sous-catégorie Dimensionnement :

• Faire cette ligne FulldWidth: Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui

Marge et rembourrage personnalisés

Ensuite, ajoutez le remplissage personnalisé et la marge personnalisée suivants à la ligne :

• Rembourrage supérieur : 1px
• Rembourrage inférieur : 0px
• Marge inférieure : -200px

Et ajoutez « 3px » au rembourrage supérieur et inférieur de chaque colonne.

Désactiver sur tablette et téléphone

Enfin, désactivez la ligne sur la tablette et le téléphone.

Ajouter une autre ligne à trois colonnes (modules Blurb)

Fond dégradé de colonne

Une fois que vous avez créé la première ligne à trois colonnes, vous pouvez continuer et créer la seconde juste en dessous (elles partagent la même section). Chacune des colonnes a besoin d'un fond dégradé avec les mêmes paramètres mais avec une première couleur différente :

• Première couleur : #e09900 (colonne 1), #0c71c3 (colonne 2), #8300e9 (colonne 3)
• Deuxième couleur : rgba (255, 255, 255, 0)
• Type de dégradé : Linéaire
• Direction du gradient : 180 deg
• Position de départ : 73 %
• Position finale : 92 %

Faire la ligne pleine largeur

Ensuite, allez dans l'onglet Conception et activez l'option « Make This Row Fullwidth ».

Remplissage personnalisé de ligne

Ouvrez la sous-catégorie d'espacement et utilisez le remplissage personnalisé et la marge personnalisée suivants pour la ligne :

• Rembourrage supérieur : 0px
• Rembourrage droit : 60 px
• Rembourrage inférieur : 100px
• Remplissage gauche : 60px
• Marge supérieure : -100px

Ajoutez également « 5px » au rembourrage supérieur de chaque colonne.

Module de présentation

Une fois que vous avez terminé les paramètres de ligne, vous pouvez ajouter un module Blurb à la première colonne de la ligne que vous venez de créer. Dans la sous-catégorie Image et icône de l'onglet Contenu, activez l'option « Utiliser l'icône » et sélectionnez l'icône de votre choix.

Faites défiler le même onglet et utilisez '#f4f4f4' comme couleur d'arrière-plan.

Accédez à l'onglet Conception et effectuez les ajustements suivants dans la sous-catégorie Image et icône :

• Couleur de l'icône : #e09900
• Placement des images/icônes : à gauche
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 50px

Dans la sous-catégorie Texte, assurez-vous que l'orientation du texte de gauche est activée.

Les options de la sous-catégorie Texte d'en-tête sont les suivantes :

• Police d'en-tête : Crète ronde
• Alignement du texte de l'en-tête : à gauche
• Taille de la police d'en-tête : 32 px
• Hauteur de la ligne d'en-tête : 1 em

Ensuite, ouvrez la sous-catégorie Corps de texte et utilisez les paramètres suivants :

• Alignement du corps du texte : à gauche
• Taille de la police du corps : 12 px
• Hauteur de la ligne du corps : 1,7 em

Nous utiliserons également une bordure avec les paramètres suivants :

• Utiliser la bordure : Oui
• Couleur de la bordure : #000000
• Largeur de la bordure : 2px
• Style de bordure : pointillé

Ensuite, ouvrez la sous-catégorie Dimensionnement et utilisez '279px' pour la largeur du contenu et '100%' pour la largeur.

Enfin, ajoutez « 30px » au rembourrage supérieur, droit, inférieur et gauche.

Module de texte

Une fois que vous avez ajouté et modifié le module Blurb, allez-y et ajoutez un module de texte juste en dessous. Le module de texte aura également besoin d'un arrière-plan dégradé :

• Première couleur : #e09900
• Deuxième couleur : rgba (255, 255, 255, 0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 20 %
• Position finale : 24 %

Passez à l'onglet Conception et utilisez les paramètres suivants pour la sous-catégorie Texte :

• Taille de la police du texte : 21 px
• Couleur du texte : #FFFFFF
• Hauteur de la ligne de texte : 1,7 em
• Orientation du texte : Centre

Ouvrez la sous-catégorie Dimensionnement, utilisez une largeur de « 48 % » et sélectionnez le bon alignement de module.

Enfin, utilisez une marge supérieure de "-100px" et ajoutez "50px" au rembourrage supérieur et inférieur.

Cloner le module de présentation et de texte

Une fois que vous avez rempli la première colonne, vous pouvez cloner les deux modules et les placer dans les deux autres colonnes. Les seules choses que vous devrez changer sont l'icône de présentation, la couleur de présentation et la première couleur de dégradé du module de texte en "#0c71c3" pour la deuxième colonne et "#8300e9" pour la dernière colonne.

Désactiver sur tablette et téléphone

Une fois que vous avez terminé cette deuxième ligne, assurez-vous de la désactiver également pour le téléphone et la tablette.

Cloner une ligne à trois colonnes (tablette et téléphone)

La version chronologique sur tablette et téléphone est légèrement différente. Clonez la ligne avec les textes de présentation que vous avez créés dans la partie précédente de cet article et suivez les étapes suivantes pour l'adapter au téléphone et à la tablette.

Ajouter un arrière-plan dégradé de ligne

La ligne sur tablette et téléphone aura besoin du fond dégradé suivant :

• Première couleur : rgba(0,0,0,0.7)
• Deuxième couleur : rgba (255, 255, 255, 0)
• Type de dégradé : Linéaire
• Direction du gradient : 90 degrés
• Position de départ : 1%
• Position finale : 0%

Remplissage de ligne

Supprimez tous les rembourrages et marges personnalisés utilisés dans la version de bureau et ajoutez « 100px » au rembourrage supérieur.

Désactiver sur le bureau

Enfin, au lieu de désactiver la ligne sur le téléphone et la tablette, désactivez-la plutôt sur le bureau.

Résultat

Après avoir suivi toutes les étapes de la publication, vous devriez pouvoir obtenir le résultat suivant sur le bureau :

Et le résultat suivant sur tablette et téléphone :

Dernières pensées

Dans cet article, nous vous avons montré comment créer une chronologie simple de votre module Blurb en n'utilisant rien d'autre que les options Divi intégrées. Deux facteurs qui aident à identifier les modules Blurb en tant que chronologie sont la ligne qui relie les trois modules Blurb et les nombres. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !