Como Adicionar Caixas de Recursos com Ícones no WordPress

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. Eu

O Que São Caixas de Recursos com Ícones?

A maioria das pessoas não lerá cada palavra em seu site WordPress, especialmente se uma página for muito rica em texto.

Em vez disso, os visitantes escanearão a página para encontrar as informações que procuram, rapidamente. Isso significa que você precisa apresentar informações importantes de uma maneira que seja escaneável e envolvente, e é por isso que tantos sites usam caixas de recursos.

Na imagem a seguir, você pode ver como o WPForms usa caixas de recursos para destacar os maiores pontos de venda do plugin.

Você pode até adicionar um botão de chamada para ação para que os usuários possam saber mais sobre um recurso específico.

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 (Sem Plugin Necessário)
• Método 2: Adicionar Caixas de Recursos com Ícones Usando um Plugin Page Builder (Recomendado)

Método 1: Adicionar Caixas de Recursos com Ícones Usando o Editor de Blocos do WordPress (Sem Plugin Necessário)

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. Isso significa que você não precisa instalar um novo plugin do WordPress, sendo um método rápido e fácil.

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.

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 shortcode.

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.

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.

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.

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.

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.

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.

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.

Projete Sua Caixa de Destaque

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.

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.

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.

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.