Como Fazer OBJETOS FLUTUANTES no Elementor | Sem Códigos

nesse vídeo eu vou te ensinar a como fazer o efeito de objetos flutuantes aí no seu elementor fala pessoal tudo bem Rodrigo aqui do canal aprendendo sites seja muito bem-vindo para mais um vídeo e antes de eu seguir aqui com o nosso tutorial eu vou pedir que você não esqueça de deixar o like nesse vídeo e também de se inscrever no canal para você aprender tudo sobre criação de sites tudo sobre WordPress elementor enfim de uma forma bem simples e fácil beleza [Música] beleza pessoal vamos lá então eu estou aqui nessa página de vendas essa

aqui é uma página de vendas que eu criei utilizando aí apenas o elementor gratuito e agora junto com você eu vou mostrar na prática aqui como adicionar alguns objetos flutuantes aí ao longo da nossa página de vendas e você também pode fazer isso aí em qualquer página enfim em qualquer site aí que você tiver feito no elementor isso sem usar código e de uma maneira bem simples beleza inclusive se você quiser aprender como criar essa página de vendas do zero eu vou est deixando esse link aqui na descrição ó eu ensino aí numa aula completa

aqui do canal a como criar essa página de vendas aí de alta conversão do zero beleza também ela está disponível aqui do meu pack de templates e ambos os links vão estar na descrição o link para você aprender como criar ela do zero e também o link para você adquirir ela pronta né então basicamente aqui o pack de templates é um pacote com mais de 40 L pages prontas que eu mesmo desenvolv vi eu disponibilizo tudo para um preço simbólico beleza ao adquirir aí o pack de templates você vai ter o acesso vitalício você vai

ter direito a suporte e atualizações tá lembrando que são todas páginas aí compatíveis com WordPress e o elementor Então é só você adquirir o pack e com poucos cliques você importa aí qualquer uma dessas páginas para seu elementor você faz as edições aí da maneira que você quiser né enfim com seus textos as suas imagens as suas cores e você publica rapidamente beleza sem Muita enrolação eu tô aqui nessa minha página de vendas aqui eu tô aqui com o meu painel de WordPress já aberto vou vir aqui no painel primeira coisa que eu vou fazer

eu vou vir aqui em plugins e eu vou adicionar um novo plugin para mim conseguir fazer essa opção aí essa função aliás né de objetos flutuantes aqui eu vou pesquisar por elementor vou dar um enter aqui e quando você pesquisa aqui por elementor aparece o elementor e aparece várias outras opções né E que opções são essas essas opções basicamente aqui são addons né para elementor ou seja são plugins complementares ao elementor que adicionam várias funções aí para o seu site em elementor eu vou vir mais para baixo aqui e eu vou tá instalando e ativando

é essa opção aqui ó Happy addons for elementor tá caso não apareça você vem aqui em pesquisar e pesquisa direto por happ Adams for elementor é esse plugin aqui ele tem mais de 400 mil instalações ativas e ele não é um plugin pesado tá ele é um plugin bem legal aí para você est utilizando no seu elementor tá então Olha só eu vou clicar aqui em instalar tá instalado vou clicar em ativar tá ativado Beleza vou vir aqui nos meus plugins ó Aliás ele aparece primeiro essa telinha aqui ó para você fazer uma configuração nesse

caso eu vou sair aqui não precisa a gente fazer nada tá ó e aqui vai aparecer então a opção do Plugin tá aqui você pode estar explorando e tal nesse caso eu não vou mexer nada aqui porque automaticamente lá no nosso editor do elementor já vão aparecer as opções adicionais aí que a gente precisa para estar fazendo aí essa função de objetos flutuantes tá então vou vir aqui nas minhas páginas todas as páginas E você faz o mesmo processo aí tá você seleciona a página aí do seu site enfim do seu WordPress que você quer

editar e você clica aqui em editar com elementor e agora vai abrir aqui o editor do elementor vamos aguardar carregar um pouquinho beleza abriu aqui olha só vou clicar aqui por exemplo nesse botão ó cliquei aqui vou vir avançado isso aqui você pode fazer com qualquer elemento tá seja com ícone com enfim qualquer elemento vai aparecer essa opção aqui ó floating Effects eu vou clicar em habilitar e aqui a gente tem três opções Ó tem essa translate rotate e scale então o que que acontece aqui a gente pode configurar para qualquer objeto né até enfim

essa dica serve para se você quer fazer um botão pulsante por exemplo né Ó você clica aqui e ó pode ver que o botão aqui ele já tá se movimentando ó no caso aqui no x eu configuro a linha horizontal né E aqui no y o vertical ó nesse caso aqui eu vou deixar o x Zerado Tô fazendo um botão aqui só para mostrar tá pessoal mas aí você faz em qualquer elemento depois ó eu vou deixar o y aqui ó um 60 pixels pra direita e um 60 pixels aqui pra esquerda e pode ver

que o botão ele está aí flutuando tá nesse caso eu não vou colocar aqui no botão ó quando você uma observação importante também quando você instala esse plugin aí o RP adons né os ícones aí do seu site em elementor se você tiver ícones assim igual eu ó quando você clica aqui ele vai pedir para atualizar tá então eu vou atualizar rapidamente aqui vamos atualizar continuar beleza ó bem rapidinho agora voltamos aqui para o nosso editor do elementor vou vir mais para baixo Ó e agora tá aparecendo os ícones normalmente tá nesse caso eu vou

adicionar uma imagem aqui vou vir aqui vou arrastar uma imagem em qualquer lugar tá isso aí não vai interferir em nada vou vir aqui deixa eu pegar aqui do meu computador ó vou pegar essa imagem aqui vou arrastar aqui pro meu WordPress selecionar beleza aqui apareceu essa imagem e agora vamos configurar essa imagem aqui para ela ficar de um jeito legal aí tá primeira coisa que eu vou fazer eu vou vir aqui eu vou diminuir o tamanho dela eu vou deixar assim ó aí 109 pixels algo nesse sentido tá agora vou vir aqui em avançado

vou clicar aqui em layout e antes de mais nada Vamos configurar aqui a posição que ela vai ficar aqui no nosso site enfim na nossa página tá nesse caso ó posição posso deixar fixo ou ten a opção de absoluto nesse caso vou deixar fixo e olha só aqui eu configuro aonde eu quero que ela apareça ó nesse caso vai ser absoluto ó não quero que ela fique fixa né e aqui eu vou configurar um deslocamento ó vou deixar mais ou menos aqui em uns 100 pixels assim ó aqui eu posso estar configurando outro deslocamento né

que é o o vertical ó ela ficou assim ó tá aí você pode fazer esse mesmo esquema aqui enfim configurar o lado aí que faz sentido para aparecer tá ou até mesmo colocar o fixo aqui mas o fixo não faz muito sentido né inclusive o fixo aqui você pode utilizar para criar um botão do WhatsApp se você quiser inclusive tem vídeo aqui no canal que eu ensin como fazer isso vou deixar no absoluto mesmo aqui muito importante configurar que use Z index então aqui no z index eu vou colocar sei lá um 10 por exemplo

o z index é para ele aparecer na frente aqui dos outros elementos né no caso sei lá vou colocar ele mais aqui por exemplo né aí vamos supor que você tenha outro elemento aqui um botão interferindo né se esse botão tiver sei lá com us index 11 esse botão vai aparecer na frente tá E no caso eu quero que esse aqui ele apareça na frente dos outros elementos tá mas aí você faz esse esquema aí né enfim se der interferencia entre um elemento e outro você vem aqui e você corrige o z index o elemento

que você quer que apareça na frente Você sempre coloque uns index maior do que os outros elementos beleza vamos ajustar aqui esse deslocamento deixa eu ver tá vou deixar assim mais ou menos tá agora essa aqui é a parte padrão do elementor tá agora a gente vai vir aqui no nosso Adon né no r adons e selecionar essa opção floating Effects vou selecionar essa Primeira opção aqui ó no x Eu não vou mexer eu vou mexer mais aqui no Y ó que daí ele vai ficar para cima e para baixo ó tá assim então vou

clicar aqui também aqui você seleciona a duração dessa animação ó então quanto maior o número aqui mais devagar fica a animação Inclusive eu recomendo você deixar um número maior aqui para ficar mais bonito tá para ficar bem de leve mesmo ó alha no cantinho vou clicar aqui e aqui tem o delay que é quanto tempo aí vai vai demorar para fazer a animação tá deixar assim mais ou menos beleza ó vai ficar assim Então beleza vamos ver aqui no celular como que fica ó no celular aqui eu vou clicar aqui nessa imagem eu vou diminuir

um pouco o tamanho da imagem assim vamos ver que que eu consigo fazer aqui no celular ó você pode mexer aqui no deslocamento né E daí ó obviamente o deslocamento que você colocar aqui ele vai aparecer diferente do que você configurou lá na versão desktop tá ó no celular fica assim então claro que nesse caso aqui tô mostrando só como exemplo mesmo né mas aí você vai fazer aí para você você vai colocar algo mais enfim mais pensado né mais elaborado Vou atualizar aqui vamos abrir aqui numa nova guia ó fica assim então nosso objeto

flutuante aqui no elemento e daí você pode estar fazendo isso aí com vários ob né Você pode colocar mais imagens colocar desse lado Enfim fazer como fica melhor aí para o seu projeto e para a sua necessidade Beleza deixa aí nos comentários O que você achou desse vídeo valeu e até a próxima