Destaque do plug-in Divi: ícones WP e Divi

WP and Divi Icons é um plugin de terceiros para WordPress que funciona com qualquer tema WordPress e se integra ao Divi Builder. Para uso com Divi, inclui layouts exclusivos que você pode usar em seus projetos. Os ícones estão disponíveis no editor do WordPress e em qualquer módulo Divi que permite a você escolher os ícones. Neste artigo, vamos dar uma olhada nos ícones WP e Divi e ver o que os diferencia da multidão.

WP e Divi Icons adiciona mais de 2500 ícones ao WordPress. Inclui ícones impressionantes de fontes, ícones de materiais e 450 ícones personalizados, incluindo 48 ícones multicoloridos. Ele está disponível em uma edição gratuita e uma profissional. Estou testando a edição profissional.

Instalação de ícones WP e Divi

Faça upload e ative o plugin normalmente. Estou usando a versão 1.1.0 com Divi versão 3.17 e WordPress 4.9.8.

Em seguida, você precisará ativar sua licença. Você pode navegar até a tela de ativação ou clicar na mensagem que aparece na parte superior da tela. Ainda é útil saber como navegar até lá, porque esta página se tornará a tela de opções assim que você inserir sua chave de licença.

Para chegar à tela independentemente do tema que você está usando, clique no link Instruções na descrição do plug-in na lista de plug-ins. Se você estiver usando Divi, um novo item de menu será adicionado ao menu Divi no painel chamado WP e Divi Icons. Clique aqui e insira sua chave de licença.

Personalização dos ícones multicoloridos

Depois de inserir sua chave de licença, ele abre a tela com as instruções, lista de 48 ícones multicoloridos e ferramentas para criar seus próprios esquemas de cores para esses ícones.

Você tem controle sobre três cores. Ajuste os controles de cor e aguarde alguns segundos para ver os resultados. Clicar em Remover exclui o esquema de cores. As cores adicionam um pequeno efeito de sombreamento, o que cria versões mais escuras de cada cor e tem uma aparência incrível.

Clicar em Adicionar esquema de cores cria um novo conjunto de ícones multicoloridos que você pode ajustar.

Adicione quantos esquemas de cores desejar. Isso expande muito o que você pode fazer com ícones. Os controles são intuitivos. Acontece que isso é um pouco viciante.

Usando ícones WP e Divi no WordPress com qualquer tema

Para usar os ícones com qualquer tema, selecione o novo ícone adicionado ao editor do WordPress.

Isso abre o editor onde você pode escolher um ícone, editar a cor digitando-o no campo de cores ou usando o seletor de cores, alterar o tamanho inserindo o número em pixels ou usando o controle deslizante, adicionar um título e adicionar uma classe. Você também pode pesquisar ícones.

Todas as alterações feitas são mostradas ao vivo. Neste exemplo, inseri a cor desejada, alterei o tamanho para 106 pixels e alterei o nome para Folha Verde.

Clicar em OK adiciona o ícone ao seu conteúdo.

Clique duas vezes no ícone para abrir o editor e fazer alterações.

Clique em OK e as alterações serão refletidas no ícone em seu conteúdo.

Este editor não edita os ícones multicoloridos. Você terá que editá-los na tela de configurações principal que demonstrei acima. Você ainda pode selecioná-los neste editor, alterar seu tamanho, adicionar um título, adicionar uma classe e inseri-los em seu conteúdo a partir daqui.

Os ícones ficam ótimos no conteúdo.

Usando ícones WP e Divi com o Divi Builder

Muitos novos ícones são adicionados ao Divi Builder, que podem ser acessados ​​a partir de qualquer módulo que permita a seleção de ícones. Um novo recurso de pesquisa é adicionado e os ícones são muito maiores, tornando-os mais fáceis de ver (o que mostra que este plugin foi provavelmente desenvolvido por um cara velho como eu. Eu posso me identificar e apreciar esse recurso).

Gostaria de ver um filtro adicionado para poder escolher entre Font Awesome, Material ou os ícones personalizados. Desta forma, eu poderia facilmente ver os ícones personalizados e ignorar os ícones Font Awesome e Material se eu quisesse algo diferente de todos os outros, ou construir apenas com Font Awesome ou Material Icons, ou mesclar meus ícones seletivamente.

Inclui ícones de uma e várias cores.

Pesquise e altere ícones ao vivo no front-end.

Eles são ajustáveis ​​como qualquer ícone Divi.

Você também pode adicionar ícones multicoloridos do construtor de front-end. Você não pode ajustar as cores do ícone aqui (isso é feito no editor de ícones multicoloridos), mas pode adicionar um círculo, adicionar uma borda, ajustar suas cores e ajustar o tamanho do ícone nas configurações do módulo.

Neste exemplo, adicionei um círculo com uma borda.

Você pode usá-los no front-end e no back-end.

O editor de ícones do WordPress também está disponível no módulo de texto Divi. Este editor funciona exatamente da mesma forma que qualquer tema WordPress.

Layouts de ícones WP e Divi

O plugin funciona com qualquer tema, mas tem recursos especiais apenas para Divi. Uma das maiores vantagens de usá-lo com Divi são os layouts personalizados exclusivos. Eles foram projetados de forma personalizada usando WP e Divi Icons e o link de download está disponível apenas dentro do plugin. Eles estão disponíveis para download para qualquer pessoa com o plugin e podem ser usados ​​em qualquer projeto. Eles são layouts completos com muitos módulos estilizados.

Já existem vários disponíveis e vários outros a caminho. Aqui está uma olhada em cada um com foco em como eles usam os ícones. Você pode vê-los na página de demonstração do desenvolvedor.

Layout de comércio eletrônico

Este layout inclui um cabeçalho estilizado com bolhas para mostrar os tipos de gateways de pagamento e parceiros de envio que a empresa usa. Ícones multicoloridos mostram os serviços oferecidos. Como funciona é mostrado em guias. Também inclui tabelas de preços, depoimentos, inscrição no boletim informativo de perguntas frequentes e rodapé.

Layout de agência criativa

Este inclui um cabeçalho estilizado, uma área sobre os tipos de serviços que você oferece, um portfólio, um controle deslizante que cobre como você trabalha e as etapas que executa, depoimentos, prêmios, sobre sua equipe, contato e rodapé. Ele usa muitos cantos angulares e efeitos de sombra profundos. Os ícones multicoloridos mostram os serviços.

Layout de negócios escuro

Este possui um cabeçalho de duas colunas com uma imagem de um lado e texto do outro. Uma seção que mostra os serviços que você oferece usa ícones multicoloridos e mostra imagens e texto alternando para baixo na página. Outras seções usam um grande texto de fundo e mostram a história da empresa, os membros da equipe com ícones multicoloridos na sobreposição, formulário de contato, informações de contato e rodapé.

Business Layout Light

Este é o mesmo layout do Business Layout Dark, mas com cores claras.

Layout sem fins lucrativos

Este exibe um controle deslizante de imagem em tela cheia com um menu vertical à direita e usa ícones para botões de acompanhamento social. Uma pequena seção abaixo mostra um CTA de doação. Também inclui uma seção sobre, causas que você apóia, uma seção de eventos, projetos, sinopses com ícones, patrocinadores e um rodapé.

Licença e Documentação

Os preços variam de grátis para uma edição limitada, $ 39 para um único site, $ 59 para 3 sites e $ 79 para sites ilimitados. Você pode comprar o plugin no site do desenvolvedor.

Inclui suporte premium e 3 anos de atualizações. A documentação é fornecida no site do desenvolvedor.

Reflexões finais

WP e Divi Icons são fáceis de usar. Demora alguns segundos extras para carregar os ícones quando eu clico neles nos módulos Divi. Tenho certeza de que isso se deve principalmente à minha lenta conexão de Internet “bem-vindo ao campo”. Eu gostaria de ver um filtro adicionado aos módulos Divi. O recurso de pesquisa é útil para localizar ícones com base em palavras-chave.

Eu gosto que adiciona Font Awesome e Material Icons, mas meus favoritos são os ícones personalizados - e especialmente os ícones multicoloridos. O editor é simples e divertido de usar. Acho que é um ótimo plugin mesmo sem Divi, mas é ainda melhor com Divi por causa dos layouts gratuitos.

Nós queremos ouvir de você. Você já experimentou os ícones WP e Divi? Deixe-nos saber o que você pensa sobre isso nos comentários.

Imagem em destaque via VectorsMarket / shutterstock.com