Aprenda como criar um menu fixo para a navegação principal do seu site WordPress! Os menus fixos ajudam a melhorar a experiência do usuário, tornando o menu do seu site mais prontamente disponível para os visitantes do site. Além disso, pode ajudar a melhorar a aparência geral do seu site. Vamos entrar nisso!
1. Navegue até o Editor do Site
A primeira etapa neste processo é navegar até o “Editor do Site” na área de administração do WordPress. O Editor de Site está disponível para “Temas de Bloco” no WordPress, supondo que você esteja usando o WordPress versão 5.9 ou mais recente.
Para navegar até o Editor do Site, vá para Aparência> Editor (seta vermelha na imagem acima) na navegação principal na área WP Admin.
Clique na área de conteúdo principal no lado direito da tela (destacada em azul claro e indicada pela seta azul na imagem acima). Isso o levará ao Editor de Bloco dentro do Editor de Site.
No lado direito, na guia “Página”, você verá uma linha chamada “Modelo” (destacada em azul na imagem acima). Clique no nome/link do modelo (seta vermelha). Em seguida, clique em “Editar modelo” (seta verde – às vezes “Editar modelo” é um pequeno link de texto azul abaixo do menu suspenso que exibe o nome do seu modelo).
2. Edite seu modelo
Agora você estará dentro do Editor de modelos da página inicial do seu site. (Se você não tem uma página inicial definida para o seu site, você pode conferir este tutorial sobre como configurar uma página inicial estática para o seu site WordPress).
Na parte superior do modelo está a navegação principal da sua página – também chamada de “Cabeçalho” da sua página da web. Ao passar o mouse sobre este elemento, você verá uma caixa roxa delineando-o (seta vermelha na imagem acima). Isto indica que este elemento é um “padrão sincronizado,” o que significa que fazer uma alteração em uma instância do padrão aplicará as alterações em todas as instâncias do site. Clique nesta área para selecionar o padrão Cabeçalho sincronizado.
Se este for o elemento de cabeçalho principal do seu site, você verá agora que o padrão sincronizado é rotulado como “Cabeçalho” na barra de ferramentas do bloco.
3. Adicione seu cabeçalho a um grupo
Na barra de ferramentas do bloco do padrão de cabeçalho selecionado, clique no ícone “Opções” (seta vermelha na imagem acima) e selecione “Grupo” (seta verde). Isso aninhará o padrão sincronizado em um bloco de grupo.
Você notará que a barra de ferramentas do bloco agora tem o ícone do bloco de grupo (seta azul na imagem acima) e o contorno ao redor da área de navegação principal agora é azul em vez de roxo (seta vermelha).
Observe que isso pode alterar a largura do seu menu de navegação principal. Para ajustar a largura, passe o mouse sobre o padrão de cabeçalho sincronizado e clique para selecioná-lo (seta vermelha).
Na barra de ferramentas do bloco do padrão de cabeçalho sincronizado, clique no ícone “Alinhar” (seta verde) e altere de volta para a largura desejada (seta azul – no meu caso selecionei “Largura larga”).
Para retornar ao bloco Grupo, clique no ícone “Selecionar Grupo” na barra de ferramentas do bloco Cabeçalho (seta rosa).
4. Defina o grupo como “Pegajoso”
Com o grupo selecionado, navegue até a guia “Bloquear” na barra lateral de configurações no lado direito da tela (seta vermelha na imagem acima).
Clique no item de menu denominado “Posição” (seta verde). Agora você verá um menu suspenso aqui denominado “Padrão” (seta rosa). Clique no menu suspenso e selecione a opção “Pegajoso” (seta azul).
Navegue até o topo do editor e clique no botão “Salvar” (seta vermelha) e clique em “Salvar” novamente. Agora você terá um menu stick de navegação principal para o seu site WordPress!
5. Estilize o menu fixo
Você pode personalizar/estilizar muitos elementos do novo menu fixo, mas para este tutorial simplesmente adicionarei um plano de fundo atrás do bloco de grupo para garantir que o menu se estenda por toda a largura da página da web.
Para fazer isso, com o bloco Grupo selecionado, navegarei até a aba “Estilos” da barra lateral de configurações (seta vermelha na imagem acima).
Em “Cor”, clicarei na opção “Fundo” (seta azul) e selecionarei a amostra branca para definir a cor de fundo como branco (seta verde).
Mais uma vez clicarei em “Salvar” duas vezes para salvar as alterações.
Observe que você sempre pode ajustar a largura, altura ou espaçamento do cabeçalho do seu site na seção “Dimensões” usando os controles deslizantes “Preenchimento” e “Margem”.
Você pode visualizar seu site clicando no ícone do dispositivo (seta vermelha) e, em seguida, clique em “Ver site” (seta verde).
Você pode rolar seu site e observar o menu de navegação fixo permanecer no topo (seta verde)!
Depois de terminar de editar seu menu fixo, clique no botão “Voltar” na parte superior do editor (seta vermelha). Isso o levará de volta à sua página dentro do Editor Lateral.
Para retornar à área WP Admin, basta clicar no logotipo no canto superior esquerdo.
É isso neste tutorial! Se você gostou, você pode aprenda WordPress com meu curso aprofundado na Udemy. Ou você pode conferir outros gratuitos Tutoriais em vídeo WordPress e Artigos de ajuda do WordPress no meu site.
