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 UI/UX do seu site? Se sim, então você está no lugar certo. Aqui reunimos 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ê entender isso, iremos orientá-lo sobre como usar o widget Elementor Navigation Menu para personalizar e turbinar seu menu WordPress.

Índice:

• Por que você precisa de um menu de navegação personalizado?
• Crie um menu WordPress básico 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 seu menu e publique
• Como criar um menu de navegação usando o widget Elementor pro nav'
• Principais recursos do widget do menu de navegação Elementor
• Crie um menu com o widget nav-menu pro
• Menu responsivo para dispositivos móveis
• 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 só para trazer tráfego para o seu site, mas também para uma melhor classificação SEO.

Na verdade, os menus de navegação são projetados principalmente para o envolvimento do usuário, mas este não é o único propósito.

O segundo fator mais importante é ter em mente o papel do “WebCrawler” ou Bots que são projetados para rastrear os sites e indexar o conteúdo no 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, será difícil para os bots classificar seu conteúdo, mas você também perderá visitantes.

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

É um excelente motivo para muitos sites de negócios manterem um único ícone de navegação em vez de uma barra de menu complexa, que carrega um menu em tela cheia quando clicado.

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

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

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

Crie um menu WordPress básico 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 menus fácil de usar, que o ajudará a criar menus de navegação simples para o seu site.

Dito isto, 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 Appearance > 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 “Nome do Menu”. Este será o nome do menu que iremos criar 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 que ajuda você a manter todos os seus diferentes menus organizados.

Após dar um nome ao seu Menu, clique no botão “Criar Menu” para disponibilizá-lo. 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” no lado esquerdo, você encontrará uma lista organizada de coisas que pode adicionar ao seu menu.

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

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

Observação : 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 passe 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 criar 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 do menu pai, todos os itens do menu filho ocultos abaixo dele serão revelados.

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 secundários. Agora é só arrastar para a direita e pronto!

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

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

Na parte superior do editor de menu, você verá uma opção chamada “Gerenciar locais”. Clique nele e algo semelhante à tela a seguir deverá aparecer:

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

Após atribuir um menu a cada um dos locais 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 widget de menu Elementor Pro Nav.

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

Se você deseja adicionar um menu de navegação personalizado ao seu site WordPress, você precisará da versão Elementor Pro. A versão Elementor Pro vem com 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 de Navegação? Aqui está uma breve introdução.

Principais recursos do widget do menu de navegação Elementor

• O widget do menu de navegação oferece a liberdade de colocar seu menu em qualquer lugar que você desejar. No seu cabeçalho ou na parte superior 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 de flutuação ou status ativo
• Crie um menu responsivo para dispositivos móveis do seu site e controle a aparência do seu site nas telas de dispositivos móveis
• Personalize cor, tipografia e preenchimento ou outros ajustes da sua barra de menu
• Crie um menu com pixels perfeitos com a precisão correta de alinhamento, espaçamento e preenchimento.

Crie um menu com o widget nav-menu pro

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

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

No canto superior da seção de configurações, existem 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 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 layout vertical, a distribuição da barra de navegação será de cima para baixo.
• Menu suspenso: menus suspensos também são bastante comuns. Os menus suspensos têm 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 optar por moldura, plano de fundo e animações de texto sutis.

As animações de sublinhado são as seguintes:

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

Da mesma forma, existem animações emolduradas, sobrepostas, de linha dupla, de fundo e de texto. Cada um deles oferece seu próprio conjunto de animações e você mesmo pode conferi-las para saber o que ganha com elas.

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

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

Preenchimento e espaçamento de 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 nos bastidores para garantir que pudessem levar as ferramentas ao desenvolvedor para que pudessem criar facilmente o design que estão pensando.

O espaçamento do menu oferece muitas opções, incluindo:

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

Fundo colorido e tipografia : você pode obter o visual de sua marca sob medida com a ajuda do esquema de cores e da 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 o design dos planos de fundo de acordo com suas preferências.

Menu responsivo para dispositivos móveis

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 controle total das opções de 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 configurações de tela do celular na parte inferior da seção de configurações do Elementor, onde você pode visualizar as opções de tela do celular.

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

• Largura total no celular: você também tem a opção de definir largura total ou largura limitada.
• Pontos de interrupção para tablets ou dispositivos móveis: você pode usar as configurações do ponto de interrupção para definir o menu móvel para dispositivos móveis ou tablets.
• Menus verticais e acordeão: Elementor também oferece a opção de exibir um ícone de hambúrguer dobrá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 posicionamento responsivo do menu.

Empacotando

O menu é uma das características mais importantes de qualquer site. Porque ajuda os visitantes a navegar pelo seu site e se você criasse uma lista de forma inteligente, ajudaria a manter os visitantes no seu site por muito tempo. O menu é tão importante quanto 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 o visual exclusivo da sua marca com todos os recursos essenciais. O widget Elementor Navigation vem com recursos ricos em recursos que permitem aos clientes personalizar a seção do menu para se adequar à voz da sua marca. Agora, você pode usar um menu personalizado e elegante em seu site, em sua página de destino, cabeçalho ou qualquer outra seção onde desejar exibi-lo.