Como criar caixas de conteúdo no WordPress

Uma caixa de conteúdo é um contêiner visualmente distinto por meio do qual você pode enquadrar um conteúdo específico que o destaca dos demais. Ela ajuda a destacar as principais informações sobre recursos ou anúncios especiais, chamando a atenção dos usuários para detalhes importantes.

As caixas de conteúdo são adequadas para mostrar seções de call-to-action, depoimentos, avaliações e os principais recursos de produtos ou serviços. Há várias maneiras de criar caixas de conteúdo em sites do WordPress.

Na próxima seção deste artigo, mostraremos três métodos práticos de como criar caixas de conteúdo no WordPress. Fique conosco até o fim.

Método 1: Usando o bloco Columns

Você pode criar e projetar uma caixa de conteúdo de nível básico usando o bloco Columns padrão do WordPress. Siga as etapas explicadas abaixo.

Etapa 01: Adicionar o bloco Columns ao Editor

Encontre o Bloco de colunas da biblioteca de blocos do Gutenberg pressionando o botão botão de adição (+) e adicione-o ao seu editor.

Selecione a coluna de uma célula entre as opções disponíveis.

Etapa 02: Adicionar blocos de conteúdo à coluna

O bloco Columns permitirá que você adicione outros blocos dentro dele. Você pode adicionar qualquer bloco que desejar para selecionar seu conteúdo.

Clique no botão ícone de mais (+) no bloco da coluna. Isso abrirá a biblioteca de blocos do Gutenberg, da qual você pode escolher e adicionar o bloco bloco de parágrafos.

Podemos ver que já adicionamos conteúdo de texto ao bloco da coluna. Depois disso, você pode adicionar mais blocos às colunas, conforme desejar. Suponha que adicionaremos o bloco Image.

Clique no botão Ícone de colunas na barra de ferramentas. Pressione o botão ícone de mais (+). Localize e selecione o Bloco de imagens da biblioteca.

Você pode ver que adicionamos uma imagem ao bloco de colunas.

Etapa 03: Personalizar todo o bloco de colunas

Selecione a seção inteira da coluna clicando no ícone de coluna na barra de ferramentas. Vá para a seção Guia Configurações. Você pode ajustar o Largura da coluna da respectiva opção.

Em seguida, vá até o Guia Estilos. Você terá opções para modificar a cor do texto, a cor do plano de fundo, a tipografia e as dimensões do bloco.

Rolando a seção para baixo, você terá mais opções para adicionar espaçamento entre blocos e fronteira para o bloco de colunas.

Método 2: Usando o plug-in TableBerg

O TableBerg é um poderoso plug-in de criação de tabelas que pode potencializar a solução padrão de criação de tabelas do WordPress. Você também pode criar caixas de conteúdo atraentes com o plug-in. Vamos ver como fazer isso.

Etapa 01: Instalar e ativar o plug-in TableBerg

Como no método acima, vá para Plug-ins > Adicionar novo plug-in. Encontre o Plug-in TableBerg digitando seu nome na caixa de pesquisa. Instalar e ativar isso.

Etapa 02: Adicionar o bloco TableBerg ao Editor

O plug-in vem com um bloco chamado TableBerg. Adicione-o ao editor.

Se você pensar em criar uma tabela, poderá definir o número de linhas e colunas aqui, como o bloco de tabela padrão.

Mas selecione a linha 1 e a coluna 0 enquanto criamos uma caixa de conteúdo. Você pode ver que o layout foi criado instantaneamente.

Etapa 03: Adicionar conteúdo à caixa TableBerg

O TableBerg permite que você adicione diferentes tipos de conteúdo às suas linhas e colunas, adicionando blocos de conteúdo.

Depois de posicionar o cursor na caixa, você verá a opção de bloqueio aparecer no canto inferior direito.

Selecione um a um os blocos que deseja adicionar à caixa para selecionar o conteúdo desejado. Primeiro, adicionaremos o bloco de imagem.

Em seguida, você pode ver que adicionamos um texto descritivo sobre o produto. Adicionamos e usamos a tag Bloco de parágrafos para isso.

Por fim, adicionamos um botão de CTA.

Etapa 04: Personalizar a caixa TableBerg

Você pode personalizar cada bloco individualmente que adicionou à caixa TableBerg. Depois disso, você pode personalizar e estilizar toda a caixa TableBerg.

Não estamos mostrando como personalizar o bloco individual, pois isso tornará o tutorial muito longo. Você pode ver isso em nossa página de documentação.

Selecione a caixa inteira clicando no ícone TableBerg na barra de ferramentas.

Na guia Settings (Configurações), você pode definir a largura desejada para a caixa.

Do Guia EstilosSe você quiser personalizar a cor do plano de fundo, o preenchimento, a margem e o espaço da caixa, poderá fazê-lo.

Assim, você pode criar uma caixa de contexto com o plug-in TableBerg.

Método 3: Usando o plug-in Ultimate Blocks

O Ultimate Blocks é um plugin de marketing de conteúdo promissor com mais de 25 blocos personalizados para potencializar seu editor Gutenberg. Ele tem vários blocos impressionantes com os quais você pode criar mais caixas de conteúdo de boa aparência em seu site.

Etapa 01: Instale e ative o plug-in Ultimate Blocks

Ir para Plug-ins > Adicionar novo plug-in. Encontre o Plug-in Ultimate Blocks digitando seu nome na caixa de pesquisa. Instalar e ativar assim que o plug-in for exibido abaixo.

Etapa 02: Adicione o bloco de caixa estilizada do plug-in ao seu editor Gutenberg

O plug-in Ultimate Blocks inclui um bloco dedicado chamado Caixa com estilo para criar caixas de conteúdo. Localize e adicione-a ao editor.

O bloco oferece quatro tipos de caixas. Escolha a que preferir para exibir sua mensagem. Cada uma delas tem um conjunto exclusivo de funcionalidades.

Para o tutorial, selecionaremos a opção Caixa de recursos.

A caixa de recursos permite que você adicione uma imagem, um título e uma descrição. Espero que você possa fazer isso sozinho.

Etapa 03: Adicionar conteúdo ao bloco

Por padrão, o bloco permite que você exiba um produto e descreva seus recursos. Mas você pode adicionar e exibir vários produtos com o bloco. Selecione o tipo de coluna você deseja definir quantos produtos deseja exibir.

Agora, adicione conteúdo às opções que você vê na seção Bloco Styled Box.

Você pode ver que adicionamos conteúdo ao bloco.

Etapa 04: Personalizar e estilizar o bloco Styled Box

Venha para o Guia Configurações. A partir do Selecione a opção ModoSe você não tiver uma caixa de texto, poderá alterar a caixa Feature para outras caixas estilizadas, conforme mostrado acima, como a caixa de notificação, a caixa com borda e a caixa de número.

Depois disso, a partir do Opção de controle responsivoSe você quiser, pode ocultar o bloqueio de qualquer tipo de dispositivo específico.

Em seguida, vá até o Guia Estilos. Você pode modificar o Acolchoamento e Margem do bloco a partir dessa guia.

Assim, você pode criar uma caixa de conteúdo usando o plug-in Ultimate Blocks.

Notas de finalização!

Ultimate Blocks e TableBerg são dois plug-ins multifuncionais que visam revolucionar o sistema Gutenberg, permitindo que os usuários criem conteúdo sofisticado com facilidade.

O TableBerg ainda está em processo de desenvolvimento e promete apresentar muitos recursos avançados em breve. Por outro lado, o Ultimate Blocks já é um plugin popular usado por mais de 60 mil sites em todo o mundo.

Se tiver alguma dúvida sobre eles, fique à vontade para nos fazer perguntas a qualquer momento por meio da caixa de comentários.