Como adicionar caixas de ícones no WordPress

Como adicionar caixas de ícones no site do WordPress

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.

Adicionar o bloco Tableberg ao Editor

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.

Definir o número de linhas e colunas

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

Linhas e colunas selecionadas para o design de 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 uma cor de fundo às células

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.

Adicionar um ícone a uma caixa/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.

Alterar e selecionar um ícone

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

Selecione um ícone

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.

Colorir o ícone

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.

Alterar o layout da cor de fundo

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.

Adicione o bloco Parágrafo à caixa de ícones

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

Adicionar texto à caixa de ícones

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

Adicione uma descrição sobre a caixa de ícones

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.

Adicionar um botão à 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.

Personalize o botão de CTA

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.

Adicionar espaços entre os 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.

Duplicar a caixa de ícones

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

Caixas de ícones duplicadas

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.

Adicionar espaços entre as células

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.

Remover a borda da célula

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.



A equipe do Tableberg