Cabeçalhos personalizados no Elementor são headers construídos no Theme Builder em vez de herdados do tema, com logo, menu e botões editados visualmente, sem tocar em código. O Theme Builder é o módulo do Elementor Pro que assume o controle do topo do site, aplica o layout por condição de exibição e dispensa código no tema-filho. Quem usa o editor gratuito não tem esse módulo e fica preso ao cabeçalho do tema. Neste material você vê o caminho exato do menu, os widgets certos, as condições por tipo de página e os erros que mais geram artigos de Elementor da FULL no suporte. O foco é entregar um header leve, responsivo e fácil de manter.

Visão geral: O que muda com o theme builder

Cabeçalhos personalizados no Elementor nascem no Theme Builder do Elementor Pro, que assume o controle do topo do site fora do tema. Em média, um header construído nele carrega entre 40 e 120 KB, contra os 15 a 30 KB de um header nativo do Hello Theme. A troca de peso por flexibilidade vale quando o projeto precisa de variações por página.

Esse módulo muda três coisas de uma vez: onde o header é montado, quem decide o layout e como o site se comporta no mobile.

A diferença prática aparece no controle. Sem o Theme Builder, o cabeçalho depende do que o tema oferece no Customizer, com poucas opções de menu e logo. Com ele, você arrasta widgets de Site Logo, Nav Menu e botões para uma estrutura própria, salva como template e aplica por condição. O tema vira só o motor; o desenho do topo passa a ser seu. Essa é a base de todo header sob medida.

Pré-requisitos: Licença, tema e versão

Antes de desenhar cabeçalhos personalizados no Elementor, três pré-requisitos precisam estar resolvidos, e ignorar um deles é a causa mais comum de um header que não aparece. Você precisa do Elementor Pro com licença ativa, de um tema compatível com o Theme Builder e da versão 3.x do plugin atualizada.

A FULL costuma ver no suporte que boa parte dos chamados de “cabeçalho sumiu” começa por licença expirada ou tema que força o próprio header.

O tema recomendado é o Hello Theme, criado pela própria Elementor para ceder o controle total do layout. Temas pesados como Astra ou OceanWP também funcionam, mas exigem desativar o cabeçalho nativo no Customizer para evitar dois headers empilhados. Confirme ainda que o Elementor e o Elementor Pro rodam a mesma família de versão, já que mistura de versões antigas com novas trava o Theme Builder. Resolvidos os três pontos, o caminho para criar cabeçalhos personalizados no Elementor fica limpo, e o resto é desenho visual.

Passo a passo: Como criar o cabeçalho no theme builder

Montar cabeçalhos personalizados no Elementor leva cerca de 15 minutos e cabe em cinco passos dentro de um único módulo, o Theme Builder. Você abre um template novo, monta logo e menu, define onde ele aparece, ajusta o mobile e pública.

A ordem importa: pular a condição de exibição é o erro que deixa o header invisível em metade do site. Cada passo abaixo traz um verbo de ação no título.

Passo 1: Abra o theme builder e crie o header

O ponto de partida de todos os cabeçalhos personalizados no Elementor é o Theme Builder. Acesse o painel do WordPress, vá em Templates e clique em Theme Builder, o hub visual onde todos os templates globais vivem. No menu lateral da tela, selecione Header e clique no botão de adicionar novo. O Elementor abre uma biblioteca com layouts prontos de cabeçalho; feche-a para começar do zero ou escolha um modelo como ponto de partida. Dê um nome claro ao template, como “Header Principal”, para achá-lo depois.

Passo 2: Insira o site logo e o nav menu

A dupla Site Logo e Nav Menu forma o esqueleto de quase todos os cabeçalhos personalizados no Elementor. Com o editor aberto, arraste o widget Site Logo para a estrutura. Ele puxa a logo definida em Configurações do WordPress e já a transforma em link para a home, sem precisar de código. Em seguida, arraste o widget Nav Menu, que renderiza um menu criado em Aparência > Menus. O Nav Menu oferece layout horizontal, dropdown e o ícone hambúrguer para telas menores, tudo no painel de estilo.

Passo 3: Defina a condição de exibição

Clique em Publicar e o Elementor abre a janela de condições, o ponto onde a maioria erra ao montar cabeçalhos personalizados no Elementor. Escolha Entire Site para aplicar o cabeçalho em todo o site, ou refine por tipo: somente posts, somente uma página, ou um arquivo específico. As condições aceitam regras de inclusão e exclusão combinadas, então você pode usar um header na home e outro nas páginas de venda. Sem condição definida, o template fica salvo mas nunca aparece.

Passo 4: Ajuste o comportamento responsivo

O comportamento mobile separa cabeçalhos personalizados no Elementor bem-feitos dos amadores. Use o seletor de dispositivo na base do editor para revisar tablet e mobile. O Nav Menu permite definir o breakpoint em que o menu vira hambúrguer, com 1024 px como valor padrão de tablet. Reduza o tamanho da logo no mobile e confira o espaçamento, já que um header alto demais come a primeira dobra em telas de 360 px. Teste o toque no ícone do menu para garantir que o dropdown abre.

Passo 5: Publique e valide em páginas reais

Salve o template e abra três tipos de página diferentes: um post, uma página estática e um arquivo de categoria. Esse teste fecha o ciclo de criação de cabeçalhos personalizados no Elementor: o header precisa ser idêntico nos três, prova de que a condição Entire Site pegou. Se o header antigo do tema ainda aparecer junto, volte ao Customizer e desative o cabeçalho nativo. Limpe o cache do site e do navegador antes do teste final, porque o cache costuma servir a versão antiga do topo.

Header transparente e sticky: Os recursos que mais agregam

Dois recursos elevam um cabeçalho comum a um header profissional, e ambos vivem no painel de estilo do Theme Builder: o transparente sobreposto ao banner e o sticky que fixa o menu no scroll. O efeito transparente ganha de 80 a 120 px de altura visual sem ocupar espaço.

O sticky mantém o menu acessível e tende a reduzir o atrito de navegação em páginas longas. Esses dois efeitos são o que distingue cabeçalhos personalizados no Elementor de um header de tema padrão.

O header transparente se configura com fundo em cor RGBA e o recurso de margem negativa para puxar o conteúdo para baixo dele. O sticky usa o controle Motion Effects do widget de coluna ou do container, com a opção Sticky em Top e o offset de rolagem. Plugins como o Crocoblock JetThemeCore expandem ainda mais esses efeitos com headers condicionais por gatilho. Combinados, transparência e sticky entregam o visual que o cliente associa a site caro.

Custo e alternativa: Ativar o Elementor pro pela FULL

Criar cabeçalhos personalizados no Elementor depende do Theme Builder, exclusivo do Elementor Pro, que custa a partir de US$ 59 por ano por site na compra avulsa. Esse valor pesa para quem gerencia vários projetos e precisa renovar licença a licença, uma chave para cada site da carteira.

No plano PRO da FULL, por R$ 849, o Elementor Pro entra junto com outros 16 plugins premium, o que dilui o custo para cerca de R$ 85 por site quando você distribui entre dez instalações. Para agências e freelancers que mantêm carteira de sites, ativar o Elementor Pro no plano PRO da FULL sai mais barato que licenças separadas e centraliza a gestão das chaves em FULL.services/planos. A ativação é feita em um clique pelo painel da FULL, sem digitar licença em cada site, e a renovação fica concentrada num único pagamento anual.

Erros comuns ao montar cabeçalhos personalizados no Elementor

Quatro erros respondem pela maior parte dos chamados sobre header no suporte da FULL, e todos têm correção rápida quando você sabe onde olhar. O mais frequente é o cabeçalho duplicado, quando o tema e o Theme Builder renderizam dois headers ao mesmo tempo. A causa quase sempre é o header nativo ativo no Customizer junto com o template do Elementor.

O segundo erro é o header que não aparece, gerado por condição de exibição esquecida no momento de publicar. O terceiro é o menu que quebra no mobile, efeito de breakpoint mal ajustado ou de muitos itens no Nav Menu. O quarto é o header lento, causado por widgets pesados como busca animada e ícones sociais em excesso, somando peso ao site responsivo no Elementor. Resolver os quatro mantém o cabeçalho leve e estável.

Há um detalhe que só aparece em produção: com cache de página agressivo, salvar o template do Theme Builder não atualiza o header já servido. Em hospedagens com WP Rocket, a regra prática é publicar o header, limpar o cache da home e abrir o site numa janela anônima antes de considerar a mudança concluída. Quem mantém menus extensos pode separar a navegação em um mega menu no Elementor para reduzir a altura do cabeçalho.

Perguntas frequentes sobre cabeçalhos personalizados no Elementor

Próximos passos para dominar o cabeçalho do seu site

Cabeçalhos personalizados no Elementor deixam de ser um mistério quando você separa o que é tema do que é Theme Builder e segue os cinco passos na ordem. O caminho é criar o template Header, montar logo e Nav Menu, definir a condição de exibição, ajustar o responsivo e validar em páginas reais. Os recursos de header transparente e sticky entram depois, como camada de acabamento que valoriza o projeto sem inflar o peso. Para aprofundar o domínio do construtor, o guia domine o Elementor reúne os tutoriais de fluxo completo, e o FULL Academy concentra os materiais de WordPress em um só lugar. Trate o cabeçalho como um template vivo: revise-o a cada mudança de menu ou de identidade visual e mantenha o site coerente do topo ao rodapé.

Legenda: o Theme Builder reúne logo, menu e condições de exibição numa só tela, o que comprova o controle total sobre o topo do site.