Visão geral da biblioteca
Visão geral dos 55 widgets Converto, como escolher entre variações e o que todos têm em comum.
Nesta página
Os widgets Converto são os blocos de construção das páginas: cada um é uma seção completa (com HTML, estilo e comportamento) que você preenche pela aba Conteúdo e ajusta pela aba Estilo. Ao todo são 55 widgets, na categoria Converto do editor.
Como escolher
Os widgets estão organizados por papel na página. Dentro de cada papel há variações numeradas (por exemplo, hero-01 a hero-08); a escolha depende do conteúdo que você tem — imagem, vídeo, número de itens — e do objetivo da página.

Topo e rodapé
| Widget | Papel | Quando escolher |
|---|---|---|
| Topo | Navegação | Cabeçalho do site com logotipo, menu e um botão de ação. Primeira seção das páginas completas. |
| Rodapé | Confiança e informações legais | Rodapé com logotipo, colunas de links, redes sociais e direitos autorais. Última seção das páginas completas. |
Primeira dobra

| Widget | Papel | Quando escolher |
|---|---|---|
| Primeira Dobra 01 | Atenção (primeira dobra) | Primeira dobra padrão: logotipo, título, botão e uma imagem alta ao lado. Produtos, serviços e páginas institucionais. |
| Primeira Dobra 02 | Atenção (primeira dobra) | Quando há um vídeo de apresentação e também uma imagem do produto ou do painel (SaaS, aplicativos, demonstrações). |
| Primeira Dobra 03 | Atenção (primeira dobra) | Primeira dobra clássica com imagem larga/horizontal do produto (tablet, mockup). |
| Primeira Dobra 04 | Atenção (primeira dobra) | Quando a meta é captar leads: o formulário fica dentro da primeira dobra. Captura, webinars e iscas digitais. |
| Primeira Dobra 05 | Atenção (primeira dobra) | Primeira dobra centrada na imagem, com uma linha de aviso (garantia, frete, nota legal) abaixo do botão. |
| Primeira Dobra 06 | Atenção (primeira dobra) | Título centralizado com imagem larga abaixo. Páginas institucionais, informativas, de agradecimento e de marca. |
| Primeira Dobra 07 | Atenção (primeira dobra) | Vídeo em primeiro plano (YouTube, inclusive Shorts) ao lado do texto: carta de vendas em vídeo ou apresentação. |
| Primeira Dobra 08 | Atenção (primeira dobra) | Vídeo do YouTube em 16:9 centralizado sob o título: carta de vendas em vídeo longa. |
Benefícios

| Widget | Papel | Quando escolher |
|---|---|---|
| Benefícios 01 | Interesse e desejo | Lista vertical curta de benefícios (até cerca de 6 itens), sem imagens. Duas colunas (padrão) ou três, para 6 ou mais itens curtos. |
| Benefícios 02 | Interesse e desejo | Muitos recursos ou benefícios curtos em grade. Quatro colunas (padrão), três ou duas: ajuste ao número de itens para não sobrar cartão. |
| Benefícios 03 | Interesse e desejo | Texto de apoio de um lado e cartões de benefícios do outro: explica o "porquê" e lista os ganhos juntos. |
| Benefícios 04 | Interesse e desejo | Poucos benefícios mais relevantes, em cartões com borda: diferenciais, pilares, serviços. |
| Benefícios 05 | Interesse e desejo | Passo a passo ou tour de recursos em que cada item tem sua própria imagem, alternando imagem e texto ("como funciona"). |
| Benefícios 06 | Interesse e desejo | Cartões com imagem de destaque: linhas de produtos, categorias, módulos. |
Conteúdo e títulos

| Widget | Papel | Quando escolher |
|---|---|---|
| Conteúdo 01 | Interesse (sobre e história) | Sobre, história ou explicação: texto longo com imagem ou vídeo ao lado e um botão. "Quem somos", "Sobre mim", problema e solução. |
| Conteúdo 02 | Interesse | Título e texto centralizados com imagem ou vídeo ao centro: mensagem-chave, manifesto, explicação. |
| Título | Introdução de seção | Título de seção simples, com ícone ou caixa opcional, para introduzir ou quebrar uma página longa. |
Prova social

| Widget | Papel | Quando escolher |
|---|---|---|
| Avaliações | Prova | Nota e avaliações do Google como prova social. Só funciona com um negócio do Google conectado. |
| Prova | Grade do feed do Instagram como prova de marca e estilo de vida. Só funciona com uma conta conectada. | |
| Estatísticas | Prova | Números concretos como prova social (clientes, anos, resultados). Exige números reais. |
| Prova Social 01 | Prova | Depoimentos escritos de clientes (nome, cargo, foto). Exige depoimentos reais. |
| Prova Social 02 | Prova | Depoimentos em vídeo do YouTube. Exige vídeos reais. |
Vitrines e carrosséis

| Widget | Papel | Quando escolher |
|---|---|---|
| Carrossel | Prova e portfólio | Cartões rolantes (imagens ou vídeos) para serviços, soluções ou cases quando há muitos itens. |
| Cartões Rolantes | Reforço | Linhas infinitas de cartões em rolagem: portfólio visual, categorias, galeria de resultados. |
| Vitrine 01 | Prova e portfólio | Pessoas: equipe, especialistas, instrutores, palestrantes. |
| Vitrine 02 | Prova e portfólio | Artigos, posts e guias para ler a seguir: páginas informativas e hubs de conteúdo. |
| Vitrine 03 | Prova e portfólio | Ferramentas, integrações, parceiros, certificações ou logotipos de clientes em grade. |
| Vitrine 04 | Prova e portfólio | Cases, projetos, portfólio ou resultados com imagens. |
| Vitrine de Links | Página independente (link na bio) | Página inteira de "link na bio": perfil, banners em destaque e lista de links. Use sozinha. |
| Faixa Rolante | Reforço | Faixa fina com palavras-chave ou diferenciais em rolagem; use como divisor entre seções. |
Processo e decisão

| Widget | Papel | Quando escolher |
|---|---|---|
| Comparador | Decisão (comparar planos) | Comparação lado a lado de 2 a 5 planos ou versões (ou contra concorrentes), com recursos agrupados em seções. |
| Contador | Urgência e decisão | Contagem regressiva para um prazo REAL (fim de oferta, turma, bônus, início de evento) ou uma oferta de boas-vindas com tempo limitado contada a partir do primeiro acesso. |
| Cartões Empilhados | Interesse e desejo (perfis e números) | Pilha de cartões com foto fixada na tela enquanto o visitante rola: perfis de público, casos de uso ou resultados com números. |
| Passos | Interesse (como funciona) | 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. |
| Abas | Interesse (explorar recursos) | Abas com ícone e título que trocam o painel de conteúdo (texto, imagem ou vídeo e botão): módulos de produto, serviços por segmento, "o que está incluído" por área. |
| Linha do Tempo | Interesse e prova de processo | Sequência no tempo ou em etapas: história da empresa, roadmap, programação de evento, ou um "como funciona" longo com detalhes por etapa. |
Ofertas e preços

| Widget | Papel | Quando escolher |
|---|---|---|
| Oferta 01 | Desejo e decisão | Oferta de venda: cartão de preço com formas de pagamento e lista de benefícios ao lado (produtos digitais, cursos, e-commerce). |
| Oferta 02 | Desejo e decisão | Oferta com valores riscados (empilhamento de valor, bônus, preço de âncora) e uma imagem em destaque. |
| Oferta 03 | Desejo e decisão | Oferta com contagem regressiva para criar urgência, benefícios incluídos e formas de pagamento. |
| Oferta 04 | Desejo e decisão | Oferta simples e centralizada: imagem, benefícios com ícones, preço e um botão. |
| Preços 01 | Decisão | Vários planos com alternância mensal/anual (SaaS, assinaturas, associações). |
| Preços 02 | Decisão | Exatamente dois planos lado a lado, sem alternância (básico x recomendado). |
Captura de leads

| Widget | Papel | Quando escolher |
|---|---|---|
| Captura 01 | Ação (captura de leads) | Seção de captura com uma explicação mais longa ao lado do formulário (isca digital com promessa detalhada). |
| Captura 02 | Ação (captura de leads) | Chamada curta e centralizada com o formulário e 3 ou 4 vantagens rápidas abaixo. |
| Captura 03 | Ação (captura de leads) | Título e botão de chamada ao lado do formulário: captura depois do hero ou no meio da página. |
| Captura 04 | Ação (captura de leads) | Caixa equilibrada 50/50 entre título/chamada e formulário. |
| Formulário | Ação (captura de leads) | Um formulário já cadastrado em qualquer seção (captura no meio da página, contato, pedido de orçamento). |
Chamadas para ação e perguntas

| Widget | Papel | Quando escolher |
|---|---|---|
| Chamada para Ação 01 | Ação | Chamada final (título, texto, botão e uma pequena nota de apoio). O empurrão final padrão. |
| Chamada para Ação 02 | Ação | Chamada para ação com imagem de apoio: quando um visual reforça a oferta. |
| Chamada para Ação 03 | Ação | Chamada compacta e minimalista com nota no rodapé: entre seções ou antes do rodapé. |
| Chamada para Ação 04 | Ação | Chamada para ação que também mostra várias soluções ou serviços em grade. |
| Perguntas e Respostas 01 | Tratamento de objeções | Perguntas frequentes em acordeão: responde objeções de preço, garantia, entrega e funcionamento. |
| Perguntas e Respostas 02 | Tratamento de objeções | Perguntas frequentes com uma chamada ao lado: quando a página converte logo depois das objeções. |
O que todos os widgets têm em comum
| Recurso | Descrição |
|---|---|
| Aba Conteúdo | Textos, imagens, links, listas e demais informações. |
| Aba Estilo | Textos, cores, plano de fundo, sobreposição, arredondamento e espaçamentos, conforme o widget. |
| Espaçamentos | Espaço superior e inferior, com opção de anular cada um. |
| Plano de fundo e sobreposição | Cor, imagem ou gradiente, com camada de sobreposição e opacidade. |
| Animações | Última seção da aba Estilo. Veja Animações de entrada. |
| Variáveis | {{rotulo}} em textos e links. Veja Variáveis de página. |
| Marcação de texto | [[destaque]], *negrito*, _itálico_, ~tachado~. Veja Marcação de texto. |
| CSS e JS | Campos na aba Avançado. Veja CSS e JS personalizado. |
| Markdown | Quase todos os widgets são reconhecidos pelo Converto Construtor. |
Boas práticas de composição
- Comece por header, depois uma primeira dobra (hero) e termine com footer. O validador avisa quando há mais de um hero.
- Uma ação principal por página, repetida nos botões e no final.
- Só use widgets de prova (números, depoimentos, avaliações) com dados reais.
- Contagens regressivas apenas com prazo real.
- Páginas longas funcionam melhor alternando seções claras e escuras.
- Veja sequências recomendadas por tipo de página em A linguagem Markdown Converto e no Catálogo de modelos.