Deseja criar uma animação flutuante com Elementor ?
Neste tutorial, usaremos uma lata de pepsi que sobrevoará e que revelará uma descrição sobre ela.
Convidamos você a conferir o vídeo a seguir para ter uma ideia do que queremos mostrar a você.
Insira uma seção de coluna única e, na barra lateral, selecione Altura mínima defende hauteur
em altura mínima clique VH em seguida, arraste o controle deslizante para 100. Sempre na aba Layout definir 650 como o largura.
Selecione a coluna e na barra lateral do campo Alinhamento vertical selecionar Meio social.
Na aba Style, altere a cor de fundo clicando no seletor de cores e digite #D37636 então na seção fronteira, vamos pegar 20 para todos os raios do meio-fio.
Na aba avançado, desative a ligação de preenchimento e digite 75 para margens internas Alto et Meia et 25 para margens internas Acanhado et Droite.
Em seguida, na coluna, arraste um widget seção interna. Vamos remover uma das colunas da seção Interna.
Na coluna da seção interna restante, solte o Widget de título e mude o título para Pepsi amor.
Leia também o nosso guia sobre: Como criar um cartão de efeito de um portfólio no Elementor
Em seguida, na guia Style, dê ao texto uma cor branca e para a tipografia defina o Tamanho defende 32, a altura da linha defende 1.2, espaçamento entre letras defende 0.5.
Abaixo de Widget de título, solte um Widget Editor de texto e edite o texto. Na guia Style, altere a cor do texto para branco e o Tamanho tipografia em 16, a altura da linha defende 1.5 eespaçamento entre letras defende 0.5.
Na aba avançado alterar a margem Meia defende -10.
Na secção posicionamento aba avançado, modifique o Largura defende personnalisé e Largura personalizada definir o último para 310.
Abaixo do parágrafo, adicionaremos um widget de botão com para texto Leia Mais.
Na aba Style dê a cor ao botão branco e cor do texto defina-o para Preto.
Agora selecione a coluna do seção interna, na seção avançado aba avançado desligue o link e clique na porcentagem e defina a margem Acanhado defende 20 E no Margem Interna definir o de Acanhado defende 20.
Agora arraste o widget de imagem acima de Seção interna insira uma imagem. Escolhemos como exemplo uma imagem de uma bebida que é facilmente encontrada na web.
Depois de inserir a imagem, configure o Tamanho da imagem defende Todo e alignement vamos clicar em Centro.
Na aba avançado, vá para a seção Posição defende Largura selecionar On-line (automático)Em Posição selecionar absoluto e Orientação Horizontal selecionar Direito em seguida mudança entrar -9.9 e no mudança da Orientação Vertical entre -105.
Vá mais para baixo Seção de transformação definir redimensionar defende 0.5.
Agora selecione a coluna do Seção interna e na guia avançado digite o nome do aulas de css texto pepsi.
Em seguida, selecione nossa seção principal, vá para a seção CSS customizado de sua guia Avançado, copie e cole o seguinte código:
/*Hover Animation CSS*/
selector{
--transition: 0.5s;
--circle-color: #313F69;
--content-background: #D27838;
--mobile-height: 670px;
--mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
content: "";
background: var(--circle-color);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 20px;
clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
clip-path: circle(400px at center);
background: var(--content-background);
}
selector:hover .elementor-widget-image{
right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
transform: scale(1);
}
selector .pepsi-text{
opacity: 0;
visibility: hiddin;
}
selector:hover .pepsi-text{
opacity: 1;
visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
height: var(--mobile-height);
}
selector .elementor-widget-image .elementor-widget-container{
transform: scale(1);
}
selector:hover .elementor-widget-image{
right: 68px !important;
top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
margin-top: -265px !important;
}
}
NOTA: Se você não tem esta seção, então você precisa ir para Versão Pro do Elementor.
Agora, se quisermos remover a cor de fundo do texto, selecionaremos nossa coluna principal e na guia Estilo desativamos a cor de fundo.
Neste momento, sua animação será executada normalmente no navegador.
Animação no tablet também parece ser perfeita
Mas no smartphone, não é exibido normalmente. Vamos resolver este problema.
Vamos exibir o navegador
No navegador, selecione Seção (certifique-se de que ainda está no modo smartphone) e abaixe o Largura defende 320
Em seguida, selecione a coluna principal e em sua guia avançado, defina todas as margens internas para 25
No navegador, selecione a imagem e na aba StyleClique em PX de Largura e defini-lo para 180.
Na aba avançado du Widget de imagemvá em frente Posiçãoe selecione absolutoEm deslocamento horizontal entrar 75 e em deslocamento vertical entrar 236. Resumindo, certifique-se de centralizar sua imagem no meio do círculo usando os diferentes deslocamentos.
Agora você pode visualizar sua animação em diferentes dispositivos.
Obtenha o Elementor Pro agora !!!
Conclusão
Então ! É isso para este artigo que mostra como criar uma animação ao passar o mouse em Elementor. Se você tiver alguma dúvida sobre como chegar lá, adoraríamos ouvi-lo no Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
