A apresentação de suas tabelas de preços é importante para influenciar os clientes. Uma maneira eficiente de aprimorar as tabelas de preços é incorporar uma faixa de opções. Visualmente, é uma faixa impressionante de etiquetas exibidas diagonalmente em uma tabela para destacar ofertas, descontos e recursos específicos.
Quer você esteja promovendo um desconto por tempo limitado, um recurso especial ou pacotes de grande venda, uma fita bem posicionada pode influenciar instantaneamente os clientes em potencial a tomar decisões. Tableberg é um plug-in intuitivo e avançado para fazer isso.
Nesta postagem, mostraremos a você como adicionar uma tabela de preços com faixa de opções no WordPress com o Tableberg.
Criar mesas bonitas
Com o Block Editor
Depois de instalar o plug-in em seu site, comece a seguir o tutorial.
Etapa 01: Adicionar o bloco Tableberg ao Editor
O plug-in adiciona um bloco chamado Tableberg à biblioteca de blocos do Gutenberg. Para adicionar o bloco ao editor, basta pressionar o ícone de mais (+).
Defina o número de colunas e linhas necessárias para sua tabela. Para este tutorial, definiremos 3*1 para colunas e linhas.
Você pode ver que o layout básico da tabela de preços foi criado com colunas e uma linha.
Etapa 02: Adicionar conteúdo à tabela
Uma tabela de preços geralmente inclui nomes de produtos, imagens, preços, preços com desconto e botões de CTA. Vamos ver como adicioná-los à tabela.
Adicionar o nome do produto
O Tableberg permite que você adicione diferentes tipos de blocos às suas células, como o editor de blocos do Gutenberg. Adicione o bloco Bloco de parágrafos para escrever o nome do produto. (Por padrão, o bloco de parágrafos é adicionado às células da tabela).
Escreva o nome de seu produto na célula. Alinhe o texto centralmente, deixe-o em negrito, altere sua cor e redimensione-o usando as opções mostradas na imagem abaixo.
Adicionar a imagem do produto
Adicione o bloco Image à tabela de preços.
O bloco de imagem permitirá que você carregue a imagem do produto. Redimensione a imagem conforme necessário e alinhe-a adequadamente.
Adicionar um preço anterior
Mostrar a diferença entre o preço anterior e o atual é uma ótima maneira de destacar o desconto. Portanto, vamos adicionar um preço anterior sob a imagem do produto.
Adicionar um efeito de tachado ao preço anterior pode chamar a atenção das pessoas. Para fazer isso, selecione o preço usando o cursor. Clique em o Mais opções na barra de ferramentas.
Ir para o Destaque e Opções de tachado. Você poderá alterar a cor do preço e adicionar um tachado.
Adicionar o preço atual do produto
Agora, adicione o preço atual do produto em uma fonte comparativamente maior para chamar a atenção das pessoas.
Adicionar um botão de CTA
No final de todo o conteúdo, adicione a tag Bloco de botões.
Altere a cor de fundo, a cor do texto, o tamanho da tipografia e o preenchimento do botão. Faça essas alterações como desejar.
Etapa 03: Adicionar espaços entre os blocos
Portanto, o conteúdo da coluna está pronto. Mas, como você pode ver, todos os blocos estão muito congestionados. Precisamos adicionar espaçamento entre eles para criar um visual mais fresco.
Para fazer isso, selecionar a coluna específica. Em seguida, vá para a seção Guia Estilos. Venha para o Espaçamento entre blocos opção rolando a guia. Aumente o espaço adicionando um valor à caixa.
Da mesma forma, adicione conteúdo às outras colunas. Mas, para economizar tempo, você pode duplicar a coluna e depois atualizar o conteúdo. Aqui está um guia sobre como duplicar uma coluna e uma linha do Tableberg.
Etapa 04: Adicionar raio às colunas da tabela
Você pode aprimorar a estética adicionando um raio de borda às colunas da tabela. Selecione o Ícone de Tabelberg na barra de ferramentas. Ir para o Guia Estilos.
Rolagem e vir para Espaçamento entre células. Ao arrastar a respectiva opção, você pode adicionar espaços entre as colunas da tabela.
Você verá o Borda da mesa logo abaixo. Conjunto seu desejo Valor do raio for tanto a borda interna quanto a externa.
Assim, você pode preparar sua tabela de preços.
Etapa 05: Adicionar uma faixa de opções à tabela de preços
Selecione a coluna à qual você deseja adicionar uma faixa de opções. Pressione o ícone de mais (+) e localize a opção Bloco de fitas. Em seguida, clique e o bloco na coluna.
A faixa de opções será adicionada à tabela. Em seguida, na seção Guia ConfiguraçõesSelecione o tipo de fita, o texto da fita, o lado e a distância.
Depois disso, personalize o texto e a cor de fundo na seção Guia Estilos.
Portanto, sua tabela de preços está pronta com uma fita.
Fechando!
Espero que você tenha gostado deste tutorial. Mas há vários pontos que você deve lembrar. Certifique-se de que sua tabela esteja limpa e organizada. Os designs minimalistas de tabelas de preços sempre causam impacto nos clientes em potencial.
Em segundo lugar, use um texto claro e conciso que conecte instantaneamente os visitantes da Web. Se possível, adicione alguns benefícios/características dos produtos na tabela. Se quiser abranger vários planos em suas tabelas de preços, é melhor exibi-los com um botão de alternância.
Aqui está um guia sobre Como criar uma tabela de preços com o botão de alternância no WordPress.
