Conclusiones clave
- Elementor y Elementor Pro no tienen un widget de línea de tiempo, por lo que una línea de tiempo horizontal de Elementor necesita un widget complementario o una fila de contenedores hechos a mano con CSS personalizado.
- El widget Master Addons Timeline cambia de vertical a horizontal con un control, Timeline Style, que se encuentra en la pestaña Contenido en la sección Cronología.
- Una línea de tiempo horizontal en el widget Master Addons es un carrusel y su control de navegación ofrece seis opciones: flechas y puntos, flechas y fracciones, flechas, puntos, progreso y ninguno.
- La configuración del carrusel en el widget Línea de tiempo incluye un diseño de carrusel o flujo de cobertura, reproducción automática con una velocidad predeterminada de 5000 ms, pausa al flotar, diapositivas para desplazarse, diapositiva central y bucle.
- El diseño horizontal funciona solo con elementos de la línea de tiempo personalizada, porque una línea de tiempo de publicación creada a partir de publicaciones de blog permanece vertical.
Una línea de tiempo horizontal de Elementor establece tus fechas de izquierda a derecha, con un punto en la línea encima de cada carta y flechas para moverse a lo largo de ella. elemento no tiene ningún widget de línea de tiempo propio, por lo que esta guía utiliza Widget de línea de tiempo en complementos maestros, donde el diseño horizontal es un único menú desplegable.
Los seis pasos a continuación comienzan desde una línea de tiempo vertical ordinaria y terminan con un carrusel que funciona. Cada captura de pantalla proviene de Elementor 4.3 con el widget en una página de prueba. Si aún no ha colocado una línea de tiempo, el tutorial completo de línea de tiempo cubre primero los conceptos básicos.
Tabla de contenidos
Cuando una línea de tiempo horizontal es la mejor opción
Utilice una línea de tiempo horizontal cuando tenga una serie corta de pasos y un espacio vertical limitado. Una línea de tiempo vertical con tres cartas puede requerir más que una pantalla completa de desplazamiento. Las mismas tres cartas una al lado de la otra encajan en una fila, razón por la cual los diseños horizontales aparecen en las páginas de inicio y de destino, mientras que los verticales se adaptan a las páginas largas.
| Factor | Cronograma horizontal | Cronología vertical |
|---|---|---|
| Mejor longitud | 3 a 8 artículos | Cualquier longitud |
| Espacio que necesita | Una fila | Crece con cada artículo |
| Cómo se mueven los visitantes | Flechas, puntos o deslizar | Desplazándose por la página |
| Uso típico | Pasos del proceso, hoja de ruta del producto, aspectos destacados anuales | Historia de la empresa, registro de cambios, larga historia |
| Fuente en complementos maestros | Artículos de línea de tiempo personalizados | Artículos personalizados o publicaciones de blog |
Una línea de tiempo horizontal es una especie de carrusel. Si no está seguro de cuál de los dos términos se ajusta a su diseño, carrusel vs control deslizante en Elementor explica la diferencia.
Cómo crear una línea de tiempo horizontal en Elementor
Necesita instalar Elementor y Master Addons, luego seis pasos en el editor. Nada a continuación necesita CSS personalizado.
Paso 1: agregue el widget de línea de tiempo
Abra su página con Elementor, busque en el panel de widgets Cronograma y arrástrelo a la página. Llega como una línea de tiempo vertical con tres elementos de muestra. Dejar Tipo de línea de tiempo en Cronograma personalizado, porque el diseño horizontal sólo se ofrece para artículos personalizados.
Paso 2: cambie el estilo de la línea de tiempo a horizontal
En la pestaña Contenido, abra el Cronograma sección y cambio Estilo de línea de tiempo de la línea de tiempo vertical a Cronograma horizontal. Las cartas se mueven en fila, la línea pasa por la parte superior y cada punto se encuentra encima de su carta con la fecha encima. En el panel aparecen dos nuevas secciones: Configuración de navegación y carrusel.
Paso 3: Edita los elementos
Haga clic en una fila debajo Artículos para abrirlo. Cada elemento tiene tres pestañas pequeñas: Contenido, Medios y Estilo.
- Mostrar decide lo que está por encima del punto: una fecha o una etiqueta personalizada como “Fase 1”.
- Fecha y Formato de fecha establezca la fecha y cómo está escrito.
- Enlace hace que se pueda hacer clic en toda la tarjeta.
- El editor de contenido contiene el encabezado y la descripción. No hay un campo de título separado, por lo que la primera línea es el encabezado.
- El Medios tab agrega una imagen a la tarjeta.
Las imágenes amplias funcionan mejor que las altas aquí. Tres fotos altas empujan el texto hacia abajo en la pantalla.
Paso 4: elige la navegación
Abre el Navegación seccione y elija cómo se mueven los visitantes a través de la línea de tiempo. El menú desplegable Navegación tiene seis opciones.
| Opción de navegación | Lo que ven los visitantes | Bueno para |
|---|---|---|
| Flechas y puntos | Flechas anteriores y siguientes más un punto por diapositiva | La mayoría de las líneas de tiempo |
| Flechas y fracción | Flechas más un contador como 2/6 | Largas líneas de tiempo donde los puntos se llenan |
| Flechas | Sólo flechas | Diseños limpios |
| Puntos | Sólo puntos | Diseños que dan prioridad al tacto |
| Progreso | Una barra que se llena a medida que avanza el carrusel | Pasos del proceso |
| Ninguno | Desliza o reproduce automáticamente únicamente | Tiras decorativas |
Debajo del menú desplegable puedes activarlo ¿balas dinámicas?, agregue una barra de desplazamiento con ¿mostrar barra de desplazamiento?, establezca la posición e intercambie los íconos Siguiente y Anterior. ¿Ocultar flecha en el móvil? está activado de forma predeterminada, lo que deja a los visitantes del teléfono con deslizar y puntos.
Paso 5: establece el comportamiento del carrusel
Abierto Configuración del carrusel para controlar cómo se mueve la línea de tiempo.
- Diseño: Carrusel para una fila plana o Coverflow para un efecto 3D con controles de rotación, estiramiento y profundidad.
- Reproducción automática y Velocidad de reproducción automática: la velocidad predeterminada es 5000 ms, por lo que se realiza una nueva diapositiva cada cinco segundos.
- Pausa en Hover: detiene la reproducción automática mientras el puntero está sobre la línea de tiempo.
- Diapositivas para desplazarse: cuántas tarjetas se mueven por clic, configuradas por dispositivo.
- Diapositiva central, Coge el cursor y Modo libre de arrastre por la sensación del arrastre.
- Bucle: vuelve al primer elemento después del último.
- Velocidad de animación (ms): cuánto tiempo tarda cada transición de diapositiva, 500 de forma predeterminada.
Para obtener una línea de tiempo real, piénselo dos veces antes de la reproducción automática. Las fechas tienen un pedido y una tarjeta que se desliza mientras alguien la lee es molesta. La reproducción automática con pausa en Hover es un buen término medio.
Paso 6: Dale estilo a las flechas, puntos y cartas
Cambie a la pestaña Estilo. Tiene diez secciones: Artículos de carrusel, Diseño, Imágenes, Publicaciones, Tarjetas, Flecha, Fechas, Línea, Puntos y Navegación.
- Tarjetas: relleno, radio del borde, colores de título y contenido, además de una apariencia separada para la tarjeta enfocada.
- Fechas: tipografía y color de la fecha o etiqueta encima de cada punto.
- Línea: el color y grosor de la pista.
- Puntos: un punto simple, un icono o una imagen, con tamaño y colores.
- Navegación: colores y tamaños para flechas, puntos y la barra de desplazamiento.
Publica la página y pruébala en un teléfono. Las tarjetas por fila aparecen en pantallas más pequeñas, así que comprueba que el texto aún se ajuste.
¿Quieres el diseño vertical también? El Widget de línea de tiempo de Elementor page enumera todas las opciones de diseño, alineación y estilo en un solo lugar.
Videotutorial
Este video crea una línea de tiempo a partir de una página vacía y la cambia al carrusel horizontal a las 3:44.
Cuatro cosas que salen mal
La mayoría de los problemas con una línea de tiempo horizontal provienen de tratarla como vertical.
- Demasiados artículos. Aproximadamente después de las ocho, los visitantes dejan de hacer clic. Utilice una línea de tiempo vertical o divida la historia por año.
- Alturas desiguales de las cartas. Una descripción larga extiende la fila. Recorte el texto o active la altura automática en la configuración del carrusel.
- Flechas sobre la primera carta. Si las flechas se encuentran encima del contenido, cambie la posición en la sección Navegación.
- Esperando publicaciones de blog. El tipo de línea de tiempo de publicación es vertical. Para publicaciones seguidas, utilice el Widget de blog en modo carrusel.
Lea también: 20 plantillas deslizantes Elementor, que incluyen un diseño deslizante de línea de tiempo.
Preguntas frecuentes
¿puedo hacer una línea de tiempo horizontal en Elementor sin Elementor Pro?
Sí. Elementor Pro tampoco incluye un widget de línea de tiempo, por lo que Pro no hace ninguna diferencia aquí. Agregue un widget de línea de tiempo desde un complemento como Complementos maestros, establezca Estilo de línea de tiempo en Línea de tiempo horizontal y los elementos se convertirán en un carrusel.
¿cómo agrego flechas a una línea de tiempo horizontal en Elementor?
Abra la sección Navegación en la pestaña Contenido y elija Flechas y Puntos, Flechas y Fracción, o Flechas. Luego puede configurar la posición de la flecha y reemplazar los íconos Siguiente y Anterior de la misma sección.
¿se puede reproducir automáticamente una línea de tiempo horizontal?
Sí. Active la reproducción automática en Configuración del carrusel y establezca la velocidad de reproducción automática en milisegundos. El valor predeterminado es 5000, que son cinco segundos por diapositiva. La pausa en Hover lo detiene mientras un visitante lee.
¿Es una línea de tiempo horizontal receptiva?
Sí. Es un carrusel, por lo que muestra menos tarjetas en tabletas y teléfonos y los visitantes deslizan el dedo para moverse. Slides to Scroll tiene valores separados por dispositivo.
¿Puedo mostrar publicaciones de blog en una línea de tiempo horizontal?
No con el tipo Post Timeline, que es solo vertical. Agregue las publicaciones a mano como elementos de la línea de tiempo personalizada o use un carrusel de publicaciones.
Pensamientos finales
Una línea de tiempo horizontal de Elementor se reduce a una configuración y dos secciones: Estilo de línea de tiempo establecido en Línea de tiempo horizontal, luego Navegación con sus seis opciones y Configuración de carrusel para reproducción automática, bucle y velocidad. Manténgalo en tres a ocho tarjetas cortas y pruébalo en un teléfono.
El Página del widget de la línea de tiempo tiene demostraciones en vivo de ambos diseños, incluido a demostración de hoja de ruta horizontal.
Lectura relacionada
2 respuestas
Es fácil pasar por alto el punto de que el diseño horizontal solo funciona con elementos de la línea de tiempo personalizada, no con la línea de tiempo posterior, y rompería una compilación tarde. Antes de cambiar el estilo de la línea de tiempo, confirme que cada elemento es personalizado, ya que las líneas de tiempo basadas en publicaciones de blog permanecen verticales. Un ajuste práctico: configure Navegación en flechas y puntos, luego pruebe en un ancho de teléfono estrecho, porque las flechas del carrusel pueden abarrotar las tarjetas y los puntos hacen que deslizar el dedo sea más claro para los lectores.
¡gracias por compartir estos útiles consejos! 😊 Tienes toda la razón en que verificar el tipo de elemento de la línea de tiempo y probar el diseño en pantallas más pequeñas puede ayudar a evitar problemas inesperados. Le agradecemos que señale esto y ayude a otros usuarios de Master Addons a crear líneas de tiempo mejores y más receptivas. ¡Gracias por ser parte de nuestra comunidad!