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.
Tabela de conteúdo:
É 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 inteira 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.
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.
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.
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.
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!
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.
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.
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.
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:
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:
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.
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:
Navegação responsiva: oferece posicionamento responsivo do menu.
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.
Os cabeçalhos e rodapés de um site são elementos essenciais. Na maioria dos casos, o cabeçalho fornece navegação…
Dois dos temas WordPress mais populares do mercado são Astra e OceanWP. Profissional…
Criar um excelente site de notícias não exige que você se torne um web designer. Nós…
O tema Jornal é um dos temas WordPress mais importantes desenvolvido por tagDiv, um…
Quando se trata de abrir uma loja online, WooCommerce é o plugin ideal. Isto…
Um cabeçalho geralmente é a primeira coisa que uma pessoa vê quando visita seu site,…
Ver comentários
Olá, obrigado pela postagem, quando o menu de navegação é adicionado, meu menu não aparece, meu menu fica apenas um recuadro cinza no editor de elemento e se eu voy para a página onde ele não aparece nada. Como posso solucioná-lo? obrigado
Oi! Normalmente, esse problema aparece quando o menu está vazio ou não foi salvo. Verifique novamente no lado do menu do WordPress.
Olá, uma consulta, como você pode dar a instrução para fechar automaticamente um submenu ao abrir outro item do menu.
Obrigado.
Olá, desculpe, não entendi totalmente sua pergunta. Você poderia especificar?
ciao quando os sons do submenu são tão altos como você quer dividir o mais certo ?
Olá, isso não é recomendado porque a navegação seria muito complexa de ler, neste caso é melhor um estilo mega menu
Menu w wersji mobilnej nie otwiera sie. Jak moge je utworzyc zeby wyswietlalo sie na telefonach?
Olá, a exibição do menu móvel é automática se você usar o widget de navegação Elementor. Mas você deve verificar uma configuração chamada "breakpoint" nas configurações do menu. Este é o tamanho da tela quando o menu será alternado.
Tôi dùng thằng này, mà trên destop tôi để chế độ Horizontal mà nó không nằm ngang, não cứ nằm dọc, tôi dùng theme Creaton. Có gì hỗ trợ mình với nhé.
Sziasztok, az miképp oldható meg, hogy egy vertikális menuben az almenüre kattintás után ne zárja össze az oldal betöltésekor? EPro
Olá, infelizmente isso não é possível, não existe essa opção no widget de navegação Elementor.
Ciao. Você pode saber se é possível fazer isso de modo que o menu esteja sempre visível, mesmo quando você aparecer com a visualização da página. Limpe todas as vezes que eu comprovei que o menu desapareceu, mas a cor de fundo do menu não tornou o texto praticamente ilegível. Grazie