Generador de línea de tiempo / paso a paso (CSS)
Escribe cada etapa en una línea (título | texto). Elige el modelo: paso a paso numerado, línea de tiempo con fechas o etapas lado a lado.
Cómo usarEtapas e historia en línea de tiempo
Disponible en: 
Generador de línea de tiempo / paso a paso (CSS): para qué sirve
Una sección de cómo funciona, con pocas etapas numeradas, responde de antemano las dudas de quien está pensando en contratar. La misma estructura sirve para contar la historia de la empresa en una línea de tiempo.
Escribe las etapas y elige el modelo: paso a paso vertical con números, línea de tiempo con marcadores y los títulos como fechas, o etapas lado a lado que pasan a columna en el celular. El HTML usa lista ordenada, y los números vienen de un contador CSS.
Cómo usar
- Escribe las etapas, una por línea.
- Elige el modelo, el título y el color.
- Copia el código y pégalo en tu página.
Cuándo usar
- Sección cómo funciona de un servicio.
- Historia de la empresa.
- Etapas de un pedido o de una obra.
Preguntas frecuentes
¿Cuándo usar el paso a paso?
Para explicar cómo funciona tu servicio en pocas etapas (pedido, producción, entrega), lo que reduce las dudas antes de la compra. Tres a cinco etapas cortas funcionan mejor que una lista larga.
¿La versión horizontal funciona en el celular?
Sí. Por debajo de 768 px las etapas lado a lado pasan a una columna, con la línea en vertical, para que no queden apretadas.
¿Por qué una lista ordenada?
Las etapas quedan en un elemento ol, así que el lector de pantalla anuncia la cantidad de pasos y la posición de cada uno. Los números visibles vienen del CSS, sin duplicar el texto.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.