Primeira Dobra 05
Primeira dobra centrada na imagem, com uma linha de aviso (garantia, frete, nota legal) abaixo do botão.
Nesta página
Visão geral
Primeira dobra com logo, headline, texto, CTA, aviso e imagem lateral.
| Propriedade | Valor |
|---|---|
| Nome no editor | Primeira Dobra 05 |
| Onde encontrar | Painel de widgets do Elementor, categoria Converto |
| Identificador no Elementor | lgr-hero-05 |
| Identificador no Markdown | hero-05 |
| Papel na página | Atenção (primeira dobra) |
| Campos de conteúdo | 8 |
| Opções de estilo | 23 (14 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 05 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 | Texto | Padrão: A design experience like never before |
| Descrição | 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 Aviso | Ícone | |
| Texto do Aviso | Texto | Padrão: Sem cartão de crédito, teste grátis por 14 dias |
| Imagem em Destaque | 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, Aviso, Aviso / Altura da Linha |
| Cores | Cor do Título, Cor da Descrição, Fundo do Botão, Texto do Botão, Cor do Aviso |
| 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, Espaço superior, Espaço inferior |
| Imagens | Imagem Principal / Largura Máxima, Logotipo / Largura Máxima |
| Botões | Raio da Borda dos Botões |
| Animações | Entrada de textos e de imagens e ícones: tipo, velocidade, atraso e intervalo (veja Animações de entrada) |
Comportamento responsivo
14 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-05 na linha <!-- converto:hero-05 -->. 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 | |
button_link | Link | Não | |
notice_icon | Ícone | Não | Ícone do aviso. Requer notice_text preenchido — sem ele, o bloco inteiro (incluindo o ícone) não é renderizado. |
notice_text | 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-05 -->
:::content
logo_image: https://exemplo.com/imagem.jpg
title: A design experience like never before
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
notice_icon: fa-regular fa-circle-check
notice_text: 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).