Como adicionar caixas de recursos no WordPress

Como adicionar caixas de recursos no site do WordPress

Uma caixa de recursos é uma área projetada em uma página da Web que chama a atenção para conteúdo, produtos e serviços específicos. As caixas de recursos são projetadas com elementos como imagens, ícones, texto conciso e botões.

O Tableberg é um plug-in de criação de tabelas multiuso. Ele pode ajudá-lo a criar layouts maravilhosos para suas caixas de recursos. Nesta postagem de tutorial, mostraremos um guia fácil sobre como adicionar feature boxes no WordPress com o plugin.

Obtenha o plug-in clicando nos botões do banner abaixo.

Criar mesas bonitas
Com o Block Editor

Depois de instalar os plug-ins em seu site, siga o tutorial abaixo.

Etapa 01: Adicionar o bloco Tableberg ao Editor

Adicione o Bloco Tableberg para o editor.

Adicione o bloco TableBerg ao seu editor do Gutenberg

Defina o número de linhas e colunas de seu site de acordo com o número de caixas de recursos que você deseja criar.

Como criaremos três caixas de recursos, selecionamos o número de colunas e linhas 2*2.

Definir o número de linhas e colunas

O número definido de linhas e colunas foi adicionado.

Linhas e colunas são adicionadas

Etapa 02: Adicionar uma imagem do produto à caixa

Uma caixa de recursos não tem sentido sem uma imagem do respectivo produto. Adicione a Bloco de imagens para uma célula adequada.

Adicionar uma imagem do produto à caixa

Adicione uma imagem a uma célula adequada. Você pode redimensionar a imagem arrastando o ícone circular.

Redimensionar a imagem para a caixa de recursos

Etapa 03: Adicionar uma classificação por estrelas

A classificação por estrelas é uma forma intuitiva de expressar a qualidade e a popularidade de um produto. Ela também ajuda no envolvimento do cliente. Portanto, adicione a Bloco de classificação por estrelas para a mesa.

Adicionar uma classificação por estrelas à caixa de recursos

Por baixo do Guia Configurações na barra lateral direita, defina valores para o bloco Star Rating. Você pode até mesmo redimensionar o bloco, se necessário.

Definir valor para o bloco Star Rating

Etapa 04: Adicionar um botão de CTA

Com um botão de CTA, você pode motivar os usuários a comprar ou visitar a página do produto. Portanto, adicione o botão Bloco de botões sob a classificação.

Adicionar um botão de CTA à caixa de recursos

Ir para o Guia Estilosmantendo o bloco de botões selecionado.

A partir daí, você pode alterar o botão cor do texto, cor do plano de fundo, tamanho, preenchimento, ed conforme necessário.

Personalize o botão na caixa de recursos

Etapa 05: Adicionar a lista de recursos e a descrição

Como você precisa de mais espaço para adicionar a lista de recursos e a descrição, é melhor mesclar duas células. Selecionar células com seu cursor por segurando a tecla Shift.

Clique em Edit Table (Editar tabela) na barra de ferramentas. Pressione o botão Opção de mesclagem na lista.

Mesclar células para o feature box

Adicione o Bloco de parágrafos para escrever texto na caixa de recursos.

Adicione o bloco Parágrafo à caixa de recurso para adicionar texto

É melhor mostrar os recursos do produto em uma lista. Portanto, adicione o Bloco de lista com estilo.

Adicionar a lista de recursos à caixa de recursos

Espero que você possa listar os recursos de seu produto como na imagem abaixo. Você pode alterar o ícone da lista, aumentar seu tamanho, e modificar sua cor.

Liste os recursos de seu produto

Por fim, adicione uma breve descrição de seu produto usando o bloco Parágrafo abaixo da lista de recursos.

Adicione uma breve descrição sobre seu produto

Portanto, o conteúdo de sua caixa de recursos está pronto. Agora, vamos personalizar um pouco mais as caixas.

Etapa 06: Personalizar as bordas da caixa de recursos

O Tableberg permite personalizar tanto o externo e bordas internas.

Ir para o Guia Estilos. Role a tela um pouco para baixo. Você terá estas opções. Defina as cores desejadas e espessura das bordas.

Personalizar as bordas da caixa de recursos

Etapa 07: Adicionar faixa de opções à caixa de recursos

Uma fita é uma pequena etiqueta ou faixa decorativa que ajuda a destacar informações importantes, como descontos, novidades, etc. Adicione a Bloco de fitas para a célula mais próxima.

Adicionar faixa de opções à caixa de recursos

Indo para o Guia Configurações, escreva um cópia de fita e consertar sua posição na caixa de recursos.

Defina o texto da faixa de opções e sua posição na caixa de recursos

Por fim, vá para a seção Guia Estilos.

Selecione o texto e cor de fundo para a fita.

Escolha a cor da fita

Etapa 08: Visualizar a caixa de recursos

Vá para a página de visualização. Você verá que o recurso está funcionando bem.

Visualizar a caixa de recursos

Conclusão

Espero que você tenha gostado deste artigo. Você pode fazer mais designs com o plug-in Tableberg. Por exemplo, explore mais duas postagens antes de sair. Essas postagens são:

Se você tiver alguma dúvida sobre o plug-in, informe-nos por meio da caixa de comentários. Entraremos em contato com você em breve com uma resposta satisfatória.



A equipe do Tableberg