Você já se perguntou como sites premiados no Awwwards conseguem aquelas animações fluidas e layouts minimalistas que parecem impossíveis de fazer no WordPress?
Neste tutorial, vamos direto ao ponto: como refazer a página Home da empresa OH Architecture utilizando o Elementor Free e o poder do plugin Motion Pro Addons (MPA). O objetivo é alcançar 90% de fidelidade visual e funcional sem escrever uma única linha de código.
1. Estrutura da Seção Hero: O Impacto Inicial
O segredo de um site de alto nível começa no carregamento. No vídeo, vemos a montagem de um container principal com altura total (100vh) e fundo preto.
- Efeito de Camadas: A imagem de fundo é colocada em um container com posição absoluta, permitindo que os textos e o menu flutuem por cima.
- Animação em Cascata: Utilizando o widget Animated Text do MPA, aplicamos um efeito de fade-in com atrasos progressivos (100ms, 200ms, 300ms…) nos itens do menu e botões, criando uma entrada elegante e profissional.
2. Menu Interativo com Rolling Text
Uma das marcas registradas de sites modernos é o efeito de “rolagem” no texto do menu (hover).
- Widget MPA Rolling Text: Substituímos o menu padrão por este widget. Ao passar o mouse, o texto original sobe e uma cópia aparece de baixo, exatamente como no site original.
- Botões Customizados: Aplicamos a mesma lógica para botões como o “Get in Touch”, adicionando ícones e arredondamento (border-radius) para um acabamento premium.
3. Dinâmica de Scroll e Revelação de Conteúdo
Para as seções de portfólio e serviços, o foco muda para a interatividade durante a navegação:
- Image Reveal: Em vez de imagens estáticas, usamos o widget do MPA que revela a foto de baixo para cima conforme o usuário faz o scroll.
- Paragraph Review: Para os textos descritivos, a técnica de revelação por parágrafo garante que a leitura acompanhe o ritmo do usuário, mantendo o engajamento.
4. O “Pulo do Gato”: Velocidade Diferenciada (Parallax)
Embora 90% do projeto tenha sido feito na versão gratuita, o vídeo mostra como dar o toque final com o Elementor Pro:
- Scrolling Effects: Ativamos o Vertical Scroll na imagem da Hero para que ela suba em uma velocidade diferente do texto, criando profundidade.
- Fade Out no Scroll: Configuramos a transparência para que a imagem desapareça suavemente à medida que a próxima seção sobe.
Conclusão
Refazer um site premiado prova que, com as ferramentas certas, como o Motion Pro Addons, o limite do Elementor é apenas a sua criatividade. Você não precisa de códigos complexos para entregar um design de nível internacional para seus clientes.
Quer elevar o nível dos seus projetos? Conheça todos os widgets do Motion Pro Addons e transforme seus sites hoje mesmo! Acesse o site do plugin Motion Pro Addons: motionproaddons.com.
Espero ter ajudado, e até a próxima.
Assista ao tutorial completo aqui: Link para o vídeo
