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:
É 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.
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.
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.
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.
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!
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.
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.
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.
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:
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:
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.
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:
Navegação responsiva: oferece um posicionamento responsivo do menu.
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.
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 no 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 do jornal é um dos temas mais importantes do WordPress projetados por tagDiv, um…
Quando se trata de configurar uma loja online, WooCommerce é o plugin - plugin . Isto…
Um cabeçalho é geralmente a primeira coisa que uma pessoa vê ao visitar seu site, ...
Ver comentários
Hola gracias por el post, cuando añado el nav menú no me aparece mi menú se queda solo un recuadro gris en el editor de elementor y si voy a la pagina donde lo tengo no aparece nada. Como puedo solucionarlo? gracias
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 se pode dar a instrução para fechar automaticamente um submenu para abrir outro item do menu.
Gracias.
Oi, desculpe, eu não entendi totalmente sua pergunta? Você poderia especificar?
ciao quando le voci del submenù sono troppo lunghe vem si riesce a dividerle su mais righe?
Olá, isso não é recomendado porque a navegação seria muito complexa de ler, neste caso é melhor um estilo de 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 de chamada "ponto de interrupção" 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ó cứ nằm dọc, tôi dùng tema Creaton. Có gì hỗ trợ mình với nhé.
Sziasztok, az miképp oldható meg, hogy egy vertikális menüben az almenüre kattintás után ne zárja össze a menüt 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.
Tchau. Vorrei sapere se é possível fazer de modo que o menu rimanga esteja sempre visível também quando você sobe com a visualização da página. Purtroppo todas as vezes que você provou o menu ascender, mas a cor de fundo do menu não torna o texto praticamente ilegível. grazie