Primeira Dobra 01
Primeira dobra padrão — logotipo, título, botão e uma imagem alta ao lado. Produtos, serviços e páginas institucionais.
Nesta página
Visão geral
Primeira dobra com logo, headline, texto, CTA, apoio e imagem lateral.
| Propriedade | Valor |
|---|---|
| Nome no editor | Primeira Dobra 01 |
| Onde encontrar | Painel de widgets do Elementor, categoria Converto |
| Identificador no Elementor | lgr-hero-01 |
| Identificador no Markdown | hero-01 |
| Papel na página | Atenção (primeira dobra) |
| Campos de conteúdo | 8 |
| Opções de estilo | 23 (11 responsivas) |
Quando usar
Situações em que este widget é indicado:
- A página precisa de uma primeira dobra (topo da página).
- Existe uma imagem principal para a seção.
- Existe um CTA principal.
Como adicionar
- Abra a página no editor do Elementor.
- No painel de widgets, abra a categoria Converto e arraste Primeira Dobra 01 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 |
|---|---|---|
| Logotipo | Imagem ou arquivo | |
| Título Principal | Área de texto | Padrão: Descreva como o seu produto resolve a dor do cliente, focando em bene… |
| Descrição | Área de texto | Padrão: Aumente o engajamento e as conversões do seu negócio com as nossas es… |
| Texto do Botão | Texto | Padrão: Clique aqui |
| Link do Botão | Link | |
| Ícone do Texto de Apoio | Ícone | |
| Texto de Apoio | Texto | Padrão: Sem cartão de crédito, teste grátis por 14 dias |
| Imagem Principal | Imagem ou arquivo |
Opções da aba Estilo
A aba Estilo reúne 23 opções em 8 seções (a última é Animações, comum a todos os widgets Converto).
| Seção | O que ajusta |
|---|---|
| Textos | Título, Título / Altura da Linha, Descrição, Descrição / Altura da Linha, Botão, Texto de Apoio, Texto de Apoio / Altura da Linha |
| Cores | Cor do Título, Cor da Descrição, Cor do Texto do Botão, Cor de Fundo do Botão, Cor do Texto de Apoio |
| Plano de Fundo | Plano de Fundo |
| Sobreposição de Fundo | Sobreposição de Fundo, Opacidade |
| Espaçamentos | Espaço superior, Espaço inferior, Logotipo / Espaço inferior, Anular espaço de cima, Anular espaço de baixo |
| Botões | Raio da Borda dos Botões |
| Imagens | Imagem Lateral / Raio da Borda, Logotipo / Largura Máxima |
| Animações | Entrada de textos e de imagens e ícones: tipo, velocidade, atraso e intervalo (veja Animações de entrada) |
Comportamento responsivo
11 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 hero-01 na linha <!-- converto:hero-01 -->. Campos de conteúdo (bloco :::content):
| Campo | Tipo | Obrigatório | Detalhes |
|---|---|---|---|
logo_image | Imagem ou arquivo | Não | |
title | Texto | Sim | Headline principal da seção. |
description | Texto | Não | |
button_text | Texto | Não | Texto do botão. Requer button_link preenchido — o botão inteiro só é renderizado quando há uma URL em button_link. |
button_link | Link | Não | |
subtext_icon | Ícone | Não | Ícone do texto de apoio. Requer subtext preenchido — sem ele, o bloco inteiro (incluindo o ícone) não é renderizado. |
subtext | Texto | Não | |
hero_image | Imagem ou arquivo | Não |
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:hero-01 -->
:::content
logo_image: https://exemplo.com/imagem.jpg
title: Descreva como o seu produto resolve a dor do cliente, focando em benefícios tangíveis e escalabilidade.
description: Aumente o engajamento e as conversões do seu negócio com as nossas estratégias comprovadas.
button_text: Clique aqui
button_link: https://exemplo.com/oferta
subtext_icon: fa-regular fa-circle-check
subtext: Sem cartão de crédito, teste grátis por 14 dias
hero_image: https://exemplo.com/imagem.jpg
:::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).