English
EspañolGerador de linha do tempo / passo a passo (CSS)
Escreva cada etapa em uma linha (título | texto). Escolha o modelo: passo a passo numerado, linha do tempo com datas ou etapas lado a lado.
Etapas e história em linha do tempo
Tudo é feito no seu aparelho: nada é enviado para a internet.
Disponível em: 
Gerador de linha do tempo / passo a passo (CSS): para que serve
Uma seção de como funciona, com poucas etapas numeradas, responde antes da hora as dúvidas de quem está pensando em contratar. A mesma estrutura serve para contar a história da empresa numa linha do tempo.
Escreva as etapas e escolha o modelo: passo a passo vertical com números, linha do tempo com marcadores e os títulos como datas, ou etapas lado a lado que viram coluna no celular. O HTML usa lista ordenada, e os números vêm de um contador CSS.
Como usar
- Escreva as etapas, uma por linha.
- Escolha o modelo, o título e a cor.
- Copie o código e cole na página.
Quando usar
- Seção como funciona de um serviço.
- História da empresa.
- Etapas de um pedido ou de uma obra.
Perguntas frequentes
Quando usar o passo a passo?
Para explicar como funciona o seu serviço em poucas etapas (pedido, produção, entrega), o que reduz dúvidas antes da compra. Três a cinco etapas curtas funcionam melhor do que uma lista longa.
A versão horizontal funciona no celular?
Sim. Abaixo de 768 px as etapas lado a lado viram uma coluna, com a linha na vertical, para não ficarem espremidas.
Por que lista ordenada?
As etapas ficam num elemento ol, então o leitor de tela anuncia a quantidade de passos e a posição de cada um. Os números visíveis vêm do CSS, sem duplicar o texto.
É 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.