¿Cómo utilizar Timeline en el Editor de bloques de Waclis?
La sección Timeline del Editor de bloques de Waclis permite presentar información siguiendo un orden cronológico o secuencial.
Puedes utilizarla para mostrar:
historia de una empresa;
evolución de una marca;
hitos importantes;
etapas de un proyecto;
proceso de trabajo;
pasos de implementación;
fases de un servicio;
acontecimientos;
recorrido de un producto;
planificación;
evolución de una solución;
fechas relevantes;
procesos que necesitan comprenderse en un orden determinado.
Dentro del Editor de bloques encontrarás diferentes diseños en:
Secciones → Timeline
Según la composición seleccionada podrás personalizar elementos como:
fechas;
años;
números;
títulos;
descripciones;
iconos;
imágenes;
Cards;
líneas;
puntos visuales;
columnas;
fondos;
espacios;
comportamiento responsive.
¿Qué es un Timeline?
Un Timeline es una representación visual de elementos que poseen un orden.
Por ejemplo:
2018
Nace la empresa
↓
2020
Incorporamos una nueva línea de servicios
↓
2023
Ampliamos nuestras operaciones
↓
2026
Nueva etapa de expansión
También puede representar un proceso
Por ejemplo:
01
Relevamiento
↓
02
Propuesta
↓
03
Implementación
↓
04
Puesta en marcha
En este caso no estamos mostrando años.
Estamos mostrando:
una secuencia de pasos.
La idea principal del Timeline
Cada elemento debería responder:
¿Qué ocurrió antes y qué ocurrió después?
o:
¿Cuál es el primer paso y cuál es el siguiente?
Si el orden no importa, probablemente no necesitas Timeline
Por ejemplo:
Calidad
Innovación
Atención
Tecnología
no posee necesariamente una secuencia.
Podría ser más apropiado utilizar:
Beneficios;
Características;
Cards;
Contenidos destacados.
Timeline no es una lista decorativa
Este es el principio más importante del tutorial.
No debes elegir Timeline solamente porque:
la línea y los puntos se ven modernos
La información debe tener una relación temporal o secuencial real.
Timeline de historia
Ejemplo:
2015
Fundación
2018
Primera expansión
2021
Nueva unidad de negocio
2024
Ampliación regional
Timeline de proceso
Ejemplo:
1
Relevamiento
2
Diseño
3
Producción
4
Instalación
Timeline de implementación
PASO 1
Analizamos necesidades
PASO 2
Configuramos la solución
PASO 3
Realizamos pruebas
PASO 4
Ponemos en marcha
Timeline de evolución
VERSIÓN INICIAL
↓
NUEVA FUNCIONALIDAD
↓
EXPANSIÓN
↓
ETAPA ACTUAL
Timeline vs Servicios
Estas secciones pueden confundirse cuando los servicios representan diferentes etapas.
Servicios
Responde:
¿Qué ofrece la empresa?
Por ejemplo:
Consultoría
Implementación
Capacitación
Soporte
Timeline
Responde:
¿En qué orden ocurre?
Por ejemplo:
1. Consultoría inicial
2. Implementación
3. Capacitación
4. Acompañamiento
La diferencia está en la secuencia
Si el cliente puede contratar:
Capacitación
sin pasar necesariamente por:
Implementación
quizá sean Servicios independientes.
En cambio
si existe un flujo real:
Relevamiento
→ Diseño
→ Producción
→ Entrega
Timeline puede ser una excelente opción.
Timeline vs Características
Características
explica propiedades.
Por ejemplo:
Actualización automática
Multiusuario
Reportes
No existe necesariamente un orden.
Timeline
requiere una secuencia.
Timeline vs Beneficios
Beneficios explica:
qué obtiene el cliente.
Timeline explica:
cómo evoluciona o en qué orden ocurre algo.
Timeline vs Quiénes somos
Quiénes somos presenta la empresa actualmente.
Timeline puede contar su evolución.
Una combinación posible
QUIÉNES SOMOS
Presentación actual
↓
NUESTRA HISTORIA
Timeline
2016
↓
2019
↓
2023
↓
2026
Timeline vs Portafolio
Portafolio presenta proyectos.
Timeline puede mostrar las etapas de un proyecto.
Ejemplo
PORTAFOLIO
Proyecto Oficinas ABC
Dentro de su página:
PROCESO DEL PROYECTO
1. Relevamiento
2. Diseño
3. Ejecución
4. Entrega
Timeline vs Tabla de precios
No utilices Timeline para comparar alternativas comerciales.
Por ejemplo:
Básico
Premium
Empresa
no son pasos necesariamente.
Para eso utiliza:
Tabla de precios
Timeline vs Acordeón
Un Acordeón sirve para organizar contenidos que pueden abrirse y cerrarse.
Timeline comunica orden.
Puedes utilizar ambos
Por ejemplo:
TIMELINE
Paso 1
Paso 2
Paso 3
↓
PREGUNTAS SOBRE EL PROCESO
Acordeón
¿Cuándo conviene utilizar Timeline?
Puede resultar especialmente útil para explicar:
Historia
2010
2015
2020
2026
Proceso
1
2
3
4
Etapas
Inicio
Desarrollo
Pruebas
Finalización
Evolución
Versión inicial
Expansión
Actualización
Actualidad
¿Cuándo no conviene?
Cuando los elementos pueden leerse en cualquier orden.
Por ejemplo:
Rapidez
Seguridad
Diseño
Soporte
puede ser una sección Características o Beneficios.
Pregunta clave
Si cambio el orden de los elementos, ¿cambia el significado?
Si la respuesta es sí:
Timeline puede ser apropiado.
Si la respuesta es no:
considera otra sección.
¿Cómo agregar Timeline?
Ingresa al Editor de bloques de la página o área editable donde quieras incorporarlo.
Después abre:
Secciones
y selecciona:
Timeline
Paso 1: elige una composición
Waclis mostrará los diseños disponibles.
Según el diseño puedes encontrar composiciones orientadas a:
línea vertical;
línea horizontal;
Cards alternadas;
fechas;
números;
puntos;
iconos;
contenido de izquierda y derecha.
La estructura exacta dependerá de la alternativa elegida.
Elige según el contenido real
No solamente según el efecto visual.
Por ejemplo
Una historia de:
8 años
puede funcionar muy bien de manera vertical.
Un proceso de 3 pasos
puede funcionar:
01 → 02 → 03
en desktop.
Pero recuerda el celular
Una línea horizontal puede necesitar transformarse en:
01
↓
02
↓
03
en pantallas estrechas.
Paso 2: agrega la sección
Selecciona la composición correspondiente.
Después podrás modificar cada hito o paso.
Paso 3: utiliza Navigator
Una estructura conceptual puede ser:
Section
└── Container
├── Heading
├── Paragraph
└── Timeline
├── Timeline Item
│ ├── Marker
│ ├── Date / Number
│ ├── Heading
│ └── Paragraph
│
├── Timeline Item
└── Timeline Item
Otra composición puede utilizar
Timeline
├── Item
│ ├── Left content
│ └── Marker
├── Item
│ ├── Marker
│ └── Right content
└── ...
La estructura exacta dependerá del diseño seleccionado
Por eso:
utiliza Navigator antes de clonar, mover o eliminar.
Identifica la unidad completa
Conceptualmente:
Timeline Item
├── Date
├── Marker
├── Heading
└── Paragraph
Esa suele ser la unidad que debes
clonar;
mover;
eliminar.
No clones solamente la fecha
si quieres crear un nuevo evento.
Paso 4: define qué tipo de Timeline necesitas
Existen dos grandes categorías.
Timeline cronológico
Utiliza:
año;
fecha;
período.
Por ejemplo:
2018
Fundación
Timeline secuencial
Utiliza:
Paso 1;
Paso 2;
Paso 3;
o:
01
02
03
No necesitas inventar fechas
Si lo que quieres explicar es un proceso:
utiliza números.
Ejemplo incorrecto
Enero
Relevamiento
Febrero
Diseño
Marzo
Implementación
si esos meses no son realmente fijos para todos los proyectos.
Mejor
PASO 1
Relevamiento
PASO 2
Diseño
PASO 3
Implementación
No conviertas una secuencia variable en un calendario ficticio
Paso 5: define el Heading general
Puedes utilizar:
Nuestra historia
Cómo trabajamos
Nuestro proceso
Etapas del proyecto
Nuestra evolución
El camino recorrido
Cómo funciona
según el contenido.
El Heading debe aclarar el tipo de secuencia
Por ejemplo
Para historia:
Nuestra historia
Para proceso:
Cómo trabajamos
Para implementación:
Etapas de implementación
No utilices simplemente
Timeline
si puedes explicar mejor qué representa.
Paso 6: agrega una introducción
Puede ayudar a contextualizar.
Por ejemplo:
Desde nuestros primeros proyectos hasta la actualidad, estos son algunos de los principales hitos de nuestra evolución.
Para proceso
Trabajamos mediante un proceso organizado en cuatro etapas principales.
Mantén la introducción breve
La secuencia será el contenido principal.
Paso 7: fechas y años
En un Timeline histórico utiliza fechas verificadas.
Ejemplo
2017
Comenzamos nuestras operaciones.
Otro
2021
Incorporamos una nueva unidad de negocio.
No utilices un año aproximado como si fuera exacto
si no estás seguro.
Puedes utilizar
A comienzos de 2020
si esa formulación es más precisa.
O:
2020–2022
para representar un período.
Mantén un formato consistente
Evita mezclar:
2018
Marzo de 2020
2021–22
Hace dos años
sin una razón.
Mejor
elige una convención.
Por ejemplo:
2018
2020
2022
2026
O fechas completas
Marzo de 2025
Septiembre de 2025
Enero de 2026
cuando ese nivel de precisión sea relevante.
No utilices fechas relativas
como:
el año pasado
en contenido permanente.
Con el tiempo quedará incorrecto.
Mejor:
2025
Paso 8: números para procesos
Si no existen fechas, utiliza:
01
02
03
04
O:
PASO 1
PASO 2
PASO 3
PASO 4
Mantén la numeración correcta
Evita:
01
02
04
05
salvo que realmente falte una etapa deliberadamente.
Después de clonar
revisa la numeración.
No dependas únicamente del orden visual
El número ayuda a comprender la secuencia.
Paso 9: título de cada hito
Debe explicar qué ocurre.
Ejemplos históricos
Fundación
Primera expansión
Nueva sede
Lanzamiento de nueva solución
Ejemplos de proceso
Relevamiento
Planificación
Implementación
Puesta en marcha
Mantén los títulos breves
El detalle puede ir debajo.
Evita
En este momento procedemos a realizar todo el relevamiento inicial del proyecto
como título.
Mejor
Relevamiento
y desarrollar:
Analizamos las necesidades, objetivos y condiciones iniciales del proyecto.
Paso 10: descripción de cada etapa
Explica lo necesario para comprender:
qué ocurrió;
qué se hace;
por qué es importante.
Historia
2019
PRIMERA EXPANSIÓN
Ampliamos nuestra capacidad operativa e incorporamos nuevos servicios.
Proceso
02
DISEÑO
Desarrollamos la propuesta a partir de la información relevada en la etapa inicial.
No conviertas cada punto en una página completa
Un Timeline debe poder recorrerse con facilidad.
Descripciones relativamente similares
ayudan a mantener equilibrio.
Pero no inventes texto para igualar alturas
Un hito puede necesitar más contexto
Puede ocupar algunas líneas adicionales.
Si cada evento necesita varios párrafos
considera utilizar:
Acordeón;
páginas internas;
Texto e imagen;
para ampliar.
Timeline = visión general del recorrido
Paso 11: utiliza datos concretos cuando aporten valor
Ejemplo:
2023
NUEVA SEDE
Inauguramos nuestra segunda sede operativa.
Otro:
2025
EXPANSIÓN REGIONAL
Comenzamos a operar en tres nuevos mercados.
solo si ese dato es real.
No agregues cifras decorativas
Si mencionas:
más de 100 proyectos
debe corresponder a información real.
Paso 12: hitos relevantes
No necesitas incluir todo lo que ocurrió.
Historia de empresa
No hace falta:
2017
Compramos una impresora.
2018
Cambiamos un escritorio.
2019
Actualizamos el logo.
salvo que esos hechos tengan relevancia real.
Selecciona acontecimientos que ayuden a explicar la evolución
Por ejemplo:
fundación;
expansión;
nuevas áreas;
lanzamiento de productos;
hitos institucionales;
apertura de sedes;
cambios relevantes.
Pregunta
¿Este hito ayuda al visitante a comprender nuestra evolución?
Si no:
puede omitirse.
Historia no significa inventar una narrativa heroica
Puedes contar la evolución de forma simple y concreta.
Evita
2020
Revolucionamos para siempre el mercado.
si no existe una base clara.
Mejor
2020
Lanzamos nuestra nueva plataforma.
Paso 13: procesos reales
Si utilizas Timeline para explicar un Servicio:
describe el proceso real.
Ejemplo
1. Relevamiento
2. Propuesta
3. Aprobación
4. Implementación
5. Entrega
No agregues pasos solamente para hacer el Timeline más largo
Si el proceso tiene 3 etapas
muestra 3.
Si tiene 7
puedes mostrar 7, siempre que sea fácil de comprender.
Paso 14: tiempos estimados
Puedes incluir duración si existe una referencia real.
Por ejemplo:
ETAPA 1
Relevamiento
2 a 3 días
solo si ese plazo es realmente aplicable.
Cuidado con los tiempos
Si pueden variar según:
complejidad;
cliente;
alcance;
disponibilidad;
deberías expresarlo correctamente.
No publiques un plazo fijo
si en realidad es solamente una estimación ocasional.
Puedes utilizar:
Duración estimada: ...
cuando corresponda.
O no mostrar tiempos
si dependen demasiado del proyecto.
Paso 15: futuros hitos
Un Timeline también puede incluir elementos futuros.
Por ejemplo:
2027
Nueva etapa prevista
Pero diferencia claramente:
hecho realizado
de:
objetivo futuro
No presentes una intención como algo ya ocurrido
Puedes utilizar títulos como:
Próxima etapa
Objetivo 2027
Planificado
cuando corresponda.
Evita promesas públicas que no estés preparado para sostener
Un roadmap futuro no es lo mismo que una historia
Puedes separar:
NUESTRA HISTORIA
de:
PRÓXIMOS PASOS
Paso 16: etapa actual
Puedes marcar:
ACTUALIDAD
en lugar de utilizar:
Hoy
cuando quieras mantener el contenido más estable.
Pero incluso “Actualidad” necesita revisión
si después agregas nuevos hitos.
También puedes utilizar el año actual específico
cuando corresponda.
No dejes el Timeline congelado
durante años si pretende contar la evolución completa.
Paso 17: marcador visual
Los diseños Timeline suelen utilizar un elemento que conecta visualmente los puntos.
Conceptualmente:
●
│
●
│
●
O:
●────●────●────●
Este marcador sirve para comunicar continuidad
No es el contenido principal
Los elementos principales siguen siendo:
fecha;
título;
descripción.
No hagas el punto tan grande
que compita con el texto.
Iconos como marcadores
Algunos diseños pueden utilizar iconos.
Por ejemplo:
[ inicio ]
[ diseño ]
[ entrega ]
Utiliza iconos que aporten significado
No necesitas un icono diferente en cada paso
si una simple numeración comunica mejor.
Mantén consistencia visual
Línea del Timeline
Puede utilizar:
color neutro;
color de marca.
Debe ser visible
pero no dominar.
Si utilizas un color muy tenue
puede desaparecer.
Si utilizas un color excesivamente fuerte
puede competir con el contenido.
Línea vertical
Es especialmente flexible para responsive.
Ejemplo
● 2018
│ Fundación
│
● 2020
│ Expansión
│
● 2023
│ Nueva sede
Timeline alternado
Algunas composiciones pueden colocar:
2018
Texto ●
│
● 2020
Texto
│
2023
Texto ●
Esto puede ser visualmente atractivo en desktop
pero requiere especial atención en móvil.
En celular
puede ser mejor:
● 2018
Texto
● 2020
Texto
● 2023
Texto
No intentes mantener la alternancia izquierda/derecha
si deja columnas demasiado estrechas.
La legibilidad tiene prioridad.
Timeline horizontal
Puede funcionar con pocos pasos.
Desktop
●────────●────────●────────●
01 02 03 04
Puede ser útil para:
procesos simples;
fases;
cuatro pasos.
En móvil
mantener:
01 02 03 04
en una sola fila puede volver el contenido demasiado estrecho.
Puede ser necesario transformarlo en vertical
No reduzcas el texto hasta hacerlo ilegible.
Grid responsive
Si la composición depende de columnas, utiliza Grid Row para configurar el comportamiento correspondiente.
Recuerda
los iconos superiores:
celular;
tablet;
desktop;
permiten previsualizar.
No configuran por sí solos el responsive.
Paso 18: alternancia izquierda/derecha
Si el diseño alterna:
izquierda
derecha
izquierda
derecha
revisa cuidadosamente después de:
clonar;
eliminar;
reordenar.
Por ejemplo
si eliminas el segundo hito:
puedes terminar con una distribución visual que ya no alterna correctamente según la estructura.
Revisa cada Item
y su posición.
No asumas que la alternancia se corrige automáticamente en cualquier diseño.
Paso 19: clonar un evento
Para agregar un nuevo hito:
abre Navigator;
identifica el Item completo;
selecciónalo;
utiliza Clonar elemento;
modifica todos los datos.
Revisa:
FECHA / NÚMERO
TÍTULO
DESCRIPCIÓN
ÍCONO
LINK, si existe
ID
ORDEN
No clones solamente el Paragraph.
No clones solamente el marcador.
Unidad completa
Conceptualmente:
Timeline Item
├── Marker
├── Date
├── Heading
└── Paragraph
Después de clonar
puedes obtener:
03
Implementación
03
Implementación
hasta que edites la copia.
No olvides cambiar la numeración.
Ejemplo correcto
Antes:
01 Relevamiento
02 Diseño
03 Implementación
Clonas 03 para crear:
04 Puesta en marcha
Actualiza:
03
→
04
Paso 20: clonar un hito histórico
Mismo procedimiento.
Original:
2023
Nueva sede
Copia:
2026
Nueva etapa
No dejes:
2023
Nueva etapa
si la fecha real es otra.
Paso 21: IDs
Si el Item original utiliza:
id="hito-2023"
la copia debe utilizar un identificador diferente.
Por ejemplo:
id="hito-2026"
Los IDs deben ser únicos.
Especial cuidado
Una composición interactiva puede utilizar identificadores internos.
Si encuentras IDs que no agregaste y no conoces su función:
no los modifiques indiscriminadamente.
Si creaste un ID personalizado
sí debes mantenerlo único.
Paso 22: eliminar un evento
Selecciona la unidad completa.
Recuerda:
Waclis no solicita confirmación.
Si eliminas el elemento incorrecto:
Deshacer
No elimines solamente la fecha
dejando:
●
Título
Descripción
sin referencia temporal,
salvo que intencionalmente utilices una secuencia sin fechas.
No elimines solamente el contenido
dejando un marcador vacío.
Después de eliminar
revisa:
línea;
separación;
alternancia;
numeración.
Ejemplo
Antes:
01
02
03
04
Eliminas 02:
01
03
04
Si representan pasos
deberías actualizar:
01
02
03
Pero si representan números históricos reales
no necesariamente.
Por ejemplo
los años:
2018
2021
2026
no necesitan continuidad numérica.
Paso 23: mover eventos
Un Timeline depende del orden.
Por eso mover un Item tiene más importancia que en muchas otras secciones.
Antes
Relevamiento
Diseño
Implementación
Después de un movimiento incorrecto
Implementación
Relevamiento
Diseño
el proceso puede dejar de tener sentido.
Después de mover
lee siempre la secuencia completa.
No revises solamente el aspecto visual.
Cronología
Para historia:
2018
2022
2020
2026
sería confuso salvo que exista una intención especial.
Normalmente
utiliza:
2018
2020
2022
2026
Orden ascendente
es el más habitual.
También podría utilizarse descendente
2026
2024
2020
2016
para mostrar primero lo más reciente.
Ambas pueden ser válidas.
Lo importante es:
mantener una lógica consistente.
Si utilizas más reciente primero
puedes aclararlo mediante el contexto.
Paso 24: número de hitos
No existe una cantidad obligatoria.
Tres
●
●
●
pueden ser suficientes.
Cuatro o cinco
suelen funcionar bien para un proceso.
Una historia puede tener más.
Pero no incluyas 30 eventos
si el visitante solo necesita comprender los hitos principales.
Un Timeline excesivamente largo
puede convertirse en una cronología difícil de recorrer.
Puedes seleccionar:
6 hitos principales
y desarrollar el resto en otra sección si es necesario.
No inventes hitos para que quede más largo.
Paso 25: equilibrio entre eventos
Una etapa:
2019
Fundación.
y otra:
2020
texto de 250 palabras...
pueden generar un desequilibrio muy grande.
Intenta resumir
manteniendo la información esencial.
No es necesario que todos tengan exactamente la misma longitud.
Timeline alternado y longitudes
Una Card muy extensa de un lado puede romper el equilibrio visual.
Puedes:
resumir;
ampliar en otra página;
utilizar una estructura vertical simple.
No fuerces el diseño a contener información para la que no fue pensado.
Paso 26: imágenes
Algunos Timeline pueden combinar:
fecha
+
imagen
+
texto
Puede ser útil para historia
Por ejemplo:
2018
[ primera oficina ]
Comenzamos nuestras operaciones...
Utiliza imágenes reales cuando sea posible.
Evita colocar fotografías genéricas
que puedan parecer documentos históricos reales.
Si la imagen corresponde al hito
completa Alt.
Por ejemplo
Primera oficina de la empresa en 2018
si esa descripción es correcta.
No utilices
foto antigua
como Alt.
Cover vs Contain
Fotografías:
Cover puede resultar adecuado.
Documentos, logotipos o piezas completas:
Contain puede funcionar mejor.
Mantén proporciones coherentes.
Paso 27: iconos
Puedes utilizar:
Font Icon;
Svg Icon;
según la composición.
Ejemplo proceso
[ lupa ]
Relevamiento
[ lápiz ]
Diseño
[ herramienta ]
Implementación
Pero la numeración puede ser más clara
si el orden es el aspecto más importante.
Icono + número
también puede utilizarse, pero evita sobrecargar.
Paso 28: Links
Un hito puede enlazar más información.
Por ejemplo:
2024
Nuevo proyecto
[ CONOCER MÁS ]
Solo agrega Link si existe contenido adicional.
No todos los puntos necesitan CTA.
Si cada evento tiene:
Ver más
puede hacer el Timeline demasiado pesado.
Puede ser mejor un Link general
al final.
Por ejemplo:
[ CONOCER NUESTRA HISTORIA ]
Si clonas un Item con Link
revisa también:
Url
No dejes que:
Hito 2026
abra:
página del hito 2023
Paso 29: fondo
Timeline puede funcionar muy bien con un fondo simple.
Por ejemplo
fondo blanco
línea gris
puntos de marca
texto oscuro
O fondo suave
para diferenciar la sección.
No necesitas una Background Image
si ya existen:
línea;
marcadores;
Cards;
fechas.
Demasiados elementos pueden generar ruido.
Background Image
Puede utilizarse si la composición lo permite.
En ese caso revisa contraste.
Paso 30: Cards
Un Timeline puede utilizar Cards alrededor de cada evento.
Por ejemplo:
●
│
╭──────────────╮
│ 2023 │
│ Nueva sede │
│ Texto... │
╰──────────────╯
│
●
Puedes personalizar:
Background;
Border;
Border radius;
Padding.
Mantén todas las Cards relacionadas.
Linked styles
Puede ser muy útil aquí.
Si todos los eventos utilizan:
timeline-card
es lógico que compartan:
Padding;
borde;
Typography;
fondo.
Si Waclis muestra Linked styles
puede ser exactamente lo que deseas.
No agregues IDs solamente para impedir que compartan diseño.
Excepción
Puedes destacar:
ACTUALIDAD
mediante una Class adicional.
Conceptualmente:
timeline-card actual
Mantén la Class base
y agrega la excepción.
Paso 31: destacar la etapa actual
Puede resultar útil en procesos o roadmaps.
Por ejemplo:
01 Completado
02 Completado
03 EN PROCESO
04 Próximo
Pero solo si el Timeline realmente refleja un estado actual.
No agregues estados falsos
solamente por estética.
Una historia institucional
normalmente no necesita:
completado
porque todos los hitos pasados ya ocurrieron.
Paso 32: estados futuros
Puedes distinguir visualmente:
realizado
de:
planificado
Por ejemplo
punto sólido;
punto diferente;
etiqueta;
si la composición lo permite.
Pero asegúrate de que el texto también lo explique.
No dependas solamente del color.
Accesibilidad
Esto es especialmente importante.
Si:
verde = completado
gris = futuro
el significado no debería depender exclusivamente del color.
Puedes agregar:
Completado
Próximo
cuando esa información sea relevante.
Paso 33: Padding y espacios
Un Timeline necesita suficiente separación entre Items.
Muy poco espacio
puede generar:
2018 Fundación
2020 Expansión
2021 Nueva sede
todo demasiado comprimido.
Demasiado
puede convertir una historia de cuatro hitos en una página interminable.
Busca un ritmo consistente.
Espaciado irregular
Evita:
Item 1
10 px
Item 2
150 px
Item 3
30 px
sin una intención.
Utiliza una estructura común.
Paso 34: Typography
Jerarquía habitual:
FECHA / PASO
↓
TÍTULO
↓
DESCRIPCIÓN
La fecha debe ser reconocible.
El título debe explicar el evento.
La descripción desarrolla.
Ejemplo
2024 ← referencia temporal
NUEVA SEDE ← evento
Abrimos... ← detalle
No hagas la descripción más importante que el evento.
Números grandes
Pueden funcionar:
01
como elemento visual.
Pero no deberían dificultar el título.
Paso 35: responsive vertical
Un Timeline vertical suele adaptarse bien.
Desktop
puede utilizar:
fecha | punto | contenido
Mobile
puede transformarse:
●
2020
Título
Descripción
Comprueba que:
línea;
marcador;
fecha;
Card;
no se superpongan.
No utilices posiciones absolutas rígidas
sin necesidad.
Paso 36: responsive alternado
Desktop:
[ A ] ●
│
● [ B ]
│
[ C ] ●
Mobile recomendado conceptualmente:
● A
● B
● C
La alternancia pierde importancia
cuando no hay suficiente ancho.
No intentes mantener:
mitad vacía
+
mitad de contenido
en una pantalla pequeña.
Paso 37: Timeline horizontal responsive
Desktop:
01────02────03────04
Mobile puede necesitar:
01
│
02
│
03
│
04
Si la composición no adapta correctamente
puede ser mejor seleccionar desde el comienzo un diseño vertical para un proceso con bastante texto.
La selección del diseño importa.
Paso 38: Hide based on device
No utilices:
Avanzado → Hide based on device screen width
para ocultar la mitad de los pasos en móvil solamente porque el Timeline no entra.
El usuario móvil también necesita comprender el proceso completo.
Corrige responsive.
Duplicar Timeline completo para móvil
No debería ser la primera solución.
Puede generar:
mantenimiento duplicado;
IDs repetidos;
historias diferentes entre desktop y mobile.
Utiliza una única estructura adaptable cuando sea posible.
Paso 39: animaciones
Timeline puede beneficiarse de:
Avanzado → Animate on scroll
Por ejemplo
los Items pueden aparecer conforme el visitante avanza.
Pero mantén moderación.
No necesitas que:
línea;
punto;
año;
título;
descripción;
tengan cinco animaciones independientes.
Puede ser suficiente animar cada Item completo.
Delay
Un delay muy largo puede hacer que el visitante llegue al contenido antes de que aparezca.
Evita convertir una historia en una espera.
Paso 40: Hover
Un Item Timeline normalmente no necesita Hover si no es interactivo.
Si contiene un Link
puede utilizarse un efecto sutil.
No hagas que una Card parezca clicable
si no tiene destino.
Línea y marcadores tampoco necesitan Hover
por defecto.
Paso 41: CSS personalizado
En personalizaciones avanzadas puedes utilizar Classes como:
timeline-section
timeline-list
timeline-item
timeline-marker
timeline-date
timeline-title
timeline-text
Item
.timeline-section .timeline-item {
position: relative;
padding-bottom: 32px;
}
Marcador
.timeline-section .timeline-marker {
width: 14px;
height: 14px;
border-radius: 50%;
}
Estas Classes son ejemplos
No representan necesariamente las Classes originales del diseño prediseñado.
Línea
En una estructura personalizada puede construirse mediante:
Border;
pseudo-elementos;
otro elemento estructural.
Pero si el Timeline prediseñado ya incluye una línea
no la reconstruyas con CSS sin necesidad.
Primero identifica la estructura existente.
Utiliza Navigator
y revisa las Classes.
CSS responsive
Por ejemplo:
@media (max-width: 768px) {
.timeline-section .timeline-item {
padding-left: 32px;
}
}
solo cuando corresponda a la estructura real.
No copies CSS genérico de otro Timeline
sin revisar tu HTML.
Paso 42: evita CSS global
No utilices:
.card {
margin-bottom: 40px;
}
si solo quieres afectar Timeline.
Tampoco:
h3 {
font-size: 24px;
}
Utiliza un scope específico.
Ejemplo
.timeline-section .timeline-title {
}
Paso 43: modificar la línea
Si quieres cambiar:
color;
grosor;
primero identifica qué elemento o regla la genera.
No intentes alinearla mediante decenas de valores de Margin.
Un Timeline debería tener una estructura estable.
Si después de agregar un Item la línea deja de conectar correctamente
revisa:
jerarquía;
Item clonado;
contenedor;
Classes.
No ajustes cada punto manualmente.
Paso 44: HTML
Puedes utilizar:
Editar código HTML <>
si necesitas comprender una estructura avanzada.
Por ejemplo
Timeline
└── Item
├── Marker
└── Content
Es útil para descubrir
qué nivel debes clonar.
Pero no necesitas editar HTML para:
cambiar fecha;
título;
descripción;
color;
Padding.
Utiliza primero las herramientas visuales.
Paso 45: no elimines Classes estructurales
Un Timeline puede depender de Classes para:
posición;
línea;
alternancia;
responsive.
Si eliminas una Class simplemente porque no reconoces el nombre
puedes romper el diseño.
Mantén las Classes existentes salvo que comprendas su función.
Paso 46: Code editor
No necesitas abrir el Code editor global para cambiar:
2024
por:
2025
Tampoco para modificar una descripción.
Reserva las herramientas de código para personalizaciones que realmente las necesiten.
Paso 47: JavaScript
Un Timeline estático normalmente no necesita JavaScript personalizado.
Para:
línea;
colores;
responsive;
Hover;
utiliza HTML/CSS y las herramientas visuales correspondientes.
No agregues una biblioteca externa
solamente para presentar cuatro pasos.
Si la composición ya funciona
conserva su estructura.
Paso 48: Timeline de historia empresarial
Ejemplo:
NUESTRA HISTORIA
2017
COMENZAMOS
Iniciamos nuestras operaciones.
↓
2020
NUEVA ETAPA
Ampliamos nuestra propuesta de servicios.
↓
2023
EXPANSIÓN
Incorporamos nuevas capacidades.
↓
2026
ACTUALIDAD
Continuamos desarrollando nuevas soluciones.
No copies este texto literalmente
Debes utilizar los hitos reales de tu empresa.
Paso 49: Timeline de proceso comercial
CÓMO TRABAJAMOS
01
NOS CUENTAS TU PROYECTO
Conocemos tus necesidades.
↓
02
PREPARAMOS LA PROPUESTA
Definimos el alcance correspondiente.
↓
03
DESARROLLAMOS
Trabajamos sobre la solución aprobada.
↓
04
ENTREGAMOS
Finalizamos y coordinamos la entrega.
Ajusta el proceso al funcionamiento real.
Paso 50: Timeline de implementación
ETAPAS DE IMPLEMENTACIÓN
01
Relevamiento
02
Configuración
03
Pruebas
04
Puesta en marcha
05
Capacitación
Paso 51: Timeline de proyecto físico
CÓMO DESARROLLAMOS EL PROYECTO
1
Relevamiento
2
Diseño
3
Producción
4
Instalación
5
Entrega
Paso 52: Timeline de evento
AGENDA
09:00
Acreditación
10:00
Presentación
12:00
Actividad
14:00
Cierre
En este caso
Timeline representa horas.
Mantén los horarios correctos y actualizados.
Paso 53: Timeline histórico con períodos
2018–2020
PRIMERA ETAPA
...
2021–2023
EXPANSIÓN
...
2024–2026
NUEVA ETAPA
Puede funcionar cuando la evolución ocurrió durante períodos
y no en fechas puntuales.
Paso 54: historia resumida
No necesitas documentar cada año.
Por ejemplo:
2010
2011
2012
2013
2014
2015
...
puede ser innecesario.
Selecciona los hitos.
Paso 55: Timeline de una página Quiénes somos
Una estructura posible:
BANNER INSTITUCIONAL
↓
QUIÉNES SOMOS
↓
NUESTRA HISTORIA
Timeline
↓
EQUIPO
↓
CTA
Esto permite separar:
quién es la empresa hoy;
cómo llegó hasta allí.
Paso 56: Timeline de una página de Servicio
SERVICIO
↓
BENEFICIOS
↓
CÓMO TRABAJAMOS
Timeline
↓
PORTAFOLIO
↓
FAQ
↓
CTA
Ayuda al visitante a comprender el proceso antes de contactar.
Paso 57: Timeline de onboarding
Puede utilizar:
1. Registro
2. Configuración
3. Personalización
4. Puesta en marcha
si representa el recorrido real.
Paso 58: Timeline de entrega
Pedido confirmado
↓
Producción
↓
Control
↓
Despacho
Cuidado
No presentes esto como seguimiento en tiempo real.
Una sección estática solamente explica el proceso general.
No significa que:
el pedido actual del visitante
se encuentre en esa etapa.
Proceso general vs estado dinámico
Son conceptos diferentes.
Este punto es importante
Una Timeline creada manualmente en el Editor de bloques es:
contenido informativo.
No debe confundirse con:
seguimiento de pedidos;
tracking;
estado dinámico;
proceso actualizado automáticamente.
Si escribes:
Tu pedido está en producción
debería existir una funcionalidad real detrás.
No simules un tracking mediante una Timeline estática.
Paso 59: Roadmap
Timeline puede utilizarse conceptualmente para comunicar un roadmap.
Pero diferencia:
realizado;
actual;
planificado.
Ejemplo
Q1
Completado
Q2
En desarrollo
Q3
Planificado
solo si esos estados son correctos.
Mantén el roadmap actualizado.
No presentes fechas futuras como compromisos definitivos
si pueden cambiar.
Utiliza lenguaje adecuado.
Paso 60: un Timeline no necesita llegar hasta “el futuro”
También puede terminar simplemente en:
2026
Actualidad
O en la etapa final del proceso:
05
Entrega
Paso 61: proceso circular
Algunos procesos no tienen un final definitivo.
Por ejemplo:
Analizar
Implementar
Medir
Mejorar
Esto puede representarse como Timeline si necesitas explicar el orden inicial.
Pero conceptualmente puede ser un ciclo.
Si la naturaleza circular es importante
un diagrama específico podría comunicarlo mejor que una línea.
No obligues a Timeline a representar cualquier tipo de proceso.
Paso 62: procesos paralelos
Si existen:
Diseño
y
Producción
ocurriendo simultáneamente,
un Timeline puramente lineal puede generar una interpretación incorrecta.
Simplifica solamente cuando sea fiel al proceso.
Si necesitas mostrar dependencias complejas
puede requerirse una composición diferente.
Timeline es ideal para secuencias relativamente simples.
Paso 63: accesibilidad del orden
No dependas exclusivamente de:
izquierda
derecha
izquierda
para comunicar la secuencia.
Utiliza también:
fechas;
números;
orden de lectura.
Esto ayuda especialmente cuando el diseño cambia en celular.
Paso 64: no uses solo color
No comuniques:
verde
gris
rojo
sin texto cuando esos colores representan estados.
Agrega etiquetas cuando sea necesario.
Paso 65: contraste
Comprueba:
fechas;
títulos;
línea;
Cards;
marcadores.
Una línea puede ser secundaria
pero no debería desaparecer completamente.
Texto principal necesita suficiente contraste.
Paso 66: animaciones y accesibilidad
Una animación debería complementar.
El contenido debe poder comprenderse incluso sin el efecto.
No hagas que el punto aparezca varios segundos antes que el texto.
Paso 67: mobile primero en Timeline largo
Si tienes muchos eventos:
comprueba especialmente la longitud total en celular.
Por ejemplo
12 hitos
pueden generar una sección muy extensa.
Puedes:
seleccionar hitos principales;
reducir textos;
crear una página específica.
No ocultes arbitrariamente la mitad en móvil.
Paso 68: mantenimiento
Timeline puede quedar desactualizado.
Historia
Si agregas un nuevo hito:
actualízalo.
Proceso
Si cambia la forma de trabajar:
actualiza las etapas.
Roadmap
Si cambia la planificación:
actualiza estados.
Agenda
si cambia un horario:
actualízalo.
No trates Timeline como contenido que se configura una vez y nunca se vuelve a revisar.
Paso 69: fechas futuras vencidas
Ejemplo:
2025
Próximo lanzamiento
en 2026.
Debe actualizarse a:
realizado;
modificado;
eliminado;
según lo ocurrido realmente.
No dejes futuros antiguos.
Paso 70: proyectos terminados
Un Timeline de proyecto puede pasar de:
En proceso
a:
Finalizado
si estás utilizando estados.
Mantén la información coherente.
Ejemplo práctico: crear un Timeline histórico
Queremos:
NUESTRA HISTORIA
2018
Comenzamos
2020
Ampliamos nuestros servicios
2023
Nueva etapa
2026
Actualidad
Paso 1
Abre:
Secciones → Timeline
Paso 2
Selecciona una composición.
Paso 3
Utiliza Navigator.
Paso 4
Identifica cada Timeline Item.
Paso 5
Modifica Heading general.
Paso 6
Reemplaza fechas.
Paso 7
Reemplaza títulos.
Paso 8
Reemplaza descripciones.
Paso 9
Elimina hitos que no necesites.
Paso 10
Clona un Item completo si necesitas otro.
Paso 11
Actualiza cualquier ID personalizado.
Paso 12
Comprueba orden cronológico.
Paso 13
Personaliza:
Marker;
línea;
Typography;
Cards;
Background;
Padding.
Paso 14
Revisa Linked styles.
Paso 15
Revisa desktop.
Paso 16
Revisa tablet.
Paso 17
Revisa celular.
Paso 18
Guarda.
Paso 19
Utiliza:
Ver página
Paso 20
Lee nuevamente toda la historia desde el principio.
Ejemplo práctico: proceso de cuatro pasos
CÓMO TRABAJAMOS
01
RELEVAMIENTO
Conocemos las necesidades del proyecto.
02
PROPUESTA
Definimos el alcance.
03
IMPLEMENTACIÓN
Desarrollamos la solución.
04
PUESTA EN MARCHA
Realizamos la etapa final.
Paso 1
Selecciona Timeline.
Paso 2
Reemplaza:
fechas
por:
01
02
03
04
si el diseño lo permite mediante sus elementos de texto.
Paso 3
Actualiza los títulos.
Paso 4
Actualiza las descripciones.
Paso 5
Comprueba el orden.
Paso 6
Revisa mobile.
No inventes fechas para un proceso sin calendario fijo.
Ejemplo práctico: Timeline con etapa actual
01
Análisis
COMPLETADO
02
Diseño
COMPLETADO
03
Implementación
EN PROCESO
04
Puesta en marcha
PRÓXIMO
Utilízalo únicamente cuando esos estados correspondan a información que realmente quieres comunicar.
No es seguimiento dinámico
a menos que exista una funcionalidad específica externa al bloque que lo actualice.
Ejemplo práctico: Timeline de una empresa
2014
FUNDACIÓN
Iniciamos nuestras operaciones.
2018
EXPANSIÓN
Incorporamos nuevos servicios.
2022
NUEVA ETAPA
Ampliamos nuestra capacidad.
2026
ACTUALIDAD
Continuamos desarrollando nuevas soluciones.
Sustituye todo por información real.
¿Qué hacer si no conozco la fecha exacta?
Utiliza el nivel de precisión que puedas sostener.
Por ejemplo:
2020
en lugar de:
15 de marzo de 2020
si solo conoces el año.
¿Qué hacer si no existe ninguna fecha?
Utiliza números si hay secuencia.
¿Qué hacer si tampoco existe orden?
No utilices Timeline.
Considera:
Características;
Beneficios;
Servicios;
Contenidos destacados.
¿Qué hacer si tengo 20 años de historia?
Selecciona los hitos principales.
No necesitas un evento por año.
¿Qué hacer si dos hitos ocurrieron el mismo año?
Puedes utilizar:
2023
Hito A
2023
Hito B
si ambos son importantes.
O agruparlos
cuando sea más claro.
¿Qué hacer si una etapa ocurrió durante varios años?
Utiliza:
2020–2022
si corresponde.
¿Qué hacer si una fecha futura cambia?
Actualiza Timeline.
¿Qué hacer si un plan futuro se cancela?
Elimínalo o modifica la información.
No mantengas una promesa que ya no existe.
¿Qué hacer si quiero ordenar desde lo más reciente?
Puedes hacerlo.
Por ejemplo:
2026
2023
2020
2018
Mantén esa lógica en todo el Timeline.
¿Qué hacer si la composición alterna izquierda y derecha y se rompe después de clonar?
Revisa:
Item clonado;
Grid;
Classes;
jerarquía.
No intentes corregirlo moviendo cada Card con Margin manual.
¿Qué hacer si la línea no llega al nuevo Item?
Comprueba que clonaste la unidad correcta.
Puede que hayas agregado contenido fuera del contenedor Timeline.
Navigator te ayudará a detectarlo.
¿Qué hacer si aparece un marcador sin contenido?
Probablemente eliminaste únicamente los textos internos.
Elimina o reconstruye el Item completo.
¿Qué hacer si aparece contenido sin marcador?
Comprueba que el Item mantenga todos sus elementos estructurales.
¿Qué hacer si al cambiar el color de un punto cambian todos?
Comprueba:
Linked styles
Probablemente comparten una Class.
Si quieres todos iguales
es correcto.
¿Qué hacer si el punto actual debe ser diferente?
Agrega una Class adicional al Item o marcador correspondiente.
¿Qué hacer si todos los años cambian de tamaño?
También puede deberse a estilos compartidos.
Esto suele ser deseable.
¿Qué hacer si quiero una fecha diferente en tamaño?
Utiliza una excepción únicamente cuando exista una razón.
¿Qué hacer si el Timeline es demasiado largo?
Reduce:
cantidad de hitos;
descripciones;
Padding.
No reduzcas Font size hasta volverlo incómodo.
¿Qué hacer si es demasiado corto?
No agregues hitos inventados.
Una Timeline de tres puntos puede ser perfectamente válida.
¿Qué hacer si en móvil la línea queda lejos del contenido?
Revisa:
Padding;
posición;
Grid;
estructura.
No utilices valores rígidos de desktop.
¿Qué hacer si la línea pasa por encima del texto?
Puede existir:
Position;
z-index;
Width;
estructura incorrecta.
Revisa antes de ocultarla.
¿Qué hacer si el Timeline horizontal genera scroll?
Revisa responsive.
Puede necesitar convertirse en vertical.
No ocultes el contenido fuera de pantalla.
¿Qué hacer si quiero mantenerlo horizontal con muchos pasos?
Evalúa si realmente es una buena experiencia.
Un Timeline de ocho etapas horizontal puede requerir demasiado ancho.
Puede ser mejor vertical.
¿Qué hacer si los títulos se cortan?
Evita:
Height fija;
overflow oculto;
sobre el contenido textual.
Permite que la Card crezca.
¿Qué hacer si un título ocupa tres líneas?
Puede ser correcto.
Pero considera si puedes resumirlo.
¿Qué hacer si las Cards tienen distintas alturas?
Eso puede ser normal.
Si la alternancia se ve desequilibrada
reduce textos o utiliza una estructura vertical más simple.
¿Qué hacer si quiero mostrar duración?
Agrega una línea como:
Duración estimada: 1 semana
solo si el dato es correcto.
¿Qué hacer si los tiempos cambian mucho?
No publiques una duración fija.
¿Qué hacer si quiero mostrar estado real de un pedido?
Timeline del Editor de bloques no debería utilizarse como reemplazo de un sistema dinámico de seguimiento.
¿Qué hacer si quiero explicar cómo se procesa un pedido en general?
Sí puede utilizarse.
Por ejemplo:
Pedido
↓
Preparación
↓
Despacho
↓
Entrega
Aclara que estás explicando el proceso general.
¿Qué hacer si quiero un Roadmap de producto?
Puedes utilizar Timeline como presentación editorial.
Pero mantén:
fechas;
estados;
planes;
actualizados.
Y evita presentar previsiones como garantías.
Utilizar IA para seleccionar hitos históricos
ChatGPT, Claude o Gemini pueden ayudarte.
Por ejemplo:
Tengo esta historia real de una empresa:
[pegar información]
Quiero convertirla en un Timeline para una Página web.
Selecciona un máximo de 6 hitos.
Para cada uno utiliza:
- año o período real;
- título máximo de 5 palabras;
- descripción máxima de 25 palabras.
No inventes fechas, logros, expansiones ni cifras.
IA para ordenar cronológicamente
Tengo estos hitos:
[lista]
Ordénalos cronológicamente utilizando exclusivamente las fechas proporcionadas.
No completes fechas faltantes.
Indica cuáles no pueden ordenarse con certeza.
IA para transformar un proceso en pasos
Nuestro proceso real es:
[descripción]
Conviértelo en un Timeline de máximo 6 pasos.
Para cada paso crea:
- número;
- título máximo de 4 palabras;
- descripción máxima de 25 palabras.
No inventes etapas que no existan.
No agregues plazos.
IA para diferenciar Servicios y pasos
Tengo estos elementos:
[lista]
Clasifícalos como:
- Servicio.
- Paso de un proceso.
- Característica.
- Beneficio.
No inventes información.
Explica brevemente los casos ambiguos.
IA para resumir hitos
Estas son las descripciones de nuestro Timeline:
[pegar]
Redúcelas a un máximo de 24 palabras por hito.
Conserva:
- fecha;
- hecho principal;
- significado.
No inventes logros.
IA para comprobar inconsistencias
Revisa este Timeline:
[pegar]
Comprueba:
- orden cronológico;
- numeración;
- fechas repetidas;
- posibles contradicciones;
- cambios de tiempo verbal;
- diferencias excesivas de longitud.
No corrijas datos históricos sin indicármelo.
IA para Timeline de proceso
Este es nuestro proceso:
[datos reales]
Quiero presentarlo a clientes.
Reescribe los pasos en español neutro y lenguaje claro.
No cambies el orden.
No agregues etapas.
No inventes tiempos.
IA para detectar pasos que no tienen secuencia
Quiero utilizar Timeline para estos elementos:
[lista]
Analiza si realmente existe una relación secuencial entre ellos.
Si algunos pueden ocurrir en cualquier orden, indícalo.
No inventes una secuencia.
Este prompt puede evitar un error muy común
forzar Timeline cuando no corresponde.
IA para CSS
Estoy personalizando un Timeline en Waclis.
La sección utiliza:
.timeline-section
Cada hito:
.timeline-item
El marcador:
.timeline-marker
La fecha:
.timeline-date
El título:
.timeline-title
Necesito:
- Timeline vertical en desktop y celular;
- línea continua;
- marcadores alineados;
- Cards con Border radius de 12 px;
- Padding de 24 px;
- separación de 32 px;
- sin afectar otras secciones.
No cambies HTML.
No agregues JavaScript.
No elimines Classes existentes.
Waclis utiliza Bootstrap 4.
Devuélveme solamente CSS limitado a .timeline-section.
IA para adaptar un Timeline alternado
Tengo un Timeline en Waclis que alterna Cards a izquierda y derecha en desktop.
Necesito que:
- mantenga la alternancia en desktop;
- en celular todos los Items aparezcan en una sola columna;
- conserve el orden original;
- no oculte ningún hito;
- no duplique el Timeline.
No cambies el contenido.
No agregues JavaScript.
Preserva las Classes existentes.
IA para diagnosticar un Item clonado
Cloné un Item de un Timeline en Waclis y la línea dejó de alinearse.
Este es únicamente el HTML del Timeline:
[pegar estructura]
Identifica:
- contenedor general;
- Item repetible;
- marcador;
- contenido;
- Classes estructurales.
No reescribas todo el Timeline.
No elimines Classes.
No agregues una biblioteca externa.
IA para revisar Timeline histórico
Este es nuestro Timeline histórico:
[contenido]
Revisa únicamente:
- claridad;
- consistencia de fechas;
- orden;
- longitud de los textos.
No agregues acontecimientos.
No completes años faltantes.
No exageres logros.
Buenas prácticas para Timeline
Recomendamos:
utilizarlo solamente cuando exista un orden real;
definir si será cronológico o secuencial;
utilizar fechas reales;
utilizar números cuando no existan fechas;
mantener una convención consistente;
seleccionar hitos relevantes;
mantener títulos breves;
resumir descripciones;
utilizar Navigator;
clonar Items completos;
actualizar numeración después de clonar;
mantener IDs únicos;
revisar orden después de mover;
utilizar Linked styles para mantener consistencia;
adaptar estructuras alternadas a celular;
evitar posiciones rígidas;
no ocultar pasos en móvil;
diferenciar hechos pasados de planes futuros;
mantener Roadmaps actualizados;
no simular tracking dinámico;
limitar CSS a la sección;
revisar la secuencia completa mediante Ver página.
Errores frecuentes
Utilizar Timeline aunque no exista orden
Si los elementos pueden intercambiarse sin afectar el significado, utiliza otra sección.
Confundir Servicios con pasos
Servicios explica qué ofreces.
Timeline explica en qué orden ocurre.
Confundir Características con hitos
Características no necesitan secuencia.
Inventar fechas
Utiliza números si estás explicando un proceso.
Utilizar meses ficticios para representar etapas
No conviertas un proceso variable en calendario.
Utilizar “el año pasado”
Publica fechas absolutas cuando sea posible.
Mezclar formatos de fecha sin criterio
Mantén consistencia.
Mostrar todos los años de la historia
Selecciona hitos relevantes.
Inventar acontecimientos para hacer el Timeline más largo
No es necesario.
Escribir descripciones demasiado extensas
Timeline debe ser fácil de recorrer.
Utilizar títulos que son párrafos completos
Resume.
Clonar solo fecha o texto
Clona el Item completo.
Clonar y mantener la numeración anterior
Actualiza los pasos.
Duplicar IDs personalizados
Mantén IDs únicos.
Mover un Item sin revisar la secuencia
El orden es parte del contenido.
Dejar años fuera de orden
Comprueba cronología.
Eliminar un paso y dejar 01, 03, 04
Actualiza numeración si corresponde.
Eliminar texto pero dejar un marcador vacío
Elimina la unidad completa.
Mantener una línea horizontal demasiado comprimida en móvil
Adapta la composición.
Mantener alternancia izquierda/derecha en un celular estrecho
Apila los Items.
Ocultar pasos en móvil para resolver el responsive
Conserva la información.
Duplicar Timeline para desktop y mobile sin necesidad
Aumenta mantenimiento.
Posicionar cada Item manualmente con Margin
Utiliza estructura.
Modificar Classes estructurales sin conocer su función
Puedes romper línea y responsive.
Aplicar CSS global
Limita el scope.
Animar cada elemento individual
Mantén los efectos moderados.
Utilizar Hover en Items no interactivos
Puede generar confusión.
Presentar futuros planes como hechos realizados
Diferencia estados.
Mantener un roadmap desactualizado
Revísalo periódicamente.
Simular un tracking dinámico
Un Timeline estático no conoce el estado real de un pedido.
Publicar tiempos que no pueden cumplirse de forma consistente
Utiliza únicamente información válida.
No revisar Ver página
Comprueba la secuencia final.
Flujo recomendado
1. DEFINIR QUÉ QUIERES EXPLICAR
↓
2. COMPROBAR QUE EXISTA UN ORDEN REAL
↓
3. DEFINIR SI SERÁ CRONOLÓGICO O SECUENCIAL
↓
4. REUNIR FECHAS / PASOS CORRECTOS
↓
5. SELECCIONAR LOS HITOS IMPORTANTES
↓
6. ELEGIR DISEÑO
↓
7. AGREGAR TIMELINE
↓
8. REVISAR NAVIGATOR
↓
9. MODIFICAR HEADING GENERAL
↓
10. MODIFICAR FECHAS / NÚMEROS
↓
11. MODIFICAR TÍTULOS
↓
12. MODIFICAR DESCRIPCIONES
↓
13. ELIMINAR ITEMS INNECESARIOS
↓
14. CLONAR ITEMS COMPLETOS SI ES NECESARIO
↓
15. REVISAR NUMERACIÓN
↓
16. REVISAR ORDEN CRONOLÓGICO
↓
17. PERSONALIZAR MARCADORES / CARDS / LÍNEA
↓
18. REVISAR LINKED STYLES
↓
19. ADAPTAR RESPONSIVE
↓
20. GUARDAR CAMBIOS
↓
21. VER PÁGINA
↓
22. LEER LA SECUENCIA COMPLETA
Checklist antes de publicar Timeline
Existe un orden real entre los elementos.
Timeline es la sección adecuada para esta información.
Definí si representa historia, proceso, etapas o evolución.
Las fechas son correctas.
No inventé fechas.
Si no existen fechas, utilicé números o pasos.
No convertí un proceso variable en calendario ficticio.
El formato de fechas es consistente.
No utilicé referencias temporales como “el año pasado” sin necesidad.
Los hitos históricos son relevantes.
No incluí acontecimientos irrelevantes solo para completar.
Los títulos son breves.
Las descripciones son claras.
Los textos mantienen un nivel de detalle razonablemente consistente.
Las cifras utilizadas son reales.
Los plazos publicados son correctos si existen.
Los elementos futuros están claramente identificados como tales.
No presenté planes como hechos realizados.
El orden cronológico es correcto.
La numeración de pasos es correcta.
Utilicé Navigator.
Al clonar seleccioné el Item completo.
Actualicé fecha o número de la copia.
Actualicé Heading de la copia.
Actualicé Paragraph de la copia.
Actualicé icono si corresponde.
Actualicé Links si existen.
Los IDs personalizados son únicos.
Después de eliminar un paso revisé la numeración.
Después de mover un Item revisé toda la secuencia.
La línea conecta correctamente los Items.
Los marcadores están alineados.
Linked styles tiene el alcance esperado.
Desktop se ve correctamente.
Tablet se ve correctamente.
Celular se ve correctamente.
La estructura alternada se adapta en móvil.
El Timeline horizontal no queda comprimido en celular.
No oculté hitos importantes en móvil.
Los textos no se cortan.
No existe scroll horizontal inesperado.
La línea no pasa sobre el texto.
La información importante no depende únicamente del color.
Las animaciones son moderadas.
No agregué Hover engañoso.
El CSS personalizado está limitado al Timeline.
No eliminé Classes estructurales sin comprenderlas.
No agregué JavaScript innecesario.
No estoy simulando información dinámica.
El contenido continúa vigente.
Guardé los cambios.
Revisé la secuencia completa mediante Ver página.
En resumen
La sección Timeline permite presentar información que tiene:
UN ANTES
↓
UN DESPUÉS
o:
PASO 1
↓
PASO 2
↓
PASO 3
Puede utilizarse para:
historia;
evolución;
hitos;
procesos;
fases;
etapas.
La regla fundamental es:
si los elementos no tienen un orden real, probablemente no necesitas Timeline.
Por ejemplo:
2018
Fundación
↓
2021
Expansión
↓
2024
Nueva sede
↓
2026
Actualidad
es un Timeline cronológico.
Mientras:
01
Relevamiento
↓
02
Diseño
↓
03
Implementación
↓
04
Entrega
es un Timeline secuencial.
No necesitas inventar fechas para convertir un proceso en Timeline.
Utiliza números.
Una estructura conceptual puede ser:
Timeline
├── Item
│ ├── Marker
│ ├── Date / Number
│ ├── Heading
│ └── Paragraph
├── Item
└── Item
Por eso utiliza Navigator para identificar el Item completo antes de:
clonar;
mover;
eliminar.
Después de clonar un paso revisa:
NÚMERO / FECHA
TÍTULO
DESCRIPCIÓN
ÍCONO
LINK
ID
Y después de moverlo:
lee nuevamente toda la secuencia.
En Timeline, el orden no es solamente una decisión visual.
Es parte de la información.
En responsive, un diseño:
Desktop
[ A ] ●
│
● [ B ]
│
[ C ] ●
puede convertirse en:
Mobile
● A
│
● B
│
● C
La claridad tiene prioridad sobre mantener la alternancia.
Del mismo modo:
Desktop
01 ─── 02 ─── 03 ─── 04
puede necesitar transformarse en:
Mobile
01
│
02
│
03
│
04
No reduzcas los contenidos hasta volverlos ilegibles solamente para conservar una línea horizontal.
También recuerda que una Timeline creada en el Editor de bloques es contenido editorial.
Por sí sola no representa:
tracking dinámico;
estado real de un pedido;
progreso automático;
actualización en tiempo real.
Puedes utilizarla para explicar:
CÓMO PROCESAMOS LOS PEDIDOS
pero no deberías utilizarla para afirmar:
TU PEDIDO ESTÁ AQUÍ
sin una funcionalidad real que lo determine.
Finalmente:
Guardar Cambios → Ver página → leer la secuencia completa → comprobar desktop, tablet y celular.
Un buen Timeline debería permitir que el visitante responda rápidamente:
“Entiendo qué ocurrió, en qué orden ocurrió o cuáles son los pasos que siguen.”
Si el visitante necesita detenerse para descubrir cuál es el primer paso o qué evento ocurrió antes:
la estructura necesita simplificarse.
¿Necesitas más ayuda?
Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.
Soporte por WhatsApp