Principais conclusões
- Uma tabela de preços no Elementor é uma linha de placas de plano, cada uma com um preço, uma pequena lista de recursos e um botão; ele foi construído para clicar em um plano.
- Uma tabela de comparação de Elementor é uma grade com uma linha por recurso e uma coluna por plano ou produto; ele é construído para responder “qual plano tem X” antes do clique.
- O widget Master Addons Pricing Table produz um widget de cartão por widget, com cinco layouts, uma fita, um preço de venda e dicas de ferramentas de recursos; o widget Tabela de Comparação (Master Addons Pro) forma toda a matriz em um widget com até seis colunas.
- A maioria das páginas de preços precisa de ambos: cartões no topo para a decisão, uma tabela de comparação abaixo para o detalhe, vinculados por um “Compare cada âncora de run-H-U-N.
- Um cartão de preços deve conter de três a sete linhas de recursos; qualquer coisa mais longa pertence à tabela de comparação, onde uma dica de ferramenta pode explicar uma linha sem alongá-la.
- O widget Tabela de Comparação muda para um layout empilhado abaixo de um ponto de interrupção definido por você, que mantém uma matriz de seis colunas legível em um telefone.
Uma tabela de comparação Elementor e uma tabela de preços Elementor parecem relacionados e fazem trabalhos diferentes A tabela de preços é uma linha de cartões que pede ao visitante para escolher um plano A tabela de comparação é uma grade que permite ao visitante verificar um recurso em cada plano antes de colocar o errado na frente do leitor e eles ou não podem decidir ou não podem encontrar o detalhe.
Este post mostra um exemplo de cada um, construído com Master Addons nos mesmos três planos, e define quando cada um é suficiente, quando você precisa de ambos, e como eles se encaixam em uma página O widget Tabela de Preços está no plugin Master Addons; o widget Tabela de Comparação está em Complementos mestres Pro.
Índice
A diferença em uma frase
Uma tabela de preços mostra os planos como cartões e pede uma decisão; uma tabela de comparação mostra características como linhas e suporta a decisão com detalhes A tabela de preços é lida de cima para baixo dentro de um cartão A tabela de comparação é lida da esquerda para a direita em uma linha Essa direção de leitura é toda a diferença, e decide o que cada um pode segurar.
O que uma tabela de preços faz
Uma tabela de preços coloca cada plano em seu próprio cartão: nome, para quem ele é, preço e período, uma pequena lista de recursos e um botão Um cartão é levantado com uma fita para que o leitor tenha um padrão O leitor compara os cartões olhando para a linha, que só funciona enquanto cada cartão permanece curto.
O limite é a lista de características Cinco linhas por cartão lê em poucos segundos Quinze linhas por cartão significa que o leitor rola dentro da linha e perde a comparação Se você se encontrar escrevendo “e muito mais” na parte inferior de um cartão, o cartão atingiu seu limite e o resto pertence a uma tabela de comparação.
O que uma tabela de comparação faz
Uma tabela de comparação lista cada recurso uma vez, na primeira coluna, e marca o valor de cada plano na linha: um número, uma palavra ou um tick and cross A linha de cabeçalho carrega os nomes e preços do plano e uma linha de botões na parte inferior liga cada coluna para finalizar a compra O leitor encontra o único recurso com o qual se preocupa e lê.
Como cada recurso é uma linha, a tabela pode conter vinte ou trinta recursos sem ficar mais larga Fica mais longa, o que rola bem Uma dica de ferramenta em um nome de recurso mantém a linha curta enquanto explica o que o recurso significa, e é por isso que as tabelas de comparação de planos nas páginas de preços SaaS carregam pequenos ícones de informações ao lado dos rótulos.
Tabela de preços vs tabela de comparação lado a lado
| Fator | Tabela de preços | Tabela de comparação |
|---|---|---|
| Forma | Uma carta por plano, em linha | Uma linha por recurso, uma coluna por plano |
| Direção leitura | Abaixo de uma carta | Através de uma linha |
| Características que pode segurar | Três a sete por cartão | Dezenas |
| Trabalho | Obtenha um clique em um plano | Resposta “o plano X tem característica Y” |
| Plano destacado | Cartão elevado, fita, botão sólido | Coluna destacada |
| Preço | Grande, em cada cartão | Na linha do cabeçalho |
| Coloque na página | Topo, sob o título | Abaixo dos cartões, ou em sua própria página |
| Widget de complementos mestre | Tabela de preços, um widget por cartão | Tabela de Comparação (Pro), um widget para a matriz |
| Móvel | Cartões empilhados em uma coluna | Pilhas abaixo de um ponto de interrupção definido por você |
Quando uma tabela de preços é suficiente
Uma tabela de preços por si só é suficiente quando os planos diferem por um punhado de limites e o leitor pode decidir sobre o preço Três planos com site “1, 5 sites, sites ilimitados” e cinco linhas cada não precisam de uma matriz Um único plano em uma página de destino é um cartão Um site de associação com dois níveis é dois cartões Se cada recurso cabe nos cartões sem embrulho e ninguém pergunta “o plano Starter inclui X” no suporte, pare por aí.
O dicas de design de mesa de preços cubra como manter os cartões curtos: três a seis palavras por linha, as mesmas linhas na mesma ordem em cada cartão e uma dica de ferramenta para as duas linhas que recebem perguntas Para cartões prontos, a tabela de preços tem modelos de postagem com cinco layouts e sete seções com suas configurações.
Quando você precisa de uma tabela de comparação
Você precisa de uma tabela de comparação quando os planos diferem por muitos recursos, quando os recursos precisam ser explicados ou quando o leitor está comparando seu produto com o de outra pessoa. A tabela também traz as respostas de tick e cross que os cartões lidam mal: um cartão com recursos riscados riscados parece uma lista de coisas que você não pode ter, enquanto uma linha de ticks e cruzes parece informação.
Uma tabela de comparação também funciona por conta própria para comparações de produtos que não são sobre planos em tudo, como três modelos de um produto ou seu plugin contra dois rivais O widget Tabela de comparação leva uma imagem por coluna para que, com um título, um preço e um botão.
Como usar ambos em uma página
A maioria das páginas de preços SaaS executar ambos Os cartões sentar-se no topo sob o título eo interruptor cobrança; a tabela de comparação fica mais abaixo na página sob um título como “Compare cada recurso”, com um link de âncora de debaixo dos cartões Os cartões fazem a venda para o leitor que já sabe o que quer A tabela pega o leitor que passou pelos cartões porque faltava uma linha.
Mantenha os nomes dos planos, ordem e preços idênticos em ambos Se os cartões dizem Starter, Crescimento, Agência da esquerda para a direita, as colunas da tabela dizem o mesmo Destaque o mesmo plano em ambos: um cartão elevado acima, uma coluna colorida abaixo E dê à tabela sua própria linha de botões para que o leitor que decidiu na tabela não role de volta para cima para clicar.
Construindo cada um em Elementor
A tabela de preços
Adicione um recipiente, dê-lhe três recipientes para crianças e solte um Widget de tabela de preços em cada. defina o layout dos cinco no menu suspenso, depois o nome do plano, legenda, preço, período e recursos na guia Conteúdo. Ative a tabela de destaque e a faixa de opções do cartão do meio. Defina os itens alinhados do contêiner pai para esticar para que as cartas correspondam às alturas.
A tabela de comparação
Largue um Widget de tabela de comparação na página Escolha uma skin dos quatro, defina o número de produtos (até seis) e adicione os nomes dos recursos à lista Recursos Em seguida, abra cada coluna de produto: título, preço, texto do botão e link, e uma entrada por recurso em que o tipo é Sim, Não, um ícone ou texto A guia de estilo tem uma configuração de ponto de interrupção responsiva que decide onde a tabela se acumula em telas pequenas.
Ambos os widgets editam no painel Elementor, portanto os nomes e preços dos planos são textos que os mecanismos de pesquisa leem e que você pode alterar sem tocar em uma imagem.
Quer ambos de um plugin? O Widget de tabela de preços constrói as cartas e o Widget de tabela de comparação em Master Addons Pro constrói a matriz sob eles.
Perguntas frequentes
Elementor tem um widget de tabela de comparação?
No. Elementor e Elementor Pro não têm widget de tabela de comparação O Índice, Tabela de preços e widgets de lista de preços no Pro fazer outros trabalhos Uma matriz de recursos vem de um addon; o widget Tabela de comparação de addons mestre está no Master Addons Pro.
Uma tabela de preços pode mostrar uma comparação de recursos?
Apenas um curto Cada cartão detém sua própria lista de recursos, então uma comparação entre planos significa ler três listas lado a lado Até cerca de sete linhas que funcionam Passado isso, coloque a lista completa em uma tabela de comparação e mantenha os cartões para as linhas que diferem.
Qual é a diferença entre uma tabela de preços e uma tabela de comparação de preços?
Uma tabela de preços é uma linha de cartões de plano com um preço cada Uma tabela de comparação de preços é uma matriz de características com planos como colunas, geralmente com preços no cabeçalho A primeira vende um plano; a segunda permite ao leitor verificar as características antes de escolher.
Quantas colunas uma tabela de comparação pode ter?
O widget Tabela de comparação de complementos mestre leva até seis colunas de produtos mais a coluna de recursos Em um telefone ele empilha abaixo do ponto de interrupção que você define no widget, para que cada plano se torne seu próprio bloco.
A tabela de comparação deve estar na página de preços ou em sua própria página?
Na página de preços, abaixo dos cartões, para a maioria dos sites Uma página separada divide a decisão do detalhe e perde leitores entre os dois Mova-a para sua própria página somente quando a matriz for executada em dezenas de linhas.
Pensamentos finais
Cartões com três a sete linhas e um plano destacado recebem o clique Uma matriz com uma linha por recurso responde às perguntas que param o clique Na maioria das páginas de preços os cartões vão para o topo e a matriz vai para baixo, com os mesmos nomes de plano, ordem e destaque em ambos.
Construa as cartas com o Widget de tabela de preços e a matriz com o Widget de tabela de comparação, e ligue-os com uma âncora.
Leitura relacionada
