Conclusiones clave
- Estos ocho ejemplos de líneas de tiempo de Elementor están creados con un widget, el widget de línea de tiempo de complementos maestros, y cada uno tiene una página de demostración en vivo que puede abrir.
- Seis de los ocho diseños de líneas de tiempo son verticales y dos son carruseles horizontales, lo que coincide con cómo se utilizan los diseños: vertical para historias largas y horizontal para secuencias cortas.
- Los ejemplos verticales utilizan tres de las cuatro alineaciones del widget Timeline: Centro para tarjetas alternas, Izquierda para una lista unilateral y Derecha para una lista unilateral reflejada.
- La mayor parte de la diferencia visual entre los ocho diseños proviene de cuatro secciones de Estilo en el widget Línea de tiempo: Tarjetas, Fechas, Línea y Puntos.
- Elementor y Elementor Pro no incluyen un widget de línea de tiempo, por lo que cualquier plantilla de línea de tiempo de Elementor depende de la instalación de un complemento.
Es difícil encontrar buenos ejemplos de líneas de tiempo de Elementor, porque la mayoría de las demostraciones son tres tarjetas grises con lorem ipsum. Los ocho diseños siguientes utilizan historias reales: una reconstrucción de un órgano, un puente, un ensayo clínico, el primer año de una panadería. Todos ellos están construidos con el Widget de línea de tiempo de complementos maestros y cada uno tiene una demostración en vivo.
Por cada ejemplo, obtienes para qué sirve, qué hace que el diseño funcione y la configuración detrás de él, por lo que puedes usarlo como plantilla para tu propia página. Si no ha creado una línea de tiempo antes, comience con cómo crear una línea de tiempo en Elementor.
Tabla de contenidos
Los ocho ejemplos de líneas de tiempo de un vistazo
Elija primero por diseño y luego por estado de ánimo. Esta tabla muestra qué diseño de línea de tiempo de Elementor se ajusta a qué trabajo.
| # | Diseño | Diseño | Imágenes | Bueno para |
|---|---|---|---|---|
| 1 | Reconstrucción alternativa | Vertical, centro | prohibido | Registros de proyectos, restauraciones |
| 2 | Campo de imagen de arco | Vertical, un lado | Sí, arqueado | Notas estacionales o anuales |
| 3 | Investigación alineada con la derecha | Vertical, cierto | prohibido | Cronologías, expedientes de casos |
| 4 | Fabricación Horizontal | Carrusel horizontal | Sí | Etapas de producción |
| 5 | Semana de las tarjetas divididas | Vertical, una sola columna | prohibido | Horarios semana a semana |
| 6 | Medios de arco alternos | Vertical, centro | Sí, arqueado | Historias de marca y fundador |
| 7 | Prueba de tarjeta ligera | Vertical, un lado | prohibido | Hitos de investigación y procesos |
| 8 | Año horizontal | Carrusel horizontal | prohibido | Historia por año |
1. Cronología de reconstrucción alternativa
Esta es la clásica línea de tiempo vertical de Elementor: las cartas se alternan a izquierda y derecha de una línea central, con un punto numerado y una fecha para cada etapa. La demostración cuenta la historia de un órgano de tubos reconstruido durante tres años.
Úselo para restauraciones, diarios de construcción o cualquier proyecto con etapas claras. Los números dan el pedido incluso antes de leer una fecha. Para construirlo, use Alineación horizontal configurada en Centro, una línea delgada, puntos pequeños y un fondo de tarjeta solo un poco más liviano que la página.
Abra la demostración de reconstrucción alternativa
2. Cronología del campo de imagen de arco
Una línea de tiempo unilateral sobre un fondo color crema, donde cada entrada tiene una foto en forma de arco al lado del texto. La demostración sigue diez inviernos de setos colocados en una granja.
Úselo para notas de campo, trabajos de temporada, diarios de viaje o cualquier cosa basada en fotografías. El recorte del arco hace que las fotografías ordinarias parezcan deliberadas. Para construirlo, utilice una alineación unilateral y un radio grande en las esquinas superiores solo en Estilo, Imágenes y Radio Fronterizo.
Abra la demostración del campo de imagen de arco
3. Cronograma de investigación alineado a la derecha
Aquí la línea corre por el borde derecho y las tarjetas se sientan a su izquierda, con texto alineado a la derecha. Es el espejo del diseño habitual. La demostración es la cronología de una solicitud de información de dos años.
Úselo para investigaciones, cronologías legales o de cumplimiento, o estudios de casos. Una alineación inusual hace que una línea de tiempo de solo texto parezca diseñada. Para construirlo, use Alineación horizontal configurada a la derecha, Puntos con borde y sin relleno.
Abra la demostración de Investigación alineada a la derecha
4. Cronología de la fabricación horizontal
El primero de dos ejemplos horizontales. Las etiquetas de mes se encuentran encima de los puntos de color verde lima y las tarjetas de imágenes se deslizan debajo de ellas con botones de flecha redondos. La demostración cubre un tramo de puente fabricado en cinco etapas.
Úselo para las etapas de fabricación o producción, o para un proceso de cinco pasos. Las fotos llevan cada etapa y el texto permanece en tres líneas. Para construirlo, use el estilo de línea de tiempo configurado en línea de tiempo horizontal, la navegación configurada en flechas y una imagen en la pestaña Medios de cada elemento.
Abra la demostración de Fabricación horizontal. Los controles del carrusel se explican en cómo crear una línea de tiempo horizontal en Elementor.
5. Cronología de la semana de tarjetas divididas
Una única columna centrada de tarjetas blancas. Cada tarjeta está dividida en dos: una franja estrecha con la semana a la izquierda y el contenido a la derecha. La demostración es una revisión del museo planificada semana tras semana.
Úselo para horarios, planes de sprint o esquemas de cursos. La columna de etiquetas se alinea en la página, para que pueda escanear las semanas sin leer las tarjetas. Para construirlo, use una etiqueta personalizada en cada elemento (“Semana 1 · 6 de enero”) en lugar de una fecha, tarjetas claras con una sombra suave.
Abra la demostración de la Semana de las Tarjetas Divididas
6. Cronología alternativa de los medios de Arch
Tarjetas alternas nuevamente, esta vez con fotos en blanco y negro recortadas en un arco encima de cada tarjeta. La demostración es el primer año de una panadería, a partir de un horno y un préstamo bancario.
Úselo para páginas Acerca de, historias de fundadores o una línea de tiempo de historia de Elementor para una pequeña empresa. Un color de acento y fotografías monocromáticas hacen que las imágenes de calidad mixta parezcan un conjunto. Para construirlo, use Alineación horizontal configurada en Centro, una imagen por elemento, el mismo acento en Fechas y Puntos.
Abra la demostración de Alternating Arch Media
7. Cronología de la prueba de tarjetas ligeras
Tarjetas de luz sobre un fondo morado intenso, todas a un lado de la línea, con puntos ámbar. La demostración rastrea un ensayo clínico desde la financiación hasta una enmienda del protocolo.
Úselo para hitos de investigación, rondas de financiación o procesos de aprobación. El contraste entre tarjeta y fondo hace el trabajo, por lo que las tarjetas no necesitan borde ni sombra. Para construirlo, use Alineación horizontal configurada a la izquierda, un fondo de Tarjetas claro, pequeños puntos rellenos.
Abra la demostración de prueba de tarjetas ligeras
8. Cronograma horizontal del año
El segundo diseño horizontal coloca años grandes por encima de la línea (1982, 1986, 1989) con una tarjeta corta debajo de cada uno. La demostración consta de dieciséis años de automatización de faros y combina la línea de tiempo con una tabla de antes y después.
Úselo para conocer el historial de la empresa por año, generaciones de productos o aniversarios. El año es el texto más grande en pantalla, que es lo que la gente busca en un historial. Para construirlo, utilice una línea de tiempo horizontal, una etiqueta personalizada que contenga solo el año y una tipografía de fechas grandes en un color de acento.
Abra la demostración del año horizontal
¿Quieres los dieciséis? El visor de demostración en el Widget de línea de tiempo de Elementor page tiene estos ocho más ocho más, incluido un registro de cambios, una hoja de ruta y una agenda de eventos.
Cómo utilizarlos como plantillas
Puedes reconstruir cualquiera de estos elemento plantillas de línea de tiempo en unos minutos, porque todas las diferencias están en la configuración. Para ver una página completa para poner una, consulte Plantillas de página de Elementor.
- Agregue el widget de línea de tiempo e ingrese sus propios elementos: una fecha o etiqueta, un encabezado, una breve descripción y una imagen opcional.
- Elija el diseño. El estilo de línea de tiempo elige vertical u horizontal, y el estilo, el diseño y la alineación horizontal eligen izquierda, centro, superposición o derecha.
- Coincide con los colores. Primero configure el fondo de la página o contenedor, luego las Tarjetas, Fechas, Línea y Puntos.
- Verifique el estado enfocado. Cada ejemplo le da a la entrada en vista una tarjeta o punto ligeramente diferente para que el lector mantenga su lugar.
- Míralo en un teléfono. Las líneas de tiempo verticales se mueven hacia un lado en pantallas pequeñas y las horizontales muestran menos tarjetas.
Mostrar publicaciones en una línea de tiempo tiene su propia guía: cómo mostrar publicaciones de blog en una línea de tiempo en Elementor.
Lea también: 20 plantillas deslizantes Elementor, que incluyen un control deslizante de línea de tiempo con espacio real entre años.
Preguntas frecuentes
¿elementor viene con plantillas de línea de tiempo?
No. Elementor y Elementor Pro no tienen un widget de línea de tiempo, por lo que su biblioteca de plantillas tampoco tiene una línea de tiempo verdadera. Las plantillas de línea de tiempo para Elementor siempre dependen de un widget complementario o de un CSS personalizado.
¿qué diseño de línea de tiempo es mejor para la historia de una empresa?
Una línea de tiempo vertical alterna se adapta a una larga historia con fotografías, como en el ejemplo 6. Para una historia corta con cinco o seis años principales, una línea de tiempo de año horizontal como en el ejemplo 8 ocupa menos espacio.
¿Puedo utilizar estos diseños de línea de tiempo con algún tema?
Sí. Los diseños se realizan en el editor Elementor con los controles de estilo propios del widget Timeline, por lo que no dependen de un tema. Las fuentes siguen la tipografía global de su sitio a menos que las configure en el widget.
¿cuántos elementos debe tener una línea de tiempo?
De cuatro a ocho es un rango cómodo. En menos de cuatro, una lista simple es más clara. En lugar de diez, divida la línea de tiempo por año o década, o acorte cada carta a un encabezado y una línea.
Pensamientos finales
Estos ocho ejemplos de líneas de tiempo de Elementor cubren los diseños que la mayoría de los sitios necesitan: dos diseños alternos, tres unilaterales, un cronograma de una sola columna y dos carruseles horizontales. Todos provienen de un widget y las diferencias se encuentran en cuatro secciones de Estilo: Tarjetas, Fechas, Línea y Puntos.
Abra las demostraciones, elija la más cercana y cree su versión con Widget de línea de tiempo.
Lectura relacionada
