Widget gratuito de línea de tiempo de Elementor: líneas de tiempo verticales y horizontales
Timeline es un widget de complementos maestros gratuito para Elementor que establece fechas y eventos a lo largo de una línea de conexión. Cree una línea de tiempo personalizada a mano, con una fecha o etiqueta, contenido enriquecido, una imagen y un enlace para cada elemento, y muéstrela verticalmente o como un carrusel horizontal. Con Master Addons Pro también puedes crear una línea de tiempo de publicación directamente a partir de las publicaciones de tu blog. Se adapta a los historiales, hojas de ruta, horarios de eventos y archivos de noticias de la empresa.
Cómo agregar una línea de tiempo en Elementor
Estos pasos crean una línea de tiempo personalizada gratuita. El widget comienza con tres elementos de muestra, para que pueda ver el diseño antes de cambiar algo.
- En Elementor, busque en el panel de widgets “Timeline” y arrastre el widget de complementos maestros a la página.
- Mantenga el tipo de línea de tiempo en la línea de tiempo personalizada y elija Línea de tiempo vertical o Línea de tiempo horizontal.
- Abra cada fila debajo de Elementos y establezca la fecha o una etiqueta personalizada, el contenido, una imagen y un enlace.
- Haga clic en Agregar elemento para obtener más hitos y arrastre las filas para reordenarlas.
- Para obtener una línea de tiempo horizontal, configure la configuración de navegación y carrusel.
- Estilee las tarjetas, fechas, líneas y puntos en la pestaña Estilo y luego publique.
Nuestro tutorial de línea de tiempo revisa cada configuración con capturas de pantalla y el video en la parte superior de esta página muestra los mismos pasos.
¿elementor o Elementor Pro tienen un widget de línea de tiempo?
No. Ni Elementor ni Elementor Pro incluyen un widget de línea de tiempo, por lo que necesita un complemento o un diseño hecho a mano a partir de contenedores, bordes y CSS personalizado. El widget Master Addons Timeline funciona con Elementor por sí solo y no necesita Elementor Pro para ello. Esto es lo que cubre el widget.
| Widget de línea de tiempo | |
|---|---|
| Diseños | Carrusel vertical u horizontal |
| Alineación de tarjetas | Izquierda, Centro, Superposición o Derecha |
| Fuentes de contenido | Artículos que agrega a mano o publicaciones de su blog (Post Timeline, Pro) |
| Cada artículo | Fecha o etiqueta personalizada, contenido enriquecido, una imagen y un enlace para toda la tarjeta |
| Tipos de puntos | Puntos, iconos, imágenes, números o letras |
| Navegación horizontal | Flechas, puntos, fracción o barra de progreso, con barra de desplazamiento opcional |
| Secciones de estilo | 10, incluidas Tarjetas, Fechas, Línea y Puntos |
| Necesidades | Complementos Elementor y Master |
Cronología personalizada (gratis) o línea de tiempo posterior (Pro)
La línea de tiempo personalizada es la opción gratuita. Cada elemento obtiene una fecha, que puede cambiar por una etiqueta personalizada como “Fase 1”, un área de contenido de texto enriquecido, una imagen y un enlace opcional para toda la tarjeta. Los elementos también pueden tener su propia configuración de puntos y colores. Post Timeline, parte de Pro, crea la línea de tiempo a partir de sus publicaciones: filtrar por categoría, etiqueta o autor, excluir publicaciones específicas, establecer el orden y el desplazamiento, y elegir si desea mostrar el título, la imagen destacada y el extracto.
- Cronología personalizada: una fecha o etiqueta, contenido, imagen y enlace personalizados para cada artículo.
- Estilo por artículo para los colores de puntos, tarjetas y fechas.
- Línea de tiempo de publicaciones (Pro): categoría, filtros de etiquetas y autores, publicaciones excluidas, desplazamiento y orden.
- Las postales pueden mostrar el título, la imagen destacada, el extracto y un enlace para leer más.
Cronología vertical en Elementor
La línea de tiempo vertical apila tarjetas a lo largo de una línea central. Alineelas hacia la izquierda, el centro, la derecha o como superposición e invierta las posiciones de las tarjetas con un solo interruptor. El espaciado horizontal y el espaciado vertical establecen los espacios. En tabletas y teléfonos las tarjetas se mueven hacia un lado de la línea.
- Alineación horizontal: izquierda, central, superpuesta o derecha.
- Las posiciones de las cartas inversas cambian qué lado viene primero.
- Alineación vertical y dos controles deslizantes espaciados para las tarjetas.
- Las tarjetas se mueven hacia un lado en tabletas y teléfonos.
Cronología horizontal en Elementor (carrusel)
Establezca el estilo de línea de tiempo en línea de tiempo horizontal y una línea de tiempo personalizada se convertirá en un carrusel, con los puntos en una línea encima de las tarjetas. En Navegación, elija Flechas y puntos, Flechas y fracciones, Flechas, Puntos, Progreso o Ninguno, y agregue una barra de desplazamiento si lo desea. La configuración del carrusel tiene un diseño estándar o Coverflow, reproducción automática con su propia velocidad, pausa en el desplazamiento, bucle y diapositivas para desplazarse.
- Seis opciones de navegación, además de una barra de desplazamiento opcional.
- Diseño de carrusel o Coverflow.
- Reproducción automática, pausa en vuelo estacionario, bucle y deslizamiento central.
- Disponible para líneas de tiempo personalizadas.
Véalo vivir en el Demostración de hoja de ruta horizontal.
Línea de tiempo de publicación: cree una línea de tiempo a partir de las publicaciones de su blog (Pro)
La línea de tiempo de publicación es parte de Master Addons Pro. Cambie el tipo de línea de tiempo a línea de tiempo de publicación y el widget enumerará sus publicaciones publicadas a lo largo de la línea, la más nueva primero de forma predeterminada, por lo que la línea de tiempo crece cada vez que publica. Establezca publicaciones por página, orden de publicación y ordene por, filtre por categoría, etiqueta o autor, omita publicaciones con publicaciones para excluir y use el recuento de publicaciones compensadas para comenzar más abajo en la lista. Las líneas de tiempo de publicación son verticales.
- Consulta: Publicaciones por página, Orden de publicación, Orden por y Recuento de publicaciones compensadas.
- Filtros: Categoría, Etiqueta, Autor y Publicaciones a Excluir.
- Muestra u oculta el título, imagen, extracto y botón Leer más.
- Enable Links hace que cada tarjeta se vincule a su publicación.
Para obtener una cuadrícula o lista de publicaciones, utilice Widget de blog.
Estilo de líneas y puntos
Estilee la línea con un color de fondo, un color de progreso, grosor y un borde. Los puntos pueden ser puntos simples, íconos, imágenes, números o letras, y cada uno tiene estilos predeterminado, flotante y enfocado para tamaño, color de fondo, color de puntos y sombra de texto. De esta manera destaca del resto el hito que mira un visitante.
- Fondo de línea, color de progreso, grosor y borde.
- Cinco tipos de puntos: puntos, iconos, imágenes, números o letras.
- Estados predeterminados, flotantes y enfocados para cada punto.
Estilo de cartas y citas con animaciones
Las tarjetas obtienen relleno, margen, relleno de contenido, radio de borde y título y tipografía de contenido separados. Su color, fondo, sombra de cuadro y sombra de texto pueden cambiar en los estados Predeterminado, Flotar y Enfocado. Active las tarjetas animadas para revelar cada tarjeta a medida que se desplaza hacia la vista. Las fechas tienen su propia tipografía, relleno, margen, sombra de texto y colores para los tres estados.
- Controles de espaciado de tarjetas, radio y tipografía.
- Estilos predeterminados, flotantes y enfocados para tarjetas y fechas.
- Animar tarjetas para revelar elementos a medida que se desplazan hacia la vista.
Cronología personalizada versus cronología posterior
Así es como se comparan los dos tipos de líneas de tiempo.
| Cronograma personalizado | Post cronología | |
|---|---|---|
| Precio | Gratis | Complementos maestros Pro |
| Contenido | Elementos que agregas en el panel | Tus publicaciones publicadas |
| Actualizaciones | Cuando editas los elementos | Cada vez que publicas una publicación |
| Diseños | Carrusel vertical u horizontal | vertical |
| Cada entrada muestra | Fecha o etiqueta, contenido, imagen, enlace | Título, imagen destacada, fecha, extracto, leer más |
| Mejor para | Historias, hojas de ruta, horarios | Archivos de noticias, notas de la versión |
Para obtener una cuadrícula de publicaciones completa junto a su línea de tiempo, use gratis Widget de blog. Para mostrar los números detrás de sus hitos, agregue Contrarrestar.
Ejemplos de líneas de tiempo
El espectador a continuación tiene 16 diseños listos. Abre cualquiera de ellos para verlo en vivo.
- Hitos para la historia de una empresa.
- Registro de cambios oscuro para notas de la versión.
- Hoja de ruta horizontal para las fases del producto.
- Blog de cronología de publicaciones para publicaciones en orden de fecha.
- Imágenes de estudio de caso para etapas de proyecto con fotografías.
- Pasos de superposición para un proceso.
- Agenda de eventos para un horario.
Preguntas frecuentes sobre el cronograma
¿debo utilizar la línea de tiempo posterior o la línea de tiempo personalizada?
Utilice Custom Timeline, que es gratuito, cuando desee controlar cada fecha y entrada, como una página Nuestro historial o una hoja de ruta. Utilice Post Timeline, parte de Master Addons Pro, cuando la línea de tiempo debe actualizarse desde las publicaciones de su blog, como un archivo de noticias.
¿cómo funciona el estado "enfocado"?
El estado enfocado diseña el elemento que está actualmente activo a medida que los visitantes se desplazan por la línea de tiempo o se mueven por el carrusel. Dale un fondo de tarjeta diferente, color de fecha o un punto más grande para que se destaque el hito actual.
¿puedo crear una línea de tiempo en Elementor sin un complemento?
Sí, uno simple. Apile contenedores en una columna, dé a cada uno un borde izquierdo para la línea y coloque un widget de icono en el borde con la posición establecida en Absoluto para el punto. En los lados alternos, un diseño horizontal y una animación de desplazamiento necesitan CSS personalizado o un widget de línea de tiempo.
¿cómo agrego una línea de tiempo horizontal en Elementor?
Agregue el widget Línea de tiempo, mantenga el Tipo de línea de tiempo en Línea de tiempo personalizada y establezca el Estilo de línea de tiempo en Línea de tiempo horizontal. Luego elija las flechas o puntos en Navegación y configure la reproducción automática y el bucle en Configuración del carrusel.
¿el widget Elementor Timeline es gratuito?
Sí. Timeline es un widget gratuito que incluye el tipo de línea de tiempo personalizada y diseños verticales y horizontales. El tipo Post Timeline, que crea entradas a partir de las publicaciones de su blog, necesita Master Addons Pro.
¿Puedo vincular una tarjeta de línea de tiempo completa a una página?
Sí. Cada elemento de línea de tiempo personalizada tiene un campo Enlace que hace que se pueda hacer clic en toda la tarjeta. Las líneas de tiempo de publicaciones tienen un interruptor Habilitar enlaces que vincula cada tarjeta a su publicación. Evite otros enlaces dentro de una tarjeta vinculada, ya que no se permiten enlaces dentro de enlaces.
¿puede la línea de tiempo extraer publicaciones de blog automáticamente?
Sí, con el tipo Línea de tiempo de publicación en Master Addons Pro. Lee tus publicaciones publicadas y tú controlas el orden, el número de publicaciones y los filtros de categoría, etiqueta o autor.
¿Por qué las cartas se ven en blanco hasta que me desplazo?
Tarjetas animadas está activado. Cada tarjeta permanece oculta hasta que se desplaza hacia la vista y luego se desliza hacia adentro. Desactive las tarjetas animadas en la sección Tarjetas de la pestaña Estilo si desea que todas las tarjetas sean visibles desde el principio.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
