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 a você um guia passo a passo sobre como criar uma tabela do WordPress com alternância. Vamos começar.
Criar mesas bonitas
Com o Block Editor
Como criar uma tabela de preços no WordPress com alternância
Antes de mergulhar no tutorial, você deve ter MesaBerg e Blocos definitivos plug-ins instalados em seu site. Com o TableBerg, você pode criar uma tabela de preços, e o Ultimate Blocks permitirá que você adicione o recurso de alternância à tabela.
Depois de instalar os plug-ins em seu site, comece o processo do tutorial.
Etapa 01: Adicionar o bloco de conteúdo com guias
Depois que o plug-in Ultimate Blocks for instalado e ativado, você obterá o Conteúdo com guias na biblioteca de blocos. Localize e adicione o bloco ao editor.
O bloco Tabbed Content será adicionado ao editor instantaneamente.
Etapa 02: Adicionar o bloco TableBerg dentro do bloco Tabbed Content
O bloco Tabbed Content permitirá que você adicione outros blocos dentro dele. Clique no ícone botão de adição (+). Localize o bloco TableBerg e adicione-o.
Etapa 03: Criar uma tabela de preços na primeira guia
Defina o número de linhas e colunas de sua tabela. Estamos selecionando 3*3 porque queremos criar uma tabela de três colunas.
Você pode ver que o layout da tabela está pronto.
Etapa 04: Adicionar conteúdo à tabela
O bloco TableBerg permite que você adicione vários tipos de conteúdo às suas células. Você pode adicionar textos, listas, imagens, botões de CTA e muito mais.
# Adicionar títulos de coluna
Primeiro, precisamos adicionar títulos às colunas da tabela. Criaremos aqui uma tabela de preços para um plugin imaginário. Portanto, nosso conteúdo será de acordo com isso.
Você pode ver que adicionamos três títulos, os alinhamos de forma centralizada e aumentamos o tamanho deles.
# Adicionar planos de preços
Em seguida, adicione planos de preços às colunas. Nós os colorimos usando a opção Highlight (Destaque) na barra de ferramentas do Gutenberg.
Lista de recursos do produto #
Agora é hora de listar os recursos de cada plano. O TableBerg permite que você adicione os Bloco de listas à tabela. Localize e adicione o bloco List à tabela.
Você pode ver que listamos todos os recursos de cada plano em todas as colunas.
# Adicionar botões de CTA
Por fim, comece a adicionar botões de CTA às colunas usando o Bloco de botões.
Os botões de CTA estão prontos na tabela de preços.
Portanto, sua mesa está pronta. Você pode personalizar e estilizar a mesa como quiser. Espero que você consiga fazer isso sozinho.
Etapa 05: Criar uma nova tabela em outra guia
Crie uma nova guia clicando no botão ícone de mais (+). Não se esqueça de renomear as guias de acordo com suas preferências.
Crie uma nova tabela nessa guia da mesma forma que descrevemos acima. Alinhamos centralmente os títulos das guias para melhor visualização.
Portanto, sua tabela de preços com o recurso de alternância está pronta. Visualize a tabela em uma nova guia para ver se tudo está funcionando bem.
Conclusão
A criação de tabelas de preços com o recurso de alternância é agora uma inteligência seguida por quase todos os sites de classe padrão. A maioria dos sites as cria usando construtores de páginas e tipos semelhantes de soluções, o que geralmente torna a página pesada.
No entanto, como o TableBerg e o Ultimate Blocks são dois plug-ins baseados em blocos, eles nunca tornarão as páginas de preços pesadas. Você pode até mesmo testá-los em seus sites de teste ou no host local. Você desfrutará de uma velocidade leve e rápida.
Deixe-nos saber sua opinião na caixa de comentários abaixo. Além disso, não hesite em nos perguntar se tiver alguma dúvida.
