Crie tabelas de preços com o editor de blocos Gutenberg

Em mais de um ano vimos uma grande evolução no editor de blocos Gutenberg. Comparado ao editor clássico do WordPress, agora podemos criar elementos em nossos posts e páginas que antes só podiam ser feitos por codificação.

Por exemplo, com o editor clássico, a maneira mais fácil de mostrar uma tabela em um post era criar essa tabela em uma planilha, exportá-la como uma imagem e depois inseri-la no post onde você queria mostrá-la. Mas um dos blocos que agora encontramos no novo editor do WordPress é o bloco de tabela. Vamos ver como criamos uma tabela com o Gutenberg e até que ponto poderíamos criar uma tabela de preços com este mesmo bloco.

O Bloco de Mesa

Criar uma tabela é tão fácil quanto adicionar um novo bloco Tabela no qual indicamos o número de linhas e colunas que desejamos e seu alinhamento.

Em um bloco Tabela, podemos personalizar as seguintes propriedades:

Também podemos indicar em cada célula o alinhamento do texto e se a fonte está em negrito ou itálico e adicionar links. Além disso, podemos modificar a tabela a qualquer momento adicionando ou removendo linhas e/ou colunas.

Desta forma, vemos que podemos facilmente criar a seguinte tabela:

Isso é muito mais simples e rápido do que poderíamos fazer com o editor clássico. E o resultado obtido certamente pode servir para mostrar uma tabela de dados.

Limitações do Bloco de Tabela

Embora tenha sido muito fácil para nós criar a tabela anterior, encontramos algumas limitações. Por um lado, as tabelas que você cria com o bloco Table type no Gutenberg não são responsivas. Ou seja, a tabela não quebra, mas fica menor sem poder mostrar os diferentes elementos da tabela por colunas:

Uma tabela que se adapta totalmente aos dispositivos mostra os elementos da tabela dividindo a tabela em colunas, para que todas as células sejam exibidas muito melhor.

Além da (in)capacidade de adaptação aos dispositivos, como você deve ter notado, em um bloco de tabela não podemos alterar facilmente o tipo e tamanho da fonte, cores, etc. em cada célula. Ou seja, devido a todas as suas limitações, o bloco de mesa Gutenberg não é útil para criar uma tabela de preços atrativa para seus produtos.

Como podemos criar essas tabelas responsivas?

Alternativas

O bloco de colunas

Uma alternativa seria tentar colocar a tabela com o bloco de colunas:

Básico

para freelancers e sites pessoais

29€/mês

1 local

5.000 visitas às páginas testadas

Se inscrever

Profissional

para pequenos empreendedores

89€/mês

5 locais

35.000 visitas às páginas testadas

Se inscrever

Empreendimento

para equipes focadas em otimizar

259€/mês

? 10 locais

200.000 visitas às páginas testadas

Se inscrever

A vantagem do bloco de colunas, em comparação com o bloco de Tabelas, é que ele é totalmente responsivo, e na tela do celular veremos que cada um dos planos é exibido atrás do outro.

Vemos que as colunas são totalmente responsivas. E com certeza as colunas, para mostrar pouca informação e sem muitas complicações, são uma alternativa a considerar.

Plugins de Bloco de Tabela de Preços

Minha recomendação se você tiver que criar tabelas de preços atraentes é que instale alguns dos plugins que incluem blocos para isso. Eles podem não permitir, sem tocar no código, qualquer tipo de personalização, mas em muitos casos você pode obter resultados muito elegantes. Vejamos alguns exemplos totalmente integrados com o editor de blocos Gutenberg.

CoBlocks

Coblocks é um plugin que inclui todo um conjunto de blocos totalmente adaptados ao Gutenberg. Um deles é o bloco Price Table.

É muito simples e fácil de usar e, sem codificação, você pode personalizar o número de colunas e alguns aspectos relacionados à tipografia, assim como as cores das colunas e do texto. Você rapidamente tem uma tabela de preços totalmente responsiva como a mostrada na imagem a seguir.

Getwid

Da mesma forma, o plugin Getwid também inclui um conjunto completo de blocos totalmente compatíveis com o editor Gutenberg. Rapidamente, você pode criar facilmente uma tabela de preços totalmente responsiva como esta:

Nesse caso, você pode personalizar as fontes e as cores de fundo e de texto.

Blocos Premium para Gutenberg

O plugin Premium Blocs for Gutenberg também inclui blocos com os quais você pode criar tabelas de preços muito atraentes. Abaixo mostro uma imagem da tabela de preços que criei com o bloco Tabela de Preços inserido nas colunas.

Este bloco permite personalizar cores, fontes, tipo de botões, se deseja incluir um ícone, propriedades de como exibir o preço, características, descrição, entre outros. Como você pode ver, permite uma personalização muito completa.

Plugins com editores integrados

Alternativamente, você encontrará outros tipos de plugins que incluem um editor de tabela de preços integrado que se integra ao seu painel do WordPress e com o qual você pode criar tabelas muito completas e personalizadas. Uma vez que a tabela desejada é construída, esta tabela pode ser incluída em qualquer página ou post usando um shortcode. Vejamos alguns exemplos:

Tabela de preços responsiva

Responsive Pricing Table é um plugin que adiciona um novo editor ao seu WordPress para que você possa criar tabelas de preços. Você pode adicionar um grande número de planos e personalizar cada um deles.

Para cada plano, você pode adicionar o nome, legenda, descrição e preço. Você também pode adicionar uma lista de recursos, personalizar o botão de compra e alterar o esquema de cores do plano.

Depois que o plano for criado, basta adicioná-lo usando um código de acesso na página de preços.

Tabela de preços da Supsystic

O plugin Supsystic Pricing Table adiciona um editor de arrastar e soltar ao seu painel do WordPress com o qual você pode criar tabelas. Ele oferece muitos designs de mesa responsivos. Na versão gratuita, você tem até 7 designs disponíveis.

Depois de selecionar o design de tabela desejado, você tem um editor que permite modificar o número de colunas e personalizar muitos recursos de cada um dos planos mostrados. E você também pode alterar o layout a qualquer momento. Finalmente, como antes, a tabela pode ser incluída em qualquer página ou post com um shortcode.

Outros plugins gratuitos que integram editores de tabelas de preços são:

• Tabela de preços por ARPrice
• Plugin WordPress de Tabelas de Preços – Tabelas de Preços Fáceis por Fatcat Apps
• Construtor de tabela de preços responsivo – wpPricing Builder
• Tabelas de Preços WRC
• Construtor de Tabelas de Preços – Tabelas de Preços AP Lite
• Tabela de preços de TC por temasCódigo
• Tabela de preços - bh A WP Life

Conclusão

Como você vê, no WordPress você tem uma grande variedade de alternativas para construir tabelas de preços sem nenhum custo extra e sem precisar codificar diretamente. Portanto, é só escolher a opção que melhor se adapta às suas necessidades.

Lembre-se que a página onde você mostra os preços dos seus produtos acaba sendo a mais crítica para conseguir clientes. Portanto, o tempo que você gasta tornando-o atraente não será em vão. E para te inspirar, você pode dar uma olhada no design da tabela de preços do nosso produto Nelio A/B Testing, que é o que se destaca como imagem de destaque deste post?.