Quando os compradores pesam duas ou três opções, uma tabela lado a lado responde às suas perguntas mais rapidamente do que rolar entre páginas separadas Tabela Comparação widget em Complementos Mestres para Elementor constrói essa tabela: uma coluna de recursos ao lado, uma coluna por produto na parte superior e um botão de preço mais compra em cada um. Você preenche no painel Elementor, sem necessidade de tabelas HTML.
Cada célula pode conter texto, um tick ou uma cruz, para que ele leia rapidamente Quatro estilos de layout, um número ajustável de colunas de produtos e controle de cores completo significam que a tabela pode corresponder a qualquer página Este guia cobre todas as configurações, desde as linhas de recursos até a faixa de zebra.
Prefere assistir primeiro? este pequeno tutorial percorre o widget Tabela de Comparação de ponta a ponta:
O que o widget Tabela de Comparação faz #
O widget estabelece uma grade: os nomes dos recursos são executados na primeira coluna e cada produto recebe sua própria coluna com um título, preço, valor por recurso e um botão de call-to-action Altere a contagem de produtos e as colunas se ajustem para corresponder.
Você digita tudo à mão, por isso não depende do WooCommerce Isso o torna tão útil para comparar plug-ins, níveis de serviço ou hardware quanto para produtos de loja.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- Os produtos e a lista de recursos que você deseja comparar.
Como adicionar o widget Tabela de Comparação #
No editor Elementor, abra o Elementos painel e pesquisa Tabela Comparação, ou vá até a seção Complementos mestres Arraste-o para sua página e uma tabela de amostra aparecerá, já preenchida com produtos e recursos de espaço reservado para que você edite a partir de um layout funcional em vez de uma grade em branco.
Configurações gerais: layout e contagem de produtos #
Abrir o Conteúdo guia e o Geral a seção contém as duas configurações que moldam toda a mesa.
- Layouts: escolha Estilo 1, 2, 3 ou 4. cada um reorganiza o cabeçalho, o preço e as colunas em uma aparência diferente.
- Produtos: defina quantas colunas de produtos a tabela mostra Eleve o número e uma seção de Produto correspondente aparece abaixo para cada nova coluna.
Defina as linhas de recursos #
O Características Caixa seção define a coluna da esquerda, a lista de coisas que você está comparando O Título é o rótulo no topo (como “Features” ou “Product”), e o Características o repetidor contém um item por linha.
Cada item de recurso é um rótulo de linha, como Tamanho, Garantia ou Disponibilidade. Usar Adicionar Item para adicionar linhas, o ícone de cópia para duplicar uma, e o X para removê-la Há também um Botão Cabeçalho campo para a linha que contém os botões de compra.
Preencha cada coluna de produto #
Cada produto recebe sua própria seção (Produto 1, Produto 2, e assim por diante).No interior, você define o título da coluna, preço, imagem, texto do botão e link, em seguida, o valor para cada linha de recurso.
A parte útil é a linha por linha Conteúdo controle. Para cada recurso você escolhe um tick, uma cruz, um ícone de informações ou texto simples Uma grade de tick-and-cross é lida instantaneamente, enquanto os campos de texto se adequam a especificações como “1 Year” ou “All sizes.” An Substituir estilo alternar permite que uma única coluna se destaque, o que é útil para destacar sua escolha recomendada.
Escolha um estilo de layout #
Os quatro layouts mudam a aparência da tabela sem tocar no conteúdo A alternância entre eles é uma maneira de um clique para encontrar o estilo que se encaixa na página.
Estilo 4 transforma as colunas em cartões separados com cabeçalhos curvos e coloridos, uma aparência mais ousada para uma comparação em destaque.
Estilo 2 flutua um crachá de preço circular acima de cada coluna com uma barra de título colorida abaixo dela Aqui a tabela é definida como quatro produtos, mostrando como as colunas são dimensionadas.
Estilize a mesa #
O Estilo tab controla a cor e o espaçamento. O Geral a seção define a aparência de toda a tabela, com o restante dividido em Caixa Característica, Produtos, Botão, e Padrões (uma opção Pro).
- Cor da linha estranha e cor da linha par: a listra de zebra que facilita a leitura de mesas longas.
- Tipo, largura e cor da borda: as linhas entre as células.
- Raio da caixa e espaçamento entre colunas: cantos arredondados e o espaço entre as colunas de produtos.
- Caixa de recurso, produtos, botão: tipografia, cores, alinhamento e preenchimento para cada parte da tabela.
O resultado na página #
Publique ou visualize e a tabela renderiza com seus recursos, produtos, preços e botões no lugar, linhas de zebra e tudo Abaixo está uma tabela Estilo 2 com três produtos.
Casos de uso comum #
- Comparações de produtos colocando dois ou três modelos lado a lado.
- Plano ou níveis de preços quando você quer uma grade em vez de empilhada tabelas preços.
- Matrizes de recursos de plug-in ou software com linhas de carrapatos e cruzadas.
- Pacotes de serviço comparando o que cada nível inclui.
- Tabelas EUA-contra-eles destacando seu produto com a alternância Override Style.
Dicas para trabalhar com o widget Tabela de Comparação #
- Use ticks e cruzes para recursos sim/não. Eles escaneiam mais rápido que as palavras “Yes” e “No” e mantêm a mesa arrumada.
- Mantenha os rótulos dos recursos curtos. Uma ou duas palavras por linha impedem que a primeira coluna se alargue.
- Destaque uma coluna com estilo de substituição. Uma cor diferente guia o olho para sua opção recomendada.
- Defina as cores da zebra com contraste suficiente. Cores de linha alternadas são o que tornam uma tabela longa legível.
- Combine a contagem de produtos com a tela. Três colunas cabem na maioria dos layouts; quatro ou mais podem ficar apertados em telas menores.
Perguntas frequentes #
O que é o widget Tabela de comparação em Master Addons?
É um widget Elementor que constrói uma grade de comparação lado a lado Nomes de recursos são executados na primeira coluna e cada produto obtém sua própria coluna com um título, preço, valor por recurso e um botão Você insere tudo à mão, por isso não precisa de WooCommerce.
Quantos produtos posso comparar na tabela?
Você define o número no campo Produtos em Geral Eleve-o e uma nova seção Produto aparece para cada coluna que você adicionar Três colunas se adequam à maioria das larguras de página, enquanto quatro ou mais funcionam melhor em layouts mais amplos.
Posso mostrar marcas de marcas e cruzadas em vez de texto?
Sim. Em cada seção de produto, cada linha de recursos possui um controle de conteúdo onde você escolhe um tick, uma cruz, um ícone de informações ou texto simples. As marcas de tick e cruz tornam os recursos sim/não digitalizáveis, enquanto o texto se adapta a especificações como duração da garantia.
Quantos estilos de layout a Tabela de Comparação possui?
Quatro. Estilo 1 é uma tabela clássica, Estilo 2 adiciona emblemas de preço circular, e Estilo 4 transforma as colunas em cartões com cabeçalhos curvos, Trocando layouts reorganiza o mesmo conteúdo, para que você possa tentar cada um sem refazer seus dados.
Posso destacar uma coluna de produto?
Sim. Cada seção de produto tem um botão Substituir Estilo que permite dar a uma coluna suas próprias cores Use-o para fazer com que sua opção recomendada se destaque das outras na tabela.
Embrulhando #
O widget Tabela de comparação transforma uma lista de produtos e recursos em uma grade clara, lado a lado: escolha um layout, defina o número de colunas, adicione suas linhas de recursos e preencha cada coluna com valores, preços e botões Uma vez que não depende do WooCommerce, ele cai em qualquer página Emparelhe-o com o Widget de tabela de preços para páginas de planos, navegue por completo Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.
