Quando trabalhamos num sítio Web autónomo de comércio externo, é frequente precisarmos de adicionar mais funcionalidades de menu, o que permite que as várias páginas do sítio sejam interligadas de forma mais estreita. Embora pensemos normalmente no menu de navegação principal no topo, algumas pessoas utilizam texto âncora na página para saltar entre páginas. No entanto, esta abordagem pode não ser tão rica em termos visuais ou funcionais como um menu de navegação.

A fim de proporcionar opções de design mais flexíveis, o editor Elementor introduz uma funcionalidade muito útil - "Nav Menu". Esta ferramenta permite-nos personalizar o menu de sub-navegação de acordo com as nossas necessidades de design.

1) Adicionar o elemento funcional "Nav Menu" no editor Elementor à secção de edição de conteúdos.

Para adicionar a funcionalidade "Nav Menu" ao editor Elementor, pode seguir estes passos simples:

1. Encontre o elemento "Nav Menu" na biblioteca de elementos do Elementor.
2. Utilize o botão esquerdo do rato para clicar no elemento e mantenha-o premido.
3. Arraste o rato para a área de edição de conteúdos da página. Quando vir a linha de fronteira na área de edição mudar de uma linha pontilhada cinzenta para uma linha pontilhada azul, solte o botão esquerdo do rato.
4. Assim, o elemento "Nav Menu" foi adicionado com êxito à área de edição de conteúdos.

2) Definir a função principal do elemento de função "Nav Menu" no editor Elementor.

Existem algumas opções de configuração fundamentais que devem ser compreendidas ao configurar submenus no editor Elementor:

1. Menu::
   • Aqui escolhe a fonte de conteúdo para o seu submenu. Primeiro, crie e nomeie seus submenus no WordPress em Aparência > Menus. Quando terminar, esses menus aparecerão nas opções de menu suspenso do Elementor.
2. Disposição::
   • Pode escolher a forma como o submenu é apresentado: Horizontal, Vertical ou Deslizante.
3. Alinhar::
   • Define o alinhamento do submenu, incluindo esquerda, centro, direita ou ambos.
4. Ponteiro::
   • Isto refere-se aos efeitos que ocorrem quando o rato passa sobre os itens de menu, tais como Sublinhado, Sobrelinhado, Linha dupla, Moldura, Fundo e Texto. Escolha um efeito que se adeqúe ao seu estilo.
5. Animação::
   • Efeitos dinâmicos ao passar o rato. Estes efeitos dinâmicos não podem ser mostrados em capturas de ecrã, é necessário experimentá-los.
6. Indicador de submenu::
   • Esta definição é utilizada para indicar a presença de um submenu, mas a alteração exacta pode ser menos óbvia.
7. Ponto de paragem::
   • Define o ponto de interrupção de visualização em diferentes dispositivos, como tablets ou telemóveis. Quando a largura do ecrã é inferior a este valor, um submenu horizontal de uma linha torna-se um ecrã de várias linhas.
8. Largura total::
   • Determina se os submenus são apresentados na largura total da linha após um ponto de interrupção. Normalmente, a largura total da linha não é recomendada.
9. Alinhar::
   • Defina novamente o alinhamento, à esquerda (Aside) ou ao centro (Center).
10. Botão de alternância::
    • Defina como o submenu é apresentado, por exemplo, nenhum (None) ou menu Hamburger (Hamburger). Quando o menu Hamburger é selecionado, é apresentado um ícone que abre o submenu quando se clica nele.
11. Alternar Alinhamento::
    • Definir a posição do ícone do botão de alternância, à esquerda, ao centro ou à direita.

3. estilizar o elemento funcional "Nav Menu" no editor Elementor.

1. "Configuração do projeto "Dropdown

Ao estilizar um menu pendente (Dropdown) no editor Elementor, estará a lidar com vários estados diferentes e algumas definições de estilo específicas. Vamos simplificar e explicar estas configurações em termos leigos:

Três definições de estado para o menu principal:

1. Normal (NORMAL)Estado de visualização predefinido do menu quando não há interação com ele.
2. Estado de pairar (HOVER)Estado de visualização quando o rato é deslocado sobre o item de menu.
3. Estado de atividade (ACTIVO)Estado de visualização do item de menu quando se clica nele.

Nestes três estados, pode ajustar as seguintes definições:

• Cor do textoCor do texto: Altera a cor do texto de todos os itens de menu no menu pendente, incluindo o ícone do menu recolhido.
• Cor de fundo (Fundo)Cor de fundo: define a cor de fundo dos itens de menu. No estado "Ativo", também pode especificar a cor de fundo do menu quando se clica nele.
• TipografiaAjuste o tipo de letra, o tamanho e outras propriedades tipográficas do texto do menu.

O estilo do menu pendente:

• Preenchimento horizontalDefine o espaço do item de menu a partir do lado esquerdo.
• Acolchoamento verticalDefine o espaço entre os limites superior e inferior do item de menu na linha em que se encontra.
• Espaço entreDefine a distância entre os itens de menu em cada linha.
• Raio da fronteiraCantos: Define o arredondamento dos cantos do item de menu; quanto maior for o valor, mais arredondados serão os cantos.

Configurações adicionais para menus pendentes:

• Tipo de fronteiraEstilo de borda externa: Define o estilo de borda externa para todo o menu suspenso.
• Caixa de sombraEfeito de sombra tridimensional: Adicione um efeito de sombra tridimensional ao menu pendente para o fazer sobressair.
• DivisorAdicionar separadores entre itens de menu individuais.
• DistânciaDefine a distância entre os itens de menu.

2. "Configuração do projeto "Botão de alternância

A configuração do botão de alternância (Toggle Button) para um menu pendente no editor Elementor envolve algumas definições visuais simples. Este botão é normalmente um ícone de menu de hambúrguer (três linhas horizontais), e pode ajustar o seu aspeto para melhor se enquadrar no design do seu sítio. Aqui estão as opções de configuração específicas:

1. Cor::
   • Esta definição altera a cor do ícone do menu de hambúrguer (três linhas horizontais).
2. Cor de fundo::
   • Esta é a cor de fundo do ícone do menu Hamburger. A escolha de uma cor pode fazer com que o ícone se destaque mais ou se harmonize com o estilo geral do sítio.
3. Tamanho::
   • Redimensione o ícone do menu de hambúrguer para que fique coordenado com o design da Web e outros elementos da interface do utilizador.
4. Largura da margem::
   • Define a espessura da borda externa do ícone. Isto pode ajudar o ícone a ser mais visível ou a misturar-se mais subtilmente no fundo.
5. Raio da fronteira::
   • Ajusta o grau de arredondamento dos cantos dos contornos dos ícones. Quanto maior for o valor, mais arredondados serão os cantos. Por exemplo, uma definição de 50 fará com que o ícone seja completamente arredondado, dando a aparência de um botão redondo.

Conclusão:

Melhore e optimize os menus de navegação do seu sítio independente de comércio externo utilizando o editor Elementor. Explicamos como adicionar e configurar a funcionalidade "Nav Menu", incluindo a definição da fonte, do esquema e do alinhamento dos submenus, bem como a personalização dos estilos ao pairar e ao estar ativo. Além disso, também abordámos a forma de configurar os vários efeitos visuais do menu pendente, como a cor de fundo, o contorno e os efeitos de animação, bem como a forma de ajustar o tamanho, a cor e a forma dos botões de alternância, para garantir que o menu de navegação não só é totalmente funcional, mas também visualmente coerente com o design e o estilo gerais do sítio Web.