Introdução

Neste tutorial você vai aprender como criar um cabeçalho moderno no Elementor com:

• Header Sticky
• Efeito Glassmorphism (Blur)
• Transparência dinâmica
• Ocultar ao descer a página
• Reaparecer ao subir
• Transições suaves e performáticas

O resultado final é aquele efeito premium muito utilizado em sites modernos, com visual inspirado em interfaces Apple, Linear e SaaS minimalistas.

Resultado Final

Ao finalizar este tutorial, o comportamento do header será:

• No topo da página → transparente e sem blur
• Ao começar a rolar → ativa blur no fundo
• Descendo a página → header se esconde suavemente
• Subindo a página → header reaparece

Pré-requisitos

Antes de começar:

• WordPress
• Elementor PRO
• Header criado no Theme Builder
• Header configurado como Sticky

Passo 1 — Configurar o Header Sticky no Elementor

Edite seu cabeçalho no Elementor.

Selecione o container principal do header.

Vá em:

Avançado → Efeitos de Movimento → Sticky

Configure:

Sticky: Topo
Dispositivos: Desktop / Tablet / Mobile
Offset: 0

Passo 2 — Adicionar Classe CSS no Header

Ainda no container principal do header:

Avançado → Classes CSS

Adicione:

header-tipo1

Essa classe será usada pelo JavaScript.

Passo 3 — Criar o Efeito Blur (Glassmorphism)

Agora vamos criar o efeito de blur apenas quando o header “desgrudar” do topo.

Selecione o container principal do header.

Vá em:

Avançado → CSS Personalizado

Cole este CSS:

/* Sem blur no topo */
selector:not(.elementor-sticky--active) .elementor-motion-effects-layer{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Blur somente sticky */
selector.elementor-sticky--active .elementor-motion-effects-layer{
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Transição suave */
selector{
    transition:
        transform 0.35s ease,
        backdrop-filter 0.3s ease,
        -webkit-backdrop-filter 0.3s ease;
}

/* Oculta o header */
selector.header-hidden{
    transform: translateY(-100%);
}

Entendendo o CSS

Classe .elementor-sticky--active

O Elementor adiciona automaticamente esta classe quando o header sticky entra em ação.

Ela é perfeita para ativar efeitos apenas após o scroll.

Classe .elementor-motion-effects-layer

O efeito visual de background do sticky no Elementor normalmente acontece nesta camada interna.

Por isso o blur precisa ser aplicado nela.

Caso o blur seja aplicado diretamente no container principal, em muitos casos ele ficará ativo desde o início.

Passo 4 — Criar o Efeito Ocultar/Revelar no Scroll

Agora vamos adicionar o comportamento:

• Esconder ao descer
• Mostrar ao subir

Adicionando o JavaScript

Você pode adicionar este JS de várias formas:

• FluentSnippets
• Custom Code do Elementor PRO
• Footer do tema
• Plugin de snippets

Cole este código:

let lastScrollTop = 0;

const header = document.querySelector('.header-tipo1');

window.addEventListener('scroll', function () {

    const currentScroll =
        window.pageYOffset || document.documentElement.scrollTop;

    /* Evita esconder no topo */
    if(currentScroll <= 50){
        header.classList.remove('header-hidden');
        return;
    }

    /* Descendo */
    if (currentScroll > lastScrollTop) {

        header.classList.add('header-hidden');

    } else {

        /* Subindo */
        header.classList.remove('header-hidden');
    }

    lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;

}, false);

Como Funciona o JavaScript

O script:

1. Detecta a posição atual do scroll
2. Compara com a posição anterior
3. Se estiver descendo → adiciona .header-hidden
4. Se estiver subindo → remove .header-hidden

A animação em si é feita apenas com CSS usando:

transform: translateY(-100%);

Isso garante excelente performance.

Ajustando a Intensidade do Blur

Você pode aumentar ou diminuir o blur alterando:

blur(14px)

Exemplos:

blur(8px)

blur(20px)

Dica Extra — Fundo Semi Transparente

O blur fica muito mais bonito quando o header possui fundo semi transparente.

No Elementor:

Estilo → Fundo

Exemplo:

rgba(255,255,255,0.08)

Ou:

rgba(20,20,20,0.35)

Resultado Final

Agora seu header terá:

• Sticky moderno
• Blur dinâmico
• Glassmorphism
• Hide on scroll
• Reveal on scroll
• Excelente performance
• Visual premium

Considerações Finais

Esse padrão funciona extremamente bem em:

• Sites institucionais modernos
• Landing pages premium
• Sites SaaS
• Portfólios
• Interfaces minimalistas
• Projetos com estética Apple / Linear / Notion

Além do visual elegante, esse tipo de header melhora bastante a experiência de navegação, principalmente em páginas longas.

Compatibilidade

Testado com:

• Elementor PRO
• Containers Flexbox
• Sticky nativo do Elementor
• Chrome
• Edge
• Safari
• Firefox

Conclusão

Com poucos códigos é possível transformar completamente o visual do header no Elementor.

O segredo está em:

• usar corretamente as classes sticky do Elementor
• aplicar o blur na layer correta
• usar transform para animações performáticas
• combinar CSS + JS de forma leve

Isso cria uma experiência muito mais moderna e profissional para o usuário.