As tendências em web design mudam drasticamente de ano para ano. Algo que parece ter tomado conta e permanecer, no entanto, é o uso da animação. Quanto mais as pessoas usam dispositivos e aplicativos móveis, mais esperam que os sites que visitam usem alguns dos mesmos princípios. O uso adequado da animação pode estimular a interação do usuário, permitindo que você oriente os visitantes para o seu site. através da experiência que você quer ter. É aqui que entra o Serviço Lordicon. O que é o Lordicon? Lordicon é uma coleção de ícones animados interessantes que podem ser usados em vários formatos digitais. Cada ícone está disponível nos formatos JSON, GIF, EPS, SVG e PNG. Além disso, você pode copiar e colar códigos HTML padrão. Usar HTML torna possível integrar ícones na maioria dos ambientes CMS e HTML estáticos sem a necessidade de qualquer plugin.
Lordicon oferece acesso a mais de 5.600 ícones animados de sua biblioteca. Você pode usar mais de 1000 desses Lordicon ícones de graça. No entanto, se você quiser acessar a biblioteca completa, precisará de uma assinatura. Começar com Lordicon é simples. Regista-te com a tua morada. e-mail, defina uma senha e você está pronto para navegar pela biblioteca estendida. Se você é um desenvolvedor, se inscrever no GitHub pode ser a maneira mais fácil de todas.
E nos vossos sites. web. Quanto custa o Lordicon? Lordicon é livre de usar! No entanto, como mencionado acima, você precisará de uma assinatura paga para usar todas as variantes de ícones. Lordicon oferece dois pontos de preço. Você pode optar por pagar mensalmente, o que custará 16 USD por mês. Se você optar por comprar um plano anual, seu custo. é reduzido pela metade para US $ 8 por mês ou US $ 96 por ano. Também deve ser notado que com uma assinatura paga, você também terá mais controle sobre como integrar seus ícones em seu site. web. Navegando pela interface Lordicon A interface Lordicon é simples e bem pensada. O primeiro passo é procurar ícones. Depois de encontrar o que deseja usar, clique nele para exibir suas opções. Com o ícone selecionado, você pode editá-lo com as opções listadas na barra lateral. Aqui você vai definir as cores e largura das linhas. A partir daí, você pode copiar HTML, baixá-lo como GIF ou Lottie (JSON), ou clicar no botão Mais para opções adicionais. Se você quiser os parâmetros de controle completos para o seu ícone, Clique na seta na barra lateral direita para abrir o editor completo. No editor completo, você terá algumas opções adicionais disponíveis. Além de escolher a cor e o tamanho do contorno, você poderá escolher uma variação para o seu ícone. Normalmente, há três variantes diferentes para escolher, para que você possa combinar com a estética do seu site. Como queiras. As opções adicionais incluem o estilo, tamanho e escala do gatilho. Depois de fazer as alterações que você gosta, você pode baixar ou incorporar o ícone. As opções de incluem incorporação com HTML, Loridcon Lottie JSON, GIF, APNG, WebP e MP4 formatos. Além disso, você pode baixar arquivos de origem nos formatos EPS, Lottie JSON ou After Effects. Você pode então importar esses arquivos para a biblioteca de mídia WordPress para
Não os use como achar melhor. Como usar Lordicon com qualquer site WordPress É muito fácil incorporar Lordicons em sites WordPress usando blocos Gutenberg com o plugin Lordicon. A documentação da Lordicon afirma que seus ícones podem ser facilmente incorporados em qualquer site WordPress usando blocos Gutenberg ou usando módulos Divi (ou outros construtores de sites). Além disso, eles trabalharam com o Slider Revolution para integrar seus ícones em controles deslizantes. Usando blocos de Gutenberg Usar ícones de Lordicon com Gutenberg é simples. Há duas maneiras de fazer isso. A primeira maneira é definir os parâmetros de design no Lordicon e copiar o código HTML para usá-lo em um bloco HTML personalizado em Gutenberg. O segundo usa o plugin Lordicon Animated Icons com seu próprio bloco personalizado em Gutenberg.
Primeiro, você precisa instalar e ativar o plugin Lordicon no painel do WordPress. Uma vez ativado, crie ou edite uma página ou postagem em seu site. WordPress. Em seguida, clique no ícone preto + para escolher o bloco Elemento Lordicon. Em seguida, vá para a biblioteca de ícones Lordicon. Para este exemplo, usaremos o ícone de abelha. Procure a abelha, em seguida, seta para abrir o editor completo. Incorporar o seu ícone Incorporar o ícone pode ser feito de duas maneiras. A primeira maneira é baixar o arquivo JSON do Lordicon e, em seguida, enviá-lo para o seu site. WordPress. A segunda maneira é clicar no botão HTML e copiar o link CDN para o código de incorporação para simplesmente vincular a ele.
Ele funciona bem de qualquer maneira, mas usando JSON em seu site. tem potencial para abrandar. Se você planeja usar apenas alguns efeitos de animação aqui e ali, é perfeito. No entanto, se você quiser usar vários arquivos JSON, seria melhor usar o link CDN, então em
por linha (opção do meio mostrada na captura de tela abaixo) para o nosso ícone. Nas configurações de visualização, defina o gatilho para Loop ao passar o mouse e tamanho para Grande. Em seguida, defina o tipo de movimento disponível para Hover-1. Isto terá o seu ícone. animado ao mover o mouse e animação no loop. Em seguida, ajuste a largura do curso para 35%. Depois de ter as configurações corretas, clique no botão GIF para baixar o ícone. Quando a caixa de diálogo for exibida, selecione transparente para plano de fundo, 100px para tamanho e deixe o valor padrão de 250ms para atraso. Carregue no botão BAIXAR. Adicionar o seu ícone Volte para o construtor de Divi e selecione a primeira mensagem na seção Heróis. Clique no ícone da roda para editar e selecione o menu suspenso na seção Imagem e ícone. Clique no ícone de calendário já instalado para substituí-lo. Selecione o GIF recém-baixado para adicioná-lo à sua biblioteca de mídia. Em seguida, clique na guia Design e role para baixo até Largura da imagem\/ícone . Defina a largura do ícone para 100 px. Deixe o alinhamento definido à esquerda e clique na caixa de seleção verde para salvar o módulo. Apesar de incorporar um GIF em seu site. Divi é simples, vamos explorar uma maneira adicional pela qual você pode incorporar ícones animados de Lordicon em seu site. Divi. Usando o módulo Divi Code Este método lhe dará um pouco mais de controle sobre como o ícone é apresentado. Incorporar um GIF funciona muito bem, mas limita alguns dos efeitos de animação. Por exemplo, efeitos como passar o mouse não funcionam ao usar um GIF. Para ter controle real sobre todos os aspectos de como o ícone Lordicon aparece no Divi, sugerimos que você use o Divi Code Module. Usar o módulo Código é simples. Usando a mesma página de pacote de layout, navegue até o