Menu de navegação Elementor - Crie um menu incrível para seu site WordPress

Você está procurando uma maneira de criar um menu incrível para ajudar a melhorar a IU / UX do seu site? Se sim, então você está no lugar certo. Reunimos aqui um guia detalhado para ajudá-lo.

Primeiramente, mostramos um passo a passo sobre como criar um menu para o seu site WordPress. E assim que você pegar o jeito, nós o guiaremos sobre como usar o widget Elementor Navigation Menu para personalizar e turbinar seu menu WordPress.

Tabela de conteúdo:

• Por que você precisa de um menu de navegação personalizado?
• Crie um menu básico do WordPress usando Elementor
• 1. Crie um menu simples para o seu site WordPress
• 2. Escolha e personalize os itens do menu de navegação
• 3. Criar submenus - itens de menu pai e filho (opcional)
• 4. Gerencie a localização do menu e publique
• Como criar um menu de navegação usando o widget Elementor pro nav '
• Elementor Nav-Menu widget Principais recursos
• Crie um menu com o widget profissional nav-menu
• Menu responsivo para celular
• Empacotando

Por que você precisa de um menu de navegação personalizado?

É fundamental saber que os menus de navegação são importantes não apenas para trazer tráfego para o seu site, mas também para uma melhor classificação de SEO.

De fato, os menus de navegação são projetados principalmente para o envolvimento do usuário, mas esse não é o único objetivo.

O segundo fator mais importante é manter em vista o papel do "WebCrawler" ou Bots projetados para rastrear os sites e indexar o conteúdo para o nível relevante e reportar ao mecanismo de pesquisa para classificar o conteúdo no lugar certo.

Portanto, se você estiver criando menus muito complicados, seria difícil para os bots classificarem seu conteúdo, mas também perderá seus visitantes.

Resumindo, a “facilidade de navegação” é um contribuidor essencial para melhorar a experiência do usuário, bem como desempenha um papel fundamental no aumento da classificação do nosso site e no aumento do tráfego.

É um excelente motivo para muitos sites comerciais manterem um único ícone de navegação em vez de uma barra de menus complexa, que carrega até um menu de tela cheia quando clicada.

Graças ao widget Elementor pro com um menu de navegação 100% responsivo, você pode criar uma barra de menu perfeita e incrivelmente flexível sem usar nenhum código.

Neste tutorial, demonstraremos como usar o widget do menu de navegação Elementor para obter o menu personalizado e avançado do WordPress.

Antes de começar com o widget Elementor Navigation, vamos explorar como podemos criar um menu simples do WordPress usando a versão gratuita do Elementor.

Crie um menu básico do WordPress usando Elementor

Agora, para criar um menu WordPress, você não precisa instalar nenhum plugin especial. Por padrão, o WordPress vem com um construtor de Menu fácil de usar, que o ajudará a criar menus de navegação simples para o seu site.

Dito isso, você não terá acesso a nenhuma opção de personalização do menu. Ele assumirá o design do tema WordPress atualmente ativo. Mas se isso é tudo que você deseja, esta é uma excelente maneira de configurar um menu de navegação para o seu site WordPress.

1. Crie um menu simples para o seu site WordPress

Em primeiro lugar, você precisará fazer login no painel de back-end do WordPress.

Agora, na barra lateral esquerda, vá para Aparência > Menus . Aqui você encontrará um layout de duas colunas com “Adicionar itens de menu” à esquerda e “Estrutura de menu” à direita.

Em Estrutura do menu, você encontrará um campo para o "Nome do menu". Este será o nome do menu que estaremos criando agora. Vamos chamá-lo de Menu 1.

Nota : Não se preocupe. Seus leitores não poderão ver os nomes dos menus. É um recurso para ajudá-lo a manter todos os seus diferentes menus organizados.

Depois de dar um nome ao seu Menu, clique no botão “Criar Menu” para torná-lo disponível. Agora, você precisa adicionar os diferentes itens de menu.

2. Escolha e personalize os itens do menu de navegação

Agora vem a parte em que você preenche seu novo menu com itens de menu. Na seção “Adicionar itens de menu” à sua esquerda, você encontrará uma lista organizada de coisas que você pode adicionar ao seu menu.

Por padrão, ele contém qualquer uma de suas páginas, postagens, páginas de entrada, links personalizados e categorias.

basta selecionar os itens de menu que deseja adicionar usando a caixa de seleção e, em seguida, clicar no botão “Adicionar ao menu”. Isso preencherá seu menu com todos os itens de menu selecionados.

Nota : Observe que cada seção em “Adicionar itens de menu” tem a opção de alternar entre – Mais recentes , Exibir tudo e Pesquisar . Lembre-se de usar essas opções se houver muitos itens.

Quando terminar de adicionar todos os itens do menu, clique no botão “Salvar Menu” e vá para a próxima etapa.

3. Criar submenus - itens de menu pai e filho (opcional)

Você sabia que, por padrão, o WordPress também permite a criação de submenus? Ao criar a estrutura do submenu, você tem um item de menu pai e um item de menu filho.

Quando um usuário passa o mouse sobre o item de menu pai, ele revela todos os itens de menu filho ocultos sob ele.

Legal certo?

Agora, para criar uma estrutura de submenu, tudo o que você precisa fazer é escolher um item de menu que deseja que esteja no menu pai. Em seguida, arraste e solte todos os itens de menu que deseja como itens de menu filho abaixo dele. Agora, arraste-o para a direita e pronto!

4. Gerencie a localização do menu e publique

Agora que você criou seu novo menu e adicionou submenus, é hora de gerenciar sua localização.

Na parte superior do seu editor de menu, você deve notar uma opção chamada “Gerenciar locais”. Clique nele e algo semelhante à seguinte tela deve aparecer:

Agora, os locais de menu disponíveis dependerão do tema que você instalou. Neste ex amp le, temos um tema que suporta 3 menus.

Depois de atribuir um menu a cada uma das localizações de menu disponíveis, clique em “Salvar alterações” e pronto.

Agora você conhece todos os recursos básicos do menu que o WordPress oferece por padrão. No entanto, se você quiser mais personalização e funcionalidade, continue lendo para aprender sobre o Elementor Pro Nav Menu Widget.

Como criar um menu de navegação usando o widget Elementor pro nav '

Se você quiser adicionar um menu de navegação personalizado ao seu site WordPress, precisará da versão Elementor Pro. A versão Elementor Pro vem com o widget de navegação Elementor junto com muitos outros recursos especiais, como mais de 300 modelos, um construtor de temas, um widget pop-up, widgets WooCommerce e muitos outros recursos interessantes.

Quais são os principais recursos específicos do próprio widget do Menu Nav? Aqui está uma breve introdução.

Elementor Nav-Menu widget Principais recursos

• O widget do menu Nav oferece a liberdade de colocar seu menu em qualquer lugar que você quiser. No cabeçalho ou no topo ou em qualquer lugar da sua página.
• Você pode adicionar vários menus ao seu site e também às suas páginas separadamente ou globalmente.
• Dê uma aparência deslumbrante ao seu menu usando animação, efeitos suspensos ou status ativo
• Crie um menu responsivo para dispositivos móveis do seu site e controle a aparência do site nas telas de dispositivos móveis
• Personalize cores, tipografia, preenchimento ou outros ajustes da barra de menus
• Crie um menu perfeito para pixels com a precisão certa de alinhamento, espaçamento e preenchimento.

Crie um menu com o widget profissional nav-menu

Você precisará criar um menu básico do WordPress, como mencionamos acima, e depois personalizar o menu padrão do WordPress usando o widget de menu pro-nav. Depois de criar a lista principal, o próximo passo é adicioná-la ao local desejado, ou seja, seção Cabeçalho.

Agora, quando você concluir as configurações básicas, vamos personalizar o menu usando o widget de menu de navegação.

No canto superior da seção de configuração, há três opções disponíveis; Conteúdo, estilo e avançado.

A seção Layout : você tem três opções Horizontal, vertical ou um acordeão suspenso oculto.

• Horizontal: O layout horizontal é o layout mais comum usado pelos sites. Ele se espalha pela tela da direção da esquerda para a direita.
• Vertical: você também encontrará um layout vertical em muitos sites, especificamente em sites que oferecem serviços criativos. No caso de um layout vertical, a propagação da barra de navegação será de cima para baixo.
• Dropdown: menus suspensos também são bastante comuns. Os menus suspensos são layout vertical e requerem interação com o usuário para serem revelados. Eles são usados ​​principalmente para criar um design limpo.

Seção Alinhar : esta seção ajuda a alinhar os itens de texto do menu; centro, direita ou esquerda.

Seção de animação : esta seção permitirá que você adicione efeitos de animação sob, sobre ou efeitos de animação de linha dupla. Você também pode escolher animações de quadro, fundo e texto sutil.

As animações sublinhadas são as seguintes:

• Fade: A animação de fade oferece animação de fade abaixo dos itens de menu.
• Slide: a animação do slide desliza a barra abaixo dos itens de menu.
• Crescer : A animação crescer cresce do meio para fora e dá uma sensação de crescimento.
• Drop in : a animação flui de baixo para cima.
• Drop out: a animação de drop out flui de cima para baixo.

Da mesma forma, existem animações com moldura, sobre linha, linha dupla, fundo e texto. Cada um deles oferece seu próprio conjunto de animações e você mesmo pode verificá-los para saber o que você ganha com eles.

Seção de ponteiro : selecione o tipo de ponteiro no menu suspenso.

Seção do indicador de submenu : o widget Elementor é embalado com muitas opções de estilo de submenu. Onde você pode controlar não apenas a cor, o estilo e também o plano de fundo do menu.

Preenchimento e espaçamento do menu: o preenchimento pode ser ajustado rapidamente. Você pode alterar o preenchimento horizontal para menu e submenu, preenchimento vertical, espaço intermediário e também o alinhamento à direita, à esquerda e centralizado.

Elementor aborda o espaçamento e preenchimento do menu extremamente bem. Eles trabalharam duro por trás das portas para garantir que pudessem trazer as ferramentas para o desenvolvedor para que eles pudessem criar facilmente o design no qual estão pensando.

O espaçamento do menu oferece várias opções, incluindo:

• Espaço entre os itens do menu
• Preenchimento horizontal e vertical para elementos de menu e submenu
• Alinhamento central, esquerdo, direito e justificado.

Cor de fundo e tipografia : você pode obter seu visual personalizado com a ajuda do esquema de cores e cor de fundo desejados. Além disso, você também pode escolher as opções de menu transparente ou semitransparente.

Como designer, você pode brincar com essas opções o máximo que puder e garantir que projete os fundos de acordo com suas preferências.

Menu responsivo para celular

O celular é uma parte importante da web e é por isso que os desenvolvedores do Elementor também fornecem ferramentas para que você também possa criar a barra de navegação para o celular.

O widget Elementor permite o controle completo das opções do menu móvel no WordPress. Você pode controlar a visualização da tela do celular com um conjunto separado de configurações para telas somente para celular. Há uma opção para as configurações da tela do celular na parte inferior da seção de configuração do Elementor, onde você pode visualizar as opções da tela do seu celular.

Resumindo, os recursos do menu móvel do Elementor são os seguintes:

• Largura total no celular: você tem a opção de definir largura total ou largura limitada também.
• Pontos de interrupção do tablet ou celular: você pode usar as configurações do ponto de interrupção para definir o menu do celular para celular ou tablet.
• Menus verticais e acordeão: Elementor também oferece a opção de exibir um ícone de hambúrguer desmontável.
• Alternar alinhamento: o ícone de hambúrguer pode ser alinhado ao centro, à esquerda ou à direita.
• Alinhamento lateral / central: Escolha o alinhamento do menu móvel.

Navegação responsiva: oferece um posicionamento responsivo do menu.

Empacotando

O menu é um dos recursos mais significativos de qualquer site. Porque ajuda os visitantes a percorrer seu site e, se você criou uma lista com inteligência, ajudaria a manter os visitantes em seu site por um longo tempo. O menu é igualmente importante como o de todo o layout de qualquer site, o cabeçalho e a seção de rodapé.

Portanto, o widget de menu deve ser capaz de entregar sua aparência de marca exclusiva com todos os recursos essenciais. O widget Elementor Navigation vem com recursos ricos em recursos que permitem que os clientes personalizem a seção do menu para se adequar à voz da sua marca. Agora, você pode usar um menu elegante e personalizado em seu site, em sua página de destino, cabeçalho ou em qualquer outra seção em que queira exibi-lo.