Tabela de conteúdos
Nível de Dificuldade: Intermediário
Objetivo: #
Este tutorial irá guiá-lo pelo processo de adicionar animações e transições a elementos em suas páginas criadas com Elementor. O uso adequado de animações e transições pode melhorar a interatividade e a estética do seu site, tornando-o mais envolvente para os visitantes.
Passo 1: Acessar o Editor do Elementor #
- Acesse o Painel do wordpress:
- Faça login na área administrativa do seu site wordpress.
- Navegar para a Página:
- Vá até “Páginas” no menu lateral.
- Encontre a página que deseja editar e clique em “Editar com Elementor”.
Passo 2: Selecionar o Elemento a Ser Animado #
- Escolher um Elemento:
- Na página do Elementor, escolha o widget ou elemento que deseja animar. Isso pode incluir textos, cabeçalhos, imagens, botões ou seções inteiras.
- Abrir Configurações do Elemento:
- Clique no elemento para abrir o painel de configurações à esquerda.
Passo 3: Adicionar Efeitos de Movimento #
- Ir para a Aba “Avançado”:
- No painel de configurações do elemento, clique na aba “Avançado”.
- Ativar Animações de Movimento:
- No menu da aba “Avançado”, localize a seção “Efeitos de Movimento” (ou “Motion Effects”).
- Aqui, você pode escolher entre opções como:
- Animação de Entrada: Escolha como o elemento aparece na tela quando a página é carregada.
- Efeito de Rolagem: Defina animações para elementos que ativam quando o visitante rola a página.
- Selecionar a Animação de Entrada:
- Para adicionar uma animação de entrada, clique no menu suspenso e selecione uma animação. Algumas opções incluem “Deslizar para cima”, “Desvanecer” ou “Aparecer”.
- Ajuste a duração e o atraso da animação conforme necessário.
Passo 4: Configurar Animações de Rolagem (opcional) #
- Definir Efeitos de Rolagem:
- Dentro da mesma seção “Efeitos de Movimento”, você também pode definir animações ao rolar. Ative “Efeito de Rolagem” e escolha a animação desejada.
- Ajustar a Visibilidade:
- Você pode definir quando o elemento fica visível durante a rolagem e ajustar a opacidade e a posição inicial, se desejar.
Passo 5: Testar Efeitos #
- Visualizar a Página:
- Após adicionar as animações e transições desejadas, clique no botão “Visualizar” para ver como as animações se comportam ao carregar a página e ao rolar.
- Fazer Ajustes Necessários:
- Se as animações não atenderem às suas expectativas, volte para as configurações do elemento e ajuste os parâmetros conforme necessário.
Passo 6: Publicar #
- Salvar as Alterações:
- Após testar e ajustar as animações, clique no botão “Atualizar” para salvar as mudanças.
- Verificar a Performance:
- Teste novamente a página após a publicação em diferentes dispositivos para garantir que as animações não comprometam o desempenho ou a experiência do usuário.
Conclusão #
Agora você sabe como adicionar animações e transições a elementos em suas páginas criadas com Elementor. Ao usar animações de forma eficaz, você pode melhorar a aparência do seu site e proporcionar uma experiência mais dinâmica aos visitantes.
