Principais conclusões
- Um bom design de tabela de preços mostra três ou quatro planos lado a lado, com um plano visualmente elevado acima do resto para que o leitor tenha um padrão para escolher.
- Uma tabela de preços se converte melhor quando cada cartão segue a mesma ordem: nome do plano, para quem é, preço, período de cobrança, uma pequena lista de recursos e um botão.
- As linhas de recursos devem ter de três a seis palavras cada; uma linha que envolve uma segunda linha retarda a leitura e torna as cartas irregulares.
- Um preço original riscado ao lado do preço de venda dá ao leitor uma âncora, e o widget Master Addons Pricing Table tem um switch Sale exatamente para isso.
- Uma alternância mensal e anual precisa de dois conjuntos de cartões; em Master Addons, o widget Toggle Content (Pro) alterna entre dois modelos de seção salvos.
- Em um telefone, os cartões de preços são empilhados em uma coluna, portanto, o plano destacado deve ficar em primeiro ou segundo lugar, não em terceiro.
O design da tabela de preços decide se um visitante que já quer seu produto pode encontrar o plano certo em alguns segundos O layout é simples: uma linha de cartões, um preço cada, um botão cada As decisões que importam são menores do que isso: quantos planos, qual é aumentado, como é o preço, quanto tempo cada linha de recursos é executada e o que o botão diz.
Este post percorre dez dicas de design de tabelas de preços, cada uma mostrada em uma tabela real construída com o widget Tabela de Preços da Master Addons for Elementor Os exemplos usam planos inventados (Iniciante, Crescimento, Agência) para que você possa copiar a estrutura sem copiar os preços Onde uma dica precisa de um segundo widget, como a alternância mensal e anual, o post diz qual e se está no plano Pro.
Índice
1. mostre três planos, quatro no máximo
Três planos é o design da tabela de preços que a maioria dos leitores pode comparar num relance Dois planos forçam uma decisão sim ou não Cinco ou mais planos transformam a mesa em uma planilha, e o leitor começa a rolar lateralmente em um laptop e desistir de um telefone.
Coloque o plano que você quer que a maioria das pessoas compre no meio As pessoas leem uma linha da esquerda para a direita, mas elas se instalam no centro, que também é onde o olho pousa primeiro em um telefone quando os cartões se empilham Se você vender um plano de Agência ou Empresa com preços personalizados, mantenha-o como um quarto cartão com um botão “Contacte-nos” em vez de uma tabela separada.
No Elementor, cada cartão é um widget de Tabela de Preços colocado em sua própria coluna ou contêiner Três widgets em um contêiner de três colunas, cada conjunto para o mesmo layout, dá a tabela acima O Página do widget da tabela de preços possui a lista de controle completa e cinco layouts ao vivo.
2. Levante um plano acima do resto
Um plano destacado dá ao leitor um padrão, e a maioria irá levá-lo O destaque faz três coisas de uma só vez: o cartão é um pouco mais alto ou levantado, o botão usa a cor de acento em vez do estilo de contorno, e uma fita nomeia a razão (“Most popular”, “Best value”, “Recommended”).
Destaque exatamente um cartão Dois cartões destacados se cancelam Escolha o plano com a melhor margem para você que ainda se encaixa na maioria dos leitores, não o mais caro.
No widget Tabela de preços, ligue Destaque Mesa na guia Conteúdo, abra o Fita seção para definir o texto, alinhamento, posição e rotação Dê ao cartão destacado uma cor de botão diferente na guia Estilo para que ele não dependa apenas da fita.
3. faça o preço a coisa a mais grande no cartão
O preço deve ser o maior texto do cartão, maior que o nome do plano Os leitores digitalizam uma tabela de preços para os números primeiro e leem os nomes dos planos em segundo lugar, de modo que um design que torna o nome maior que o preço os retarda.
Mantenha o símbolo da moeda e o período de faturamento menor que o número. “$49” lê mais rápido que “49.00 USD por mês” Se você descontar um plano, mostre o preço original riscado ao lado do preço de venda O número riscado é uma âncora: 49 parece mais barato quando 69 senta-se ao lado dele do que sozinho.
O widget tem um Venda mude sob Preços. Ligue-o, preencha o Preço Original, e o strike-through aparece automaticamente Escolha a moeda na lista ou digite seu próprio símbolo.
4. nomeie o plano depois do comprador, não do nível
Os nomes dos planos funcionam melhor quando dizem ao leitor para quem é o plano. “Starter, Growth, Agency” diz mais de “Básico, Padrão, Premium” e um subtítulo de uma linha sob cada nome (“Para um site”, “Para equipes pequenas”, “Para trabalho do cliente”) remove a adivinhação.
Evite nomes que precisam da lista de recursos para fazer sentido Se um leitor tiver que comparar linhas para descobrir qual plano é o “Standard”, o nome falhou Evite piadas e codinomes internos pelo mesmo motivo.
O widget Tabela de Preços tem um Título e a Legenda campo na seção Cabeçalho, além de um ícone opcional e tag O subtítulo é o lugar certo para “Para equipes pequenas”.
5. mantenha as linhas de recursos curtas e na mesma ordem
Cada linha de recurso deve caber em uma linha, três a seis palavras Linhas longas se envolvem, as cartas se tornam irregulares e o leitor para de comparar entre os planos porque as linhas não se alinham mais.
Ordenar as linhas da mesma forma em cada carta, com as linhas que mudam entre os planos no topo (“1 site” vs “5 sites” vs “Unlimited sites”).Five to seven rows per card is o suficiente Se você tiver vinte recursos, a tabela de preços é o lugar errado para eles: coloque os cinco primeiros aqui e link para uma tabela de comparação para o resto.
O widget Características repetidor leva um texto, um ícone e uma dica de ferramenta opcional por linha Usar o mesmo ícone para cada recurso incluído e um diferente (ou nenhum) para características que um plano não inclui, de modo que o padrão visual corresponde através de cartões.
6. coloque o detalhe em uma dica de ferramenta, não na linha
Uma dica de ferramenta permite manter a linha curta e ainda responder à pergunta “o que isso inclui?” A linha diz “Todos os widgets”; a dica diz “Todos os widgets”; a dica diz “Todos os widgets e extensões”.
Use dicas de ferramentas para as duas ou três linhas que geram perguntas de suporte, não para cada linha Um cartão onde cada recurso tem um sublinhado pontilhado parece que está escondendo algo Mantenha o texto da dica de ferramenta em uma frase.
No widget Tabela de Preços, cada linha no repetidor de Recursos possui um Dica de ferramenta switch, um campo de texto e uma opção de colocação (superior, inferior, esquerda, direita).
7. Um botão por cartão, com um verbo
O botão é o único elemento no cartão que faz qualquer coisa, então dê um trabalho e rotule-o com um verbo. “Get started”, “Start free trial”, “Choose Growth” todo trabalho. “Submit” e “Click aqui” não.
Sob o botão, uma linha de confiança curta remove a última objeção: “Cancelar a qualquer momento”, “14-day money back”, “Nenhuma carta necessária”. Mantenha-o com cinco palavras e não empilhe três delas.
O widget Rodapé seção tem o texto do botão, o link e um Informações Adicionais campo para a linha de confiança Se você vender com Easy Digital Downloads, a mesma seção tem um botão de compra EDD que se liga diretamente ao produto Para um produto WooCommerce, vincule o botão ao produto ou à página de checkout.
8. Adicione uma alternância mensal e anual somente quando valer a pena mostrar a economia
Uma alternância mensal e anual faz sentido quando o faturamento anual economiza ao leitor uma quantia clara, geralmente dois meses ou mais. Se o desconto anual for pequeno, a alternância adiciona uma etapa sem alterar a decisão, e uma única linha “billed anual” faz o mesmo trabalho.
Mostre o preço anual por mês (“$39 /mês,” anual faturado) em vez do total anual completo, para que os dois estados de alternância se comparem como para like. Coloque a economia ao lado da alternância (“Save 20%”) para que o leitor saiba por que a mudança existe antes de clicar nela.
O widget Tabela de preços detém um preço por cartão, então a alternância vem de um segundo widget Construa um conjunto de cartões com preços mensais e um com preços anuais, salve cada um como um modelo de seção e coloque ambos no Alternar widget Conteúdo, que está no plano Master Addons Pro. A página Toggle Content tem as etapas de configuração e um exemplo ao vivo.
9. Escolha um layout que corresponda à página e mantenha-o
O layout de uma tabela de preços deve corresponder à seção ao seu redor: um cartão simples em uma página SaaS limpa, um cabeçalho arredondado em uma marca mais suave, uma imagem de fundo quando o resto da página usa fotografia Escolha um e use-o para cada cartão da tabela.
Misturar layouts dentro de uma mesa é um erro comum O leitor lê a diferença de formato como uma diferença nos planos Mantenha as cores limitadas também: uma cor de destaque para o cartão destacado, uma neutra para o resto.
O widget Tabela de Preços tem cinco layouts no traçado dropdown (Padrão, Conteúdo Alinhado à Esquerda, Tabela Arredondada, Tabela com Imagem BG e Padrão Skew BG), e o conteúdo permanece no lugar quando você alterna entre eles O Biblioteca de modelos possui seções de preços construídas sobre esses layouts, se você preferir começar com um design finalizado.
10. verifique a tabela em um telefone antes de publicar
Em um telefone os cartões empilhar em uma coluna, de modo que o leitor vê um plano de cada vez e rola passado os outros Isso muda duas decisões: qual cartão vem primeiro, e quão alto cada cartão é.
Coloque o plano destacado em primeiro ou segundo lugar no celular Se ele ficar em terceiro lugar na área de trabalho, use a ordem responsiva do Elementor no contêiner para movê-lo para cima Mantenha as listas de recursos em cinco linhas para que um cartão caiba em aproximadamente uma tela e torne o botão largo o suficiente para tocar.
Abra o modo responsivo Elementor (o ícone do telefone na parte inferior do painel) e verifique a tabela no ponto de interrupção móvel Os controles da guia Estilo do widget Tabela de Preços têm switches responsivos, para que você possa reduzir a fonte de preço e o preenchimento nos telefones sem alterar a versão desktop.
Quer todas as dez dicas em um widget? O Widget de tabela de preços tem o interruptor de destaque, fita, preço de venda, dicas de ferramentas de recursos e cinco layouts como controles de painel, de modo que cada ponta acima é uma configuração em vez de CSS personalizado.
Perguntas frequentes
Quantos planos uma tabela de preços deve ter?
Três é o número mais seguro, e quatro funciona quando um plano tem preços personalizados Dois planos força uma escolha sim ou não, e cinco ou mais para de encaixar lado a lado em uma tela de laptop e se transforma em um longo pergaminho em um telefone.
Qual plano deve ser destacado em uma tabela de preços?
Destaque o plano que se encaixa na maioria dos leitores e ainda tem uma boa margem para você, geralmente o do meio Eleve-o com uma sombra, um botão sólido e uma fita como “Most popular” Destaque apenas uma carta; duas cartas destacadas se cancelam.
Como adiciono uma alternância mensal e anual a uma tabela de preços do Elementor?
Construa dois conjuntos de cartões de preços, um com preços mensais e outro com anual, e salve cada um como um modelo de seção O widget Alternar conteúdo no Master Addons Pro mostra um modelo de cada vez atrás de um switch O widget Tabela de preços em si detém um preço por cartão.
Uma tabela de preços deve mostrar o preço original riscado?
Sim quando um plano é descontado Um preço original riscado ao lado do preço de venda dá ao leitor uma âncora, e o preço de venda parece menor do que parece sozinho No widget Master Addons Pricing Table, o switch Sale e o campo Preço Original fazem isso.
Como faço colunas de tabela de preços com a mesma altura no Elementor?
Coloque os cartões em um contêiner e defina seus Itens de Alinhamento para Esticar, depois dê a cada plano o mesmo número de linhas de recursos As linhas que envolvem duas linhas são a causa usual de cartões irregulares, portanto, encurte o texto antes de ajustar o preenchimento.
Pensamentos Finais
O design da tabela de preços se resume a uma pequena lista: três planos, um aumentado, o preço como o texto maior, nomes de planos que dizem para quem é o plano, linhas de recursos que cabem em uma linha, dicas de ferramentas para o detalhe, um botão com um verbo, uma alternância somente quando a economia anual for real, um layout por tabela e uma verificação em um telefone Cada um dos dez exemplos acima foi construído com o widget Tabela de Preços e algumas configurações do painel.
Se você está começando do zero, abra o Página do widget da tabela de preços para ver os cinco layouts ao vivo ou escolha uma seção de preços finalizada no Biblioteca de modelos e mudar os planos O widget é um dos widgets e extensões em Master Addons, e o widget Alternar conteúdo para a troca de cobrança está nos planos do página preços.
Leitura Relacionada
- Widget de tabela de comparação: a matriz completa de recursos à qual uma tabela de preços deve vincular
- Widget de tabela dinâmica: uma tabela de preços com um preço por linha, para menus e listas de serviços
- Botões Animados Elementor: estilos de botão para o rodapé do cartão
- Widgets de Marketing de Elementor: os outros widgets de conversão em Master Addons
- Preços Tabela documentação widget: todo controle explicado
- Construtor Tema: modelos de cabeçalho e rodapé para o restante da página de preços
