As caixas de informações são agora uma ferramenta comum para sites que precisam compartilhar informações importantes de forma clara e atraente. Basicamente, se você quiser chamar a atenção para uma promoção específica, direcionar a atenção do espectador para detalhes-chave e avisos importantes ou incentivar os usuários a usar CTAs úteis, as caixas de informações oferecem uma solução simples para destacar suas mensagens.
As caixas de informações não apenas dividem as informações importantes em seções menores e fáceis de ler, mas também desempenham um papel importante na orientação da navegação do usuário. Com a adição de caixas de informações, será mais fácil conduzir seus visitantes pelos pontos essenciais sem sobrecarregá-los e em um formato organizado, limpo e amigável.
Agora, se você está aqui para ler este artigo, significa que já está familiarizado com o conceito de caixas de informações ou está aprendendo sobre elas pela primeira vez. No entanto, talvez ainda haja uma dúvida em sua cabeça, que é como criar uma caixa de informações. Por isso, preparamos um guia passo a passo para orientá-lo sobre os conceitos básicos de como criar caixas de informações no WordPress. Aqui, apresentaremos duas abordagens diferentes para ajudá-lo a escolher a opção mais adequada. Então, por que esperar? Vamos direto ao assunto.
Método 1: Utilizando os blocos de colunas
O bloco de colunas no editor do Gutenberg é uma maneira simples de criar caixas de informações se você quiser fazer isso sem a ajuda de plug-ins. Ele permite que você organize o conteúdo básico em um formato estruturado. Veja a seguir como configurar uma caixa de informações usando essa abordagem:
Etapa 1: Adicionar um bloco de colunas ao editor
Crie um novo post ou página no WordPress e abra-o no editor Gutenberg. Prossiga para adicionar um bloco de colunas clicando no ícone Ícone "+" e, em seguida, selecione "Colunas" nas opções de bloco.
Agora, escolha um layout com uma única coluna ou várias colunas, dependendo de como você deseja que a caixa de informações seja exibida. Para a conveniência dos iniciantes, escolhemos uma única coluna para criar nossa caixa de informações.
Etapa 2: Adicionar blocos diferentes para adicionar conteúdo
Em seguida, adicione conteúdo ao bloco da coluna para criar uma caixa de informações visualmente distinta. Clique no botão Ícone "+" para adicionar seu bloco preferido. Isso, por sua vez, o guiará até a biblioteca de blocos do Gutenberg. Por exemplo, começamos com uma imagem na parte superior de nossa caixa de informações. Portanto, procure o bloco Imagem na biblioteca e selecione-a. Continue a carregar sua imagem da biblioteca de mídia ou carregue-a do seu dispositivo.
Depois de carregar a imagem, você pode ajustar o alinhamento de sua imagem e personalize o tamanho dela. Você pode alinhar a imagem à esquerda, ao centro ou à direita. Aqui, alinhamos a imagem no centro, mas mantivemos o mesmo tamanho.
Agora, precisamos de um título adequado para destacar nossa imagem. Para adicionar um Título comece selecionando a imagem, o que abrirá a barra de ferramentas e, a partir daí, selecione o bloco pai.
Depois de selecionar o bloco pai, o botão + ícone será exibido. Então, clique no ícone +, procure o Título e clique nele. Continue a adicionar os textos no bloco Heading e alinhe-os da maneira que desejar.
Quando terminar, repita o procedimento anterior de adicionar blocos. Aqui, adicionamos um bloco bloco de parágrafos e um bloco de botões um após o outro. Primeiro, escolha o bloco de parágrafos e adicione o texto necessário. Alinhe esses textos da maneira que achar necessário.
A próxima tarefa são os botões. Localize os blocos Button na biblioteca, selecione o bloco e adicione os textos a serem inseridos nesse botão.
Quando tiver terminado, alinhar seus botões do jeito que você quiser e depois adicionar links em seu botão.
Etapa 3: Personalizar todo o bloco
As opções de personalização permitem que você ajuste vários aspectos para obter um visual sofisticado. Selecione sua seção inteira da coluna clicando no ícone de coluna na barra de ferramentas. Agora, você pode começar sua personalização ajustando a coluna largura da coluna para garantir que ela se encaixe bem no layout da página.
Em seguida, vá para a seção Guia Estilos. A partir daqui, você pode escolher o cor dos textos, links e planos de fundo; você pode alterar tipografia e personalizar o bloco dimensões.
Se você rolar a tela para baixo, encontrará as configurações para adicionar Espaçamento entre blocos e Border e Shadows.
Mudamos a cor do texto e do plano de fundo, alteramos o preenchimento e introduzimos algumas bordas e raios. Quando a caixa de informações for publicada, teremos o resultado final.
Método 2: Usando o plug-in Tableberg
O plug-in Tableberg, usado principalmente para criar tabelas, também pode ser aproveitado para criar caixas de informações com um formato estruturado. Veja a seguir como criar uma caixa de informações usando o Tableberg:
Etapa 1: Instalar e ativar o plug-in Tableberg
Vá para o painel do WordPress, navegue até Plugins > Adicionar novo, procurar por "Tableberg," e clique em Instalar agora. Depois de instalado, clique em Ativar para ativar o plug-in.
Etapa 2: Criar uma nova tabela
Clique no botão + ícone em seu editor e procure o Tableberg da biblioteca. Depois de encontrá-lo, clique nele.
Agora, você precisa selecionar o número de colunas e linhas para sua caixa de informações. Aqui, criaremos uma caixa de coluna única; por isso, selecionamos 1 linha e 1 coluna.
Etapa 3: Adicionar conteúdo à tabela
Como fizemos no primeiro método, começaremos adicionando imagens em nossa caixa de informações. Pressione o botão + ícone, procure o Bloco de imagense adicione-o às suas postagens. Em seguida, carregue a imagem do seu dispositivo ou da biblioteca de mídia.
Novamente, se você precisar de algum ajuste no alinhamento e no tamanho, faça o mesmo conforme mostrado na figura abaixo.
Em seguida, colocaremos o texto após a imagem, adicionando um Bloco de parágrafos. Clique no sinal +, procure o bloco de parágrafos e adicione-o. Se você achar que é necessário alterar o alinhamento, faça-o.
A última tarefa é adicionar botões. Selecione o botão bloco pai, encontre o + ícone, procure por botõese adicione-o ao editor.
Quando você tiver concluído isso, adicionar texto em seus botões, verifique o alinhamentos de seu botão, e adicionar links a ele.
Etapa 4: Personalize sua mesa
Depois de configurar a caixa Tableberg com seu conteúdo, você pode continuar a personalizar e estilizar a caixa como um todo. Mas lembre-se de que você também pode personalizar cada bloco individual que usamos aqui. Por enquanto, vamos nos ater à tabela inteira.
Primeiro, clique no botão Ícone Tableberg na barra de ferramentas para selecionar a caixa inteira. Em seguida, deslize para o Guia Configurações e ajuste o largura da caixa para se ajustar ao layout de sua página ou publicação.
Em seguida, vá para o Guia Estilos para personalizar a caixa's cor de fundo, preenchimento, margem e espaço.
Se você rolar a tela para baixo, encontrará mais opções para alterar o tabela, borda interna e de coluna, cor global da fonte e muito mais.
É assim que você pode criar uma caixa de informações perfeita. Se você precisar de mais de uma caixa de informações, basta alterar o número de colunas e linhas e seguir o mesmo procedimento.
Conclusão
E aí está, sua caixa de informações do Tableberg foi estilizada com perfeição. Com apenas alguns ajustes, seu conteúdo pode mudar de comum para atraente, chamando a atenção exatamente onde é importante. As possibilidades de personalização são infinitas, portanto, dê asas à sua imaginação. Faça experiências com cores, brinque com as bordas e adicione toques finais que tornam cada caixa um deleite visual. Deixe que suas caixas de informações não apenas transmitam informações, mas também adicionem um toque de estilo a todo o seu site.
