Un muro de fechas y párrafos rara vez se pega. Sin embargo, coloque esos mismos eventos en una línea de tiempo, con una línea central, marcadores fechados y tarjetas ordenadas, y la historia comenzará a leerse sola. Los hitos de la empresa funcionan de esta manera. También lo hace una hoja de ruta de producto, un viaje personal o las últimas publicaciones de su blog en orden de fechas. La secuencia hace el trabajo pesado.
Y no necesitas código personalizado ni un complemento diferente para cada estilo. Los complementos maestros Widget de línea de tiempo lo maneja todo desde un solo lugar. Construiremos una línea de tiempo vertical, la voltearemos a horizontal, colocaremos publicaciones automáticamente y luego diseñaremos todo. Una vez que sepas dónde viven los ajustes, serán unos minutos de trabajo.
Qué hace el widget de línea de tiempo Elementor
Una línea de tiempo es una lista cronológica convertida en un diseño visual. Cada entrada se encuentra en una línea central, marcada por un punto (un punto o un ícono), con una tarjeta que contiene la fecha, el título y su contenido. El widget Master Addons Timeline le brinda dos formas de completar esas entradas y dos formas de distribuirlas.
Los dos tipos de línea de tiempo son línea de tiempo personalizada y línea de tiempo posterior. Personalizado significa que escribe cada entrada a mano, lo que se adapta a contenido fijo como el historial de una empresa o una hoja de ruta. Post Timeline introduce sus publicaciones de WordPress automáticamente, por lo que una nueva publicación se convierte en una nueva entrada de línea de tiempo sin trabajo manual.
Los dos estilos de línea de tiempo son verticales y horizontales. Las entradas verticales se apilan en la página en un patrón alterno izquierda/derecha. Horizontal los coloca uno al lado del otro como un carrusel desplazable con flechas de navegación. Cambias entre cualquiera de estos desde un único menú desplegable, razón por la cual este widget permanece en mi kit junto al otro Más de 80 widgets y extensiones en complementos maestros.
Antes de comenzar: instale complementos maestros
El widget Timeline viene con los complementos maestros gratuitos para Elementor. La línea de tiempo personalizada y ambos estilos de diseño son gratuitos. Post Timeline, que se trata más abajo, necesita Master Addons Pro.
- En su panel de WordPress, vaya a Complementos > Agregar nuevo.
- Busque “Complementos maestros para Elementor” y haga clic Instalar ahora, atunci Activar. Tu poți și descargue complementos maestros directamente desde WordPress.org.
- Abra cualquier página con Elementor y busque en el panel de widgets “Timeline”
¿Falta el widget después de la activación? Comprueba que esté encendido en Complementos maestros > Elementos. Allí se pueden alternar todos los widgets, y eso es parte de cómo el complemento permanece ligero. Cargar sólo los widgets que realmente usas es una de las formas más sencillas de hacerlo acelere su sitio Elementor.
Cómo agregar una línea de tiempo en Elementor (paso a paso)
Comenzaremos con una línea de tiempo vertical personalizada. Es lo más rápido que puedes entender y todo lo demás se bifurca.
Paso 1: arrastre el widget de línea de tiempo a la página
Edite su página con Elementor, busque “Línea de tiempo” en el panel de widgets y arrástrela a una sección. Aparece con tres entradas de muestra ya completadas, por lo que ve una línea de tiempo funcional de inmediato en lugar de un cuadro en blanco. Algo pequeño, pero te evita adivinar lo que hace cada campo.
Paso 2: establezca el tipo y estilo de línea de tiempo
En el Contenido pestaña, abra la sección Línea de tiempo. Dos menús desplegables hacen la mayor parte del trabajo aquí: Tipo de línea de tiempo (Personalizado o Post) y Estilo de línea de tiempo (Vertical u Horizontal). Deje el tipo en “Línea de tiempo personalizada” y el estilo en “Línea de tiempo vertical” por ahora.
Paso 3: edite los elementos de su línea de tiempo
Bajo Artículos, cada entrada aparece como una fila repetidora (las muestras tienen fecha del 2 de febrero de 2014, 10 de mayo de 2015 y 21 de junio de 2016). Haga clic en una fila para expandirla y editar la fecha (o una etiqueta personalizada), el contenido, la imagen y el enlace. No hay un campo de título separado, así que agregue un encabezado en la parte superior del cuadro de contenido. Agregar artículo crea una nueva entrada, el ícono duplicado copia una existente y usted la reordena arrastrando las filas.
Esa es una línea de tiempo personalizada completa. Unos cuantos clics de “Agregar elemento”, una fecha y una oración en cada uno, y has documentado el historial de una empresa o la hoja de ruta de un proyecto.
Cronología personalizada versus cronología posterior
El menú desplegable Tipo de línea de tiempo es donde este widget obtiene su lugar. Cambiar de personalizado a Post cronología (una función Pro) y todo el panel cambia: en lugar de editar elementos a mano, le indica al widget qué publicaciones mostrar y construye la línea de tiempo a partir de su contenido.
Alcanzar para Cronograma personalizado cuando el contenido es fijo y editorial:
- Historia de la empresa e hitos fundacionales
- Hojas de ruta de productos o funciones
- Una biografía o trayectoria profesional
- Horarios de eventos y agendas de programas
Alcanzar para Post cronología cuando el contenido es tu blog y debe mantenerse actualizado:
- Un archivo cronológico de artículos
- Un feed de noticias o anuncios
- Estudios de casos o entradas de cartera publicadas como publicaciones
Creación de una cronología de publicaciones desde su blog
Establezca el tipo de línea de tiempo en Post cronología y el panel Contenido se llena con controles de publicaciones. Es el mismo enfoque dinámico que utilizarías cree una página de blog en Elementor, sólo que aparece como una línea de tiempo en lugar de una cuadrícula.
Los ajustes que vale la pena conocer:
- Mostrar título / Enlace de título: muestre el título de la publicación y, opcionalmente, vincúlelo a la publicación.
- Etiqueta de encabezado: configure la etiqueta HTML del título (H2, H3, etc.) para que su estructura de encabezado permanezca limpia para SEO.
- Mostrar imagen y resolución de imagen: extraiga la imagen destacada como miniatura al tamaño que elija.
- Habilite los enlaces: haga que se pueda hacer clic en tarjetas completas. Si el contenido de su publicación ya tiene enlaces, déjelo desactivado, porque los enlaces internos no están permitidos.
- Formato de fecha y formato de hora: controla cómo aparece la fecha de cada entrada en la línea.
- Publicaciones por página, compensación y orden de publicación: decida cuántas publicaciones se muestran, dónde comienza la lista y si las más nuevas o las más antiguas aparecen primero.
También puede filtrar publicaciones por categoría, etiqueta o autor y excluir publicaciones específicas. Una línea de tiempo puede mostrar “todo en noticias” y otra un conjunto cuidadosamente seleccionado. Dado que se lee directamente en sus publicaciones, se encuentra dentro de a Creador de temas archivo o plantilla única, donde se actualiza cada vez que presionas publicar.
Cambiar a una línea de tiempo horizontal
Cambiar Estilo de línea de tiempo para “Línea de tiempo horizontal” y el diseño gira. Esta opción es para líneas de tiempo personalizadas, ya que las líneas de tiempo posteriores permanecen verticales. Las entradas ahora se encuentran una al lado de la otra a lo largo de una línea central horizontal, cada una con su marcador de puntos encima de la tarjeta, y las flechas izquierda/derecha permiten a los visitantes desplazarse por ellas como un carrusel.
Horizontal se gana cuando tienes un puñado de hitos fuertes y los quieres por encima del pliegue, digamos una secuencia de lanzamiento de producto en una página de inicio. Vertical es la elección más segura para listas más largas o entradas con mucho texto, ya que leer de arriba a abajo parece natural en un teléfono. Una cosa con la que me he topado: un carrusel horizontal y una pila vertical no se comportan igual en pantallas pequeñas, así que obtenga una vista previa de ambos en su puntos de interrupción responsivos antes de enviar.
Estilismo de la línea de tiempo
El Estilo tab tiene una sección para cada parte de la línea de tiempo: Diseño, Tarjetas, Flecha, Fechas, Línea, Puntos, Navegación y Patrones. Aquí es donde una muestra genérica se convierte en algo que coincide con su marca.
Línea Central y Puntos
Bajo Línea, establece el color y el grosor de la línea central. Bajo Puntos, decide si cada marcador es un punto simple o un Icono, luego elija el icono, su tamaño, el color de fondo y el color del punto. El selector de iconos abre una biblioteca completa, por lo que a un clic de distancia hay un calendario para eventos o una bandera para hitos.
Estados predeterminados, flotantes y enfocados
La sección Puntos tiene tres pestañas de estado: Predeterminado, Flotar, y Centrado. El valor predeterminado es la apariencia de descanso, Hover es la apariencia de pasar el mouse y Focused resalta el elemento activo. Este último importa más en un carrusel horizontal, donde les dice a los visitantes qué entrada está actualmente centrada. El estilo de los tres es lo que hace que la línea de tiempo parezca interactiva en lugar de plana.
Tarjetas, fechas y tipografía
El Tarjetas la sección controla el fondo, el borde, la sombra y el espaciado de cada entrada. Fechas además, la configuración de tipografía de contenido y título le permite hacer coincidir las fuentes de su sitio. Mantenga el relleno de tarjetas consistente y su contraste legible, porque una línea de tiempo vive o muere si las personas pueden escanearla.
Casos de uso prácticos
Algunas formas en las que he puesto el widget Timeline a trabajar en proyectos reales:
- Despre pagini: una cronología vertical personalizada de los hitos de la empresa, combinada con a Widget de contador para estadísticas de titulares como años en el negocio.
- Paginile produsului: una hoja de ruta horizontal que muestra qué se envió y qué vendrá después.
- Blog și știri: una línea de tiempo posterior como archivo cronológico, ubicada al lado de a Widget de registro de cambios para notas de la versión.
- Portafolios: estudios de casos como entradas fechadas con imágenes destacadas.
Consejos para una mejor línea de tiempo
- Mantenga breve el contenido de la entrada. Dos o tres oraciones por tarjeta se leen mucho mejor que un párrafo completo.
- Usa íconos que signifiquen algo: un calendario para fechas, una bandera para lanzamientos, una estrella para premios.
- Para historias largas, vaya vertical. El desplazamiento horizontal se desgasta más de cinco o seis elementos.
- Establezca una etiqueta de encabezado sensata en las líneas de tiempo de publicación para que los títulos no compitan con el H1 de su página.
- Comprueba el resultado en el móvil y en tu Configuración SEO, dado que las imágenes destacadas y el orden de los encabezados alimentan la búsqueda.
Para cada control y caso de borde impar, el Documentación del widget de línea de tiempo va más allá de lo que puedo aquí. Y si quieres diseños premium, marca blanca y el resto de la biblioteca, Complementos maestros Pro los desbloquea.
Preguntas frecuentes
¿el widget Elementor Timeline es gratuito?
Sí. El widget Master Addons Timeline es parte del complemento gratuito, que incluye líneas de tiempo personalizadas en estilos vertical y horizontal. El tipo Post Timeline, que incluye las publicaciones de su blog, necesita Master Addons Pro.
¿puedo crear una línea de tiempo en Elementor sin ningún complemento?
No es fácil. El núcleo de Elementor no tiene ningún elemento de línea de tiempo, por lo que construirías uno a mano con columnas, divisores y CSS personalizado. Un widget como Master Addons Timeline maneja la línea central, los marcadores, las tarjetas alternas y la capacidad de respuesta por usted con unos pocos clics.
¿cuál es la diferencia entre una línea de tiempo personalizada y posterior?
Una línea de tiempo personalizada utiliza entradas que escribe a mano, ideales para contenido fijo como el historial de la empresa. Una línea de tiempo de publicación extrae sus publicaciones de WordPress automáticamente, por lo que las publicaciones nuevas se convierten en entradas nuevas. Elija personalizado para el contenido editorial y publique cualquier cosa que deba actualizarse.
¿puedo hacer una línea de tiempo horizontal en Elementor?
Sí. En la pestaña Contenido del widget de línea de tiempo, establezca el estilo de línea de tiempo en “Línea de tiempo horizontal”. Las entradas se distribuyen una al lado de la otra a lo largo de una línea horizontal con flechas de navegación, funcionando como un carrusel. Puedes volver a la vertical desde el mismo menú desplegable en cualquier momento.
¿la línea de tiempo quedará bien en dispositivos móviles?
El widget responde y puedes ajustar los tamaños por dispositivo. Las líneas de tiempo verticales se adaptan de forma más natural a pantallas pequeñas. Si usa horizontal, obtenga una vista previa en el dispositivo móvil y ajuste sus puntos de interrupción, ya que las tarjetas una al lado de la otra se comportan de manera diferente a una pila de arriba a abajo.
Envolviendo
Así que así es como crear una línea de tiempo en Elementor de extremo a extremo: arrastre el widget, elija su tipo y estilo, complete o filtre las entradas, luego diseñe la línea, los puntos y las tarjetas para que se ajusten a su marca. Las líneas de tiempo personalizadas mantienen sus historias fijas. Las líneas de tiempo posteriores se mantienen actualizadas. El interruptor vertical y horizontal cubre tanto historias largas como hojas de ruta ajustadas.
Instale complementos maestros, suelte un widget de línea de tiempo en su próxima página Acerca de o producto y convierta una lista de fechas en algo que la gente realmente lea.
Lectura relacionada: Crea una página de blog con Elementor · Cómo acelerar los sitios web de Elementor · Explore todos los widgets de complementos maestros
