Cómo crear una línea de tiempo en Elementor (línea de tiempo vertical, horizontal y posterior)

Elementor no tiene ningún widget de línea de tiempo propio, en la versión gratuita o en Pro. Para colocar una línea de tiempo en una página de Elementor, agrega una de un complemento. Esta guía utiliza el widget Línea de tiempo en el archivo gratuito Complementos maestros complemento, que cubre diseños verticales, carruseles horizontales y líneas de tiempo que se construyen a partir de las publicaciones de su blog.

Cada captura de pantalla a continuación proviene de Elementor 4.2.4 con Master Addons 3.2. Líneas de tiempo personalizadas, ambos diseños y toda la pestaña Estilo son gratuitos. La línea de tiempo posterior necesita Pro y está etiquetada donde aparece.

¿puedes crear una línea de tiempo en Elementor sin un complemento?

Técnicamente sí, y es más trabajo de lo que parece. Apilarías contenedores, le darías a uno un borde izquierdo para falsificar la línea central, colocarías absolutamente un punto en cada fila y alternarías la alineación izquierda y derecha con CSS personalizado. Luego escribirías las reglas responsivas tú mismo, porque ese diseño alterno tiene que colapsar en una sola columna en los teléfonos.

Se cae en el mantenimiento. Agregar un hito en el medio significa realternar cada fila debajo con la mano. Un widget mantiene la línea, los marcadores, la alternancia y los puntos de interrupción como configuraciones, por lo que agregar una entrada es un clic.

Busque en el panel de widgets “línea de tiempo” en una instalación estándar de Elementor y obtendrá exactamente un resultado: el widget Master Addons.

Instale el complemento

Desde el panel de WordPress vaya a Complementos → Agregar complemento, busca Complementos maestros para Elementor, luego instale y active. Abra cualquier página con Elementor y busque en el panel de widgets línea de tiempo.

Si no aparece nada después de activarlo, verifique Complementos maestros → Biblioteca de widgets y asegúrese de que la línea de tiempo esté activada. Los widgets se pueden desactivar individualmente para mantener el código no utilizado fuera de la interfaz, lo cual vale la pena hacer de todos modos si lo desea Velocidad de página del elementor.

Cómo agregar una línea de tiempo en Elementor, paso a paso

Paso 1: arrastre el widget a la página

Edite una página con Elementor, busque Cronogramay arrástrelo a un contenedor. Llega con tres entradas de muestra ya completadas, para que puedas ver lo que hace cada campo antes de cambiar algo.

Paso 2: elija el tipo de línea de tiempo

En la pestaña Contenido, abra el Cronograma sección. El primer menú desplegable es Tipo de línea de tiempo.

Cronograma personalizado es el gratuito. Usted mismo escribe cada entrada, que es lo que desea para el historial de una empresa, una hoja de ruta del producto o un calendario de eventos, donde el contenido es fijo y editorial.

Post cronología es una función Master Addons Pro. Lee sus publicaciones de WordPress y crea la línea de tiempo a partir de ellas, por lo que publicar una publicación agrega una entrada por sí sola. Hay una sección más abajo.

Paso 3: elige vertical u horizontal

El segundo menú desplegable es Estilo de línea de tiempo.

Vertical recorre la página con tarjetas alternando la izquierda y la derecha de una línea central. Horizontal coloca las entradas una al lado de la otra como un carrusel con flechas. Ambos son gratuitos y puedes cambiar entre ellos en cualquier momento sin perder tus entradas.

Un límite que vale la pena conocer ahora: El estilo de línea de tiempo solo aparece para líneas de tiempo personalizadas. Las líneas de tiempo posteriores son solo verticales y el menú desplegable desaparece cuando cambia el tipo.

Paso 4: edita tus entradas

Bajo Artículos, cada entrada es una fila repetidora. Haga clic en uno para abrirlo.

Cada fila tiene una pestaña Contenido y una pestaña Medios. Los campos que importan:

• Mostrar: Fecha o etiqueta personalizada. La fecha te da un selector de fechas; La etiqueta personalizada le permite escribir cualquier cosa, que es como obtiene “T3 2026” o “Fundado” en la línea en lugar de una fecha de calendario.
• Formato de fecha: ajustes preestablecidos más Personalizado. Personalizado toma una cadena de fecha PHP, entonces F Y imprime “junio de 2019” y evita que una línea de tiempo histórica parezca un registro de cambios.
• Enlace: hace que se pueda hacer clic en toda la tarjeta. Déjelo desactivado si el texto de la tarjeta ya contiene un enlace, porque un enlace dentro de un enlace no es HTML válido y los navegadores eliminarán uno de ellos.
• El cuadro de contenido es un editor completo. No hay un campo de título separado, entonces el encabezado de la entrada entra aquí como Título 3.
• La pestaña Medios agrega una imagen a la tarjeta y establece su resolución.

Agregar artículo crea una nueva fila, el ícono de copia duplica una y las filas se arrastran para reordenar.

Paso 5: Publícalo y míralo

Cuatro entradas, fechas formateadas como mes y año, íconos de bandera en los marcadores, todo ello en el complemento gratuito.

Las cartas alternan lados y las fechas se sientan frente a cada una sin que coloques nada.

Por qué las cartas se ven en blanco hasta que te desplazas

Las tarjetas de línea de tiempo comienzan ocultas y se animan cuando se desplazan hacia la vista, y el punto más cercano a la posición de desplazamiento toma un estado enfocado, que diseñas por separado en la sección Puntos.

Entonces, una línea de tiempo colocada debajo de la página parece vacía en una herramienta de captura de pantalla, en una exportación de PDF o en una auditoría de velocidad de página que nunca se desplaza. Desplácese por la página y aparecerán las entradas.

Haciendo una línea de tiempo horizontal en Elementor

Conjunto Estilo de línea de tiempo a la línea de tiempo horizontal y el diseño gira: las entradas se ubican una al lado de la otra, los puntos se ubican encima de las cartas en una línea horizontal y las flechas se desplazan a través de ellas.

Las flechas se configuran en la pestaña Estilo en Navegación. Dos controles, fáciles de mezclar:

• Colocación está dentro o fuera del carrusel.
• Posición es donde se sientan, desde arriba a la izquierda hasta abajo a la derecha.

Al configurar la posición en un valor que pertenece a Colocación, las flechas caen en la esquina superior izquierda, encima de su primera entrada. El centro inferior con ubicación exterior es el emparejamiento seguro y es lo que utiliza la captura de pantalla.

Horizontal se adapta a cuatro a seis hitos fuertes por encima del pliegue, como una secuencia de lanzamiento de producto en una página de inicio. En las últimas seis entradas, el lector hace clic en una flecha repetidamente para ver el contenido que no puede escanear y la vertical gana. La vertical también es la apuesta más segura en los teléfonos, donde la lectura de arriba a abajo es lo que la gente espera. Elijas lo que elijas, compruébalo con tu puntos de interrupción responsivos antes de realizar el envío, porque los dos diseños colapsan de manera diferente.

Estilismo de la línea, los puntos y las cartas

La pestaña Estilo tiene once secciones: Artículos de carrusel, Diseño, Imágenes, Publicaciones, Tarjetas, Flecha, Fechas, Línea, Puntos, Navegación y Patrones.

Línea establece el color y el grosor de la línea central. Tarjetas maneja fondo, borde, sombra y relleno. Fechas y los controles de tipografía hacen coincidir el texto de entrada con su sistema de fuentes.

Puntos ¿es la sección en la que vale la pena pasar tiempo? Es Tipo el control selecciona lo que se encuentra en cada marcador y tiene tres pestañas de estado: Predeterminado, Flotar y Centrado. Enfocado se aplica a la entrada más cercana a la posición de desplazamiento del lector, por lo que dejarlo sin estilo es lo que hace que una línea de tiempo se lea como una lista plana mientras el lector pasa por ella. Estilo los tres.

Conjunto Tipo para Iconos y el marcador toma un ícono, que es lo que usan las capturas de pantalla aquí. Compruébelo en el frente de inmediato: si el marcador se representa como un círculo vacío, el ícono no se ha cargado y cambiar el tipo nuevamente al valor predeterminado le brinda un punto de color simple que siempre funciona.

Creando una línea de tiempo a partir de las publicaciones de su blog

Cambie el tipo de línea de tiempo a Post cronología y el panel cambia por completo. En lugar de escribir entradas, describe qué publicaciones extraer y el widget crea la línea de tiempo a partir de ellas.

Los controles que vale la pena configurar:

• Mostrar título, Enlace de título y Etiqueta de encabezado. Establezca la etiqueta de encabezado en H2 o H3 para que los títulos de las publicaciones se encuentren debajo del H1 de la página en el orden de encabezado. Esta es la misma regla de orden de encabezado que importa cuando usted cree una página de blog en Elementor.
• Mostrar imagen y Resolución de imagen coloque la imagen destacada en la tarjeta.
• Formato de fecha y Formato de tiempo. El valor predeterminado imprime la hora junto a la fecha, que se lee de manera extraña en una línea de tiempo de hito. Establezca el formato de hora en ninguno o utilice un formato de fecha personalizado.
• Publicaciones por página, Recuento de publicaciones compensadas, Orden postal y Ordenar por.
• Categoría, Filtrar por etiqueta, Autor y Publicaciones para excluir limite la consulta, de modo que una línea de tiempo pueda ser “todo en noticias” y otra un conjunto cuidadosamente seleccionado.
• Habilitar enlaces hace que se pueda hacer clic en toda la tarjeta. Mismo aviso que la versión personalizada: apágala si el contenido de la tarjeta tiene enlaces propios.

Debido a que lee publicaciones directamente, esta versión cae claramente en a Creador de temas archivo o plantilla única, y se actualiza sola cuando la publicas. La línea de tiempo de publicación es parte de Complementos maestros Pro.

Cronología personalizada o posterior: cuál

Si al publicar una publicación se debe agregar una entrada, use Línea de tiempo de publicación. Si las entradas son una historia que escribió una vez, use Personalizado.

Donde vale la pena usar una línea de tiempo

• Sobre páginas. Una historia vertical de la empresa, con a Contrarrestar fila encima para ver los números de los titulares.
• Páginas de productos. Una hoja de ruta horizontal de las funciones enviadas y lo que sigue. De cuatro a seis entradas, nada más.
• Notas de la versión. Una línea de tiempo posterior filtrada a una categoría, junto a a Registro de cambios widget.
• Portafolios y estudios de casos. Entradas fechadas con imágenes destacadas, que es donde la pestaña Medios da sus frutos.
• Horarios de eventos y cursos. Etiquetas personalizadas en lugar de fechas, por lo que la línea dice “Día 1, Día 2, Día 3”.

Siete cosas que hacen que una línea de tiempo se lea mejor

1. Mantenga cada carta en dos o tres oraciones. Una línea de tiempo es un formato de escaneo y los párrafos completos la anulan.
2. Utilice etiquetas personalizadas para los hitos. “2019” supera a “17, 19 de junio” cuando el día exacto no importa.
3. Mantenga un nivel de encabezado dentro de las tarjetas. El cuadro de contenido no tiene campo de título, así que establezca el rumbo de cada entrada en la misma etiqueta en lugar de mezclar H2 y H4.
4. Cambie a las últimas seis entradas verticales, porque el desplazamiento horizontal se vuelve tedioso rápidamente.
5. Estilo el estado enfocado. Es el que le dice al lector dónde está.
6. Verifique sus marcadores en el frente después de elegir un ícono. Un círculo vacío significa que el ícono no se cargó y los puntos predeterminados son el respaldo seguro.
7. Compruébalo en un teléfono. El diseño alterno se colapsa en una columna y las etiquetas largas y personalizadas son lo primero que se puede envolver mal.

Preguntas frecuentes

Lectura relacionada

• Widget de línea de tiempo de Elementor, la página de funciones con todos los controles enumerados
• Documentación del widget de línea de tiempo
• Cómo crear una página de blog con Elementor
• Prácticas de SEO para páginas Elementor
• Complementos maestros en WordPress.org