Destaque do plug-in Divi: ícones de upload Divi

Divi Upload Icons é um plugin de terceiros para Divi que torna mais fácil adicionar mais ícones ao Divi Builder. Ao contrário de outros plug-ins de ícone que integram apenas Font Awesome e Material Icons, este permite que você adicione qualquer conjunto de ícones que desejar. Só precisa ser um tipo de arquivo compatível e usar os cinco tipos de arquivo mais populares.

O plug-in adiciona um uploader à instalação do WordPress, onde você arrastará e soltará seus arquivos de ícone. Os ícones são então adicionados a qualquer módulo Divi que exibe ícones. Assim como os ícones Divi padrão, qualquer conjunto de ícones que você carregue pode ser estilizado com o Divi Builder. Neste destaque do plugin Divi, vamos dar uma olhada nos ícones de upload Divi e ver como é fácil de usar.

Instalando e ativando os ícones de upload Divi

Carregue e ative o plug-in normalmente e vá para Configurações > Ícones de upload Divi no menu do painel para inserir sua chave de ativação.

Upload de ícones com Divi Upload Icons

Também na tela de configurações está o recurso de upload. Aqui, você carregará seus ícones. Os ícones devem estar nos formatos .eot, .svg, .ttf, .woff, .woff2 e .css. Você pode baixar ícones de qualquer fonte que desejar e usá-los com Divi Upload Icons, desde que estejam nesses formatos e incluam o arquivo CSS. Para instalar os ícones, arraste e solte-os na janela de upload. As instruções são fornecidas na área de upload e há um pequeno vídeo que demonstra como usá-lo.

Os ícones às vezes incluem vários formatos. Você deve carregar os arquivos CSS junto com os ícones, e os ícones devem ser um arquivo compatível. Neste exemplo, estou enviando vários conjuntos. Eles incluem vários tipos de arquivos e arquivos CSS. Aqueles na imagem acima com os ícones laranja têm arquivos ausentes.

Os arquivos neste exemplo estão corretos. Eu carreguei tipos de arquivo compatíveis com seus arquivos CSS. Agora tenho mais de 2500 novos ícones. Eu os baixei de iconfont, Dripicons, Foundation Icon Fonts e Map Icons. O desenvolvedor mantém uma lista de ícones que foram testados e você pode usar com Divi Upload Icons. Claro, existem muitos outros ícones que você pode usar.

Para comparação, aqui está o módulo Divi blurb antes de carregar os novos ícones. Divi inclui 360 ícones. Você pode ter uma ideia de quantos são olhando para o comprimento da barra na janela.

Esta imagem inclui todos os 2.500 ícones que carreguei. Agora tenho muito mais ícones para escolher e a barra da janela é muito menor. Você pode ver os ícones no Visual Builder, mas não inclui o novo filtro e ferramentas de pesquisa.

Filtro e pesquisa de ícones de upload Divi

Uma nova ferramenta de filtro é adicionada se você usar o construtor clássico. Você pode abrir ou fechar o filtro. Está fechado neste exemplo.

Clique em Ícones de filtro para ver as famílias de ícones que você instalou e um recurso de pesquisa. Clique em qualquer uma das famílias de ícones para ver apenas essa família. Você também pode ver todas as famílias ou fechar o filtro e a opção de pesquisa. O filtro funciona rápido. Clicar em uma família de ícones ou pesquisar ícones mostra os ícones quase que instantaneamente, mesmo com meus 2500 ícones. Tenho certeza de que depende parcialmente de quantos ícones você instalou, então sua experiência pode ser diferente.

Neste exemplo, selecionei os ícones de mapa que carreguei. Existem quase 200 ícones nesta família de ícones.

Aqui estão os ícones da Fundação . Também possui cerca de 200 ícones.

Aqui estão os Icofonts . Esta família de ícones adiciona mais de 2.000 ícones.

Você pode pesquisar por palavra-chave ou por ícone de nome de família. Os resultados incluem ícones de todas as famílias de ícones que você carregou e aqueles que já estavam disponíveis no Divi.

Seria interessante se o filtro funcionasse após a pesquisa para ver os resultados por família de ícones. Ele mostra o nome com a família de ícones quando você passa o mouse sobre cada ícone. Na imagem acima, estou passando o mouse sobre o segundo ícone da direita. Isso é útil o suficiente, então o filtro de pesquisa não é realmente uma prioridade alta.

Exemplos de ícones de upload Divi

Claro, uma das vantagens de usar ícones é a capacidade de ajustar tamanhos, cores, adicionar círculos, bordas, etc., usando o Divi Builder. O plug-in e os ícones funcionam com o Visual Builder, mas não mostra os ícones na visualização ao vivo. Este exemplo mostra os ícones na seleção de ícone do módulo, mas a visualização ao vivo não está funcionando.

Os ícones aparecem perfeitamente na página ou postagem publicada. Você ainda pode usar o Visual Builder para personalizar o tamanho e as cores, mas não os verá na visualização ao vivo. Eu prefiro o Visual Builder quando estou personalizando cores e tamanhos, mas usarei o Classic Builder para o restante dos exemplos. Esta é a página de destino do pacote de layout Hipoteca.

Os ícones têm uma ótima aparência e podem ser personalizados como os ícones Divi padrão. Encontrei todos esses ícones usando o recurso de pesquisa. Estas são as configurações padrão.

Mudei as cores para combinar com o layout, assim como as imagens originais que o layout usava.

Para este, selecionei usar o tamanho da fonte para o ícone e ajustei para 32px. Está começando a ficar mais parecido com o design original, mas com meus ícones.

Neste, adicionei um círculo a cada ícone. Mudei as cores dos círculos e ícones e adicionei uma borda no segundo e quarto da esquerda. Escolhi cores diferentes apenas para mostrar como são.

Veja como os ícones aparecem à esquerda do texto.

Neste, substituí as imagens no layout do campo de golfe por ícones. Usei as cores do layout e as dimensionei para 48px.

Para este exemplo, desativei o ajuste do tamanho da fonte para os ícones. Este é o tamanho padrão, 96px. Eles combinam bem com o design do layout.

Eles também ficam incríveis ao usar as configurações do ícone de círculo. Mudei a cor do ícone para branco e usei o bronzeado do layout como a cor do círculo. Os ícones ainda estão em 48px.

Para este, usei um dos tons de verde do layout. Existem muitas possibilidades com as personalizações do Divi Builder.

Preço dos ícones de upload da Divi

Os ícones de upload da Divi custam US $ 24,97. Tem uso e atualizações ilimitadas. Você pode comprar Divi Upload Icons no marketplace.

Reflexões finais

O Divi Upload Icons facilita o upload dos ícones exatos que você deseja de qualquer biblioteca de fontes. A ideia por trás do plug-in é, em vez de instalar milhares de ícones desnecessários, você pode instalar os ícones exatos e famílias de ícones que deseja usar com o seu site Divi.

Como você está carregando os ícones no Divi Builder, eles são armazenados no seu servidor. Eu carreguei mais de 2500 ícones e não tive problemas de velocidade com o Divi Builder ou meu site.

Lembre-se de que ele requer fontes com o arquivo de fonte e o arquivo CSS. É fácil carregar as fontes incorretamente (acho que eu sei). Certifique-se de seguir as instruções exatamente ou as fontes serão quadrados vazios. Além disso, não funciona com o Font Awesome 5, mas funciona muito bem com o 4.7.

Eu gostei de usar Divi Upload Icons. Gostaria de usá-lo com o Visual Builder, mas funciona muito bem com o clássico. Demorou uma tentativa extra para ter certeza de que tinha os arquivos certos, mas considerando quantas famílias de ícones existem na Internet, vale a pena reservar um tempo para encontrar os ícones com os arquivos certos. Ícones não são difíceis de encontrar, e o desenvolvedor fornece muitos links para ícones que ele já testou.

Se você estiver interessado em adicionar seus próprios ícones ao Divi Builder, vale a pena dar uma olhada nos Divi Upload Icons.

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

Imagem em destaque via hanss / shutterstock.com