Cómo personalizar los estilos de color de Avada Timeline

Módulo CalendarioIdeal para mostrar la historia de la marca, el progreso de los proyectos, la programación de eventos, etc.Tema AvadaEs uno de los temas de WordPress más versátiles, con un potente y flexible elemento de cronología incorporado que permite presentar eventos en formato gráfico y personalizar la combinación de colores y estilos para crear una experiencia de interfaz coherente con la visión de su marca.

Imagen [1] - Cómo personalizar los estilos de color de la línea de tiempo de Avada

?Quieres que la línea de tiempo sea más llamativa?Pruebe Avada Dual Row Layout ahora... ?mejorando el impacto visual de la página!

I. ?Por qué debo personalizar el color de la línea de tiempo?

1.1 Imagen de marca

Un lenguaje visual coherente ayuda a mejorar el reconocimiento de la marca. Por defectolínea de tiempoAunque el estilo es estéticamente agradable, la incoherencia con el esquema de colores de la marca puede reducir la sensación general de profesionalidad. Personalizando los colores, puedes hacer que la línea de tiempo encaje en el estilo general de la web.

1.2 Mejora de la legibilidad y la jerarquía visual

Una combinación de colores adecuada puede resaltar los momentos clave y aumentar la sensación de superposición de la información. Por ejemplo, marcar en distintos colores puede ayudar a los visitantes a comprender rápidamente el contenido.

1.3 Enriquecer la presentación de la página

pasar (una factura o inspección, etc.)colorLas variaciones pueden crear atmósferas diferentes, como colores fríos opcionales de estilo tecnológico para hacer la página más interactiva y atractiva.

En segundo lugar, ?el módulo Avada timeline admite colores personalizados?

2.1 Línea de contenedores de color para la línea principal Timeline

Controle el color de la línea vertical que une todos los puntos temporales, se recomienda que esté en consonancia con el color principal de la marca.

Imagen [2] - Cómo personalizar los estilos de color de la línea de tiempo de Avada

2.2 Color de fondo del icono de nodo (Icon Background Color)

En cada momentoicono (informática)El color de fondo puede ajustarse individualmente para el marcado por categorías.

Imagen [3] - Cómo personalizar los estilos de color de la línea de tiempo de Avada

2.3 Color del texto

El color de la fuente del área de contenido también puede personalizarse para que el texto sea legible en distintos contextos.

Imagen [4] - Cómo personalizar los estilos de color de la línea de tiempo de Avada

?Cómo modificar el estilo de color de Avada Timeline?

3.1 Utilización de los ajustes de color integrados en el módulo (edición visual)

  1. Vaya al editor de páginas (Constructor en vivo);
  2. Haga clic en el "icono del lápiz" en el módulo Timeline para acceder a la interfaz de configuración;
Imagen [5] - Cómo personalizar los estilos de color de la línea de tiempo de Avada
Imagen [6] - Cómo personalizar los estilos de color de la línea de tiempo de Avada

Expanda la opción Configuración de estilo para mostrar los siguientes campos:

  • Icono Color
  • Icono Color de fondo
  • Color del borde del fondo del icono
Imagen [7] - Cómo personalizar los estilos de color de la línea de tiempo de Avada

3.2 Uso de estilos globales para controlar la coherencia

Si el sitio tiene varios módulos de línea de tiempo y desea estandarizar el estilo, vaya a la Configuración global de Avada:

  1. opción Seleccionar elementosEstudio Inserte el estilo de tema correspondiente;
  2. Establece el esquema de color por defecto,marcoestilos, colores de los iconos, etc;
  3. Estos ajustes se aplicarán a todos los módulos de la línea de tiempo, manteniendo la uniformidad visual en todo el sitio.
Imagen [8] - Cómo personalizar los estilos de color de la línea de tiempo de Avada

3.3 Control preciso del estilo con CSS personalizado

Para los usuarios con necesidades más personalizadas, los estilos de la línea de tiempo pueden ampliarse o anularse mediante CSS.

/* Modificar el color de la línea de tiempo principal */
.fusion-timeline-line {
  color de fondo: #0f8fac;
}

/* Establecer el color del icono de la línea de tiempo */
.fusion-timeline-icon {
  color de fondo: #f5a623; }
  color: #ffffff.
}

/* Fondo de la caja de contenido con texto */
.fusion-timeline-content {
  background-color: #ffffff; } /* content-box-background-with-text */ .fusion-timeline-content {
  border-left: 3px solid #f5a623; }
  border-left: 3px solid #f5a623;
}

Cuarto, casos prácticos: esquema de colores de la página de historia de marca de las empresas tecnológicas

4.1 Escenarios de referencia

Una empresa quería mostrar un nodo de desarrollo de marca para 2018-2025, con un color primario azul (#12d5ea), y quería conseguir un aire tecnológico en el estilo de la página.

Imagen [9] - Cómo personalizar los estilos de color de la línea de tiempo de Avada

4.2 Recomendaciones sobre la combinación de colores

  • Color principal: #12d5ea (Color principal de la marca)
  • Color del texto: gris oscuro #333
Imagen [10] - Cómo personalizar los estilos de color de la línea de tiempo de Avada

4.3 Presentación de los efectos

Mediante un esquema de color uniforme y una distribución racional.línea de tiempoNo sólo sirve de escaparate, sino que se convierte en parte de la imagen de marca y realza la textura general de la página.

Imagen [11] - Cómo personalizar los estilos de color de la línea de tiempo de Avada
Imagen [12] - Cómo personalizar los estilos de color de la línea de tiempo de Avada

V. Resumen

Módulo de cronología de AvadaPotente, visualmente impresionante y con un esquema de colores flexible, es el componente ideal para crear páginas de desarrollo de marca, progreso de proyectos, programación de cursos y otras. Mediante la configuración del módulo, los estilos globales o CSS personalizados, puedes crear tu propio esquema de colores basado en las características de tu marca.


Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas
Servicio de atención al cliente WeChat
Servicio de atención al cliente WeChat
Tel: 020-2206-9892
QQ咨詢:1025174874
(iii) Correo electrónico: info@361sale.com
Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres
? Declaración de reproducción
Este artículo ha sido escrito por Millie
EL FIN
Si le gusta, apóyela.
felicitaciones886 compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios