A criação de uma tabela de preços é obrigatória se você quiser vender seus produtos e serviços pelo site. Mas para exibir vários planos de preços que os clientes possam comparar facilmente sem sair da página, você deve adicionar o recurso de alternância à tabela.
O recurso de alternância permite que os usuários naveguem ou alternem entre diferentes conjuntos de opções de preços, criando uma interface interativa. Por exemplo, os usuários podem alternar entre planos de assinatura mensais, anuais e vitalícios.
Nesta postagem do blog, mostraremos um guia passo a passo sobre como criar uma tabela de preços no WordPress com um botão de alternância usando o Tableberg. Vamos começar.
Etapa 1: Instalar e ativar o Tableberg
Primeiro, instale e ative o Tableberg em seu site WordPress. Se você ainda não o instalou, obtenha o plug-in aqui.
Depois de instalado e ativado, você estará pronto para começar a criar sua tabela de preços.
Observação: Embora o Tableberg tenha um versão gratuitaNo entanto, o recurso de alternância só está disponível na versão profissional.
Etapa 2: Adicionar a alternância para o bloco Tableberg
O Tableberg Pro vem com um poderoso Alternância para Tableberg que permite organizar tabelas em guias sem esforço.
Para adicionar esse bloco:
- Abra o editor do WordPress e clique no botão + botão para adicionar um novo bloco.
- Procurar por Alternância para Tableberg e selecione-o.
- O bloco de alternância será adicionado ao seu editor.
Etapa 3: Criar uma tabela de preços na primeira guia
Dentro do Alternância para Tableberg bloco, você pode criar uma tabela do zero ou escolher uma tabela pré-criada. Para fins deste tutorial, escolheremos uma tabela pré-criada.
- Dentro do Alternância para Tableberg bloco, você pode
- Clique no botão + botão dentro da guia e procure o Tableberg bloco.
- Defina o número de linhas e colunas de sua tabela de preços (por exemplo, 3×3 para três planos).
- O layout da tabela será gerado instantaneamente.
Etapa 4: Adicionar/Editar conteúdo à tabela
Agora, é hora de adicionar ou editar o conteúdo de sua tabela de preços.
# Adicionar títulos de coluna
- Clique na primeira linha e digite os nomes dos planos de preços (por exemplo, Basic, Standard, Premium).
- Alinhe-os centralmente e aumente o tamanho da fonte para melhorar a visibilidade.
# Adicionar planos de preços
- Na segunda linha, insira o preço de cada plano.
- Use o Opção de destaque para diferenciar os preços.
Lista de recursos do produto #
- Cada coluna deve incluir uma lista de recursos para o respectivo plano.
- O Tableberg permite que você insira um Bloco de listas diretamente dentro da tabela.
# Adicionar botões de CTA
- Use o Bloco de botões dentro do Tableberg para criar botões de chamada para ação (por exemplo, "Buy Now" ou "Get Started").
- Personalize o texto, a cor e o estilo do botão.
Etapa 5: Adicionar outra tabela de preços a uma nova guia
Clique no botão Aba 2 no bloco Toggle for Tableberg para adicionar uma nova tabela em outra guia. Em seguida, repita as mesmas etapas acima para criar outra tabela de preços para a nova guia.
Depois de concluir essas etapas, sua tabela de preços com funcionalidade de alternância estará pronta. Visualize sua tabela para verificar se tudo está funcionando sem problemas.
Etapa 6: Personalizar a alternância para o bloco Tableberg
Para tornar sua tabela de preços mais atraente visualmente e alinhada com sua marca, você pode personalizar o Alternância para Tableberg bloco:
Renomear as alternâncias: Clique em cada guia e altere o rótulo para corresponder aos seus planos de preços, como Mensal, Anual ou Vitalício.
Alterar o alinhamento da guia: No painel de configurações do bloco, escolha alinhar as guias à esquerda, ao centro ou à direita, de acordo com sua preferência de design.
Estilizar as guias: Na guia Styles (Estilos), personalize a cor do plano de fundo, a cor do texto e a borda dos botões de alternância para torná-los visualmente consistentes com o design do seu site.
Essas personalizações simples podem melhorar muito a experiência do usuário e garantir que a tabela de preços combine perfeitamente com a aparência geral do seu site.
Conclusão
A criação de tabelas de preços com um recurso de alternância é essencial para uma experiência de usuário perfeita. Com Tableberg Toggle do Pro para Tableberg bloco, agora você pode criar tabelas de preços interativas diretamente no WordPress sem a necessidade de plug-ins adicionais.
Experimente e conte-nos sua opinião nos comentários abaixo!
