Destaque do plug-in Divi: Divi Icons Pro

Divi Icons Pro é um plugin de terceiros que adiciona mais de 2500 ícones e vários recursos relacionados ao Divi Builder. Ele vem com várias opções de compra e ainda inclui uma opção gratuita com mais de trezentos ícones personalizados. Neste destaque do plugin Divi, vou dar uma olhada na edição profissional do plugin e ver o que ele pode fazer.

Sobre Divi Icons Pro

Divi Icons Pro adiciona muitos novos recursos de ícone ao Divi, incluindo:

• Mais de 2500 novos ícones
• 360 ícones de estilo de linha personalizados
• 1295 ícones de fontes impressionantes em 74 categorias e 4 estilos cada
• 900 ícones do Material Design em 16 categorias e 5 estilos cada
• Integração Divi Builder
• Recurso de pesquisa de ícone nos módulos Divi
• Filtro de ícone nos módulos Divi para escolher por família ou digite o nome do ícone

Os ícones se integram ao construtor Divi e funcionam da mesma forma que os ícones nativos do Divi, para que você possa estilizá-los com qualquer módulo Divi que use ícones. Assim como qualquer ícone no construtor Divi, você pode personalizar a cor e o tamanho, definir onde será exibido com os controles do módulo e adicionar um círculo ou borda.

Instalação do Divi Icons Pro

Descompacte o arquivo de download. Dentro, você encontrará o plugin e as instruções. Faça upload e ative o plugin normalmente.

Ative a chave API em Configurações > Ativação do Divi Icons PRO no menu do painel. Agora você pode usar a versão pro do plugin. Os ícones são integrados automaticamente ao Divi Builder, então não há mais nada que você precise fazer a menos que queira personalizar as configurações padrão nas opções de tema.

Opções de tema Divi Icons Pro Divi

Os ícones estão habilitados por padrão, mas você pode habilitar ou desabilitar as famílias de ícones que você deseja e escolher como eles são carregados no site. Uma nova guia Divi Icons Pro é adicionada às Opções do Divi Theme. Aqui, você pode escolher as famílias de ícones que deseja usar. Você também pode escolher carregar Font Awesome e Google Material Icon Fonts do CDN.

Divi Icons Pro Icons

Os ícones, filtros e recursos de pesquisa são adicionados automaticamente aos módulos Divi que usam ícones. São três módulos de resumo mostrando um ícone de Ícones de estilo de linha, Fantástico de fonte e Ícones de design de material.

Divi Icons Pro Search

O recurso de pesquisa permite que você use palavras intuitivas para encontrar seus ícones. Você não precisa saber o nome do ícone. Basta inserir a palavra-chave que deseja pesquisar e os ícones aparecerão na área de seleção de ícones. Você pode restringir sua pesquisa por marca, se desejar, selecionando a marca no filtro. Alguns dos ícones não apareceram nos resultados da pesquisa, então a pesquisa não é perfeita, mas funcionou bem o suficiente. Alguns dos ícones de Font Awesome e Material Icons podem não ter nomes adequados.

Filtro Divi Icons Pro

Você pode filtrar os ícones ou ver todos eles. O filtro mostra ícones daquela marca ou família específica. Para ver as marcas específicas, basta clicar no botão com o rótulo da marca que deseja ver. Ele filtrará todos os outros ícones. Este exemplo mostra uma pequena amostra de ícones de temas elegantes.

Aqui está uma amostra dos ícones de estilo de linha. Eles são mais finos do que os outros ícones, então tendem a funcionar melhor sozinhos. Eu tentei com os outros e eles funcionam juntos em alguns casos. Vale a pena tentar ver o que funciona para você. Os ícones são bem desenhados e são alguns dos meus favoritos entre as marcas.

Aqui está uma pequena amostra de ícones Font Awesome.

Aqui está uma pequena amostra dos Ícones do Material Design.

Exemplos Divi Icons Pro

Para este exemplo, substituí as imagens no layout Resort por ícones de estilo de linha. Eu os configurei para azul e alterei o tamanho para 48 pixels. Os ícones ficam ótimos no layout.

Neste, mudei a localização do ícone da parte superior para a esquerda. Também alterei o tamanho para 30px e adicionei 50px de preenchimento para centralizar cada sinopse.

Neste exemplo, substituí o módulo de mídia social no rodapé por sinopses para que pudesse escolher meus próprios ícones e estilizá-los. Todos esses são do Font Awesome. Eu configurei as cores para corresponder à marca da rede, alterei o tamanho para 52 px e adicionei 30 px de preenchimento ao lado direito para centralizá-las.

Desta vez, mudei o ícone para branco e tornei o plano de fundo a cor da marca. Eu adicionei uma sombra de caixa e algum preenchimento para centralizar os ícones. Também adicionei preenchimento ao botão laranja para ampliá-lo de forma que corresponda à largura dos ícones sociais. Os ícones combinam bem com o design do layout.

Este usa o layout Home Improvement. Substituí as imagens por sinopses e uma combinação de ícones usando diferentes famílias de fontes. Eles estão configurados para serem exibidos à esquerda da sinopse. Os ícones têm 50px. Você pode ver neste exemplo que pesquisei os ícones Font Awesome para "pintar".

Eles já eram sinopses com ícones, então eu apenas os selecionei, procurei os mesmos tópicos e escolhi ícones diferentes.

Este adiciona um círculo aos ícones. Eu fiz o círculo branco para combinar com o plano de fundo do layout e fiz a cor do círculo combinar com os ícones.

Os ícones funcionam com botões, mas não são exibidos no Visual Builder. Eles funcionam muito bem no site real.

Aqui está o ícone no botão dentro do layout. Funciona muito bem.

Aqui está uma visão mais próxima para que você possa ver como fica no botão.

Neste exemplo, substituí as imagens por sinopses dentro do layout paralegal. Procurei ícones que correspondessem ao tópico e, com exceção do ícone de dinheiro, usei cores dos gráficos originais.

Para este exemplo, substituí as imagens no layout Açougueiro por ícones. Usei o vermelho do texto do título e configurei o tamanho da fonte do ícone para 84px.

Eu adicionei uma cor de fundo e uma sombra de caixa a cada uma das sinopses. Parece ótimo dentro do layout. Estou pairando sobre a sinopse no centro para mostrar seu efeito de foco. Ele se eleva acima dos outros e o conteúdo, incluindo os ícones, muda para a direita.

Preço Divi Icons Pro

Existem várias opções de compra com base em quantos sites você deseja usar com o plugin. Eles incluem suporte de 6 meses e atualizações vitalícias. Você pode comprar o Divi Icon Pro no site do desenvolvedor.

• Licença regular (1 site) - € 25,00
• Licença estendida (sites ilimitados) - € 65,00

Há também uma versão gratuita que inclui os ícones de estilo de 360 ​​linhas. Não inclui suporte ou atualizações.

Documentação do Divi Icon Pro

A documentação está incluída no arquivo de download, mas você também pode acessá-lo online. A documentação é detalhada e orienta você na instalação do plug-in e no uso dos ícones e recursos. Também inclui perguntas frequentes e links para obter suporte. Os links incluem as comunidades Divi nas redes sociais e sua conta com um link para criar um tíquete de suporte.

Reflexões finais

Os plug-ins de ícones são a maneira mais fácil de adicionar novos ícones ao Divi Builder e o Divi Icons Pro é o mais fácil possível. Inclui muitos ícones e você pode ativar ou desativar as marcas específicas de ícones para ter mais controle sobre o que aparece nos módulos. Eu gosto do filtro e dos recursos de pesquisa. Consegui encontrar um ícone para cada tópico com o qual trabalhei.

Os únicos problemas que tive foram os ícones não quererem aparecer nos botões ao usar o Visual Builder, mas funcionou muito bem no Classic Builder e eles aparecem muito bem no site. Alguns dos ícones não apareceram nos resultados da pesquisa, mas acho que é mais uma questão de como os ícones são nomeados pelos desenvolvedores de ícones. Esses problemas são menores e não me impedem de usar ou recomendar o plugin.

Divi Icons Pro é fácil de usar e adiciona uma tonelada de novos ícones praticamente sem esforço. Se você estiver interessado em adicionar mais ícones ao Divi builder, o Divi Icons Pro é um trabalho simples.

Nós queremos ouvir de você. Você já experimentou o Divi Icon Pro? Deixe-nos saber o que você pensa sobre isso nos comentários.

Imagem em destaque via VectorsMarket / shutterstock.com