Sección “cómo funciona” en pasos (HTML y CSS)
Escribe un paso por línea. En el celular, la versión horizontal pasa a vertical sola.
Cómo usarTres pasos y el cliente entiende
Disponible en: 
Sección “cómo funciona” en pasos (HTML y CSS): para qué sirve
Una sección con tres o cuatro pasos explica en segundos cómo contratar, pedir o agendar, y despeja la duda que hace que el visitante se vaya. Escribe un paso por línea y elige la disposición: horizontal con una línea punteada que une los números, vertical con la línea al costado o tarjetas.
El código usa lista ordenada (ol) y contadores de CSS para los números, lo que leen correctamente los lectores de pantalla, pasa a vertical en el celular y puede terminar con un botón de llamada a la acción, como el enlace de WhatsApp.
Cómo usar
- Escribe los pasos, uno por línea.
- Elige la disposición, el color y el botón.
- Copia el código a tu sitio.
Cuándo usar
- Cómo contratar un servicio.
- Cómo hacer un pedido.
- Cómo funciona una aplicación o un curso.
Preguntas frecuentes
¿Cuántos pasos usar?
Tres o cuatro es lo ideal: el visitante echa un vistazo y entiende el proceso. Si el tuyo tiene más pasos, une los parecidos; los detalles pueden ir a una página de preguntas frecuentes.
¿Por qué el código usa una lista ordenada?
Los pasos tienen orden, y la lista ordenada (ol) se lo dice a los lectores de pantalla, que anuncian “lista de 3 elementos” y el número de cada uno. Los números grandes los dibuja el CSS con contadores, sin repetir el número en el texto.
¿Puedo poner un botón al final?
Sí, y es recomendable: después de explicar cómo funciona, da el siguiente paso. Completa el texto y el enlace del botón y aparece debajo de los pasos.
¿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.