Portuguese 
English 
German 
Spanish 
Italian 
French 
Danish 
Swedish 
Polish 
Korean 
Japanese 
Os menus de navegação são como as estrelas-guia de um site. Imagine o seu site como um mar cheio de coisas para os marinheiros navegarem. Portanto, eles precisam de um navegador para chegar com facilidade ao destino desejado.
É aí que entram os menus de navegação. Eles desempenham um papel fundamental em orientar os visitantes e proporcionar-lhes uma experiência de navegação perfeita em seu site.
Portanto, se você é proprietário de um site ou desenvolvedor, precisa fazer um esforço extra e se concentrar para criar um menu de navegação amigável para o seu site.
Para usuários do WordPress, você tem a flexibilidade de projetar o menu de navegação do WordPress de duas maneiras.
Neste guia, orientaremos você nas profundezas do Gutenberg e do Elementor para a criação de um menu de navegação. Ao final deste blog, você poderá criar e personalizar o menu de navegação do WordPress e elevar a experiência do usuário do seu site.
O menu de navegação do site é como o mapa do seu site, guiando os visitantes pelas páginas. Esses menus aparecem como um conjunto de links ou botões normalmente exibidos em uma página da web, geralmente na parte superior ou lateral.
Ajuda a melhorar a acessibilidade e a experiência do usuário do seu site, fornecendo uma forma estruturada de explorar as páginas do site e seu conteúdo.
Com o WordPress, criar e personalizar menus para o seu site é bastante fácil. Você pode adicionar páginas, postagens, links personalizados ou até mesmo categorias ao menu de navegação do WordPress.
O método padrão de criação de um menu WordPress é bastante simples. Ele fornece uma interface simples para criar e gerenciar menus de navegação.
No entanto, você encontrará vários plug-ins do WordPress que adicionam recursos avançados e flexibilidade na personalização do menu de navegação. Alguns desses plug-ins vêm com uma interface intuitiva de arrastar e soltar, permitindo organizar os itens do menu na ordem desejada sem esforço.
Em essência, o menu de navegação do WordPress é um elemento crucial para melhorar a experiência do usuário no seu site, ajudando os visitantes a encontrar o que procuram de forma rápida e eficiente.
O método convencional para adicionar um menu de navegação envolve criar o menu no painel do WordPress e depois incorporá-lo em uma página ou postagem.
Mas usando blocos GutenKit, você pode criar um menu de navegação do WordPress diretamente em uma página ou postagem. E até crie uma página personalizada ao criar o menu de navegação. Vamos descobrir como 👇
📢 Pré-requisito
Para criar um menu de navegação WordPress diretamente na página web, você precisa instalar e ativar o plugin GutenKit em seu site WordPress.
Aprenda também💡Como instalar e ativar o plugin do editor de blocos GutenKit.
Depois de instalar o plugin, abra uma página no editor Gutenberg (o editor padrão do WordPress).
No editor, encontre e selecione o GutenKit Menu de navegação bloquear. Em seguida, adicione o menu de navegação à seção do editor.
No Menu de navegação bloco, você pode adicionar itens de menu apenas clicando no botão do ícone ➕ (mais), ou seja Adicionar cardápio botão.
👉 Adicionando uma página existente ao menu de navegação
Ao clicar no botão Adicionar Menu, uma lista das páginas existentes do seu site aparecerá. Ou você também pode pesquisar digitando o nome da página ou URL no campo de pesquisa.
Além disso, você tem a opção de alterar o Etiqueta do menu e URL da página da barra lateral e páginas personalizadas ao menu de navegação do WordPress.
Por exemplo, ao criar um menu, de repente percebi que esqueci de criar a página “Minha Conta” no site.
Normalmente, eu tinha que voltar ao painel e criar uma nova página chamada “Minha conta”. Em seguida, volte ao editor e adicione esta página ao menu de navegação.
Bem, com o GutenKit esse incômodo é eliminado!
Ao adicionar itens de menu, digite o nome da página no campo de pesquisa. Se a página não existir no site, uma página será criada como rascunho e adicionado ao menu de navegação do WordPress.
Posteriormente você pode editar o conteúdo da página e publicá-lo em seu site.
Na próxima etapa, você pode configurar como o menu de navegação aparecerá no seu site. Use as seguintes configurações do GutenKit para personalizar a aparência do menu:
- Ponto de interrupção do menu: Ao personalizar o menu, você pode definir o ponto de interrupção do menu para tablet ou celular ou adicionar um ponto de interrupção personalizado.
- Bloqueio de rolagem para fora do canvas: Você pode aplicar o bloqueio de rolagem quando o menu aparecer como um menu fora da tela.
- Justifique o conteúdo: Você tem várias opções para justificar o conteúdo do menu, como Início, Centro, Fim, etc.
- Alinhar itens: Você também pode alinhar o conteúdo do menu à direita, à esquerda ou ao centro.
🟢 Configurações do menu móvel
Com o editor de blocos GutenKit, você pode configurar separadamente a aparência do menu móvel. As seguintes configurações estão disponíveis para o bloco do Menu de Navegação.
- Logotipo do menu móvel
- Link do cardápio
- Ícone de hambúrguer
Para personalizar o menu de navegação do GutenKit no WordPress, vá para o Estilos guia no editor de bloco. Na guia de estilo, você pode personalizar o invólucro do menu, os itens do menu, o hambúrguer e o logotipo do menu móvel.
Se você ainda estiver usando o editor clássico, deverá adicionar o menu de navegação do WordPress na seção Aparência > Menus do seu painel. Para adicionar um novo menu:
- Passo 1: Vá para Aparência > Menus.
- Passo 2: Introduzir o Nome do cardápio.
- Etapa 3: Selecione os Local de exibição.
- Passo 4: Clique no "Criar cardápio" botão.
Depois de criar o menu, você pode adicionar itens de menu na barra lateral.
- Etapa 5: Depois disso, adicione páginas, postagens, links personalizados e categorias ao menu.
- Etapa 6: Por fim clique no Salvar menu botão.
Se você é um usuário Elementor, pode editar e personalizar facilmente os menus de navegação do WordPress usando o ElementsKit.
No editor Elementor, arraste e solte o Menu de navegação do ElementsKit ferramenta. Depois disso, você pode personalizar as configurações do menu, as configurações do menu móvel e os estilos de menu.
#️⃣ Configurações do menu
- Seleção de cardápio: Ao escolher “Selecionar Menu”, você verá as opções de menu atuais do seu site.
- Alinhamento horizontal do menu: Determine onde você deseja que seu menu apareça – as opções incluem Esquerda, Centro, Direita e Justificado.
- Comportamento suspenso: Opte por menus suspensos para abrir ao passar o mouse ou clicar.
- Indicador de submenu: Personalize o ícone que acompanha os menus principais e facilita a navegação até os submenus. Se estiver usando a versão pro do ElementsKit, você encontrará o recurso Ícone indicador suspenso no lugar da opção “Indicador de submenu”.
#️⃣ Configurações do menu móvel
- Logotipo do menu móvel: Atribua um logotipo especificamente para exibição em dispositivos móveis.
- Link do cardápio: Mantenha o link padrão da página inicial ou especifique um URL personalizado no campo fornecido. Clicar no logotipo direcionará os usuários ao link designado.
- Ícone de hambúrguer (opcional): Selecione um ícone da biblioteca ou carregue seu próprio SVG.
- Área de clique do submenu: Se o menu contiver submenus, designe um ícone para facilitar a navegação nessas áreas.
#️⃣ Estilos de menu
Personalização do wrapper de menu: Aqui, você pode ajustar aspectos como altura do menu, estilo de fundo, preenchimento, largura, raio da borda, espaçamento de ícones e muito mais.
Estilo do item do menu: Personalize a aparência dos itens de menu com opções de estilo de fundo, cor, espaçamento de borda, margem de item e muito mais.
Personalização do item do submenu: Semelhante aos itens de menu, personalize os itens do submenu com várias opções de estilo disponíveis nesta seção.
Design do painel do submenu: Expanda esta seção para acessar uma infinidade de opções de personalização para definir o estilo do painel do submenu de acordo com sua preferência.
Estilo de ícone de hambúrguer: Explore diferentes opções de estilo para o ícone de hambúrguer, incluindo cores, tamanhos, posições e recursos adicionais.
Personalização do logotipo do menu móvel: Personalize o logotipo do menu móvel de acordo com suas preferências usando as opções fornecidas nesta seção.
Empacotando
Seguindo o guia passo a passo descrito neste blog, você agora possui o conhecimento para criar menus personalizados sem esforço, adaptados às necessidades do seu site. Lembre-se de manter a estrutura do menu lógica, concisa e intuitiva para garantir uma navegação perfeita para seus visitantes. Com a flexibilidade e versatilidade do WordPress, as possibilidades de criação de menus de navegação dinâmicos e envolventes são infinitas. Então, mergulhe, experimente e eleve a navegação do seu site a novos patamares!
Deixe um comentário