Como criar uma tabela de comparação de produtos no WordPress

You see product comparison tables everywhere when you’re shopping online. Whether it’s an eCommerce site or a blog, comparison tables help you understand what different products offer. They also help you make more informed purchasing decisions. 

If you’re running an blog de afiliadosSe você é um afiliado, entende especialmente a importância das tabelas de comparação de produtos. Com essas tabelas, você pode comparar os diferentes produtos em sua página e obter mais comissões de afiliados. 

Creating a table to attractively compare products is quite simple and doesn’t take a whole lot of time. But it's important that the comparison table you create is engaging to the reader. Your comparison table should inspire the user to take action – whether it’s to purchase a product or just click on the purchase link. 

In this article, we'll show you how to create an awesome product comparison table in WordPress. Let’s get started! 

Como criar uma tabela de comparação de produtos usando o WP Table Builder

We’ll be creating the following example table in this tutorial:

Embora relativamente simples para nossos propósitos, essa tabela tem todos os elementos que as tabelas de comparação geralmente têm. Explicaremos cada seção em detalhes para ajudá-lo a criar a tabela exata como mostrada acima. 

A primeira etapa deste tutorial começa com a instalação de um plug-in. 

Etapa #1: Instalar o plug-in WP Table Builder 

We’ll be using the Construtor de tabelas WP Plugin. It’s a free drag-and-drop table builder. This builder is perfect for creating comparison tables and has a lot of options for customization, including the following elements:

• Texto
• Imagem
• Botão
• Classificação por estrelas
• Lista

Para instalar o plug-in, vá para o site do WordPress dashboard > Plugins. Clique em Adicionar novoe procure por Construtor de tabelas WP. Clique em instalar e ativar para instalar o plug-in em seu site:

Como alternativa, você pode fazer o download do plug-in no site Repositório do WordPress e carregue-o em seu site. 

Etapa #2: Criar uma nova tabela

Para criar uma nova tabela no plug-in WP Table Builder, primeiro vá para Table Builder > Add New (Construtor de tabelas > Adicionar novo). 

You’ll see the table drag-and-drop builder as shown below: 

Você pode dar um nome à sua tabela e definir o número de linhas e colunas. Depois de fazer isso, clique no botão gerar button. This will generate your table as shown below: 

Etapa #3: Adicionar conteúdo à sua tabela

Now it's time to add content to your table. WP Table Builder lets you drag and drop elements to the cells of your table. You can select the elements from the left sidebar and drag them to your table. Here’s how our table looks after adding content: 

Usamos apenas o texto, imageme botão para criar a tabela. Como você pode ver, o visual é limpo e bonito. 

Agora, mostraremos como você pode tornar sua tabela ainda mais atraente usando esse plug-in. 

Etapa #4: Tornar sua tabela bonita e responsiva

Há muitas maneiras de deixar sua tabela linda com o WP Table Builder. Esse plugin também tem muitas opções de personalização para ajudá-lo a tornar sua tabela mais atraente. Vamos começar. 

Configurar a borda da tabela

WP Table Builder lets you add a border to your table. You can find this option in the table settings on the left. You can set the border size, change its color, and also apply an inner border to your table:

Preenchimento de células

A opção de preenchimento de célula altera o preenchimento de cada célula de sua tabela:

Plano de fundo do cabeçalho 

Você também pode personalizar a cor de fundo do cabeçalho da tabela para adicionar um pouco mais de estilo:

For this table, I’ve set the header background to white so that the logos blend well. 

Fundo da linha par/ímpar

Cores alternativas para linhas são muito populares em tabelas de comparação de produtos, e você pode aplicá-las facilmente com o plug-in WP Table Builder:

Agora que sua tabela está bonita em uma visualização de desktop, você também quer garantir que ela fique ótima em dispositivos móveis. 

The awesome thing is, you don’t have to worry about doing a lot of leg work. All you need to do is to click on the Tornar a tabela responsiva toggle. Isso fará com que sua tabela pareça atraente e envolvente em dispositivos móveis:

Por fim, ative o Linha superior como cabeçalho para definir sua linha superior como o cabeçalho da tabela. 

Finalmente, sua mesa está pronta para ser usada! 

Etapa #5: Inserir a tabela por meio de um código curto

Agora que sua tabela está pronta, você precisa inseri-la em seu conteúdo. Você pode fazer isso facilmente inserindo o shortcode do plugin. 

Para localizar o shortcode da tabela, clique no ícone Incorporar na parte superior do construtor de tabelas. Isso abrirá uma janela pop-up com o shortcode:

Agora, você pode copiar e colar esse shortcode em qualquer lugar do seu conteúdo. 

Outra maneira de encontrar o shortcode da tabela é ir para Table Builder > All Tables. Here, you’ll find all the tables you have created:

Como você pode ver, é possível copiar o shortcode da tabela diretamente desta página. 

Conclusão

Se antes você estava se perguntando como criar uma tabela de comparação de produtos no WordPress, espero que agora veja como o processo é fácil. Com o plug-in WP Table Builder, todo o processo de criação de uma tabela atraente é simplificado e pode ser feito em minutos. 

There are many customization options that let you design the look and feel of the table you’re creating.

Se tiver alguma dúvida sobre este tutorial, faça-a na seção de comentários abaixo. Ficaremos felizes em ajudar!

Se você gostou deste post, não deixe de nos seguir em Twitter, Instagram, Facebook, Pintereste LinkedIn! E não se esqueça de se inscrever no caixa abaixo.

Divulgação de links de afiliados