Comparador

Comparação lado a lado de 2 a 5 planos ou versões (ou contra concorrentes), com recursos agrupados em seções.

Intermediário7 min de leitura

Nesta página

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

Visão geral

Tabela comparativa: de 2 a 5 colunas (planos, versões ou concorrentes), recursos agrupados em seções e, em cada recurso, um valor por coluna ("sim" mostra o check, "não" ou vazio mostra o traço, ou texto/número como "5" e "Ilimitado"). Cada recurso pode ter um (?) com explicação em tooltip. Coluna destacável. Responsivo (rolagem lateral com 4 ou 5 colunas no celular).

Propriedade	Valor
Nome no editor	Comparador
Onde encontrar	Painel de widgets do Elementor, categoria Converto
Identificador no Elementor	`lgr-comparison`
Identificador no Markdown	`comparison`
Papel na página	Decisão (comparar planos)
Campos de conteúdo	9
Opções de estilo	50 (23 responsivas)

Quando usar

Situações em que este widget é indicado:

A página precisa comparar planos, pacotes ou versões de um produto lado a lado (o que cada plano inclui e seus limites).
A página precisa comparar a solução com alternativas ou concorrentes, recurso por recurso.
Há muitos recursos para caber nos cartões dos widgets de preço (pricing): a tabela vai logo abaixo deles.

Como adicionar

Abra a página no editor do Elementor.
No painel de widgets, abra a categoria Converto e arraste Comparador 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: Compare os planos
Descrição	Área de texto	Padrão: Veja o que cada plano inclui e escolha o ideal para o seu momento.
Título da primeira coluna	Texto	Padrão: Recursos · Aparece acima da lista de recursos. Vazio não exibe.

Colunas

Opção	Tipo	Detalhes
Colunas (de 2 a 5)	Lista
↳ Título da Coluna	Texto	Padrão: Plano
↳ Subtítulo (opcional)	Texto
Coluna destacada	Seleção	Opções: 1ª coluna (`1`), 2ª coluna (`2`), 3ª coluna (`3`), 4ª coluna (`4`), 5ª coluna (`5`), Nenhuma (``) · Padrão: 2 · Uma coluna recebe fundo, borda e cantos arredondados (use no plano recomendado).

Linhas

Opção	Tipo	Detalhes
Linhas da tabela	Lista
↳ Tipo da linha	Seleção	Opções: Item (recurso) (`item`), Seção (título de grupo) (`section`) · Padrão: item
↳ Texto	Texto	Padrão: Recurso
↳ Explicação	Área de texto
↳ Valor da coluna 1	Texto	Padrão: sim
↳ Valor da coluna 2	Texto	Padrão: sim
↳ Valor da coluna 3	Texto	Padrão: sim
↳ Valor da coluna 4	Texto
↳ Valor da coluna 5	Texto
Legenda: incluído	Texto	Padrão: Incluído no plano · Legenda abaixo da tabela, com o ícone de incluído. Vazio não exibe.
Legenda: não incluído	Texto	Padrão: Não incluído. · Legenda com o ícone de não incluído. Vazio não exibe.
Legenda: observação	Texto	Padrão: Os números indicam os limites de cada recurso.

Opções da aba Estilo

A aba Estilo reúne 50 opções em 10 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 da coluna, Título da coluna / Peso, Subtítulo da coluna, Título de seção (grupo), Título de seção / Peso, Recurso (item), Recurso / Peso, Valores (texto e números), Valores / Peso, Legenda
Cores	Título da Seção, Descrição da Seção, Título da Coluna, Subtítulo da Coluna, Título de Seção (grupo), Recurso (item), Valores (texto e números), Legenda, Ícone de incluído, Ícone de não incluído, Ícone de ajuda (?), Fundo do Título de Seção, Linhas Divisórias
Disposição	Largura da 1a coluna, Altura das linhas, Largura mínima da tabela, Linhas divisórias entre itens
Coluna Destacada	Fundo, Cor da borda, Espessura da borda, Raio da borda
Ícones	Ícone de incluído, Ícone de não incluído, Tamanho dos ícones de incluído e não incluído, Tamanho do ícone de ajuda (?)
Seções	Espaço interno vertical, Espaço interno horizontal, Raio da borda, Espaço acima do título de seção
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

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

Campo	Tipo	Obrigatório	Detalhes
`title`	Texto	Não	Título da seção (ex.: "Compare os planos").
`description`	Texto	Não
`feature_header`	Texto	Não	Título da primeira coluna (padrão "Recursos").
`columns_list`	Lista	Sim	Colunas da tabela, na ordem (de 2 a 5; use no máximo 3 ou 4 para boa leitura no celular). Os valores de cada linha seguem esta ordem: value_1 = primeira coluna, value_2 = segunda... Ajuste highlight_column para o número do plano recomendado.
↳ `column_title`	Texto	Sim	Nome do plano ou item comparado (ex.: Start, Plus, Pro).
↳ `column_subtitle`	Texto	Não	Texto curto sob o nome, normalmente o preço (ex.: "R$ 49/mês").
`highlight_column`	Seleção	Não	Número da coluna destacada (1 a 5, na ordem de columns_list; padrão 2). Só UMA coluna é destacada, com fundo, borda e cantos arredondados: use no plano recomendado. Para nenhuma, deixe vazio. · Opções: `1`, `2`, `3`, `4`, `5`
`rows_list`	Lista	Sim	Linhas da tabela, na ordem. Use row_type: section para o título de um grupo e row_type: item (padrão) para cada recurso. Agrupe os recursos em 3 a 6 seções.
↳ `row_type`	Seleção	Não	item (padrão): recurso com um valor por coluna. section: título de grupo (só usa row_label). · Opções: `item`, `section`
↳ `row_label`	Texto	Sim	Nome do recurso ou título da seção.
↳ `row_tooltip`	Texto	Não	Explicação curta do recurso, de 1 a 2 frases; cria o (?) com tooltip ao passar o mouse. Use nos recursos que o cliente pode não entender.
↳ `value_1`	Texto	Não	Valor da 1ª coluna: "sim" = incluído (ícone de check), "não" ou vazio = não incluído (traço); qualquer outro texto ou número (ex.: 5, 50, Ilimitado) aparece como está. Use sempre "sim" e "não" (ou "nao"); yes e no NÃO são atalhos: apareceriam como texto.
↳ `value_2`	Texto	Não	Valor da 2ª coluna (mesmas regras de value_1).
↳ `value_3`	Texto	Não	Valor da 3ª coluna (mesmas regras de value_1).
↳ `value_4`	Texto	Não	Valor da 4ª coluna, se houver.
↳ `value_5`	Texto	Não	Valor da 5ª coluna, se houver.
`legend_yes`	Texto	Não	Legenda abaixo da tabela para o ícone de incluído (padrão "Incluído no plano"). Vazio não exibe.
`legend_no`	Texto	Não	Legenda para o ícone de não incluído (padrão "Não incluído."). Vazio não exibe.
`legend_note`	Texto	Não	Observação abaixo da tabela (padrão "Os números indicam os limites de cada recurso."). Vazio não exibe.

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:comparison -->

:::content
title: Compare os planos
description: Veja o que cada plano inclui e escolha o ideal para o seu momento.
feature_header: Recursos
columns_list:
  - column_title: Plano
    column_subtitle: Texto de exemplo
  - column_title: Plano
    column_subtitle: Texto de exemplo
highlight_column: 1
rows_list:
  - row_type: item
    row_label: Recurso
    row_tooltip: Texto de exemplo
    value_1: sim
    value_2: sim
    value_3: sim
    value_4: Texto de exemplo
    value_5: Texto de exemplo
  - row_type: item
    row_label: Recurso
    row_tooltip: Texto de exemplo
    value_1: sim
    value_2: sim
    value_3: sim
    value_4: Texto de exemplo
    value_5: Texto de exemplo
legend_yes: Incluído no plano
legend_no: Não incluído.
legend_note: Os números indicam os limites de cada recurso.
:::

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