Como Adicionar ÍCONES ANIMADOS no Elementor | Passo a Passo

nesse vídeo eu vou te ensinar a como adicionar ícones animados aí no seu site ou página feito com elementor e o melhor de tudo de uma forma gratuita e bem simples de fazer fala pessoal tudo bem Rodrigo aqui do canal aprendendo sites antes de eu continuar aqui com o nosso passo a passo Eu só peço que você não esqueça de deixar o like nesse vídeo e também já se inscreve no canal Aí caso você não é inscrito E caso você queira aprender tudo sobre criação de sites beleza vamos lá [Música] então beleza pessoal vamos lá

então olha só eu tô aqui nessa Landing page e essa aqui ela é uma Landing Page para gestor de tráfego aí que eu criei e aqui você pode ver então que tem alguns Box aqui com iconz e esses iconz eles são sólidos né são aqueles icin padrões lá do elemento então nessa aula eu vou te ensinar a como colocar aqui uns ícones animados né enfim para dar um toque no design para deixar o site ou a página mais bonita né e da você pode estar seguindo esse mesmo passo a passo então e aplicando aí no

seu site ou na sua Landing page enfim tá para fazer isso a gente não vai precisar do elementor pro a gente não vai precisar gastar 1 centavo vai ser tudo de forma gratuita beleza inclusive se você quiser aprender aqui a como criar essa Landing Page do zero eu ensino em outra aula aqui do canal tá pessoal então você pode estar vindo aqui no canal ó e acompanhando essa aula aqui ó como criar Land Page para gestor de tráfego do zero passo a passo no WordPress eu ensino a como criar ela do absoluto zero Beleza o

link vai est na descrição caso você temha interesse aí de assistir depois e também ela tá disponível aqui no meu pack de templates então você pode estar adquirindo aí o modelinho dessa página já pronta né então o pack de templates aqui basicamente é um pacote com mais de 40 ling pages que eu mesmo desenvolvi e eu disponibilizo todas essas L pages prontas aqui você pode estar baixando todas elas importando aí no seu elementor né no no seu WordPress editando e publicando tudo de forma simples e rápida tá deixa eu achar a landpage aqui de gestor

só um minuto tá aqui ó essa aqui então então você pode est adquirindo pronto aí caso você tenha interesse beleza sem Muita enrolação ó eu tô aqui com meu WordPress aberto tá então eu vou clicar aqui em editar com elementor pra gente tá abrindo aqui o editor do elementor Ó vou vir mais embaixo Aqui e aqui estão os ícones normais então do elementor tá E para pegar os ícones animados então eu vou est vindo nesse site aqui ó lordicon.com tá então o link desse site vai tá na descrição e esse site ele mesmo fala aqui

ó ele disponibiliza mais de 18.000 ícones animados e você pode estar vindo aqui baixando esses ícones tá tem os ícones Premium aqui ó são mais de 15.000 ícones Premium ou seja são pagos né você precisa pagar para ter acesso porém tem mais de 3.200 ícones gratuitos então você pode est utilizando esses ícones grat gratuitos aí tranquilamente nos seus nos seus sites aí enfim nos seus projetos beleza nesse caso aqui eu já tô logado aqui na conta tá eu já fiz login Porém quando você acessar pela primeira vez vai aparecer aqui um botãozinho de de login

e você pode estar fazendo login ali com o Google enfim ou com o seu e-mail da maneira que você quiser tá é bem simples aí coisa de um minuto eu vou clicar aqui para explorar Então os ícones né E aqui ó basicamente Ele tem seis Estilos diferentes ó então tem esse estilo tem esse outro aqui aparece a quantidade de ícones que tem ó tem esse esse então você escolhe aí o que mais vai se adequar ao seu projeto ou o que mais se aproxima aí da sua identidade visual enfim o que fizer sentido para você

eu vou selecionar esse primeiro aqui que eu achei mais bonito ó eu vou clicar aqui e aqui então vai aparecer uma infinidade de ícones ó e a gente pode estar clicando em cima e ele faz a animação aqui a gente tem alguns filtros tá que é bem interessante Então se você quer que é os ícones gratuitos você vem aqui ó e seleciona free e daí só vão aparecer os ícones gratuitos tá aqui tem as categorias então Popular adicionado recentemente ã objetos 3D ó Então você vai trocando aqui as categorias ó detalhe que aqui tá selecionado

free né gratuito então só vai aparecer os gratuitos né E como eu falei se fizer sentido para você comprar algum Premium aí enfim assinar o site fica ao seu critério beleza nesse caso aqui deixa eu vir mais para baixo vou selecionar Business aqui negócios né que eu acho que se enquadra melhor aqui na minha necessidade ó Então aqui tem os gratuitos tá Então como que você faz para baixar na prática e colocar lá no WordPress eu vou selecionar esse primeiro aqui por exemplo só para mostrar para você tá aqui então a gente tem várias opções

né tem por exemplo a animação ó Então pode ver que a animação ela muda ó você pode escolher diferentes tipos de animação aí para o mesmo ícone ó vou deixar esse aqui mesmo aqui em stroke daí seria a largura aqui das Linhas tá então você pode deixar assim ó mais fina né regular ou bold no meu caso eu acho legal essa regular Ok e aqui nas cores Então você consegue personalizar as cores tá nesse caso aqui eu tô utilizando ó esse Tonzinho de azul aqui na minha Land page tá então o que que eu posso

fazer eu posso vir aqui ó copiar o código da cor eu venho aqui nos ícones e eu vou colar aqui o código da minha cor ó colar Deixa eu só tirar aqui esse jogo da velha vou aplicar Ó ficou assim e a outra cor aqui eu vou utilizar a cor branca mesmo ó Branco aplicar nesse caso eu vou ativar aqui o fundo ó e daí ficaria assim então o mesmo jogo de cores que eu tô utilizando Aqui tá o branco e o azul e você faz esse mesmo esquema Aí você coloca as suas cores Beleza

então você fazendo isso o próximo passo é você fazer o download tá então você vai vir nessa opção aqui ó para você baixar o gif tá muito importante aqui você não marcar essa opção sólido e você deixar essa opção transparente tá daí Claro se você tiver utilizando por exemplo um fundo branco você vai colocar aqui sei lá um preto e um azul né No meu caso como eu tô utilizando o fundo escuro eu vou colocar um branco e azul justamente para dar contraste com esse fundo tá importante também deixar marcada essa opção aqui Loop Infinito

vou clicar e aqui ele já fez o download então pro meu computador tá que que eu faço agora eu vou vir aqui no meu elementor e a gente não vai utilizar esse essa opção aqui de ícone tá porque aqui a gente só consegue enviar no formato svg então como é formato gif a gente vai estar utilizando aqui a opção de imagem ó então a gente pega uma imagem arrasta para cá escolhe a imagem ó nesse caso eu já tinha salvo outro antes tá nesse mesmo esquema ó vou vir aqui em selecionar ó tá aqui o

ícone Então tá esse aqui é outro que eu salvei antes tá pessoal vou vir aqui em pixels e vou regular o tamanho ó vou deixar assim vou excluir isso aqui ó deixa eu só conferir aqui no responsivo como que fica beleza ficou os tamanhos legais Agora posso estar pegando esse aqui ó vou copiar vou colar e vou excluir os outros Ó depois eu só substituo tá vou colar aqui sempre no formato Imagem Beleza E agora eu venho aqui e eu substituo vou vir aqui no meu computador e aqui no meu computador eu já separei alguns

então que eu baixei antes e agora vou enviar na prática aqui e vou tá substituindo ali ó esse aqui beleza ó aqui fiz o envio de todos vou clicar em atualizar vamos ver numa nova guia Ó ficou assim então os ícones animados deu um toque bem legal aí Enfim no no design do site né deixou mais dinâmico mais bonito Então essa era a dica de hoje espero ter ajudado deixem nos comentários se deu certo para você Valeu e até a [Música] próxima Y