Em geral, uma caixa de ícone consiste em um pequeno gráfico que é combinado com um pequeno trecho de texto. Usando caixas de ícones, você pode destacar itens como os principais recursos, serviços, benefícios e ofertas de forma visualmente cativante e significativa.
Você também pode usar caixas de ícones para mostrar depoimentos, chamadas para ação, etapas do processo e muito mais. Tableberg é um plug-in versátil de criação de tabelas. Você pode criar caixas de ícones lindas e atraentes facilmente com o plug-in.
Nas partes seguintes deste artigo, explicaremos a você como adicionar caixas de ícones no WordPress com o plug-in. Obtenha o plug-in clicando nos links abaixo.
Criar mesas bonitas
Com o Block Editor

Etapa 01: Adicionar o bloco Tableberg ao Editor
Adicione o Bloco Tableberg ao seu editor como faria com qualquer bloco do Gutenberg.

Defina o número de linhas e colunas de acordo com o número de caixas de ícones que você deseja criar.
Por exemplo, neste tutorial, criaremos três caixas de ícones. Portanto, definiremos 3 colunas e 1 linha.

Você pode ver o número de caixas que foram criadas. Em seguida, adicionaremos conteúdo para criar caixas de ícones.

Etapa 02: Adicionar um ícone a uma caixa/célula
O Tableber permite que você adicione vários elementos às células, o que torna as células da tabela muito atraentes. Vamos explicá-los nesta seção.
Adicionar uma cor de fundo às células
Selecione a tabela inteira por clicando o Ícone Tableberg na barra de ferramentas. Em seguida, vá para a seção Guia Estilos. Na guia, você verá as opções de cores. Usando a opção adequada, defina um plano de fundo para as células da tabela.
Observação: Você deve definir a cor de fundo no início, pois todos os elementos da caixa da tabela serão projetados com base nela.

Adicionar um ícone a uma caixa/célula
Você pode adicionar blocos dentro das células da tabela como o editor de blocos do Gutenberg. Clique no ícone de mais (+) em uma célula. Localize e adicione o Bloco de ícones para a célula.

Alterar e selecionar um ícone
Ir para o Guia Configurações na barra lateral direita, mantendo o bloco Icon selecionado. Nessa guia, você terá opções para aumentar o tamanho do ícone, definir rotaçãoe alterar o ícone.

Você pode selecionar um ícone da biblioteca de ícones existente ou importar um de sua unidade local.

Colorir o ícone
Ir para o Guia Estilos. Defina o Cor do ícone e o Cor de fundo.
De fato, o layout da cor de fundo não parece bom, certo? Nós o ajudamos.

Role para baixo um pouco abaixo da guia Styles (Estilos). Você verá a guia preenchimento, margem, e raio opções.
Você pode criar um layout para a cor de fundo colocando valores adequados, como na imagem abaixo.

Etapa 03: Adicionar texto à célula/caixa
Nenhuma caixa de ícone é significativa sem conteúdo de texto. Adicionar o bloco Parágrafo abaixo do ícone na célula.

Adicionar um título sobre a caixa de ícones. Próximo, alinhar centralmente, selecionar uma core definir um tamanho para o texto.

Da mesma forma, adicione uma descrição da caixa de ícone usando a opção Bloco de parágrafos.

Etapa 04: Adicionar um botão à célula/caixa
Você pode direcionar os usuários para outra página, documentação ou recurso adicionando um botão. Adicione o botão Bloco de botões para a célula.

Depois de adicionar o botão, adicionar uma cópia da CTA, altere seu texto e cor de fundoe aumentar o tamanho da cópia.

Etapa 05: Adicione espaços entre os blocos
A célula parece congestionada, certo? Isso ocorre porque não há espaço suficiente entre os blocos da célula. Mas você pode resolver esse problema facilmente.
Selecionar a célula inteira. Ir para o Guia Estilos. Role a tela um pouco abaixo.
Você obterá Preenchimento de células e Espaçamento entre blocos opções. Usando essas opções, você pode criar os espaços necessários entre esses blocos.

Portanto, sua caixa de um ícone está pronta.
Etapa 06: Duplicar a caixa de ícones
Você pode criar manualmente outras caixas de ícones da mesma forma ou pode duplicar a caixa. O Tableberg tem um recurso interessante para linhas e colunas duplicadas.
Clique no botão [Pro] Editar tabela na barra de ferramentas. O restante pode ser feito por você mesmo. Para obter um guia detalhado, explore esta postagem em como adicionar caixas de serviço no WordPress. Explicamos como usar esse recurso na parte final desta postagem.

Você pode ver na imagem abaixo que duplicamos a caixa de ícones e alteramos seu conteúdo.

Etapa 07: Adicionar espaços entre as células
Ir para o Guia Estilos. Role para baixo até Espaçamento entre células. Essa opção permite que você adicione espaço entre as células, como na imagem abaixo.

Etapa 08: Remover a borda da célula
Na guia Styles (Estilos), você verá a opção Borda da mesa e Borda interna opções. Defina as valor da borda para 0 em ambos os lugares. Isso removerá as bordas das células.

Assim, você pode criar uma caixa de ícones no WordPress.
Fechando!
Espero que você tenha gostado deste tutorial. Seguindo as etapas descritas neste guia, você pode adicionar e personalizar facilmente caixas de ícones para alinhar-se à sua marca e destacar informações importantes com eficiência.
Antes de ir embora, dedique mais alguns minutos para aprender como formatar tabelas no WordPress.