Pagina inicial
- 28 de outubro de 2022 Um menu pode oferecer uma navegação clara para os visitantes do seu site, o que é vital para criar uma experiência de usuário (UX) ideal. No entanto, as configurações de menu padrão do WordPress vêm com suas limitações. Felizmente, o construtor de páginas Beaver Builder possui um módulo de menu que permite criar menus mais avançados, elegantes e fáceis de usar.
Neste post, discutiremos o importante papel que os menus desempenham na experiência do usuário (UX) de um site. Em seguida, vamos orientá-lo sobre como adicionar, usar e personalizar o módulo Beaver Builder Menu. Vamos ao trabalho!
Índice:
Um menu em um site é uma lista de categorias ou recursos que geralmente são apresentados juntos como um conjunto de links ou ícones. Ele tem um design claro que o diferencia do resto da sua página da web:
Existem diferentes tipos de menus que você pode escolher. Esses incluem:
Um menu pode estar localizado em qualquer lugar do seu site, mas geralmente é encontrado nas barras de navegação na parte superior da sua página. Isso ajuda os usuários a navegar facilmente pelas páginas do seu site sem complicações:
À medida que você cria seu site WordPress, provavelmente precisará de um sistema de navegação mais poderoso que exiba seu conteúdo. É aí que um menu pode ser útil.
A exibição do conteúdo do seu site de forma organizada melhora o UX dos visitantes, apresentando-lhes as informações que procuram de maneira acessível. Isso, por sua vez, pode ajudar a mitigar a confusão ou a frustração e incentivá-los a permanecer em seu site por mais tempo.
Portanto, UX aprimorado pode ajudar a aumentar suas taxas de conversão. Ele pode até mesmo beneficiar seus Core Web Vitals e aumentar as chances de seu site aparecer nos principais resultados de pesquisa.
Agora que você conhece algumas das vantagens de usar um menu, é hora de aprender como implementar um em seu site. Para este tutorial, você precisará do construtor de páginas Beaver Builder instalado em seu site WordPress. Vamos mergulhar direto!
Antes de começar, você precisa ter certeza de que tem um menu disponível para o seu módulo. Você pode fazer isso acessando Aparências > Menu no painel do WordPress:
Dependendo do que você deseja em seu menu, você pode selecionar entre as páginas disponíveis. Você pode encontrá-los na caixa Páginas em Adicionar itens de menu :
A partir daqui, você pode escolher qualquer uma das páginas que deseja exibir em seu menu. Depois de fazer suas seleções, clique em Salvar Menu no canto inferior direito da página:
Agora você está pronto para adicionar um menu à sua página.
No painel do WordPress, vá para PAGES e escolha a página onde deseja adicionar um menu. Clique no botão Launch Beaver Builder para abrir o editor:
Na caixa do editor, você verá uma grande seleção de módulos. Você poderá encontrar o módulo Menu abaixo da guia Ações :
Depois de localizá-lo, basta arrastar e soltar este módulo em sua página. Você pode colocá-lo onde quiser; no entanto, neste exemplo vamos colocá-lo no topo da página:
Dessa forma, os visitantes do seu site poderão acessá-lo facilmente.
Neste ponto, você está pronto para definir as configurações do menu. Na caixa do editor em Geral , a primeira coisa que você deseja fazer é selecionar qual menu exibir. Em seguida, você pode alterar o layout, os ícones do submenu e o nome do menu.
O layout padrão é horizontal. No entanto, você pode torná-lo vertical se preferir esse visual:
Você também pode escolher que tipo de ícone é exibido em seu submenu. Você pode selecionar Seta s, Sinal de adição ou Nenhum :
Observe que esse recurso será exibido no front-end do seu site somente quando você tiver submenus aninhados abaixo dos itens do menu principal.
Além disso, na guia Geral , você pode até adicionar seu logotipo ao seu menu para alinhar com sua marca visual. Para fazer isso, role para baixo até a seção Imagem do logotipo e clique em Selecionar foto para escolher seu logotipo na Biblioteca de mídia:
Independentemente do tipo de site que você possui, também convém tornar seu menu compatível com dispositivos móveis. Para fazer isso, role para baixo até a parte inferior da caixa do editor do módulo de menu .
Aqui, você encontrará a guia Responsivo :
O padrão de alternância responsiva é o ícone do hambúrguer , com o qual você pode estar familiarizado.
São as três linhas horizontais empilhadas umas sobre as outras, que são usadas para exibir menus em dispositivos móveis. Este ícone otimizará seu menu para mecanismos de pesquisa quando os usuários estiverem em seus smartphones ou tablets.
Aqui você pode escolher entre as seguintes opções: Ícone de Hambúrguer , Ícone de Hambúrguer + Etiqueta , Botão de Menu ou Nenhum :
Você também pode modificar o estilo responsivo e o ponto de interrupção nesta guia. Quando terminar de fazer suas seleções, clique em Salvar .
Agora é hora de personalizar seu menu. Para começar, clique na guia Estilo na caixa do editor do Módulo de menu.
Esta guia permite que você edite seu menu ao seu gosto. Você pode começar configurando o Alinhamento do Menu . Aqui você pode escolher entre alinhamento esquerdo, central ou direito:
Em seguida, se desejar, você pode escolher uma cor de fundo para o seu menu.
Logo abaixo desta seção, clique em Links para editar a cor do link, a cor de foco do link e a cor de fundo do foco do link:
Observe que você só poderá ver as cores de foco no front-end do seu site. O preenchimento de link altera o espaçamento entre os itens do menu. Role para baixo e você também pode modificar a família de fontes, tamanho, estilo e espaçamento na seção Fonte .
Se você quiser editar ainda mais o estilo, poderá fazê-lo em Estilo e espaçamento . Por exemplo, você pode alternar a fonte para todas as letras maiúsculas ou minúsculas em Transform :
Além disso, você pode adicionar um sublinhado ou colocar o texto em itálico usando Decoração e Estilo .
Você também tem a capacidade de editar outros aspectos do seu menu. Por exemplo, a seção suspensa permite que você estilize os itens do submenu, incluindo cor, cor de foco do link, cor de fundo e preenchimento.
Além disso, se você possui uma loja WooCommerce e deseja exibir um item do carrinho em seu menu, acesse a guia WooCommerce :
Aqui, no menu suspenso do Carrinho , você pode selecionar Mostrar ou Ocultar . Neste exemplo, escolhemos Mostrar este recurso. Você pode modificar elementos do seu carrinho de menu, incluindo o ícone do carrinho e o tipo de exibição:
Depois de editar seu menu ao seu gosto, basta clicar em Salvar na parte inferior da caixa do editor. Para obter instruções ainda mais detalhadas sobre como adicionar um módulo Beaver Builder Menu, você pode conferir nossa documentação sobre o assunto.
Por fim, se estiver satisfeito com seu menu, vá em frente e clique em Concluído e Publicar no canto superior direito da página:
Você pode clicar em alguns dos itens do menu de navegação para garantir que eles vão para as páginas corretas. Também pode ser uma boa ideia testar o link do carrinho de compras.
Se você estiver procurando por opções de personalização aprimoradas, considere usar o módulo Menu com Beaver Themer. A combinação dessas duas ferramentas poderosas lhe dará ainda mais controle sobre os designs de seus menus.
Por exemplo, você poderá adicionar o módulo Menu ao modelo Beaver Themer Header. Isso permite que você escolha facilmente em quais páginas exibir seu menu.
É isso! Agora você deve ter um menu totalmente funcional. Esse novo recurso ajudará os visitantes do seu site a encontrar o que procuram com mais facilidade.
Ao adicionar um menu ao seu site WordPress, você pode apresentar facilmente o conteúdo aos visitantes de maneira organizada e profissional. O módulo Beaver Builder Menu permite que você crie uma página da Web amigável e acessível. Isso pode resultar em melhor desempenho de SEO e uma experiência de usuário mais suave.
Para recapitular, veja como adicionar e usar o módulo Beaver Builder Menu em cinco etapas:
Os módulos são os blocos de construção básicos que você usa no construtor de páginas Beaver Builder para criar páginas. Nosso plugin premium apresenta uma grande variedade de módulos para se adequar a praticamente qualquer layout, desde texto básico e fotos até controles deslizantes avançados e elementos de Call to Action (CTA).
O plugin Beaver Builder Page Builder ajuda você a criar páginas no WordPress. Beaver Themer é um complemento do Beaver Builder que permite criar modelos de temas, partes de temas e muito mais. Ou seja, você pode controlar e personalizar totalmente a aparência do design do seu site.