Como criar uma tabela de preços no editor de blocos do WordPress

Uma tabela de preços é uma representação bem estruturada de produtos e serviços, juntamente com seus respectivos preços e recursos. Ela permite que os clientes comparem diferentes planos de preços e escolham o que mais lhes convém.

O Bloco de tabela padrão do WordPress não possui muitos recursos avançados. Não é possível criar tabelas de preços abrangentes com ele. Você precisa de um plugin construtor de tabelas como o Tableberg para criar tabelas de preços incríveis.

Você pode criar tabelas de preços centradas na conversão mesmo com sua versão gratuita. Neste artigo, mostraremos a você como criar uma tabela de preços no WordPress usando o plugin Tableberg.

Criar mesas bonitas
Com o Block Editor

Escolha de um modelo de tabela de preços

O plug-in Tableberg vem com alguns modelos pré-criados de tabelas de preços. Você pode começar imediatamente escolhendo um desses modelos.

Etapa 1: Instalar e ativar o plug-in Tableberg

Ir para Plug-ins > Adicionar novo plug-in. Tipo Tableberg na caixa de pesquisa. Instalar e ativar o plug-in depois que ele aparecer abaixo.

Etapa 2: Adicione o bloco Tableberg ao seu post ou página

Abra o post ou a página em que você deseja criar a tabela de preços. Clique no ícone + e procure por "Tableberg". Clique no bloco Tableberg para inseri-lo.

Etapa 3: Escolha uma mesa pré-construída

Agora, se quiser, você pode criar uma tabela a partir do zero. Mostrarei isso mais tarde.

Vamos ver primeiro a opção pré-construída. Depois de inserir o bloco Tableberg, basta clicar em 'Pre-Built Tables'.

Uma biblioteca de padrões será exibida. Selecione a seção "Pricing Table" (Tabela de preços) e escolha um modelo de tabela de preços.

A tabela será inserida no editor.

Etapa 4: Personalizar a tabela

Selecione o bloco inteiro clicando no ícone Tableberg e, em seguida, clique no ícone Settings (Configurações) no canto superior direito. Você pode personalizar a tabela a partir daí.


Como criar uma tabela de preços do zero

Você também pode criar uma tabela do zero.

Etapa 1: Escolha o número de colunas e linhas

Depois de inserir o bloco Tableberg, defina o número da linha e da coluna. No entanto, você pode aumentar ou diminuir o número de linhas e colunas depois de criar a tabela, conforme necessário. Mas, por enquanto, estamos selecionando uma linha e uma coluna 4*4.

Definir o número da linha e da coluna

À medida que você adiciona muito conteúdo, pode precisar de mais espaço nas células da tabela. Portanto, é melhor aumentar a largura da tabela. Selecione a tabela inteira clicando três vezes no ícone TableBerg na barra de ferramentas.

Você obterá o Guia Configurações que aparece na barra lateral direita. Na tabela de configurações, você encontrará a opção Largura da mesa opção. Aumente sua largura conforme sua necessidade.

Aumentar a largura da tabela

Etapa 2: Adicionar títulos às colunas da tabela

Adicione títulos adequados às colunas da tabela. Suponha que criaremos uma tabela de preços para uma empresa de hospedagem na Web. Há quatro planos de preços na tabela. Portanto, o título da coluna será Econômico, Deluxe, Ultimate, e Máximo.

Você pode personalizar o texto do título e a cor do plano de fundo na respectiva guia na barra lateral direita. Você também pode aumentar a tipografia e o tamanho do texto.

Adicionar títulos às colunas da tabela de preços

Etapa 3: Adicionar preços e taxas de desconto às colunas da tabela de preços

Primeiro, adicione os preços dos planos em suas respectivas colunas. Deixamos os textos dos preços em negrito, um pouco maiores e coloridos em azul.

Adicionar preços à tabela de preços

A taxa de desconto geralmente fica muito próxima do preço principal. Coloque o cursor na célula de preço e crie um espaço abaixo dela, pressionando a tecla Botão Enter em seu teclado.

Depois disso, digite suas taxas de desconto desejadas nas respectivas colunas.

Adicionar taxas de desconto

Agora vamos destacar a taxa de desconto para que ela fique mais visível. Selecione a taxa de desconto área de texto com o cursor. Clique no botão Mais opções na barra de ferramentas. Selecione a opção Opção de destaque.

Selecione o texto da taxa de desconto na tabela de preços

Use um marcador de fundo para o texto da taxa de desconto. Aplicamos o código de cores #fcdc4b no plano de fundo da taxa de desconto na tabela de preços.

Use um marcador de fundo para o texto da taxa de desconto

Aplique o mesmo processo a cada coluna em suas respectivas áreas.

Use um marcador de fundo para todo o texto do desconto

Se houver alguma observação especial para os planos, você deverá especificá-la na área de preços. Veja, nós fizemos isso usando o primeiro sinal de colchete.

Adicionar notas especiais aos planos de preços

Etapa 4: Adicionar botões de CTA à tabela

Ao adicionar botões de CTA, você não pode fazer com que os usuários comprem seus produtos. Selecione a célula à qual você deseja adicionar o botão de CTA. Pressione o botão Ícone de mais (+) na célula e selecione a opção Botão CTA.

Adicione o bloco de botões às tabelas do TableBerg

Não abordaremos essa parte em detalhes. Tudo o que você precisa fazer aqui é escrever um texto de CTA atraente para cada botão. Vincular os botões à página de checkout. Adicionar cores de fundo e de texto para os botões.

Personalize os botões de CTA

Etapa 5: Adicionar recursos à tabela de preços

Por fim, você precisa listar todos os recursos de seus produtos e serviços com base em seus planos de preços. Se houver alguma palavra especial que você queira destacar, coloque-a em negrito.

Listar recursos para as tabelas de preços

Etapa 6: Visualizar a tabela de preços

Antes de publicar a tabela de preços, é melhor vê-la no modo de visualização para verificar se há algum erro. Se a tabela estiver totalmente limpa, você poderá publicá-la.

Visualizar a tabela de preços

Conclusão

Assim, você pode criar tabelas de preços informativas em seu site que ajudem os clientes a tomar decisões informadas. O TableBerg está lançando mais recursos novos com os quais você pode criar tabelas mais avançadas em seu site.

Se você gostou desta postagem, comente abaixo e deixe-nos saber sua opinião. Dê uma olhada em como criar uma tabela de comparação no WordPress.



A equipe do Tableberg