Module chronologiqueIdéal pour présenter l'histoire d'une marque, l'avancement d'un projet, le calendrier d'un événement, etc.Thème AvadaIl s'agit de l'un des thèmes WordPress les plus polyvalents, doté d'un élément chronologique intégré puissant et flexible qui vous permet de présenter des événements dans un format graphique et de personnaliser la palette de couleurs et les styles pour créer une expérience d'interface conforme à la vision de votre marque.
![Image [1] - Comment personnaliser les styles de couleurs de la timeline Avada](http://gqxi.cn/wp-content/uploads/2025/06/20250625170513148-image.png)
Vous souhaitez rendre la ligne du temps plus attrayante ?Essayez Avada Dual Row Layout maintenantL'impact visuel de la page s'en trouve renforcé !
I. Pourquoi devrais-je personnaliser la couleur de la ligne de temps ?
1.1 Correspondance avec l'image de marque
Un langage visuel cohérent contribue à améliorer la reconnaissance de la marque. Le langage visuel par défautcalendrierSi le style est esthétiquement agréable, l'incohérence avec la palette de couleurs de la marque peut réduire l'impression générale de professionnalisme. En personnalisant les couleurs, vous pouvez faire en sorte que la ligne du temps s'intègre dans le style général du site web.
1.2 Amélioration de la lisibilité et de la hiérarchie visuelle
Une palette de couleurs appropriée peut mettre en évidence des moments clés et renforcer le sentiment de superposition des informations. Par exemple, un marquage de couleur différente peut aider les visiteurs à comprendre rapidement le contenu.
1.3 Enrichir la présentation des pages
faire passer (un projet de loi, une inspection, etc.)couleurLes variations peuvent créer des atmosphères émotionnelles différentes, telles que le style technologique, les couleurs froides optionnelles pour rendre la page plus interactive et attrayante.
Deuxièmement, le module Avada Timeline prend en charge les couleurs personnalisées.
2.1 Couleur de la ligne de conteneurs pour la ligne principale de la ligne du temps
Contr?lez la couleur de la ligne verticale reliant tous les points temporels, qui devrait être conforme à la couleur principale de la marque.
![Image [2] - Comment personnaliser les styles de couleurs de la timeline Avada](http://gqxi.cn/wp-content/uploads/2025/06/20250625165130359-image.png)
2.2 Couleur d'arrière-plan de l'ic?ne du n?ud (Couleur d'arrière-plan de l'ic?ne)
à chaque momentic?ne (informatique)La couleur d'arrière-plan peut être définie individuellement pour le marquage des catégories.
![Image [3] - Comment personnaliser les styles de couleurs de la timeline Avada](http://gqxi.cn/wp-content/uploads/2025/06/20250625164237149-image.png)
2.3 Couleur du texte
La couleur de la police de la zone de contenu peut également être personnalisée pour que le texte soit lisible dans différents contextes.
![Image [4] - Comment personnaliser les styles de couleurs de la timeline Avada](http://gqxi.cn/wp-content/uploads/2025/06/20250625165238521-image.png)
Comment modifier le style de couleur d'Avada Timeline ?
3.1 Utilisation des paramètres de couleur intégrés au module (édition visuelle)
- Accédez à l'éditeur de pages (Batisseur en direct) ;
- Cliquez sur l'ic?ne en forme de crayon dans le module Timeline pour accéder à l'interface de réglage ;
![Image [5] - Comment personnaliser les styles de couleurs de la timeline Avada](http://gqxi.cn/wp-content/uploads/2025/06/20250625160639243-image.png)
![Image [6] - Comment personnaliser les styles de couleurs de la timeline Avada](http://gqxi.cn/wp-content/uploads/2025/06/20250625162727349-image.png)
Développez l'option Paramètres de style pour afficher les champs suivants :
- Couleur de l'ic?ne
- Couleur d'arrière-plan de l'ic?ne
- Couleur de la bordure de l'arrière-plan de l'ic?ne
![Image [7] - Comment personnaliser les styles de couleurs de la timeline Avada](http://gqxi.cn/wp-content/uploads/2025/06/20250625163812788-image.png)
3.2 Utilisation de styles globaux pour contr?ler la cohérence
Si le site comporte plusieurs modules de chronologie et que vous souhaitez uniformiser le style, allez dans les Paramètres globaux d'Avada :
- option Sélectionner les éléments → Studio Insérer le style de thème correspondant ;
- Définit le schéma de couleurs par défaut,cadreles styles, les couleurs des ic?nes, etc ;
- Ces paramètres seront appliqués à tous les modules de la ligne de temps, afin de maintenir une uniformité visuelle sur l'ensemble du site.
![Image [8] - Comment personnaliser les styles de couleurs de la timeline Avada](http://gqxi.cn/wp-content/uploads/2025/06/20250625162459987-image.png)
3.3 Contr?le précis du style avec le CSS personnalisé
Pour les utilisateurs ayant des besoins plus personnalisés, les styles de la ligne du temps peuvent être étendus ou remplacés par des feuilles de style CSS.
/* Modifier la couleur de la ligne de temps principale */
.fusion-timeline-line {
couleur de fond : #0f8fac ;
}
/* Définir la couleur de l'ic?ne de la ligne de temps */
.fusion-timeline-icon {
couleur d'arrière-plan : #f5a623 ; }
colour : #ffff.
}
/* Arrière-plan de la bo?te de contenu avec le texte */
.fusion-timeline-content {
background-color : #ffffff ; } /* content-box-background-with-text */ .fusion-timeline-content {
border-left : 3px solid #f5a623 ; }
border-left : 3px solid #f5a623 ;
}
Quatrièmement, des cas pratiques : la page de l'historique de la marque d'une entreprise technologique est colorée
4.1 Scénarios de base
Une entreprise souhaitait présenter un n?ud de développement de la marque pour 2018-2025, avec une couleur primaire bleue (#12d5ea), et voulait donner une impression de technologie au style de la page.
![Image [9] - Comment personnaliser les styles de couleurs de la timeline Avada](http://gqxi.cn/wp-content/uploads/2025/06/20250625161929932-image.png)
4.2 Recommandations en matière de couleurs
- Couleur primaire : #12d5ea (Couleur primaire de la marque)
- Couleur du texte : gris foncé #333
![Image [10] - Comment personnaliser les styles de couleurs de la timeline Avada](http://gqxi.cn/wp-content/uploads/2025/06/20250625161719860-image.png)
4.3 Présentation des effets
Grace à une palette de couleurs uniforme et à une distribution rationnelle.calendrierNon seulement il sert de vitrine, mais il fait également partie de l'image de marque et améliore la texture générale de la page.
![Image [11] - Comment personnaliser les styles de couleurs de la timeline Avada](http://gqxi.cn/wp-content/uploads/2025/06/20250625162046846-image.png)
![Image [12] - Comment personnaliser les styles de couleurs de la timeline Avada](http://gqxi.cn/wp-content/uploads/2025/06/20250625162112771-image.png)
V. Résumé
Module de chronologie d'AvadaPuissant, visuellement époustouflant et doté d'une palette de couleurs flexible, c'est le composant idéal pour créer des pages sur le développement de la marque, l'avancement des projets, le calendrier des cours et d'autres pages. Grace aux paramètres du module, aux styles globaux ou aux feuilles de style CSS personnalisées, vous pouvez créer votre propre palette de couleurs en fonction des caractéristiques de votre marque.
Lien vers cet article :http://gqxi.cn/fr/63105L'article est protégé par le droit d'auteur et doit être reproduit avec mention.
Pas de commentaires