Biblioteca de widgets

Oferta 01

Oferta de venda — cartão de preço com formas de pagamento e lista de benefícios ao lado (produtos digitais, cursos, e-commerce).

Intermediário5 min de leitura

Nesta página

Visão geral
Quando usar
Como adicionar
Opções da aba Conteúdo
Conteúdo
Oferta
Benefícios
Opções da aba Estilo
Comportamento responsivo
Campos no Converto Construtor (Markdown)
Exemplo
Recursos comuns a todos os widgets

Visão geral

Oferta com layout tripartido: esquerda (título/descrição), centro (card com preço/botão/meios de pagamento), direita (benefícios).

Propriedade	Valor
Nome no editor	Oferta 01
Onde encontrar	Painel de widgets do Elementor, categoria Converto
Identificador no Elementor	`lgr-offer-01`
Identificador no Markdown	`offer-01`
Papel na página	Desejo e decisão
Campos de conteúdo	11
Opções de estilo	35 (17 responsivas)

Quando usar

Situações em que este widget é indicado:

A página precisa apresentar uma oferta com preço destacado e benefícios.
Precisa listar os meios de pagamento aceitos.
Precisa mostrar uma lista de benefícios ao lado do card de oferta.

Como adicionar

Abra a página no editor do Elementor.
No painel de widgets, abra a categoria Converto e arraste Oferta 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
Título	Texto	Padrão: Aproveite nossa oferta especial
Descrição	Área de texto	Padrão: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm…

Oferta

Opção	Tipo	Detalhes
Subtítulo	Texto	Padrão: Título da oferta
Texto de Parcelas	Texto	Padrão: 6x de
Preço	Texto	Padrão: R$ 52,74*
Texto à vista	Texto	Padrão: Ou R$ 69,00 à vista
Texto do Botão	Texto	Padrão: Quero comprar agora
Link do Botão	Link
Termos/Aviso	Área de texto	Padrão: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm…
Meios Pagamento	Lista
↳ Bandeira / Método de Pagamento	Seleção	Opções: Pix (`fab fa-pix`), Visa (`fab fa-cc-visa`), Mastercard (`fab fa-cc-mastercard`), American Express (`fab fa-cc-amex`), Diners Club (`fab fa-cc-diners-club`), Discover (`fab fa-cc-discover`), PayPal (`fab fa-cc-paypal`), Stripe (`fab fa-cc-stripe`), Hotmart (`svg_hotmart`), Boleto (`svg_boleto`), Eduzz (`svg_eduzz`), Kiwify (`svg_kiwify`), … (+1) · Padrão: fab fa-pix

Benefícios

Opção	Tipo	Detalhes
Itens da Lista	Lista
↳ Ícone	Ícone
↳ Texto do Benefício	Área de texto	Padrão: Lorem ipsum dolor sit amet

Opções da aba Estilo

A aba Estilo reúne 35 opções em 9 seções (a última é Animações, comum a todos os widgets Converto).

Seção	O que ajusta
Textos	Título Principal, Título Principal / Altura da Linha, Descrição Principal, Descrição Principal / Altura da Linha, Subtítulo do Card, Texto de Parcelas, Preço em Destaque, Preço em Destaque / Altura da Linha, Texto à Vista, Botão, Botão / Altura da Linha, Termos/Aviso, Termos/Aviso / Altura da Linha, Texto do Benefício, Texto do Benefício / Altura da Linha
Cores	Cor do Título, Cor da Descrição
Oferta	Fundo do Cartão, Cor do Título, Cor do Preço em Destaque, Cor dos Textos Secundários, Botão / Cor do texto, Botão / Cor do fundo, Cor dos Ícones
Benefícios	Cor do Texto, Cor dos Ícones
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
Arredondamento	Cartão / Raio da Borda, Botão / Raio da Borda
Animações	Entrada de textos e de imagens e ícones: tipo, velocidade, atraso e intervalo (veja Animações de entrada)

Comportamento responsivo

17 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 offer-01 na linha . Campos de conteúdo (bloco :::content):

Campo	Tipo	Obrigatório	Detalhes
`main_title`	Texto	Sim	Título principal na seção esquerda.
`main_desc`	Texto	Não
`card_subtitle`	Texto	Não	Subtítulo do card de oferta (acima do preço).
`card_installments_text`	Texto	Não	Texto de parcelas (ex. "6x de").
`card_price`	Texto	Não	Preço em destaque no card (ex. "R$ 52,74*").
`card_subprice`	Texto	Não	Texto complementar de preço (ex. "Ou R$ 69,00 à vista").
`button_text`	Texto	Não
`button_link`	Link	Não
`card_disclaimer`	Texto	Não	Aviso/termos abaixo do botão.
`payment_icons_list`	Lista	Não	Lista de ícones de meios de pagamento aceitos.
↳ `payment_icon`	Seleção	Não	Bandeira ou método de pagamento. · Opções: `fab fa-pix`, `fab fa-cc-visa`, `fab fa-cc-mastercard`, `fab fa-cc-amex`, `fab fa-cc-diners-club`, `fab fa-cc-discover`, `fab fa-cc-paypal`, `fab fa-cc-stripe`, `svg_hotmart`, `svg_boleto`, `svg_eduzz`, `svg_kiwify`, … (+1)
`benefits_list`	Lista	Não	Lista de benefícios (lado direito). Sempre forneça o ícone se relevante.
↳ `list_icon`	Ícone	Não	Sempre informe; use ícone de fonte (ex. far fa-check-circle) — SVG não é suportado neste widget.
↳ `list_text`	Texto	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

markdown

<!-- converto:offer-01 -->

:::content
main_title: Aproveite nossa oferta especial
main_desc: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
card_subtitle: Título da oferta
card_installments_text: 6x de
card_price: R$ 52,74*
card_subprice: Ou R$ 69,00 à vista
button_text: Quero comprar agora
button_link: https://exemplo.com/oferta
card_disclaimer: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
payment_icons_list:
  - payment_icon: fab fa-pix
  - payment_icon: fab fa-pix
benefits_list:
  - list_icon: fa-regular fa-circle-check
    list_text: Lorem ipsum dolor sit amet
  - list_icon: fa-regular fa-circle-check
    list_text: Lorem ipsum dolor sit amet
:::

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).