Comment personnaliser les styles de couleurs de la timeline Avada

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

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

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

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

Comment modifier le style de couleur d'Avada Timeline ?

3.1 Utilisation des paramètres de couleur intégrés au module (édition visuelle)

  1. Accédez à l'éditeur de pages (Batisseur en direct) ;
  2. 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
Image [6] - Comment personnaliser les styles de couleurs de la timeline Avada

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

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 :

  1. option Sélectionner les élémentsStudio Insérer le style de thème correspondant ;
  2. Définit le schéma de couleurs par défaut,cadreles styles, les couleurs des ic?nes, etc ;
  3. 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

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

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

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
Image [12] - Comment personnaliser les styles de couleurs de la timeline Avada

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.


Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !
Service clientèle WeChat
Service clientèle WeChat
Tel : 020-2206-9892
QQ咨詢:1025174874
(iii) Courriel : info@361sale.com
Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.
? Déclaration de reproduction
Cet article a été écrit par Millie
LA FIN
Si vous l'aimez, soutenez-le.
félicitations886 partager (joies, avantages, privilèges, etc.) avec les autres
commentaires achat de canapé

Veuillez vous connecter pour poster un commentaire

    Pas de commentaires