As tabelas são um componente chave na maioria dos sites. Você pode usá-las para compartilhar todos os tipos de informações, desde preços até listas de recursos e links. O WordPress permite que você configure tabelas básicas para o seu site, mas você pode estar procurando por mais opções de personalização.

Com o Elementor, você tem acesso a vários widgets de tabela. Além disso, há muitos plugins de tabela do Elementor que adicionam novos widgets ao popular construtor de páginas.

Neste artigo, vamos falar sobre como as tabelas do WordPress funcionam e como elas se comparam com os widgets do Elementor. Depois, mostraremos a você como criar tabelas Elementor manualmente, e apresentaremos a você alguns plugins que adicionam novos widgets de tabela ao editor. Vamos nessa!

Quando usar as tabelas do WordPress

Quando você começar a procurá-las, você vai notar que as tabelas estão em toda parte na web. Isso porque elas são alguns dos elementos mais versáteis que você pode usar em um site.

Veja as tabelas de preços, por exemplo. É difícil encontrar um site de serviços ou assinaturas que não use tabelas para ajudá-lo a comparar opções:

Tabelas de preços na Kinsta
Tabelas de preços na Kinsta

As tabelas permitem que você apresente grandes quantidades de informação de uma maneira que seja fácil para os leitores digerirem. Melhor ainda, as tabelas tornam mais simples para os usuários comparar vários conjuntos de dados uns com os outros:

Comparação de múltiplos conjuntos de dados
Comparação de múltiplos conjuntos de dados

Além de ajudá-lo a compartilhar informações, tabelas também podem ajudar a quebrar a monotonia de longos parágrafos em um artigo de blog ou em uma página. Tipicamente, recomendamos que você evite longas paredes de texto, pois elas podem ser difíceis de navegar.

O Block Editor lhe dá a opção de adicionar tabelas ao seu site com facilidade. O Bloco de Tabelas permite que você defina o número de linhas e colunas que você precisa:

Tabelas do editor de blocos WordPress
Tabelas do editor de blocos WordPress

Embora adicionar tabelas no WordPress seja fácil, você está um pouco limitado quanto às opções de customização. Você pode mudar as cores de fundo, personalizar os estilos dos botões e modificar os tamanhos das fontes, mas isso é praticamente tudo. Se você quiser criar tabelas mais elegantes e complexas, você precisará usar um construtor de páginas como o Elementor (ou Divi).

O que uma tabela do Elementor pode fazer

Se você quiser ir além das tabelas básicas do WordPress, o Elementor lhe dá acesso a um widget de tabela de preços altamente customizável. Isto permite a você editar títulos de tabelas, definir tags de cabeçalho, adicionar listas de recursos, ajustar chamadas para ação (CTAs), e muito mais:

Elementor Price Table widget
Elementor Price Table widget

Lembre-se que com o Elementor, você pode criar qualquer tipo de layout que você quiser para qualquer página ou artigo. Isto significa que você pode criar designs multicolunas para que você possa ter vários widgets da Tabela de Preços lado a lado:

Widgets da tabela de preços em Elementor lado a lado
Widgets da tabela de preços em Elementor lado a lado

o Elementor também vem com um widget de Índice. Isto torna a navegação pelo conteúdo de forma longa muito mais fácil para seus leitores.

Como criar uma tabelo Elementor (manualmente)

Criar uma tabela de preços usando o Elementor é simples. Para começar, abra o editor do Elementor. A partir daqui você pode escolher começar com uma página em branco ou importar um modelo da biblioteca do Elementor:

Escolha uma página ou modelo da biblioteca do Elementor
Escolha uma página ou modelo da biblioteca do Elementor

Quando você estiver pronto para adicionar o elemento, você vai querer selecionar o número de colunas que você quer que a tabela tenha. Clique no sinal Elementor plus na parte inferior do editor e selecione a estrutura de colunas que você deseja usar para a seção de preços:

Selecione o número de colunas que você deseja
Selecione o número de colunas que você deseja

Tenha em mente que se você usar várias colunas, você precisará adicionar um widget de Tabela de Preços separado em cada uma delas. Embora cada tabela seja um elemento único, os usuários, verão lado a lado (ou abaixo uns dos outros no celular) como parte de uma seção:

Adicionar múltiplos widgets de tabela quando necessário
Adicionar múltiplos widgets de tabela quando necessário

Recomendamos adicionar primeiro um módulo Tabela de Preços e estilizá-lo. Então, você pode duplicar ou copiar esse elemento nas colunas restantes, e adicionar texto único a cada uma delas.

Para personalizar a tabela, selecione o elemento e vá para a aba Estilo sob as configurações do widget. o Elementor fornece a você muitas opções de estilo. Estas incluem seleção de cores, configurações tipográficas e configurações únicas para cada seção da tabela:

Personalize a tabela usando as opções de estilo do Elementor
Personalize a tabela usando as opções de estilo do Elementor

Quando você estiver satisfeito com o estilo da tabela de preços, clique com o botão direito do mouse sobre o elemento e selecione a opção Duplicar. Uma cópia da tabela aparecerá sob o elemento original, e você pode arrastá-la para uma das colunas vazias:

Duplique sua tabela para economizar tempo
Duplique sua tabela para economizar tempo

Você vai querer repetir esse processo para tantas colunas quantas você tiver. Tenha em mente que cada tabela pode ter um estilo único se você preferir não reutilizar as configurações. Nesse caso, certifique-se de que os estilos sejam similares o suficiente para que os visitantes entendam que estão olhando para uma comparação.

Enquanto personaliza sua tabela, lembre-se que o Elementor permite que você adicione CSS personalizado a qualquer módulo. Para fazer isso, vá para as configurações avançadas do widget e selecione a aba Custom CSS :

Adicionar CSS personalizado
Adicionar CSS personalizado

Adicionar CSS personalizado através do Elementor é muito mais fácil do que editar o código do WordPress manualmente. Da mesma forma, editar CSS no WordPress requer que você acesse arquivos do tema e otimize o código para obter o máximo de performance. Com o Elementor, você só precisa adicionar o código CSS no campo correspondente para cada módulo.

Se adicionar o CSS manualmente parece intimidante, não se preocupe. O aprendizado do CSS não requer que você seja um desenvolvedor web. Entretanto, é uma habilidade valiosa que o ajudará a personalizar seus sites WordPress (e talvez até mesmo a encontrar uma carreira em desenvolvimento web).

Uma vez que todas as suas tabelas estejam definidas, é hora de editar o texto delas e adicionar tantas características quanto você precisar para cada entrada. Você pode fazer isso selecionando uma tabela e passando para a aba Conteúdo sob as configurações do widget:

Editar texto de tabela e outro conteúdo de tabela
Editar texto de tabela e outro conteúdo de tabela

Editar o conteúdo da sua tabela de preços é fácil. Você pode clicar em qualquer elemento dentro do widget para começar a editá-lo. Assim que você estiver satisfeito com os resultados, sua tabela de preços estará pronta para ser editada.

Os melhores plugins de tabelas Elementor (12 opções)

Embora o Elementor contenha muitas ferramentas para ajudá-lo a criar tabelas, você sempre pode adicionar mais widgets à lista. Nesta seção, veremos 12 plugins para o Elementor que você pode usar para adicionar novos tipos de tabelas aos seus artigos e páginas. Mesmo que muitos destes addons sejam construídos para o Elementor, você pode instalá-los como plugins regulares.

Como sempre, só recomendamos os melhores plugins WordPress da categoria que oferecem ótimo desempenho e que recebem atualizações regulares. O uso de plugins bem otimizados irá ajudá-lo a escalar seu site sem ter problemas de desempenho.

1.ElementsKit Add-Ons for Elementor

ElementsKit
ElementsKit

ElementsKit adiciona mais de 85 widgets ao Elementor. Você tem opções para tabelas básicas, tabelas de preços, suporte para incorporação de elementos TablePress e muito mais.

A versão Professional do ElementsKit também inclui um widget de tabelas avançadas. Isto permite que você adicione recursos de busca e filtragem às tabelas. Além disso, você pode incluir paginação para que os usuários possam navegar pelas entradas sem ter tabelas massivas em seu site.

Principais Características:

  • Três tipos de widgets de tabela
  • Suporte para filtragem de tabelas, busca e paginação
  • Integração com o TablePress para a incorporação de tabelas

Preço: As licenças da ElementsKit começam em $39 por ano.

2. WP Table Builder

WP Table Builder
WP Table Builder

Se você é um fã dos editores de arrastar e soltar (que você deve ser se você estiver usando Elementor) você vai gostar de usar o WP Table Builder. Este plugin permite que você construa tabelas usando elementos pré-configurados como botões, seções de revisão, classificações de produtos, e mais.

Além de elementos avançados, você tem acesso a módulos básicos, tais como texto e imagens. O plugin também vem com modelos de tabela, o que tornará seu trabalho ainda mais simples.

Você pode adicionar tabelas WP Table Builder ao seu site usando o Editor de Blocos. O plugin também se integra com o Elementor, facilitando a colocação de tabelas em qualquer lugar dentro do seu site.

Principais Características:

  • Use um construtor de tabelas de arrastar e soltar
  • Obtenha acesso a elementos pré-construídos, tais como botões, seções de revisão e classificações de produtos
  • Personalize o estilo de cada elemento em suas tabelas
  • Use modelos de páginas pré-construídas

Preço: As licenças do WP Table Builder começam em $39 por ano.

3. TablePress

TablePress
TablePress

O TablePress é um plugin gratuito que está o mais próximo possível de adicionar funcionalidades de planilhas ao WordPress. O plugin pode importar dados em vários formatos, incluindo arquivos Excel, CSV e JSON. Você pode até mesmo exportar dados de tabelas para outros programas.

Com o TablePress, você pode criar tabelas que incluem a funcionalidade de busca. Os usuários podem escolher quantas entradas a serem exibidas e mover de página para página se você estiver mostrando conjuntos de dados massivos.

Embutir as tabelas TablePress com o Elementor é simples. O plugin cria atalhos únicos para cada tabela. O widget de código de atalho do Elementor ajudará você a adicionar esses códigos em qualquer lugar do seu site.

Principais Características:

  • Importar e exportar conjuntos de dados nos formatos Excel, CSV, JSON e HTML
  • Adicionar tabelas pesquisáveis ao WordPress
  • Habilitar paginação para tabelas

Preço: TablePress é um plugin gratuito, mas você pode encontrar extensões premium para ele.

4. Essential Addons for Elementor

Essential Addons
Essential Addons

O Essential Addons for Elementor adiciona mais de 80 novos widgets ao construtor da página. Você tem opções para tabelas de preços, tabelas de dados, tabelas de conteúdo e muito mais.

O Essential Addons for Elementor vem em duas versões. O plugin gratuito adiciona uma versão melhor do widget da tabela de preços que o Elementor envia. Se você quiser acesso às tabelas de dados (que incluem filtragem, busca e estilos múltiplos), você precisará pagar por uma licença premium.

Principais Características:

  • Adicionar preços, dados e widgets de tabela de conteúdo
  • Habilitar a busca e filtragem dentro das tabelas

Preço: Há uma versão gratuita do Essential Addons for Elementor e licenças premium a partir de $39,97 por ano.

5. PowerPack for Elementor

PowerPack for Elementor
PowerPack for Elementor

PowerPack for Elementor adiciona mais de 70 widgets ao construtor da página. O plugin também inclui um grande número de novos modelos que você pode usar para projetar sites mais rapidamente.

Até onde as tabelas vão, o PowerPack permite que você crie tabelas de dados classificáveis e pesquisáveis. Você pode importar dados para tabelas usando arquivos CSV. O plugin também inclui múltiplas opções de modelos de tabelas.

Além das tabelas de dados, o PowerPack oferece informações e widgets de tabela de preços. As tabelas de informações são perfeitas se você quiser fornecer aos visitantes uma lista dos serviços que você oferece.

Principais Características:

  • Criar tabelas de dados classificáveis e pesquisáveis
  • Importar tabelas de dados em formato CSV
  • Adicionar widgets de tabela de preços e informações

Preço: As licenças PowerPack começam em $44 por ano.

6. Exclusive Addons for Elementor

Exclusive Addons for Elementor plugin
Exclusive Addons for Elementor

Exclusive Addons for Elementor vem tanto na versão gratuita quanto na versão premium. O plugin gratuito adiciona 39 novos widgets ao Elementor, enquanto que uma licença premium irá lhe colocar na rede mais de 69 novos elementos.

Quando se trata de tabelas, a versão gratuita adiciona um novo módulo de tabela de preços ao mix. Com a versão premium, você tem acesso a tabelas de comparação e de dados. As tabelas de comparação funcionam de forma similar aos elementos de preços, mas você pode usar novos layouts e estilos.

Principais Características:

  • Adicionar um novo módulo da tabela de preços
  • Obtenha acesso à comparação e tabelas de dados
  • Acesse vários layouts para widgets de tabela

Preço: Há uma versão gratuita de Exclusive Addons for Elementor. As licenças Premium começam em $29 por ano.

7. JetElements

JetElements
JetElements

A JetElements adiciona 45 novos widgets ao Elementor. A maioria deles é voltada para sites de Commerce e assinaturas. No entanto, a JetElements também inclui vários widgets de tabela interessantes em sua lista.

Entre esses widgets, você tem tabelas de preços e de resposta. Comparada com as tabelas de preços base do Elementor, a versão JetElements oferece a você muitas novas opções de personalização. Por exemplo, você pode jogar com muitos efeitos visuais, como paralaxe e micro animações para os elementos da tabela.

Principais Características:

  • Adicionar preços e tabelas de resposta ao Elementor
  • Personalizar tabelas usando novos efeitos visuais, tais como paralaxe

Preço: As licenças com tudo incluído da JetElements começam em $130 por ano. Você também pode criar pacotes de widgets personalizados, escolhendo apenas as opções que você deseja usar.

8. Addons Premium for Elementor

Premium Addons for Elementor
Premium Addons for Elementor

Premium Addons for Elementor vem tanto na versão gratuita quanto na versão premium. Entretanto, apenas o plugin premium adiciona novos widgets de tabela para o Elementor.

Se você pagar por uma licença premium, você terá acesso a novos dados e widgets de tabela de preços. Você pode acompanhar as tabelas de dados com gráficos e widgets de gráficos se você quiser exibir mais informações para seus visitantes.

Principais Características:

  • Adicionar dados e widgets de tabela de preços no Elementor
  • Acompanhe tabelas com gráficos e widgets gráficos

Preço: As licenças para Premium Addons para o Elementor começam em $39 por ano.

9. DataMentor

DataMentor
DataMentor

DataMentor é um plugin que adiciona um único widget de tabela no Elementor. No entanto, esse widget tem muito mais recursos do que a maioria dos add-ons que vimos até agora.

As tabelas DataMentor são incrivelmente versáteis. Você pode adicionar imagens, botões, listas e ícones dentro de cada elemento. O widget permite que você crie tabelas com estilos individuais para cada coluna ou linha. Você também tem acesso a vários modelos de tabelas se você quiser dar início ao processo de design.

Principais Características:

  • Adiciona um novo widget de tabela no Elementor
  • Obtenha acesso a múltiplos modelos de tabelas
  • Adicionar imagens, textos, botões, listas e ícones dentro de tabelas

Preço: O DataMentor é um plugin gratuito.

10. Happy Addons for Elementor

Happy Addons
Happy Addons

Happy Addons for Elementor é um dos plugins mais abrangentes para o construtor de páginas. Esta ferramenta adiciona mais de 99 widgets no Elementor e uma ampla coleção de novos modelos à sua biblioteca.

Até onde as tabelas vão, Happy Addons inclui tanto widgets de tabela básicos quanto avançados. A versão avançada suporta dados importados em múltiplos formatos, assim como busca, filtragem e paginação. Além disso, você tem acesso a múltiplos layouts de tabelas pré-desenhadas. Além dessas opções, o Happy Addons também inclui elementos de tabela de preços e comparação.

Principais Características:

  • Acesso a widgets de tabela básicos e avançados
  • Importação de dados para os avançados
  • Use layouts de tabela pré-desenhados
  • Adicionar tabelas de preços e comparação

Preço: Há uma versão gratuita de Happy Addons. As licenças Premium começam em $39 por ano.

11. Royal Elementor Addons

Royal Elementor Addons
Royal Elementor Addons

Royal Elementor Addons adiciona mais de 40 novos widgets no Elementor. Todos eles são gratuitos, mas o plugin também vem em uma versão premium que desbloqueia opções adicionais de customização para cada widget.

Com a Royal Elementor Addons, você obtém uma nova tabela de preços para usar no Elementor. Este widget inclui várias novas opções de estilo. Além disso, ele vem com uma opção de alternância que os visitantes podem usar para mudar entre preços mensais e anuais (ou outras opções).

Principais Características:

  • Adicionar um novo widget de tabela de preços no Elementor
  • Personalizar tabelas de preços com novas opções de estilo
  • Adicione uma chave de preço às suas tabelas

Preço: Royal Elementor Addons é grátis. As licenças Premium custam $29 por site (é uma taxa única).

12. Elementor Addon Elements

Elementor Addon Elements plugin
Elementor Addon Elements

Elementor Addon Elements é um plugin gratuito que adiciona mais de 24 novos widgets no Elementor. Entre eles, você tem opções de preço, comparação e tabelas de dados.

As tabelas de preços incluem muitas opções adicionais de personalização que o widget padrão do Elementor não inclui. Quando se trata de tabelas de dados, você pode escolher entre criar elementos pesquisáveis ou filtráveis. Além disso, as tabelas suportam animações, o que pode torná-las muito mais atraentes visualmente.

Principais Características:

  • Adicionar tabelas de preço, comparação e dados no Elementor
  • Escolha entre tabelas de dados filtráveis e pesquisáveis
  • Adicionar animações às tabelas de dados

Preço: O Elementor Addon Elements é gratuita.

Resumo

O Elementor fornece a você uma ampla gama de ferramentas para criar tabelas WordPress elegantes e complexas. Muitos plugins de tabelas WordPress também são compatíveis com o Elementor, o que significa que o construtor de páginas permite que você adicione quase qualquer tipo de tabela que você queira ao seu site.

O construtor de páginas do Elementor vem com um widget intuitivo da Tabela de Preços. Se você quiser adicionar outros tipos de tabelas, recomendamos usar os plugins de tabelo Elementor como ElementsKit ou WP Table Builder.

O Kinsta CDN é um CDN de alto desempenho disponível para todos os clientes Kinsta sem custo adicional. Ele é alimentado pela nossa integração gratuita Cloudflare e serve automaticamente o seu conteúdo de mais de 200 PoPs em todo o mundo. Se você tiver qualquer dúvida sobre o Kinsta CDN, sinta-se à vontade para contatar nossa equipe de suporte 24/7 para mais assistência!

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).