Um cabeçalho pegajoso fica preso na parte superior da tela enquanto o visitante rola Seu logotipo, menu e botão de call-to-action permanecem acessíveis, não importa o quão longe alguém vá, e é por isso que quase todos os SaaS e sites de agências enviam um.
Este guia mostra como criar um cabeçalho pegajoso no Elementor usando o free Construtor de temas Master Addons, então você não precisará do Elementor Pro. E enquanto EU estiver usando Master Addons aqui, o método é universal: construir o cabeçalho como um modelo, em seguida, definir a sua posição de contêiner para Fixed Qualquer construtor de cabeçalho que permite editar o cabeçalho no Elementor segue os mesmos três cliques.
A versão 2020 deste post disse para você soltar um ID CSS em uma seção e colá-lo no widget Menu de Navegação Essa foi a era das Seções Elementor usou Contêineres Flexbox como seu layout padrão desde 3.6, e o controle de posição agora fica bem no painel, então toda a dança CSS ID se foi.
O que um cabeçalho pegajoso realmente é
Dois comportamentos diferentes são chamados pelo mesmo nome, e misturá-los é por isso que as pessoas acabam caçando um cenário que não existe.
A cabeçalho fixo está na tela a partir do momento em que a página carrega e nunca sai É isso que position: fixed faz, e é isso que estamos construindo aqui.
A cabeçalho sticky-on-scroll fica no topo normalmente, rola para longe, em seguida, desliza de volta quando o visitante rola para cima Você vai vê-lo chamado de scroll inteligente ou hide-on-scroll Ele precisa de um efeito de rolagem, e Elementor mantém aqueles em Pro.
Para a maioria dos sites o cabeçalho fixo é o que você realmente deseja, e é o que você pode construir gratuitamente.
O problema: seu cabeçalho rola para longe
Aqui está o ponto de partida Um cabeçalho Elementor normal fica no topo da página como qualquer outro contêiner.
Role um pouco para baixo e ele se foi Logo, menu, botão Solicitar Demonstração Gratuita, tudo isso fora da parte superior da tela Então um visitante que chega à sua seção de preços e quer clicar em Contato tem que rolar de volta para cima para encontrar o menu novamente.
Esse é todo o problema que um cabeçalho pegajoso resolve.
Antes de começar
Você precisa de Elementor gratuito, versão 3.6 ou mais recente, para que os contêineres sejam ligados.
Você também precisa de um modelo de cabeçalho para aplicar a configuração ao. O próprio Theme Builder do Elementor é Pro-only, então pegue um gratuito: Adições Mestres inclui um grátis construtor cabeçalho, e seu Theme Builder lida com rodapés, 404 s, arquivos e modelos únicos também.
Já tem um modelo de cabeçalho de outro plugin? pule para a Etapa 2. a configuração de posição é Elementor nativo, então ele se comporta da mesma forma onde quer que seu cabeçalho veio.
Passo 1: Abra seu modelo de cabeçalho no Elementor
Ir para Complementos Mestres > Construtor de Tema. Seus modelos estão listados por tipo O meu possui um cabeçalho e um rodapé, ambos ativos, ambos configurados para exibição em todo o site.
Ainda não há cabeçalho? Clique Adicionar Novo Modelo, defina o tipo como Cabeçalho, ligue a Ativação e defina a condição como Site Inteiro. O docs construtor cabeçalho cubra-o e o fluxo será o mesmo que passei no guia para edição do rodapé no Elementor.
Passe o mouse sobre o modelo de cabeçalho e bata Editar com o Elementor. O cabeçalho abre em sua própria tela.
Passo 2: Selecione o contêiner do cabeçalho
As pessoas erram constantemente, então seja preciso aqui: você quer o recipiente exterior do cabeçalho. Não o logotipo, não o widget do menu de navegação, e nem um contêiner aninhado enfiado dentro dele.
A maneira confiável de ter certeza é a Estrutura painel, o ícone de camadas na barra superior Clique no Container de nível superior nessa árvore e todo o cabeçalho deve destacar Se apenas o logotipo ou o menu se iluminar, você pegou um elemento filho, e definir posição nele fixará esse widget na tela em vez de seu cabeçalho Parece bizarro, e é a primeira coisa a verificar se o seu resultado é estranho.
Passo 3: Defina a posição do recipiente como Fixo
Com o recipiente do cabeçalho selecionado, abra o Avançado aba e expanda o Layout seção. O Posição dropdown tem três opções.
O padrão é o que você tem agora: o cabeçalho se afasta com a página O Absolute fixa o cabeçalho na página em vez da tela, então ele ainda se desloca, que é para cabeçalhos de sobreposição, não para adesivos O fixo o fixa na janela de visualização, e é essa que você deseja.
Escolha Fixo, e o painel expande com os controles de orientação.
Defina a orientação horizontal para a esquerda com um deslocamento de 00, e Orientação Vertical para Topo com um deslocamento de 0. Zero em ambos cola o cabeçalho bem no canto superior esquerdo da janela de visualização Eleve o deslocamento vertical se preferir que o cabeçalho flutue um pouco abaixo da borda superior.
Elementor também lançará um aviso sobre você: O posicionamento personalizado “Custom positioning não é considerado a melhor prática para web design responsivo e não deve ser usado com muita frequência.” Ignorar isso é um cuidado geral contra a dispersão de elementos fixos e absolutos através de um layout, e um cabeçalho fixo é o caso do livro didático onde é a chamada certa Basta verificar a visualização móvel quando terminar, que EU vou voltar.
Passo 4: Eleve o índice z
Ainda na seção Layout, encontre o Índice Z campo e configurá-lo para algo confortavelmente alto Eu uso 99.
O índice Z decide qual elemento fica no topo quando dois se sobrepõem Um cabeçalho fixo é garantido para sobrepor o conteúdo da sua página à medida que o visitante rola, e se seu índice z for muito baixo, o conteúdo rola direto por cima dele Esse é o bug clássico onde o cabeçalho é tecnicamente pegajoso, mas controles deslizantes, pop-ups e imagens passam por ele.
Se algo ainda cobre o cabeçalho, aumente o número Ele só tem que bater o que está perdendo para, e abundância de deslizador e pop-up plugins definir seu próprio índice z aos milhares.
Passo 5: Publicar
Bate Publicar.
Abra o site ao vivo e role O cabeçalho permanece bloqueado na parte superior da tela durante todo o caminho.
Se ele ainda rolar para longe no front-end, mas olhar para a direita no editor, limpe seu cache antes de começar a depuração Um plugin de cache servirá alegremente o antigo cabeçalho CSS por um tempo.
Três coisas que quebram um cabeçalho fixo e as correções
Os passos acima obter o cabeçalho fixado O que se segue é o que separa um cabeçalho pegajoso que sobrevive ao contato com um site real de um que você rasgar de volta uma semana depois.
1. O cabeçalho fica transparente e o conteúdo aparece
Um elemento fixo é retirado do fluxo normal da página, por isso deixa de herdar um plano de fundo de qualquer coisa Se você nunca definir uma cor de fundo no cabeçalho, o conteúdo da sua página rola por baixo ele aparece diretamente, e o texto do seu menu se transforma em sopa ilegível no momento em que uma imagem passa por trás dele.
Selecione o contêiner de cabeçalho, vá para Estilo > Fundo, e dê-lhe uma cor sólida Se você realmente quer um cabeçalho transparente, isso é um olhar válido, mas, em seguida, projetar a primeira seção para trabalhar por trás dele.
2. A primeira seção se esconde atrás do cabeçalho
Mesma causa raiz. Um cabeçalho fixo não ocupa mais espaço no layout, então a primeira seção desliza para cima para preencher a lacuna que deixou e parte dele acaba preso atrás do cabeçalho.
Adicione o preenchimento superior à sua primeira seção, aproximadamente combinando com a altura do cabeçalho Se o cabeçalho tiver 80 px de altura, dê ao herói 80 px de preenchimento superior Se você não tiver certeza de quão alto ele é, clique com o botão direito no cabeçalho na extremidade frontal e inspecione-o; a altura está bem ali nas ferramentas do navegador.
3. come a tela no celular
As telas do telefone são curtas Um cabeçalho que se sente bem em um monitor de desktop pode engolir um pedaço sério da janela de visualização de um telefone e, em seguida, seguir o visitante para baixo em cada página.
Mude para a visualização móvel no modo responsivo do Elementor e corte o preenchimento vertical do cabeçalho Os controles de posição também são por dispositivo, para que você possa definir Posição de volta para Padrão apenas no celular e deixe o cabeçalho rolar para longe lá Em uma página de artigo longa que geralmente é a melhor chamada Se você executar pontos de interrupção personalizados, o Plug-in de pontos de interrupção personalizados permite ajustar isso para as larguras reais do dispositivo.
Isso funciona com outros plugins de cabeçalho?
Sim, e esta é a parte que vale a pena entender. Posição: Fixo é um controle nativo do Elementor, não é um recurso de Master Addons Master Addons está fazendo exatamente um trabalho aqui: dar-lhe um modelo de cabeçalho livre que abre no Elementor Uma vez que você está no editor, a parte pegajosa é simples Elementor.
Portanto, se você construir cabeçalhos com um construtor de tema diferente, ou seu tema enviar um cabeçalho editável por Elementor próprio, o mesmo caminho Avançado > Layout > Posição > Fixo se aplica A única coisa que muda é onde você vai abrir o cabeçalho para edição.
Uma alternativa sem salto: posição pegajosa com CSS personalizado gratuito
O posicionamento fixo levanta o cabeçalho para fora do fluxo da página, e é por isso que você tem que preencher a primeira seção para que nada se esconda atrás dele Se você quiser pular essa etapa, CSS position: sticky é a alternativa Ele mantém o cabeçalho no fluxo e só o fixa quando atinge o topo, portanto, não há salto de conteúdo para corrigir.
A captura é onde você adiciona o CSS A caixa Custom CSS por elemento do Elementor é um recurso Pro, mas os Master Addons gratuitos Extensão CSS personalizada dá-lhe a mesma caixa sem nenhum custo Selecione o recipiente do cabeçalho, abra seu campo CSS personalizado e cole isto:
selector {
position: sticky;
top: 0;
z-index: 99;
}selector é a abreviação do Elementor para o elemento que você está editando, portanto você não precisa de um ID ou classe. Um gotcha: se algum contêiner pai tiver overflow: hidden, sticky silenciosamente para de funcionar, tão claro que do ancestral se o cabeçalho se recusar a fixar. O comportamento completo está documentado no Referência MDN na posição CSS.
Métodos de cabeçalho pegajosos gratuitos comparados
Três dessas rotas são gratuitas, e cada uma se encaixa em uma necessidade diferente Vidas fixas no próprio controle de Posição do Elementor Os Complementos Mestres Extensão posicionamento não tem opção Fixa, mas ajuda dentro do cabeçalho: empurre um logotipo ou crachá com deslocamentos Relativos ou Absolutos, com valores separados por dispositivo.
| Método | Precisa de código | Custo | Salto conteúdo | Melhor para |
|---|---|---|---|---|
| Posição Fixa (guia Elementor Avançado) | Não | Grátis | Precisa de uma correção de preenchimento | Cabeçalho sempre visível |
| posição: pegajoso (CSS personalizado) | Um trecho | Grátis | Nenhum | Layout limpo, sem salto |
| Efeitos de rolagem pegajosa Elementor Pro | Não | Pago | Manuseado | Esconder-em-rolar e encolher |
| Plugin dedicado de cabeçalho pegajoso | Não | Grátis | Manuseado | Efeitos de rolagem pré-construídos |
Adicionando psiquiatra ou mudança de cor em rolagem
Quer que o cabeçalho encolha ou troque de cor assim que o visitante rolar? isso lê a distância de rolagem, o que o CSS não pode fazer sozinho Algumas linhas de JavaScript através do Extensão JS personalizada em Master Addons Pro pode alternar uma classe no cabeçalho passado um limite de rolagem, então você estilo que classe em Custom CSS É mais trabalho do que um plugin que envia o efeito, então pesar o esforço antes de você construí-lo à mão.
Fazendo valer a pena colar o cabeçalho
Uma vez colado à tela, o cabeçalho fica visível 100% do tempo, então vale a pena uma segunda passagem.
Apare a altura primeiro Um cabeçalho alto que nunca desaparece fica irritante rápido, e cada pixel que você salva é um pixel de conteúdo que o visitante pode ver Então veja o que está nele: um slot permanente na tela é um bom lar para o seu melhor link, seja um botão de demonstração, preço ou contato.
Grande site? Os complementos mestres Widget do menu de navegação constrói mega menus, para que você possa manter toda a estrutura a um clique de distância sem que o cabeçalho cresça E fique de olho no peso, já que o cabeçalho agora carrega em todas as páginas e nunca descarrega O Guia de velocidade do elementor vale a pena ler se o seu tempo de carregamento já estiver apertado.
Se preferir não construir um cabeçalho do zero, o Biblioteca de modelos de complementos mestres tem cabeçalhos prontos que você pode importar e depois tornar pegajosos com as mesmas etapas, e o Kits de modelos envie cabeçalhos e rodapés correspondentes para um site inteiro.
Perguntas frequentes
Posso criar um cabeçalho pegajoso no Elementor gratuitamente?
Sim. A Posição: O controle fixo faz parte do Elementor livre Você só precisa de um modelo de cabeçalho para aplicá-lo, e o Master Addons Theme Builder oferece um gratuitamente O próprio Theme Builder da Elementor e seus efeitos de rolagem pegajosa são as partes Pro-only.
Qual é a diferença entre um cabeçalho fixo e um cabeçalho pegajoso?
Um cabeçalho fixo é sempre visível a partir do carregamento da página e nunca se afasta Um cabeçalho pegajoso na rolagem rola para fora, depois desliza de volta quando o visitante rola para cima Posição: Corrigido dá-lhe o primeiro O segundo precisa dos efeitos de rolagem do Elementor Pro.
Por que meu conteúdo está escondido atrás do cabeçalho pegajoso?
Um cabeçalho fixo é removido do fluxo normal da página, de modo que a seção abaixo desliza para cima por baixo dele Adicione o preenchimento superior à sua primeira seção, correspondendo aproximadamente à altura do cabeçalho, e defina uma cor de fundo sólida no contêiner do cabeçalho.
Por que o conteúdo da minha página rola por cima do meu cabeçalho?
O índice z é muito baixo Na guia Avançado em Layout, defina Z-Index como 99 (ou superior) no contêiner de cabeçalho para que ele se acumule acima de tudo na página.
Devo usar um cabeçalho pegajoso no celular?
Muitas vezes não. Um cabeçalho fixo come escasso espaço vertical em um telefone Os controles de posição do elementor são por dispositivo, então mude para a visualização móvel e defina a Posição de volta para Padrão, ou pelo menos corte o preenchimento do cabeçalho para baixo.
Embrulhando
Criar um cabeçalho pegajoso no Elementor são três configurações em um elemento Selecione o contêiner do cabeçalho, defina Posição como Corrigido com zero deslocamentos, aumente o índice z. Tudo depois disso é limpeza: dê ao cabeçalho um fundo sólido, preencha a primeira seção para que nada se esconda atrás dele e verifique como ele se sente em um telefone antes de ligar para ele.
Tudo ele é executado em Elementor livre A única coisa que você precisa é de um modelo de cabeçalho para editar, que é o que o livre Construtor de temas em complementos mestres fornece, juntamente com rodapé, 404, arquivo e modelos únicos Se você quiser mais tarde o resto do kit de ferramentas, é isso que o Planos PRO capa, mas nada neste tutorial precisa.
Leitura relacionada: como editar o rodapé no WordPress com Elementor, como criar um plano de fundo distorcido no Elementor, e como criar um site de uma página com Elementor.
