Olhe para qualquer site de negócios de sucesso e você provavelmente verá caixas de recursos com ícones destacando suas principais ofertas.
É um padrão de design comprovado que usamos inúmeras vezes porque funciona. Ajuda os visitantes a verem rapidamente o que torna seu negócio especial sem ler grandes blocos de texto.
Tendo guiado muitos usuários do WordPress em melhorias de sites, sabemos que criar essas caixas de recursos com aparência profissional pode parecer um incômodo.
Mas eis o que a maioria das pessoas não percebe: você não precisa ser um designer ou desenvolvedor para adicionar belas caixas de recursos ao seu site.
Neste guia, compartilharemos as maneiras mais simples de criar caixas de recursos com ícones no WordPress.
Resposta Rápida: Como Adicionar Caixas de Recursos com Ícones no WordPress
Você pode adicionar caixas de recursos com ícones usando qualquer um destes métodos:
- Método 1: Editor de Blocos do WordPress (Simples). Use o bloco nativo de Colunas para criar um layout. Em seguida, insira um bloco de Imagem ou use um bloco de shortcode (para fontes de ícones) dentro de cada coluna para construir uma caixa de recursos básica manualmente.
- Método 2: SeedProd (Design Personalizado). Use o plugin construtor de páginas SeedProd para selecionar um modelo profissional. Você pode então arrastar e soltar o bloco de Ícone pronto para criar caixas de recursos avançadas sem escrever nenhum código.
Por que Adicionar Caixas de Recursos com Ícones?
Caixas de recursos com ícones tornam informações importantes fáceis de escanear e visualmente atraentes. A maioria dos visitantes não lerá cada palavra em uma página com muito texto, pois eles escaneiam rapidamente para encontrar o que é mais importante.
Caixas de recursos destacam pontos-chave, frequentemente combinados com ícones, para que os usuários possam entender seu produto ou serviço rapidamente. Você também pode incluir um botão de chamada para ação para incentivar os usuários a aprenderem mais sobre um recurso específico.
Veja como o WPForms usa caixas de recursos para exibir seus maiores pontos de venda:
Dito isso, vamos mostrar como adicionar caixas de recursos com ícones no WordPress. Simplesmente use os links rápidos abaixo para pular diretamente para o método que você deseja usar:
Método 1: Adicionar Caixas de Recursos com Ícones Usando o Editor de Blocos do WordPress (Método Gratuito)
Você pode adicionar caixas de recursos com ícones ao seu site WordPress usando o editor de conteúdo padrão e o bloco de colunas.
Esta é uma ótima opção se você deseja criar um layout simples sem usar um construtor de páginas.
Passo 1: Abra a Página e Adicione o Bloco de Colunas
Para começar, abra a página onde você deseja adicionar uma caixa de recursos. Em seguida, clique no ícone de adição de bloco ‘+’.
Em seguida, digite ‘Colunas’ na caixa de pesquisa.
Quando o bloco correto aparecer, clique para adicioná-lo à página.
O WordPress agora mostrará todos os diferentes blocos de colunas. Os números indicam quanto espaço cada coluna ocupa no bloco. Por exemplo, ‘50/50’ cria duas colunas que ocupam 50% da largura disponível cada.
Como exemplo, selecionaremos o bloco de colunas ‘33/33/33’, pois isso nos dá três colunas com largura igual, mas você pode usar qualquer layout que desejar.
Passo 2: Adicione Ícones às Colunas
Depois disso, você estará pronto para adicionar ícones às colunas.
A maneira mais fácil de fazer isso é com fontes de ícones em destaque, que são símbolos redimensionáveis que não deixarão seu site lento. Recomendamos o uso do Font Awesome, pois eles têm uma das maiores coleções de ícones gratuitos.
Depois de adicionar fontes de ícones ao seu tema WordPress, é fácil exibi-los em suas colunas usando um shortcode.
Observação: Para usar fontes de ícones como Font Awesome via shortcode, seu tema deve suportá-las, ou você precisará instalar um plugin como o Better Font Awesome. Se você preferir não instalar ferramentas extras, pode pular para o método do bloco de Imagem abaixo.
Simplesmente clique no ícone de ‘+’ da coluna e digite ‘Shortcode’. Quando o bloco correto aparecer, clique para adicioná-lo ao seu layout.
Depois disso, você pode inserir o seguinte shortcode, mas certifique-se de substituir ‘bus’ pelo nome do ícone que deseja usar:
[icon name="bus"]
Para ver uma lista completa de ícones disponíveis, basta acessar a biblioteca de ícones do Font Awesome.
Quando encontrar um ícone que goste, clique nele para ver o nome desse ícone.
Por exemplo, na imagem a seguir, estamos olhando para um ícone chamado ‘address-book’.
Agora você pode adicionar este nome ao shortcode.
Para saber mais sobre como trabalhar com shortcodes, consulte nosso guia para iniciantes sobre como adicionar um shortcode no WordPress.
Se você preferir usar uma imagem da biblioteca de mídia do WordPress, você pode adicionar um bloco de imagem em vez de usar uma fonte de ícone.
Para fazer isso, basta clicar em '+' na primeira coluna e, em seguida, adicionar um bloco 'Imagem' em vez de um bloco de shortcode.
Agora você pode escolher uma imagem da biblioteca de mídia ou fazer upload de um novo arquivo do seu computador. Não se esqueça de adicionar um Texto Alt apropriado para descrever o ícone para mecanismos de busca e leitores de tela.
Passo 3: Adicione Texto à Caixa de Recursos
Depois de adicionar todos os seus ícones, o próximo passo é adicionar texto à caixa de recursos.
Para fazer isso, clique no botão '+' dentro do bloco Colunas. Em seguida, adicione um bloco de Parágrafo.
Depois disso, basta digitar seu texto no bloco de parágrafo.
Você pode adicionar ícones e texto às outras colunas repetindo o mesmo processo.
Passo 4: Crie Múltiplas Linhas (Opcional)
Você quer que sua caixa de recursos tenha várias linhas?
Simplesmente clique no bloco Colunas e selecione os três pontos na barra de ferramentas. Você pode então selecionar 'Duplicar'.
Isso criará uma cópia do bloco Colunas.
Agora, simplesmente siga o mesmo processo descrito acima para adicionar conteúdo à segunda linha.
Passo 5: Publique Sua Caixa de Recursos
Quando estiver satisfeito com a caixa de recursos, você pode adicionar outro conteúdo à página, como uma imagem do produto ou categorias e tags.
Para tornar a caixa de recursos ativa, basta clicar no botão 'Atualizar' ou 'Publicar'.
Agora você pode visitar seu site, blog ou loja online para ver a caixa de ícones de recursos em ação.
Aqui está um exemplo do que as pessoas verão ao visitar seu blog WordPress.
Método 2: Adicionar Caixas de Recursos com Ícones Usando um Plugin Page Builder (Recomendado)
Se você deseja criar uma caixa de recursos simples, o editor de blocos do WordPress é uma boa opção. No entanto, se você deseja criar uma caixa mais avançada com um design totalmente personalizado, precisará de um plugin de construtor de páginas.
SeedProd é o melhor construtor de páginas WordPress do mercado que permite criar páginas personalizadas usando um editor de arrastar e soltar.
Ele possui mais de 300 modelos projetados profissionalmente que você pode usar para criar páginas bonitas rapidamente. Ele também tem uma biblioteca inteira de ícones que você pode adicionar às suas caixas de recursos com um único clique.
Aqui está um exemplo de uma caixa de recursos criada usando os blocos e ícones prontos do SeedProd.
Vimos nossas marcas parceiras usarem essa ferramenta para criar seus sites e elas tiveram uma excelente experiência. Para mais detalhes, veja nossa avaliação do SeedProd.
Etapa 1: Instalar e Ativar o SeedProd
A primeira coisa que você precisa fazer é instalar e ativar o plugin SeedProd. Para mais detalhes, veja nosso guia para iniciantes sobre como instalar um plugin WordPress.
Observação: Existe uma versão gratuita do SeedProd, mas usaremos a versão Pro, pois ela tem mais recursos. Se você usa marketing por e-mail para promover seus produtos, o SeedProd Pro também se integra a muitos dos melhores serviços de marketing por e-mail.
Após a ativação, vá para SeedProd » Configurações e insira sua chave de licença.
Você pode encontrar essas informações fazendo login na sua conta SeedProd.
Etapa 2: Escolha um Modelo Projetado Profissionalmente
Para começar, vá para SeedProd » Landing Pages e clique em ‘Adicionar Nova Landing Page’.
Na próxima tela, você pode escolher um modelo. Você pode personalizar todos esses modelos usando o construtor de arrastar e soltar do SeedProd, mas ainda é uma boa ideia escolher um modelo que corresponda aos seus objetivos.
Todos os modelos do SeedProd são organizados em diferentes tipos de campanha, como em breve e campanhas de captura de leads. Você pode até usar os modelos do SeedProd para melhorar sua página 404.
Para este guia, usaremos o ‘Modelo em Branco’, mas você pode usar qualquer modelo que desejar.
Para escolher um modelo, basta passar o mouse sobre ele e clicar no ícone de ‘Checkmark’.
Isso abre um pop-up onde você pode dar um nome à página. O SeedProd usa o nome da página na URL, mas você pode alterar este link se desejar. Por exemplo, você pode querer melhorar seu SEO do WordPress incluindo algumas palavras-chave relevantes.
Depois disso, clique no botão ‘Salvar e Começar a Editar a Página’.
Isso abre o modelo no editor de páginas de arrastar e soltar do SeedProd.
Passo 3: Desenhe o Layout da Sua Caixa de Recursos
Como você está usando o modelo em branco, o primeiro passo é escolher um layout. Para fazer isso, basta clicar em qualquer um dos layouts de coluna.
Depois disso, encontre o bloco ‘Ícone’ no menu do lado esquerdo.
Agora você pode arrastar e soltar este bloco na primeira coluna vazia.
Isso adiciona o bloco de Ícone ao seu layout, com um ícone padrão já selecionado.
Para alterar o ícone, clique nele e depois selecione o botão ‘Escolher Imagem’.
Isso abre a biblioteca de ícones com centenas de ícones para escolher. Você pode usar a barra de pesquisa para procurar um ícone específico ou navegar por toda a lista.
Quando encontrar uma imagem que deseja usar, basta passar o mouse sobre ela e clicar no botão ‘+’ para adicioná-la à sua página.
Para personalizar o ícone, clique para selecioná-lo.
Agora você pode ajustar este ícone usando as configurações no menu do lado esquerdo, incluindo alterar seu alinhamento, tamanho, cor e muito mais.
Para ver mais opções, vá em frente e clique na aba ‘Avançado’.
Aqui, você pode alterar o espaçamento, adicionar uma borda e até mesmo adicionar efeitos de animação CSS.
Passo 4: Adicione Texto de Recurso
Depois de fazer isso, prossiga e adicione um bloco de ‘Texto’ abaixo do ícone.
Simplesmente encontre o bloco de ‘Texto’ no menu à esquerda e, em seguida, posicione-o abaixo do seu ícone usando arrastar e soltar.
Para adicionar texto, clique para selecionar o bloco. Você pode então digitar no pequeno editor de texto no menu à esquerda.
Aqui, você pode adicionar links, alterar o alinhamento do texto, alterar a cor do texto e muito mais.
Passo 5: Duplique Linhas e Publique
Para personalizar as outras colunas, siga os mesmos passos acima.
Se você quiser adicionar outra linha de caixas de recursos com ícones, passe o mouse sobre a seção e clique no botão ‘Duplicar Linha’.
Você pode duplicar a seção quantas vezes quiser para criar rapidamente mais caixas de recursos com ícones.
Você pode então adicionar novos ícones e texto seguindo o mesmo processo descrito acima.
Você pode continuar trabalhando na página adicionando mais blocos e personalizando esses blocos no menu à esquerda.
Quando estiver satisfeito com a aparência da página, clique no botão ‘Salvar’. Você pode então selecionar ‘Publicar’ para tornar essa página ativa.
Perguntas Frequentes Sobre Como Adicionar uma Caixa de Recursos com Ícones
Aqui estão algumas perguntas que nossos leitores frequentemente fazem sobre como adicionar uma caixa de recursos com ícones no WordPress:
Como insiro ícones no WordPress?
Para inserir ícones, o método mais fácil é instalar um plugin como o Font Awesome ou usar um construtor de páginas como o SeedProd. Se você não quiser usar um plugin, pode fazer o upload de arquivos de ícones SVG diretamente usando o bloco de Imagem padrão.
Como insiro símbolos no WordPress?
Para inserir símbolos, você precisa instalar e ativar o plugin Insert Special Characters
. Após a ativação, a ferramenta adicionará um botão ‘Ω’ (ômega) na barra de ferramentas de blocos do WordPress.
Você pode usá-lo para acessar o menu de caracteres especiais. Para mais informações, veja nosso tutorial sobre como adicionar caracteres especiais em posts do WordPress.
Como adicionar ícone de menu no WordPress sem plugin?
Para adicionar ícones de menu sem um plugin, ative ‘Classes CSS’ na aba Opções de Tela na parte superior da página Aparência » Menus. Em seguida, adicione uma classe CSS específica ao seu item de menu e use código CSS personalizado no Personalizador para exibir a imagem de fundo do ícone.
Como adicionar ícones sociais personalizados no WordPress?
Para adicionar ícones sociais, basta usar o bloco nativo ‘Ícones Sociais’ dentro do editor do WordPress. Clique no botão ‘+’ dentro do bloco para escolher redes como Facebook ou Twitter, e então cole seus links de perfil diretamente nos campos.
Como adiciono um ícone de mídia social a um menu do WordPress?
Para adicionar ícones sociais a um menu de navegação, sugerimos usar um plugin como Menu Image para fazer upload de ícones diretamente para os itens de menu. Alternativamente, adicione um ‘Link Personalizado’ ao menu e cole o código HTML do ícone da fonte no campo Rótulo de Navegação.
Se você estiver interessado, dê uma olhada em nosso guia sobre como adicionar ícones de mídia social aos menus do WordPress.
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 em seu site WordPress e maneiras de criar um site WordPress compatível com 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.