Como fazer um menu fixo no WordPress

A navegação no site é um daqueles fundamentos de experiência do usuário que moldam a maneira como os visitantes se sentem em relação ao seu site. Os usuários da web modernos não têm absolutamente nenhuma intenção de perder seu tempo em um site que falha em entregar o conteúdo desejado rapidamente e com esforço zero por parte do usuário. O menu de navegação é tradicionalmente o primeiro lugar onde os visitantes vão para orientação. Se o menu não for projetado corretamente e se a navegação não funcionar da maneira mais tranquila e rápida possível, os visitantes começam a sair e o site começa a morrer lenta e dolorosamente na internet.

Um menu fixo constitui uma parte importante da navegação do site, pois “gruda” nos usuários conforme eles rolam, ao invés de ficar no topo da página, garantindo que a navegação nunca esteja fora de alcance. É por isso que decidimos nos aprofundar no conceito, examinar as vantagens e desvantagens desse recurso e mostrar como configurá-lo usando um dos plug-ins disponíveis do WordPress.

Por outro lado, se você não quiser usar um plugin WordPress, você deve saber que a maioria dos nossos temas WordPress premium vem com a funcionalidade de menu aderente. Você pode configurá-lo para aparecer em seu site ou em páginas individuais, mas falaremos disso em breve.

O que é um menu fixo

Em primeiro lugar, vamos explicar o que é um menu fixo e como funciona. Na maioria dos sites, a navegação principal está localizada no cabeçalho, que é a parte superior da página. Normalmente, os elementos da página desaparecem (movem-se para cima) conforme o usuário rola para baixo. Um menu fixo é um menu que fica (“fixa”) na parte superior da tela conforme o usuário rola a página. Dessa forma, se o usuário deseja acessar algo no menu enquanto estiver no meio da página, ele não precisa rolar totalmente para cima para encontrar a navegação, pois ela estará bem ali, no topo do a janela de visualização.

A “aderência” geralmente se aplica a todo o cabeçalho, não apenas o menu. Envolve outros itens de cabeçalho, como botões sociais, logotipo, barra de pesquisa e assim por diante.

Prós e contras do menu pegajoso

Não parece haver um consenso geral entre os designers de UX se menus fixos são bons ou ruins para sites, já que existem contras fortes e prós significativos, então vamos ver quais são.

Prós:

Contras:

Seu site precisa de um menu fixo?

Dizemos “Sim” para todos os casos abaixo:

Criando um Menu Fixo com Temas Qode

Como mencionamos anteriormente, para adicionar um menu fixo ao seu site, você usará a funcionalidade integrada do tema ou instalará um plugin do WordPress.

Se você comprou um tema da Qode Interactive, não precisará de um plugin – a maioria dos nossos temas já vem com essa funcionalidade.

Quanto a habilitá-lo e configurá-lo, se você quiser ter um menu fixo em todo o site (em todas as páginas), vá para as configurações gerais do tema (estas são marcadas pelo nome do tema ou autor do tema, seguido pelo palavra “Opções”) e clique em Cabeçalho.

Aqui você encontrará as opções do menu fixo. Observe que as opções podem variar, dependendo do tema.

Depois de selecionar “Sticky” no menu suspenso, um conjunto de opções de personalização será aberto.

Novamente, as configurações podem variar dependendo do tema.

Você também pode definir o menu fixo apenas para uma ou mais páginas individuais, e não para todo o site. Isso é feito nas opções da página individual. Basta ir para a página que deseja configurar e definir o comportamento do cabeçalho de acordo com sua preferência.

Como adicionar um menu fixo usando um plug-in

Se o seu tema não vem com a funcionalidade de menu fixo e você não é um desenvolvedor e / ou não sabe como usar CSS para adicionar um cabeçalho fixo, sua melhor opção é usar um plug-in.

Para este propósito, recomendamos o uso de Meu Menu Fixo – Menu Fixo na rolagem, Cabeçalho Fixo para Qualquer Tema, que, como o próprio nome sugere, pode funcionar com qualquer tema, permitindo adicionar facilmente um cabeçalho fixo e até mesmo uma barra de boas-vindas. O plugin não requer codificação ou conhecimento de CSS, é leve e compatível com todos os principais construtores e editores de WordPress, incluindo Gutenberg e WPBakery. É baseado em uma classe de elemento (“Sticky Class” ou ID) que essencialmente especifica qual parte do seu site você deseja tornar aderente.

Este plugin permite que você crie um cabeçalho fixo na rolagem para cima e para baixo, adicione efeitos (fade ou slide), altere a opacidade e a cor do plano de fundo e também decida quando e em quais páginas você deseja que o menu fixo apareça. A versão gratuita deve fazer o truque para a maioria dos usuários, enquanto a versão pro permite que você altere o estilo CSS, bem como desabilite o recurso de rolagem ou em certas páginas. Finalmente, este plugin WordPress vem com suporte a vários idiomas e é compatível com todos os principais construtores de páginas.

Depois de instalar e ativar o plugin, vá para Configurações> myStickymenu.

A primeira coisa que você precisa definir é qual menu deseja exibir como fixo. Você pode escolher qualquer um dos menus do seu tema.

Quanto às configurações, a primeira coisa que você será solicitado a fazer é definir o Z-index aderente. O z-index define a ordem da pilha do cabeçalho, ou seja, se ele será exibido na frente ou atrás de outros elementos na página. Um elemento com uma ordem de pilha maior é sempre exibido na frente de todos os elementos com uma ordem de pilha inferior. Como você provavelmente deseja que seu cabeçalho fixo esteja sempre visível, sugerimos inserir um número maior neste campo.

Em seguida, decida se deseja que seu menu fixo exibir em telas de celular ou não. Geralmente, é uma boa ideia desativá-lo no celular, pois provavelmente ocupará muito da tela e enviará o conteúdo para fora.

A próxima opção, Tornar visível na rolagem na página inicial, permite que você defina depois de quantos pixels você deseja que o menu fixo apareça na sua página inicial. Você também pode definir o Tempo de transição aderente abaixo.

O plug-in também permite alguma personalização de design. Você pode definir a cor de fundo pegajoso, opacidade e escolher o efeito de transição. Aqui você também pode definir uma configuração geral (para todas as páginas do seu site, não para a sua página inicial) que determina depois de quantos pixels você deseja que o menu apareça.

Opções adicionais estão disponíveis com a versão pro do plugin. Mas se tudo o que você precisa é de um menu fixo básico, a versão gratuita deve funcionar perfeitamente.

Pensamentos finais

Se você acha que adicionar um menu fixo melhoraria a navegação no site e a experiência do usuário, nós dizemos – vá em frente! A menos que seu site esteja compactado como está, provavelmente será uma grande adição e um fator importante de usabilidade. Quer o seu tema já tenha a funcionalidade necessária ou você opte por usar o plug-in, temos certeza de que você criará um menu aderente que se ajusta às suas páginas como uma luva.