A maioria dos visitantes escaneia uma página antes de decidir se a lerá. Se seus principais benefícios estiverem enterrados em parágrafos de texto, muitas pessoas podem sair sem nunca vê-los.
As caixas de recursos resolvem isso combinando cada benefício com um pequeno ícone e uma breve descrição, para que os visitantes entendam o que você oferece em um relance. Você também pode adicionar um botão de call-to-action a cada caixa para direcionar os leitores a mais detalhes.
Neste guia, mostraremos como adicionar caixas de recursos com ícones no WordPress usando o editor de blocos integrado ou um plugin de page builder.
Qual Método Você Deve Usar para Adicionar Caixas de Recursos?
Se você estiver adicionando uma ou duas seções de recursos a uma página ou post existente, use o método do editor de blocos. É gratuito, integrado ao WordPress 7.0 e posterior, e não requer outro plugin.
Se você estiver projetando uma landing page completa do zero, um page builder é a melhor escolha. Você obtém modelos prontos e mais opções de estilo para cada ícone.
Você pode usar os links rápidos abaixo para pular diretamente para o método que deseja usar:
Método 1: Adicionar Caixas de Recursos com Ícones Usando o Editor de Blocos (Grátis)
O editor de blocos do WordPress constrói páginas a partir de blocos, que são peças individuais de conteúdo como um parágrafo, uma imagem ou um botão.
O WordPress 7.0 adicionou um bloco de Ícone integrado que permite inserir ícones SVG sem um plugin. SVG é um formato de imagem feito de código, então os ícones permanecem nítidos em qualquer tamanho e carregam rapidamente.
Se você estiver em uma versão mais antiga do WordPress, não encontrará o bloco de Ícone no editor. Você precisará atualizar o WordPress antes de seguir este método.
Etapa 1: Adicionar um Bloco de Colunas
Comece adicionando um bloco de Colunas. Primeiro, abra a página onde você deseja adicionar suas caixas de recursos. Em seguida, clique no ícone + Adicionar Bloco, procure por Colunas e clique no bloco Colunas para adicioná-lo.
O WordPress mostrará vários layouts de colunas. Os números indicam a largura que cada coluna ocupa. Por exemplo, 50 / 50 cria duas colunas de largura igual.
Selecionaremos 33 / 33 / 33 para criar três colunas iguais, mas você pode escolher qualquer layout que funcione para o seu conteúdo.
Etapa 2: Adicionar Ícones às Suas Caixas de Recursos
Em seguida, clique no botão + na coluna e procure por Ícone. Quando o bloco Ícone aparecer, clique nele para adicioná-lo.
O WordPress adicionará automaticamente um ícone de Informação à coluna. Clique no botão 'Substituir' para escolher um ícone diferente.
Isso abre a biblioteca de ícones. Você pode digitar um nome, como foto ou loja, na barra de pesquisa, ou rolar pelos ícones disponíveis.
Quando encontrar o ícone que deseja, clique nele para adicioná-lo à sua coluna.
Você pode então personalizar o ícone usando as configurações do bloco. Dependendo do seu tema e configuração, você pode alterar a cor do ícone, a cor de fundo, as dimensões e a borda. Você também pode usar a barra de ferramentas para centralizar o ícone.
Etapa 3: Adicionar Texto às Suas Caixas de Recursos
Assim que seus ícones estiverem no lugar, clique no botão + abaixo do ícone na primeira coluna e adicione um bloco de Título para o nome do recurso.
Em seguida, adicione um bloco de Parágrafo abaixo e insira uma breve descrição do recurso. Uma ou duas frases geralmente são suficientes.
Repita o mesmo processo para as outras colunas.
Etapa 4: Crie Mais Linhas de Caixas de Recursos (Opcional)
Se você quiser adicionar mais de uma linha de caixas de recursos, selecione o bloco Colunas e clique no menu de três pontos na barra de ferramentas. Em seguida, selecione Duplicar.
Isso cria uma cópia de toda a linha. Você pode então substituir os ícones e o texto por conteúdo novo usando as mesmas etapas acima.
Etapa 5: Publique Suas Caixas de Recursos com Ícones
Quando estiver satisfeito com suas caixas de recursos, clique no botão Salvar ou Publicar para torná-las ativas.
Você pode então visitar seu site para ver as caixas de recursos em ação:
Método 2: Adicionar Caixas de Recursos com Ícones Usando um Construtor de Páginas
O editor de blocos funciona bem quando você deseja adicionar uma seção de recursos a uma página existente. Mas se você estiver projetando uma página de destino completa e quiser mais controle sobre o layout e a estilização, um construtor de páginas de arrastar e soltar pode oferecer mais flexibilidade.
Usaremos o SeedProd para este método porque o usamos em nossos próprios sites. A maioria dos construtores de páginas de arrastar e soltar, como o Elementor, oferece um elemento de caixa de ícones e uma biblioteca de ícones integrada. Para mais informações, veja nossa análise do SeedProd.
Etapa 1: Instale e Configure o Page Builder
Primeiro, você precisa instalar e ativar o plugin SeedProd. Para mais detalhes, veja nosso guia sobre como instalar um plugin do WordPress.
Observação: Existe uma versão gratuita do plugin, mas usaremos a versão paga porque o bloco Caixa de Ícones e a biblioteca de ícones estão disponíveis apenas nos planos licenciados.
Depois de ativar o plugin, vá para SeedProd » Configurações e insira sua chave de licença. Você pode encontrar sua chave fazendo login na sua conta SeedProd.
Etapa 2: Escolha um Modelo de Página de Destino
Em seguida, vá para SeedProd » Landing Pages e clique em ‘+ Adicionar Nova Landing Page’.
Em seguida, insira um nome para sua página. O SeedProd também usará este nome para criar o URL da página, mas você pode editar o URL se necessário.
Na próxima tela, você escolherá um modelo. Cada modelo pode ser personalizado com arrastar e soltar, mas escolher um que corresponda ao seu objetivo pode economizar algum tempo.
Para este guia, usaremos o Modelo em Branco. Passe o mouse sobre ele e clique no ícone de marca de seleção para selecioná-lo.
Em seguida, clique em ‘Salvar e Começar a Editar a Página’.
Etapa 3: Crie Suas Caixas de Recursos com Ícones
Como estamos começando com um modelo em branco, o primeiro passo é escolher um layout. Aqui, vamos escolher o layout de coluna única para projetar a área do cabeçalho acima de suas caixas de recursos.
Você pode então arrastar o bloco Título do menu do lado esquerdo para a página. Selecione o bloco para editar seu texto e ajustar sua formatação usando as opções no painel esquerdo.
Repita o processo com o bloco de Texto.
Você também pode personalizar o cabeçalho adicionando uma imagem de fundo ou alterando sua formatação. Para mais opções, clique na aba ‘Avançado’ para ajustar espaçamento, adicionar uma borda, adicionar efeitos de animação e mais.
Quando terminar com o cabeçalho, você pode criar as caixas de recursos. Arraste o bloco Coluna do painel esquerdo para o editor e posicione-o logo abaixo da área do cabeçalho.
Depois disso, você pode escolher um layout. Para este exemplo, usaremos a opção com três colunas iguais.
Em seguida, encontre o bloco "Caixa de Ícone" no menu à esquerda e arraste-o para a primeira coluna.
O bloco inclui um ícone padrão, um título e um texto de exemplo que você pode personalizar.
Para alterar o ícone, encontre a seção "Ícone/Imagem" no painel à esquerda. Em seguida, passe o mouse sobre o ícone atual e clique no botão para substituí-lo.
Isso abre a biblioteca de ícones. Você pode pesquisar um ícone específico ou navegar pelas opções disponíveis. Quando encontrar um que goste, clique nele para adicioná-lo à sua caixa de recursos.
Depois de selecionar um ícone, clique nele para abrir suas configurações no menu à esquerda. Aqui, você pode alterar seu alinhamento, tamanho e cor.
Etapa 4: Personalize o Conteúdo da Sua Caixa de Recursos
Em seguida, selecione o texto em sua "Caixa de Ícone" para abrir suas configurações no menu à esquerda.
Você pode substituir o título e a descrição de exemplo pelo seu próprio texto de recurso. Você também pode adicionar links ou alterar o alinhamento e a cor do texto.
Repita essas etapas para as outras colunas, adicionando um ícone e texto de recurso diferentes para cada uma.
Etapa 5: Publique Sua Landing Page
Se você quiser adicionar outra linha de caixas de recursos, passe o mouse sobre a seção e clique no botão "Duplicar Linha". Em seguida, substitua os ícones e o texto pelo seu novo conteúdo.
Você também pode personalizar o restante da sua página de destino adicionando imagens, botões de call-to-action ou outros blocos. O processo é semelhante: arraste o bloco desejado para o editor e personalize-o a partir do painel à esquerda.
Quando estiver satisfeito com sua página de destino, clique no botão 'Salvar' e depois selecione 'Publicar' para torná-la ativa. Agora você pode ver a página de destino em ação:
Perguntas Frequentes Sobre Caixas de Recursos com Ícones
Aqui estão algumas perguntas comuns sobre como adicionar caixas de recursos com ícones no WordPress:
Como adiciono ícones no WordPress?
Se você estiver no WordPress 7.0 ou posterior, pode usar o bloco "Ícone" integrado, que permite pesquisar a biblioteca de ícones do WordPress por nome. Para conjuntos de ícones maiores como o Font Awesome, você precisará de um plugin ou de um construtor de páginas com sua própria biblioteca de ícones.
Como adiciono ícones personalizados ao WordPress?
O bloco "Ícone" exibe apenas ícones da biblioteca do WordPress, portanto, você não pode fazer upload dos seus próprios através dele. Em vez disso, você pode fazer upload do seu ícone como um arquivo PNG usando o bloco "Imagem".
Esperamos que este artigo tenha ajudado você a aprender como adicionar caixas de recursos com ícones no WordPress. Você também pode querer ver nosso guia sobre como personalizar cores no seu site WordPress e maneiras de criar um site WordPress amigável para dispositivos móveis.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
micahel
Artigo muito bom e ajudou a resolver meu problema. Mas aqui está minha pergunta.
-Como você cria as belas barras laterais que vê neste post, como como iniciar um blog, plano do site, preciso de ajuda com..., guias úteis do WordPress, Ofertas e Cupons
-Eu realmente preciso de ajuda para criar essas barras laterais, já que estou lendo como criar um blog
Ashutosh Panda
Foi um artigo incrível..
Me ajudou muito
Rob
Oi. Meus ícones não centralizam na coluna em si. Existe algum parâmetro que possamos adicionar para garantir que eles centralizem? 2 dos meus ícones centralizam bem, mas 2 só se alinham à esquerda, mesmo que eu os alinhe ao centro usando a formatação no editor de formatação do Wordpress (usando um plugin).
Obrigado.
Hassan NAITALI
Ótimo artigo, eu adoro,
então, tenho uma pergunta, posso fazer alterações nesses ícones e deixá-los maiores fazendo alterações no tema pai graficamente e sem tocar no código CSS?
Obrigado!!
WPBeginner Support
Olá Hassan,
Você ainda precisaria de algum CSS.
Admin
Chris
Tentei tudo o que foi dito no tutorial, mas em vez de ser configurado em colunas, tudo é configurado em uma única coluna. Enquanto os ícones ficam ao lado das palavras. Eu queria criar três colunas e tudo fica um embaixo do outro em uma coluna. Por que isso acontece?
Roshni
Obrigado. Tão útil!
Paul
Você tem um tutorial sobre como fazer isso com CSS, HTML e PHP sem ter que usar um plugin? Procurei, mas não consigo encontrar nada.
john
Como faço para centralizar o ícone sobre o conteúdo?
Evan herman
Para quem usa WP SVG Icons e não se sente confortável escrevendo CSS, você pode ajustar o tamanho do ícone passando um parâmetro size="#px" para o shortcode wp-svg-icons.
Exemplo:
[wp-svg-icons icon=”rocket” wrap=”span” size=”100px”]
Isso definirá o ícone para 100px e evitará a etapa de escrever CSS personalizado. Você ainda pode precisar ajustar o preenchimento.
Andre Page
Isso foi muito útil Evan, obrigado!!
Roshni
Obrigado, Evan. Isso funcionou.
Bobby
Bom artigo sobre um recurso importante para o seu site. No entanto, o plugin recomendado não é atualizado há 2 anos. Sou relativamente novo no WordPress e me disseram para evitar plugins que não foram atualizados no último ano. Imagino que dependa, já que você é muito experiente em WordPress e destacou o plugin neste artigo. Me diga o que você pensa.
WPBeginner Support
Bobby, o plugin funciona bem, nós o testamos. Também entramos em contato com o autor do plugin para que ele possa atualizá-lo.
Idealmente, você deve instalar plugins que foram atualizados recentemente. No entanto, existem muitos plugins do WordPress que não precisam de atualizações. Os autores de plugins acham que, como um plugin não está quebrado e funciona muito bem, não há necessidade de atualizá-lo.
Admin
Bobby
Ok, é bom saber. Obrigado novamente.
arun
Ótimo post, eu também tenho um blog em WordPress. Vou aplicar esses ícones no meu blog, obrigado por compartilhar.
Hemang Rindani
Bom artigo. O WordPress é uma ótima solução de gerenciamento de conteúdo empresarial que pode atender a quaisquer requisitos complexos de negócios e desenvolver sites poderosos. Ele contém milhares de temas, módulos e plugins flexíveis, personalizáveis e responsivos que podem ser utilizados para projetar vários sites sem esforço. A crescente concorrência exige um site interativo e envolvente, e, portanto, é importante incluir uma variedade de ferramentas que incentivem os visitantes a permanecer mais tempo em uma página. Plugins no WordPress agregam valor à página da web, especialmente tornando-a mais interessante. Utilizar as ferramentas certas, como botões de Call to Action e botões de login e compartilhamento de mídia social com o conteúdo da página, ajuda a melhorar a experiência do usuário. O artigo destacou corretamente o ponto de que selecionar a ferramenta certa e utilizar seus poderes permite que um desenvolvedor de CMS tenha um melhor controle sobre o site.