A extensão Floating Effect Elementor do Master Addons Pro adiciona animações suaves e em loop a qualquer widget do seu site Com personalizações simples como tradução, rotação e dimensionamento, você pode criar sutis movimentos flutuantes ou efeitos dinâmicos 3D.
Neste tutorial, vamos explorar como usar essas opções de personalização para dar vida aos seus elementos, e mostrar como a Extensão de Posicionamento pode ajudar a ajustar o posicionamento para o visual perfeito No final, você estará pronto para criar animações flutuantes atraentes para o seu site.
Como usar a extensão Floating Effect Elementor
Antes de entrar nas opções dos efeitos flutuantes você deve garantir que a extensão esteja habilitada.
Basta ir para Master Addons no seu painel Entre na guia extensões e alterne a extensão Floating Effects Simples!
Depois de ativá-lo, você pode navegar até a guia Avançado de qualquer widget em seu site e rolar para baixo para encontrar a extensão “floating effects” Alterná-lo e, você verá as seguintes opções de personalização.
1. Traduzir
Isso permite mover um elemento ao longo dos eixos X e Y. Ao ajustar a translação no eixo X, o elemento se moverá para a esquerda e para a direita Da mesma forma, ajustar o eixo Y move o elemento para cima e para baixo Combinando ambos os eixos move o elemento ao longo de uma linha diagonal.
2. Gire
Com esta opção, você pode girar elementos ao longo dos eixos X, Y e Z. Isso dá aos seus elementos um efeito giratório mais dinâmico.
Você também pode ajustar a duração e o atraso da rotação, permitindo transições mais suaves ou dramáticas Se o Tradutor também estiver ativado, o widget usa o tempo do Tradutor.
3. Escala
O efeito de escala permite esticar ou encolher um elemento ao longo dos eixos X e Y. Isso cria uma animação de crescimento/encolhimento, fazendo com que seus elementos pareçam se expandir ou contrair Tal como acontece com os outros efeitos, você pode ajustar a duração e o atraso para controlar o tempo da animação.
Ao combinar essas três opções de personalização, você pode criar infinitas variações de efeitos flutuantes, desde movimentos sutis até animações mais complexas e atraentes.
Recomendamos que você verifique recursos do Out Elementor Pro bem como. Você pode combinar Elementor pro e Adições Mestres para criar qualquer tipo de site que você deseja.
Combinando os efeitos
Uma das características mais poderosas do Efeitos Flutuantes extensão é a capacidade de combinar tradução, rotação e escala para animações únicas e dinâmicas Ao colocar esses efeitos em camadas, você pode criar qualquer coisa, desde movimentos flutuantes sutis até elementos interativos 3 D completos.
Combine Traduzir e Girar: Emparelhar a translação com a rotação cria um efeito fluido e giratório com o movimento através da tela Por exemplo, você pode fazer um elemento flutuar diagonalmente enquanto gira no lugar para uma ilusão 3 D mais dinâmica.
Combine Traduzir e Escalar: Usar tanto a translação quanto o dimensionamento permite que um elemento se mova e mude de tamanho ao mesmo tempo Isso pode criar um efeito flutuante de expansão ou encolhimento à medida que o elemento se desloca pela tela.
Combine todos os três: Para o efeito flutuante final, combine translate, gire e dimensione Isso permite animações complexas onde o elemento se move, gira e cresce/encolhe de uma só vez, dando-lhe uma aparência envolvente e multidimensional.
As possibilidades são infinitas quando você experimenta essas combinações Brinque com diferentes valores de duração e atraso para ajustar a velocidade e o tempo, criando uma animação flutuante verdadeiramente personalizada para qualquer elemento.
Criando um efeito flutuante em uma imagem
Esperamos que agora você saiba como ajustar as diferentes configurações da extensão Floating Effects.
Como bônus mostraremos como criar uma seção incrível com algumas imagens, o Efeitos Flutuantes e Posicionamento Extensões:
Você pode seguir o vídeo abaixo onde mostramos o processo completo.
Em primeiro lugar, escolha vamos escolher algumas imagens que usaremos para criar nossa seção.
Em seguida, adicionamos uma Flexbox ou grade de largura total para 3 colunas e 2 linhas e organizamos todas as imagens como a captura de tela a seguir dentro das caixas apropriadas.
Agora, vamos nos concentrar em Posição e Efeito Flutuante Recomendamos começar com o posicionamento Revise cuidadosamente seu design e posicione todas as imagens e partículas precisamente antes de implementar o efeito flutuante.
Utilizamos a extensão de posicionamento Master Addons para posicionar com precisão as imagens Para começar, selecione 'Relativo' dentro da extensão de posição Em seguida, prossiga para alinhar suas imagens ou quaisquer outros elementos conforme necessário.
Concluímos o posicionamento de todas as imagens e a captura de tela anexa ilustra o arranjo atual.
Por fim, vamos aplicar o efeito flutuante nas imagens desejadas Aplicamos os efeitos de tradução X e Y às imagens na primeira e terceira colunas O efeito Rotate Z foi aplicado exclusivamente à imagem do perfil Consulte o seguinte arquivo GIF para ver o resultado visual atual.
O Efeitos Flutuantes extensão (Pro) oferece infinitas possibilidades para animar elementos em seu site Com opções de personalização simples, mas poderosas, para tradução, rotação e escala, você pode criar efeitos flutuantes dinâmicos e atraentes que envolvem os visitantes Quando combinados com o Posicionamento Extensão, você tem controle total sobre o movimento e a colocação dos elementos para um design verdadeiramente personalizado.
Não tenha medo de experimentar diferentes configurações e combinações para encontrar o efeito flutuante perfeito para o seu site Com um pouco de criatividade, você pode elevar seu web design e criar uma experiência de usuário mais interativa.
Se você enfrentar algum problema com esta extensão, sinta-se à vontade para comentar aqui ou entre em contato conosco através do nosso Formulário de contato do site.
