Os compradores de hoje avaliam as opções em segundos: alguns examinam os preços, outros comparam os recursos e muitos debatem sobre planos mensais ou anuais. Nesse ambiente de tomada de decisão em frações de segundo, o design de sua tabela de preços se torna o fator decisivo nas conversões.
Se você administra um serviço ou um negócio baseado em assinatura, sua tabela de preços precisa fazer mais do que listar opções para converter visitantes em clientes pagantes. Ela deve orientar a atenção, apoiar comparações e fazer com que o melhor plano pareça ser a escolha óbvia.
Uma tabela de preços bem projetada com uma alternância mensal/anual transforma uma tabela de preços padrão em algo muito mais dinâmico e focado no usuário. Ela não apenas exibe opções, mas orienta ativamente o olhar, enfatiza a economia e elimina o atrito da comparação.
Neste guia, você aprenderá a criar uma alternância limpa de preços mensais e anuais no WordPress usando um formato de tabela que fica ótimo em qualquer dispositivo.
Alternância de preços mensais/anuais
Básico |
Profissional |
Empresa |
|---|---|---|
Para pessoas físicas |
Para startups |
Para grandes empresas |
$99/mês |
$199/mês |
$299/mês |
|
|
|
Básico |
Profissional |
Empresa |
|---|---|---|
Para pessoas físicas |
Para startups |
Para grandes empresas |
$990/ano |
$1990/ano |
$2990/ano |
|
|
|
Como adicionar uma alternância de preço mensal/anual no WordPress
Agora que você já sabe como uma alternância de preços ajuda a simplificar as comparações e a destacar o valor, vamos percorrer as etapas para criar uma usando o plug-in Tableberg.
Etapa 1: Instalar e ativar o Tableberg
Vá até o painel do WordPress, acesse Plugins → Adicionar novo, procure por Tableberg e clique em Instalar agora, seguido de Ativar. Depois de ativado, você encontrará dois novos blocos no editor: Tableberg e Toggle for Tableberg.
Etapa 2: Adicionar a alternância para o bloco Tableberg
Abra o post ou a página onde deseja colocar sua tabela de preços. Clique no ícone de adição, pesquise Toggle for Tableberg e insira o bloco. Ele começa com três guias por padrão. Passe o mouse sobre qualquer guia para removê-la ou clique no sinal de mais para adicionar mais. Para essa configuração, mantenha apenas duas guias - uma para "Monthly" (Mensal) e outra para "Yearly" (Anual).
Etapa 3: Configurar as definições da guia
Com o bloco selecionado, use o painel de configurações à direita para ajustar as opções General e Style.
Na guia General (Geral), renomeie cada guia, escolha qual delas estará ativa por padrão e alinhe as guias conforme necessário.
Em Style (Estilo), você pode ajustar as cores das guias ativas e inativas, definir o espaçamento abaixo da alternância e ajustar o raio da borda para arredondar os cantos, se quiser um visual mais suave.
Etapa 4: Adicionar tabelas dentro de cada guia
Clique na primeira guia e crie a tabela. Ela conterá sua tabela de preços mensal. Repita o mesmo procedimento na segunda guia e adicione sua versão anual. Sua estrutura para ambas as tabelas deve permanecer a mesma, alterando apenas os preços e os rótulos relacionados.
Etapa 5: Personalizar as tabelas
Adicione nomes de planos, tags de público-alvo, preços, recursos e botões de chamada para ação dentro de cada coluna. Use blocos de parágrafos, listas e blocos de botões dentro das células da tabela.
Em seguida, abra as configurações gerais para definir o cabeçalho e o rodapé e ajuste recursos como cabeçalho fixo, classificação e pesquisa, se necessário. Por fim, use a guia estilo para ajustar o espaçamento, as cores de fundo, as bordas e o alinhamento para obter uma aparência limpa e consistente em ambas as tabelas.
Etapa 6: Salvar, visualizar e publicar
Não se esqueça de salvar seu trabalho primeiro. Em seguida, use a opção de visualização para verificar a aparência da alternância no desktop e no celular. Certifique-se de que a alternância de guias seja suave e que cada versão da tabela seja clara. Quando estiver satisfeito, clique em Publish (Publicar) para torná-lo ativo.
Considerações finais
Uma alternância de preços mensal/anual não é apenas um truque de design. É uma maneira prática de apresentar opções de faturamento flexíveis sem sobrecarregar seu layout. Com o Tableberg, você não precisa de plugins extras ou código personalizado para fazer isso direito. Você pode criar uma tabela de preços responsiva e bem estruturada que ajuda os visitantes a comparar os planos com clareza e escolher o que melhor se adapta a eles.
Reserve um tempo para configurar a alternância com cuidado e você terá uma página mais limpa e uma experiência de tomada de decisão mais tranquila para seus usuários.
