Se você é um aspirante como desenvolvedor web ou um empreendedor de eCommerce, seus sites provavelmente compartilham alguns elementos essenciais. Por exemplo, cada site precisa de um menu ou menu claro para ajudar os visitantes a navegar entre as diferentes páginas. Entretanto, se você usa um construtor de páginas como o Elementor para cortar a codificação, você pode estar se perguntando se ainda é possível fazer um menu fixo (sticky headers) sofisticado e de fácil utilização do Elementor.

Felizmente, usando um menu do Elementor pode fornecer aos seus usuários uma maneira simplificada de explorar o seu site. Com este popular construtor de páginas, você pode construir uma grande variedade de menus que não desaparecem quando os usuários percorrem um site. Esta característica é o que os torna fixo.

Neste post, vamos discutir como funciona um menu fixo (sticky header) e os benefícios de usar um. Depois mostraremos como fazer um menu fixo (sticky header) do Elementor com as versões gratuita e profissional da ferramenta. Finalmente, nós lhe forneceremos opções adicionais de customização para os seus menus fixo (sticky header) usando CSS. Vamos começar!

Uma introdução ao menu fixo (sticky header) do Elementor

Não há dois sites iguais. Entretanto, há algumas características que os sites de qualidade têm em comum.

Se você estiver rodando um site com várias páginas, um desses elementos é um menu. Esta é a barra horizontal na parte superior de qualquer página que contenha informações úteis.

Tipicamente um menu inclui seu menu de navegação com páginas como Sobre ou Fale Conosco:

Menu principal do site Kinsta
Menu principal do site Kinsta

Quando os visitantes explorarem sua página, eles provavelmente esperarão um menu organizado para ajudá-los a guiá-los pelo seu site. Como a Experiência do Usuário (UX) é a chave para o sucesso de um site, você seria sábio para criar um menu que seja intuitivo e direto. É aí que um menu fixo (sticky header), projetado com o Elementor, pode fazer uma grande diferença.

Deseja fazer um menu sofisticado, porém de fácil utilização? ✨ Este guia tem você coberto 💪Click to Tweet

Como funciona um menu fixo (sticky header)

Antes de aprendermos como funciona um menu fixo (sticky header) do Elementor, vamos verificar como um menu padrão se comporta quando você desce uma página:

Exemplo de menu padrão
Exemplo de menu padrão

Como você pode ver no exemplo acima, este menu contém uma barra de navegação complexa com categorias como Vendas, Vestuário, Sapatos e muito mais. Estas abas, sem dúvida, ajudarão os compradores a encontrar o que eles estão procurando. Entretanto, quando você percorre a página, o menu desaparece.

Os usuários podem achar isso frustrante, pois requer que eles voltem para o topo da página para acessar o menu de navegação. Felizmente, um menu fixo (sticky header) oferece uma solução simples.

Ao ficar ou ‘colar’ no lugar no topo da sua página, um menu colante pode melhorar drasticamente o UX do seu site:

Exemplo de menu fixo (sticky header)
Exemplo de menu fixo (sticky header)

Quando o design do seu site inclui um menu rígido, seus usuários podem rapidamente pular para novas páginas sem perder tempo rolando.

Além disso, com este elemento fixo, você pode incluir a frente e o centro da sua logo em todos os momentos. Este recurso pode ajudar os usuários a lembrar de sua marca mais facilmente e encorajá-los a permanecer no seu site por mais tempo.

Quando você deve considerar o uso de um menu fixo (sticky header)

Os visitantes terão menos probabilidade de se perderem ao explorar sites maiores com um menu fixo (sticky header). Como tal, você pode querer aproveitar esta característica se o seu site tiver muitas páginas. É por isso que você verá frequentemente menus fixos em sites de eCommerce.

Um menu fixo (sticky header) pode ser particularmente útil se você quiser incluir um recurso de pesquisa em seu menu. Dessa forma, como os usuários estão rolando e percebem que não podem encontrar o que estão procurando, eles podem rapidamente inserir uma consulta na barra de pesquisa.

Além disso, um menu fixo (sticky header) pode ser uma mudança de jogo, se você tiver um blog monetizado que mostre todos os seus artigos na página inicial. Em geral, este menu pode garantir que o seu site seja manejável e escalável.

Entretanto, se o seu site tem apenas uma página, não faz muito sentido transformar seu menu desta forma. Além disso, se você tem uma boa quantidade de páginas em seu site, mas cada uma é relativamente curta, você provavelmente também não precisa de um menu fixo (sticky header).

Em geral, um menu fixo (sticky header) reduz o tempo de rolagem e aumenta a usabilidade e navegação do site. Se você não tem certeza se este recurso beneficiaria seu site, você pode querer fazer uma auditoria rápida do comprimento de sua página e então decidir.

Como criar um menu fixo (sticky header) do Elementor

Para este tutorial, nós o acompanharemos através dos passos para fazer um menu fixo (sticky header) do Elementor. Vamos assumir que você já tem o plugin do Elementor instalado e ativado em seu site.

Estaremos cobrindo como você pode fazer este menu tanto com a versão gratuita quanto com o Elementor Pro. Você provavelmente ficará feliz em saber que você não precisará aprender HTML ou editar código significativamente para fazer isso!

Como criar um menu fixo usando o Elementor (gratuito)

A versão gratuita do Elementor oferece algumas características poderosas para a construção de páginas. Entretanto, se você quiser fazer mudanças em seus menus e rodapés, você vai precisar de algumas ferramentas adicionais (também gratuitas).

Com isso em mente, vamos ver como você pode criar um menu fixo (sticky header) usando o Elementor!

Passo 1: Instale e ative os seus plugins essenciais

Felizmente, algumas ferramentas confiáveis podem facilmente expandir a funcionalidade da versão gratuita do Elementor.

Navegue até o seu painel do WordPress para encontrar sua primeira ferramenta. Vá para Plugins > Adicionar novo e procure por ElementsKit Elementor addons usando a função de pesquisa:

Instale e ative o ElementsKit
Instale e ative o ElementsKit

Instale e ative este plugin como você normalmente faria. Quando você terminar este processo, você será levado para sua página principal de plugins:

Plugin agora instalado
Plugin agora instalado

Agora, clique em Add New novamente para localizar o Sticky Header Effects for Elementor plugin com a barra de pesquisa:

Sticky Header Effects for Elementor
Sticky Header Effects for Elementor

Repita o processo de instalação e ativação desta ferramenta, e você está pronto para o próximo passo!

Passo 2: Crie o seu menu

Antes de você poder fazer qualquer tipo de menu, você precisará de um menu de navegação. Nós vamos fazer um menu simples com os elementos mais comuns. Ele incluirá uma logo, páginas e um Call to Action (CTA).

Para criar seu próprio menu dentro do seu painel do WordPress, vá para Appearance > Menus. Ao lado do campo Menu Name, dê ao seu um nome descritivo. Nós vamos chamar o nosso “Sticky Header Menu”:

Dê um nome ao seu menu fixo (sticky header)
Dê um nome ao seu menu fixo (sticky header)

Certifique-se de escolher o Header como o Display location. Você também pode querer selecionar a caixa para adicionar novas páginas ao seu menu automaticamente.

A seguir, você precisará adicionar algumas páginas ao seu menu. Na seção Pages à esquerda, marque as caixas para quaisquer páginas que você gostaria de incluir, então clique em Add to Menu:

Adicione páginas ao seu menu de menu fixo (sticky header)
Adicione páginas ao seu menu de menu fixo (sticky header)

Então você verá suas páginas transferidas para o seu menu à direita. Vá em frente e clique em Save Menu no canto inferior direito da sua tela:

Salve seu menu de menu fixo (sticky header)
Salve seu menu de menu fixo (sticky header)

Como você pode ver, nós adicionamos algumas páginas básicas, incluindo Contact Us, Sobre e Sample Page. Você pode querer reordenar suas páginas para que a sequência pareça intuitiva para os visitantes.

Passo 3: Crie o seu cabeçalho

Agora o seu menu de navegação existe, mas você não pode acessá-lo em nenhum lugar. Isso é porque você precisa criar um cabeçalho para ele.

Para fazer isso, vá para a aba ElementsKit no seu menu do lado esquerdo. Se você ainda não o fez, você precisará clicar em algumas páginas de ‘início’ neste ponto.

Todos provavelmente terão preferências diferentes, então leve seu tempo selecionando quais características você quer ativar. No entanto, certifique-se de que o módulo Header Footer esteja on:

Ativar a opção de rodapé de menu no Kit Elements
Ativar a opção de rodapé de menu no Kit Elements

Agora, vá para ElementsKit > Header Footer:

Adicionar novo modelo
Adicionar novo modelo

Esta página estará vazia, já que você ainda não tem nenhum menu ou modelo de rodapé. Clique em Add New no topo da sua tela para criar seu primeiro modelo de menu:

Preencha as configurações do modelo
Preencha as configurações do modelo

Na tela acima, digite um nome descritivo e certifique-se de que o Header esteja selecionado como o Type. Já que você está usando a versão gratuita, este menu aparecerá no Entire Site.

Certifique-se de alternar a chave Activate/Deactivate para ON e clique em SAVE CHANGES. Agora você será levado de volta para sua página de modelos, onde você pode ver seu novo modelo de menu listado:

Novo modelo de menu está agora disponível para uso
Novo modelo de menu está agora disponível para uso

Você também pode notar um ícone verde Active próximo a este menu. No entanto, ainda não está ao vivo.

Para completar seu menu, passe o mouse sobre ele na lista de tem e clique em Edit in Elementor, logo abaixo de seu nome. Isto o levará para a tela do Elementor Builder.

Aqui, clique no ícone do ElementsKit:

Clique no ícone ElementsKit
Clique no ícone ElementsKit

Na tela seguinte, selecione a aba Sections:

Selecione a aba "Seções"
Selecione a aba “Seções”

Role um pouco para baixo para encontrar uma seção de menu que você gosta, então clique em Insert. Nós escolhemos Header – Section 5:

Insira o menu onde você quer
Insira o menu onde você quer

Como você provavelmente pode ver, nosso menu de navegação não é visível. Então vamos em frente e adicioná-lo ao nosso modelo de menu. Para fazer isso, passe o mouse sobre a seção do menu de navegação do seu menu. Neste caso, está bem no centro:

Passe o mouse sobre a seção do menu de navegação do menu
Passe o mouse sobre a seção do menu de navegação do menu

Clique nesta área, e suas Menu Settings devem aparecer no painel à esquerda. Agora, localize o campo Select Menu. No menu suspenso, escolha o menu que você criou anteriormente:

Escolha o menu que você criou anteriormente
Escolha o menu que você criou anteriormente

Neste ponto, você deve ver o menu populado no seu modelo de menu. Clique em UPDATE no canto inferior esquerdo da tela, e seu menu padrão está pronto.

Vamos checar como funciona em ação:

Novo menu
Novo menu

Como você pode ver, nosso menu parece ótimo. No entanto, ele desaparece quando nós rolamos para baixo. Vamos ver como podemos fazê-la grudar.

Passo 4: Faça o seu menu fixo

Para nosso passo final, navegue até ElementsKit > Header Footer > Edit with Elementor. Então selecione seu menu e clique no ícone central com seis pontos:

Clique no ícone pontilhado
Clique no ícone pontilhado

Quando você pairar sobre ele, você verá que isto permite que você Edit Section. Assim que você clicar nela, suas opções de edição aparecerão no painel esquerdo.

Clique na aba Advanced e desça até Sticky Header Effects. Haverá uma mensagem de aviso que diz que o plugin não controla o menu fixo (sticky header), mas você pode desconsiderar isso. Como nós também adicionamos o Sticky Header Effects para o plugin Elementor, ele vai funcionar muito bem.

Agora ative o menu fixo (sticky header) do Elementor, alternando a chave para ON:

Habilitar o menu fixo (sticky header) do Elementor
Habilitar o menu fixo (sticky header) do Elementor

Dependendo do seu tema, seu menu fixo (sticky header) pode parecer transparente. Se este for o caso, você pode querer fazer uma mudança de estilo.

Em seu painel da Edit Section, em Style, vá para Background > Color e certifique-se de ter selecionado uma tonalidade que se destacará contra seu fundo normal:

Faça uma mudança de estilo, se necessário
Faça uma mudança de estilo, se necessário

Então clique em UPDATE. Agora você pode visualizar seu site para conferir o resultado final:

Menu fixo (sticky header) em ação
Menu fixo (sticky header) em ação

É isso aí! Este é um simples menu fixo (sticky header) do Elementor, mas ele pode facilmente levar o seu site para o próximo nível.

Como criar um menu fixo usando o Elementor Pro

Ao usar o Elementor Pro, criar um menu fixo (sticky header) é um pouco mais simples. Você pode adicionar este recurso ao seu site em apenas três passos simples.

Passo 1: Crie o seu menu

Para fazer seu menu, navegue até Appearance > Menus no seu painel do WordPress:

Criar um menu
Criar um menu

Dê um nome descritivo ao seu menu, selecione Primary Menu ao lado de Display location e clique em Create Menu:

Nomeie seu menu e selecione um local
Nomeie seu menu e selecione um local

Neste ponto, você deve ter algumas páginas existentes em seu site. Selecione as páginas que você gostaria de incluir em seu menu no painel à esquerda.

Então clique em Add to Menu, seguido por Save Menu:

Selecione páginas para incluir no menu
Selecione páginas para incluir no menu

Agora suas páginas devem ser preenchidas no lado direito sob a Menu Structure.

Passo 2: Crie o seu cabeçalho

A seguir, nós precisaremos criar nossa fundação. Vamos fazer um menu clássico.

Para começar, localize a aba Elementor em sua barra lateral esquerda. Logo abaixo disso, vá para Templates > Theme Builder. A página seguinte será parecida com esta:

Encontre "Templates" dentro de "Theme Builder"
Encontre “Templates” dentro de “Theme Builder”

Como você provavelmente pode ver, com o Elementor Pro, você pode facilmente começar a projetar cada elemento do seu site.

Clique no ícone de mais (+) no elemento menu. Agora você deve ver um pop-up que exibe vários blocos de menu que você pode escolher:

Escolha entre vários blocos de menu
Escolha entre vários blocos de menu

Se você tem um modelo de menu pré-existente, você pode selecioná-lo na aba My Templates. Caso contrário, você pode querer usar um dos blocos de seção que vem incluído com o Elementor Pro.

Quando você tiver feito sua seleção, simplesmente passe o mouse sobre o bloco desejado e clique em Inserir:

Inserir o bloco desejado
Inserir o bloco desejado

Aqui, você verá que este bloco vem com sua própria logo, mas nosso menu de navegação foi automaticamente preenchido. Agora, clique em PUBLISH:

Lutando com tempo de inatividade e problemas no WordPress? Kinsta é a solução de hospedagem projetada para economizar seu tempo! Confira nossos recursos
Clique em "Add Condition" dentro de Publish Settings
Clique em “Add Condition” dentro de Publish Settings

A tela a seguir lhe alertará para determinar suas PUBLISH SETTINGS. Aqui, selecione ADD CONDITION para decidir onde você quer exibir seu menu:

Selecione onde você quer exibir o modelo
Selecione onde você quer exibir o modelo

Você provavelmente vai querer selecionar Entire Site ao lado do INCLUDE. Você também pode excluir certas áreas do site clicando na seta ao lado do INCLUDE e trocando para a alternativa. Quando você estiver satisfeito com suas seleções, clique em SAVE & CLOSE.

Neste ponto, uma mensagem pop-up aparecerá no canto inferior direito da sua tela. Se ela não desaparecer antes que você possa clicar nela, selecione a opção para ver seu site ao vivo.

Alternativamente, volte para o seu painel do WordPress e visualize seu site clicando no ícone da casa no canto superior esquerdo e então selecionando Visit Site:

O menu está agora disponível
O menu está agora disponível

Como você pode ver, nosso menu agora está funcionando, mas quando rolarmos a página para baixo, ele desaparece. Vamos ver o que podemos fazer a respeito disso!

Passo 3: Faça seu menu ficar fixo

Agora vamos ver como criar um menu fixo (sticky header) do Elementor com a ferramenta profissional!

Vá para Templates > Theme Builder e selecione o menu que você acabou de fazer. Em seguida, clique em Edit ao lado do ícone do lápis na tela seguinte. Isto o levará de volta ao editor do Elementor.

Passe o mouse sobre o seu modelo de menu, depois clique no ícone de seis pontos no centro. Isto abrirá seu painel da Edit Section à esquerda:

Clique na opção pontilhada para editar
Clique na opção pontilhada para editar

Agora, navegue até a guia Advanced e localize a seção Motion Effects. Aqui, habilite os Scrolling Effects alternando a chave para ON:

Alternar a opção "Scrolling Effects" para "On"
Alternar a opção “Scrolling Effects” para “On”

Em seguida, role pela seção Motion Effects para encontrar o campo Sticky. No menu suspenso, selecione Top:

Selecione "Top" na opção "Sticky" dropdown
Selecione “Top” na opção “Sticky” dropdown

Agora, clique em UPDATE. Tenha em mente que, dependendo do esquema de cores do seu tema, seu menu fixo (sticky header) do Elementor pode parecer transparente:

O menu fixo (sticky header) agora está funcionando corretamente
O menu fixo (sticky header) agora está funcionando corretamente

Se esse for o caso, e você não gostar da aparência, você pode sempre mudar sua cor de fundo. Em seu painel da Edit Section, vá para Style > Background e selecione Classic como seu tipo de fundo.

Agora, selecione uma nova cor de fundo para o seu modelo de menu. Você vai querer escolher uma tonalidade que seja complementar ao resto da página, mas que também crie um contraste agradável:

Editar o menu fixo (sticky header), se aplicável
Editar o menu fixo (sticky header), se aplicável

Como este é apenas um exemplo, nós estamos simplesmente escolhendo uma cor cinza para tornar nosso menu menos transparente.

Agora, clique em UPDATE para salvar suas mudanças. Vá em frente e visualize seu resultado final:

Ver qualquer alteração feita
Ver qualquer alteração feita

É isso aí! Você provavelmente vai querer ajustar o estilo e as cores de acordo com a sua marca. Apenas certifique-se de sempre salvar suas mudanças quando terminar.

Como usar o CSS para melhorar o seu menu fixo (sticky header) do Elementor

Quando você implementa um menu fixo (sticky header) do Elementor em seu site, pode parecer um significativo “facelift” para o design do seu site. No entanto, você pode estar interessado em mais customizações ou características mais dinâmicas.

Agora que você sabe como criar um menu básico fixo, vamos ver como levar o seu projeto para o próximo nível. Você pode fazer isso usando o código Cascading Style Sheets (CSS) no WordPress.

Se você é um iniciante ou não tem experiência em codificação, não se preocupe. Melhorar seus designs é uma brisa com o Elementor.

Para fazer isso, vá para Templates > Theme Builder > Header:

Adicionar CSS personalizado para fazer mudanças de menu
Adicionar CSS personalizado para fazer mudanças de menu

Em Edit Section > Advanced > Custom CSS, você pode adicionar um pequeno trecho de CSS para fazer mudanças estilísticas.

Tipos de menus do Elementor ou Sticky

Aqui estão algumas melhorias populares que você pode querer considerar para o seu menu fixo (sticky header) do Elementor!

Menu transparente fixo

Alguns temas podem automaticamente definir menus fixos como transparentes. Entretanto, se você quiser fazer isso usando CSS, você pode utilizar um trecho de código como este:

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }

selector{ transition: background-color 4s ease !important; }

selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }

selector > .elementor-container{ transition: min-height 1s ease !important; }

Simplesmente copie e cole este código no campo CSS personalizado e ajuste os campos de acordo com suas preferências. Este trecho altera a cor de fundo, transparência e altura do seu menu, com um efeito de animação:

CSS para personalização de fundo do menu
CSS para personalização de fundo do menu

As possibilidades para este tipo por si só são infinitas.

Menu shrinking sticky

Outra escolha popular é um menu que fica maior e menor conforme os visitantes rolam. Aqui está o código que você vai precisar para este tipo de menu fixo (sticky header) do Elementor:

header.sticky-header {
    --header-height: 90px;
    --opacity: 0.90;
    --shrink-me: 0.80;
    --sticky-background-color: #0e41e5;
    --transition: .3s ease-in-out;

    transition: background-color var(--transition),
                background-image var(--transition),
                backdrop-filter var(--transition),
                opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-background-color) !important;
    background-image: none !important;
    opacity: var(--opacity) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
header.sticky-header > .elementor-container {
    transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
    min-height: calc(var(--header-height) * var(--shrink-me))!important;
    height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
    transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}
header.sticky-header > .elementor-container .logo img {
    transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
    max-width: calc(100% * var(--shrink-me));
}

Se você não estiver confortável com um trecho de código tão extenso, você pode querer consultar o guia do Elementor para fazer um menu shrink fixo.

Com este projeto, você vai acabar com este efeito:

Novo efeito de menu
Novo efeito de menu

Embora este menu tenha um toque sutil, sua sofisticação pode dar ao seu projeto um toque mais profissional.

Fade-In / Fade-Out

Além dessas opções da moda, há também o recurso fade-in / fade-out (também chamado de ‘revelar’). É algo parecido com isto:

Fade in e fade out
Fade in e fade out

Para este efeito, você não precisará tocar em nenhum código. Simplesmente navegue até o seu menu no seu construtor de temas. Então vá para Edit Section > Advanced > Motion Effects > Scrolling Effects:

Editar a opção "Transparência"
Editar a opção “Transparência”

Aqui, clique no ícone do lápis ao lado do campo Transparency e mude a Direction para Fade In ou Fade Out. Depois, ajuste o seu desenho de acordo com as suas preferências.

Existem muitas opções para estes efeitos de transparência, por isso recomendamos que você verifique a documentação do Elementor. Dessa forma, você será capaz de obter a aparência exata que deseja.

Com a ajuda deste guia, você estará tornando os menus fixos do Elementor em pouco tempo 💪😌Click to Tweet

Resumo

Trabalhar com um construtor de sites confiável é uma excelente alternativa para pagar a um desenvolvedor web veterano para criar o seu site. Ao usar alguns dos melhores softwares de design de sites, você pode facilmente fazer os elementos essenciais para qualquer site. Estes incluem menu fixo (sticky header) práticos, mas bonitos.

Um menu fixo (sticky header) pode criar uma experiência mais agradável para seus usuários. Você pode escolher entre vários estilos de menus dinâmicos, incluindo transparente e encolhido. Melhor ainda, você pode fazer esses impressionantes designs de menus com Elementor Pro e sua versão gratuita.

Projetar seu site é um dos primeiros passos para lançá-lo. Entretanto, você precisará primeiro de uma hospedagem confiável. Confira os planos de hospedagem gerenciada da Kinsta para ver como podemos otimizar o desempenho do seu site!


Economize tempo, custos e otimize o desempenho do seu site com:

  • Ajuda instantânea de especialistas em hospedagem do WordPress, 24/7.
  • Integração do Cloudflare Enterprise.
  • Alcance global com 34 centros de dados em todo o mundo.
  • Otimização com nosso monitoramento integrado de desempenho de aplicativos.

Tudo isso e muito mais em um plano sem contratos de longo prazo, migrações assistidas e uma garantia de 30 dias de devolução do dinheiro. Confira nossos planos ou entre em contato com as vendas com as vendas para encontrar o plano certo para você.