Cómo crear una línea de tiempo a dos columnas con Avada

En diseño webCronología de AvadaEs una forma ideal de mostrar la secuencia de los acontecimientos y el proceso de desarrollo. Y en algunos escenarios, como mostrar el progreso paralelo de dos proyectos, comparar los nodos de trabajo de dos departamentos o marcar el estado de avance de varias categorías de tareas, una única línea de tiempo resulta limitante. En este caso, la función "cronología a dos columnas"El diseño puede mejorar drásticamente la legibilidad y la expresión de una página.

I. ¿Qué es una cronología a dos columnas?

Definición de una línea de tiempo a dos columnas

Una línea de tiempo de dos columnas es una presentación en paralelo de dos procesos temporales, normalmente con los lados izquierdo y derecho representando diferentes categorías, proyectos o departamentos. En comparación con una línea de tiempo tradicional de un solo eje, una línea de tiempo de dos columnas puede:

Visualización sincronizada de dostemáticaVías de progreso
Permitir contrastes más claros y narraciones paralelas
Evite amontonar información y organice mejor la página

Escenarios de uso típicos

Visualización de los calendarios laborales de los dos departamentos de la empresa
Comparación del progreso simultáneo del diseño y el desarrollo de productos
Acuerdos en línea y fuera de línea para programas de educación y formación

Cómo construir una línea de tiempo a dos columnas con Avada

Enfoques arquitectónicos compatibles con Avada Builder

Avada Builder no proporciona un módulo de "línea de tiempo de dos columnas" directamente, pero se puede lograr un diseño similar de las siguientes maneras:

Use"Contenedor + Columna"Módulos
Controla el espaciado y el estilo de los módulos para que parezcan dos líneas de tiempo paralelas.

Recomendaciones para el diseño de la estructura de página

página webPor lo general, puede utilizarse la siguiente estructura:

Título superior Área: Describa el tema de contenido de una línea de tiempo de dos columnas, por ejemplo, "Marketing frente a desarrollo de productos".
Cronología a dos columnasuno para cada uno de los lados izquierdo y derecho ContenedorCada columna corresponde a una categoría

III. Caso Práctico: Demostración de "Progreso de Marketing vs. Progreso de Desarrollo de Producto"

Antecedentes del proyecto

Una empresa quiere mostrar los avances en marketing y desarrollo de productos en paralelo antes de que un producto salga al mercado, para que los equipos internos puedan comprender rápidamente el ritmo de trabajo en ambas líneas.

Detalles del proceso operativo

Paso 1: Construir la estructura contenedora de la página

Haga clic en la página "Añadir contenedor" botones
En la ventana emergente, seleccione "1/2 - 1/2"(es decir, la mitad de la anchura de la izquierda y la mitad de la anchura de la derecha), que se adapta mejor albilinealLa estructura de la pantalla.

Paso 2: Añadir el módulo Timeline

Añadir el módulo Timeline a la columna de la izquierda

Haga clic en el área de columnas de la izquierda y haga clic en "+ Elemento"EncuentreEstudiobuscar para añadir un Módulo Calendario

Pulse "+ Elemento" Seleccione el módulo "Título" y denomine al título "Progreso de la comercialización".

Añade los siguientes nodos sucesivamente:

Lanzamiento de la planificación de marca
Finalizado el diseño del material de marketing
Publicidad previa al lanzamiento

Añadir otro módulo de línea de tiempo a la columna derecha

Haga clic en el área de la columna derecha, añada también el módulo Timeline, nómbrelo como "Progreso del desarrollo del producto" y configure los siguientes nodos:

Función del producto Congelación
La versión de prueba interna está en línea
Se ha completado el embalaje de la versión en directo

Paso 3: Embellecer los estilos e iconos de los nodos

Definir el estilo de color de los iconos individualmente
Utiliza diferentes colores de fondo/borde en ambos lados para resaltar la diferencia entre los dos.

Paso 4: Añadir observaciones finales

Añade un resumen debajo de la línea de tiempo a dos columnas, con un color de fuente ajustable para que destaque.

Añada una palabra de ánimo (por ejemplo: "Los dos frentes avanzan codo con codo, así que permanezcan atentos al día del lanzamiento").

IV. Sugerencias de optimización y preguntas frecuentes

¿Cómo mantengo las dos columnas bien alineadas?

Controla la longitud de la descripción de cada nodo de forma similar para evitar que se acumule demasiado contenido gráfico
La alineación puede ajustarse manualmente mediante el módulo "Espacio en blanco".

¿Cómo se visualiza en el móvil?

Si desea hacer una distinción clara, puede insertar categorías en la parte superior de cada columnaleyenda(por ejemplo, "Calendario de comercialización")
Garantizar que los iconos y el texto no se compriman ni distorsionen en las pantallas pequeñas.

¿Cómo añado efectos interactivos o animados?

Uso de Scrollefecto de animaciónDeje que la línea de tiempo se cargue de forma incremental
Configure el nodo "Popup Modal Box" para ver los detalles.

V. Resumen

existeAvada Construir una línea de tiempo de dos columnas es una forma práctica y estéticamente agradable de mostrar una página web, especialmente en escenarios en los que es necesario comparar dos tipos de progreso en paralelo. Esto es posible gracias al uso flexible de Container vs. Container. Cronología La combinación de módulos permite un claro efecto de contraste.

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
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: [email protected]
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres