O Guia Definitivo para o Menu Fixo (Sticky Header) do Elementor

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:

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.

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:

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:

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 este plugin como você normalmente faria. Quando você terminar este processo, você será levado para sua página principal de plugins:

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

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”:

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:

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:

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:

Agora, vá para ElementsKit > Header Footer:

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:

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:

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:

Na tela seguinte, selecione a aba Sections:

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:

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:

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:

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:

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:

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:

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:

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

É 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:

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

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:

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:

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:

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:

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:

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

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:

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:

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

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

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:

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:

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:

É 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:

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:

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:

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:

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:

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.

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!