English
EspañolSeção "como funciona" em etapas (HTML e CSS)
Escreva uma etapa por linha. No celular, a versão horizontal vira vertical sozinha.
Três passos e o cliente entende
Tudo é feito no seu aparelho: nada é enviado para a internet.
Disponível em: 
Seção "como funciona" em etapas (HTML e CSS): para que serve
Uma seção com três ou quatro passos explica em segundos como contratar, pedir ou agendar, e tira a dúvida que faz o visitante ir embora. Escreva uma etapa por linha e escolha o arranjo: horizontal com linha tracejada ligando os números, vertical com a linha do lado ou cartões.
O código usa lista ordenada (ol) e contadores do CSS para os números, o que é lido corretamente por leitores de tela, vira vertical no celular e pode terminar com um botão de chamada, como o link do WhatsApp.
Como usar
- Escreva as etapas, uma por linha.
- Escolha o arranjo, a cor e o botão.
- Copie o código para o site.
Quando usar
- Como contratar um serviço.
- Como fazer um pedido.
- Como funciona um aplicativo ou curso.
Perguntas frequentes
Quantas etapas usar?
Três ou quatro é o ideal: o visitante bate o olho e entende o processo. Se o seu tem mais passos, junte os parecidos; detalhes podem ir para uma página de perguntas frequentes.
Por que o código usa lista ordenada?
Etapas têm ordem, e a lista ordenada (ol) diz isso aos leitores de tela, que anunciam 'lista com 3 itens' e o número de cada um. Os números grandes são desenhados pelo CSS com contadores, sem repetir o número no texto.
Posso colocar um botão no final?
Pode, e é recomendado: depois de explicar como funciona, dê o próximo passo. Preencha o texto e o link do botão e ele aparece embaixo das etapas.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.