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