Passos
Processo curto de 3 a 5 passos ("como funciona", "como comprar", onboarding), em círculos com ícone, selo "Passo N", título e uma frase, ligados por setas.
Nesta página
Visão geral
Passos em círculos (ícone ou imagem, selo "Passo 1", título e descrição) ligados por setas. Quando há mais de uma linha, as setas também ligam o fim de uma linha ao começo da próxima. Responsivo: passos por linha configuráveis por dispositivo.
| Propriedade | Valor |
|---|---|
| Nome no editor | Passos |
| Onde encontrar | Painel de widgets do Elementor, categoria Converto |
| Identificador no Elementor | lgr-steps |
| Identificador no Markdown | steps |
| Papel na página | Interesse (como funciona) |
| Campos de conteúdo | 3 |
| Opções de estilo | 42 (21 responsivas) |
Quando usar
Situações em que este widget é indicado:
- A página precisa mostrar um processo curto em 3 a 5 etapas ("como funciona", "como comprar", "como começar", onboarding).
- Cada etapa tem um ícone ou imagem simples, um título curto e uma frase de explicação.
Como adicionar
- Abra a página no editor do Elementor.
- No painel de widgets, abra a categoria Converto e arraste Passos para a página (ou clique em + em uma área vazia).
- Preencha a aba Conteúdo e ajuste a aba Estilo.
O widget também pode vir pronto em um modelo de página ou ser inserido pelo Converto Construtor.
Opções da aba Conteúdo
Conteúdo
| Opção | Tipo | Detalhes |
|---|---|---|
| Título | Texto | Padrão: Como funciona |
| Descrição | Área de texto | Padrão: Em poucos passos você começa a ter resultado. |
| Passos | Lista | |
| ↳ Rótulo (selo) | Texto | Padrão: Passo 1 |
| ↳ Ícone | Ícone | |
| ↳ Imagem (opcional, no lugar do ícone) | Imagem ou arquivo | |
| ↳ Título do Passo | Texto | Padrão: Comece aqui |
| ↳ Descrição | Área de texto | Padrão: Explique em uma ou duas frases o que acontece nes… |
| ↳ Cor do Passo (ícone e selo) | Cor |
Opções da aba Estilo
A aba Estilo reúne 42 opções em 9 seções (a última é Animações, comum a todos os widgets Converto).
| Seção | O que ajusta |
|---|---|
| Textos | Título da seção, Título da seção / Altura da Linha, Descrição da seção, Descrição da seção / Altura da Linha, Título do passo, Título do passo / Altura da Linha, Título do passo / Peso, Descrição do passo, Descrição do passo / Altura da Linha, Selo, Selo / Peso |
| Cores | Título da Seção, Descrição da Seção, Título do Passo, Descrição do Passo, Cor dos Passos (ícone e selo), Fundo do Círculo, Texto do Selo, Borda do Selo, Setas |
| Disposição | Passos por linha, Exibir setas, Espaço entre passos (largura da seta), Espaço entre linhas, Posição do selo |
| Círculo e Ícone | Tamanho do círculo, Tamanho do ícone, Borda do círculo, Cor da borda do círculo, Tamanho da imagem no círculo, Sombra do círculo |
| Setas | Espessura da linha, Tamanho da ponta, Estilo da linha, Distância entre a seta e o círculo |
| Plano de Fundo | Plano de Fundo |
| Sobreposição de Fundo | Sobreposição de Fundo, Opacidade |
| Espaçamentos | Espaço superior, Espaço inferior, Anular espaço de cima, Anular espaço de baixo |
| Animações | Entrada de textos e de imagens e ícones: tipo, velocidade, atraso e intervalo (veja Animações de entrada) |
Comportamento responsivo
21 opções deste widget são responsivas: o Elementor permite definir valores diferentes para desktop, tablet e celular (ícones de dispositivo ao lado do campo). Para ajustes finos por largura de tela, use a sintaxe curta de media queries no campo CSS da aba Avançado.
Campos no Converto Construtor (Markdown)
Use o identificador steps na linha <!-- converto:steps -->. Campos de conteúdo (bloco :::content):
| Campo | Tipo | Obrigatório | Detalhes |
|---|---|---|---|
title | Texto | Não | Título da seção, acima dos passos (ex.: "Como funciona"). |
description | Texto | Não | |
steps_list | Lista | Sim | Passos na ordem do processo. De 3 a 6 passos funciona melhor (3 ou 4 cabem em uma linha). |
↳ step_badge | Texto | Não | Selo sobre o círculo, ex.: "Passo 1", "Etapa 2" ou "1". Vazio não exibe selo. |
↳ step_icon | Ícone | Não | Ícone do círculo (Font Awesome); escolha um diferente e coerente com cada passo. |
↳ step_image | Imagem ou arquivo | Não | Imagem opcional no lugar do ícone (ilustração ou ícone próprio). Nunca é cortada: fica contida no círculo, por padrão com 60% da largura dele. Sem imagem padrão; use quando o passo pedir uma ilustração. Proporção livre, recomendado cerca de 200 px de largura. |
↳ step_title | Texto | Sim | |
↳ step_description | Texto | Não | Uma ou duas frases curtas. |
↳ step_color | Cor | Não | Cor do ícone e do selo deste passo. Vazio usa accent_color. |
Os controles da aba Estilo também podem ser usados no bloco :::style, pelos identificadores do próprio widget (campo omitido mantém o padrão). Veja a linguagem Markdown Converto.
Exemplo
<!-- converto:steps -->
:::content
title: Como funciona
description: Em poucos passos você começa a ter resultado.
steps_list:
- step_badge: Passo 1
step_icon: fa-regular fa-circle-check
step_image: https://exemplo.com/imagem.jpg
step_title: Comece aqui
step_description: Explique em uma ou duas frases o que acontece neste passo.
step_color: "#111111"
- step_badge: Passo 1
step_icon: fa-regular fa-circle-check
step_image: https://exemplo.com/imagem.jpg
step_title: Comece aqui
step_description: Explique em uma ou duas frases o que acontece neste passo.
step_color: "#111111"
:::Recursos comuns a todos os widgets
- Textos aceitam variáveis de página (
{{rotulo}}) e marcação de texto. - Aba Avançado: campos CSS e JS por elemento (CSS e JS personalizado).
- Seção Animações na aba Estilo (Animações de entrada).