Se quiser criar um menu bonito para o seu sítio Web, pode escolher entre alguns métodos diferentes. Um deles é utilizar o editor de menus predefinido do WordPress, que é simples e prático. Outra é utilizar o widget de menu de navegação do Elementor, que podeAltamente personalizávelo seu menu para o tornar mais adequado às suas necessidades.

Criar um menu de navegação no WordPress

Criar um menu de navegação no WordPress é fácil. Primeiro, inicie sessão no seu painel de controlo do WordPress e clique na barra lateral "Aparência > Menu". Localizar e clicar emcriar um novo menuNa página, verá uma caixa de entrada para o nome do novo menu que pretende. Depois de ter introduzido o nome, clique no botão azul "Criar menu" para começar a adicionar os seus itens de menu.

2. adicionar e personalizar menus de navegação

No lado da página, deve ver menus pendentes que contêm páginas, mensagens, ligações personalizadas e categorias para escolher.

Adicionar páginas ao menu de navegação no WordPress é bastante simples. Em primeiro lugar, certifique-se de que clica no separador "Ver tudo" na página "Menu" para navegar por todas as páginas disponíveis. Se tiver muitas páginas, pode utilizar a função "Procurar" para encontrar rapidamente a página de que necessita. Selecione as caixas de verificação junto às páginas que pretende adicionar e clique em "Adicionar ao menu".

Depois de adicionar várias páginas ao menu, pode personalizar ainda mais cada item do menu. Clique na seta ao lado de cada item na estrutura do menu e verá as seguintes opções:

• Separadores de navegaçãoEste é o nome das ligações apresentadas no menu, tais como Loja, Galeria e Acerca de.
• Título AtributosTexto de aviso: Este é o texto de aviso que é apresentado quando o rato passa por cima de um item de menu para fornecer mais informações ou instruções.
• Abrir a ligação numa nova janela: Normalmente, não é recomendável assinalar esta caixa, a menos que se esteja a ligar a um sítio externo.
• Classe CSSAqui pode adicionar classes CSS para personalizar estilos, tais como adicionar preenchimento ou texto a negrito.
• relação de ligaçãoSe a ligação apontar para um sítio Web de terceiros associado, a relação pode ser indicada aqui, por exemplo, se se trata de um parceiro, de um sítio Web de um membro da família ou de outro sítio Web seu.
• descriçõesSe o seu tema suporta a apresentação de descrições, aqui pode preencher uma breve descrição do item de menu.

3. alterar a estrutura do menu de navegação

Depois de adicionar todos os itens de menu, pode otimizar ainda mais o seu menu, por exemplo, configurando sub-menus. O WordPress permite-lhe criar menus hierárquicos, o que significa que pode configurar itens de menu principal e os itens de sub-menu abaixo deles. Desta forma, quando um visitante passa o rato sobre o item de menu principal, são apresentadas as páginas secundárias por baixo.

Para reordenar os itens de menu ou criar submenus, pode fazê-lo arrastando e largando. Isto é feito da seguinte forma: se pretender definir um item de menu como submenu, basta arrastá-lo para baixo do item de menu principal correspondente e ligeiramente para a direita, para que o item de submenu seja definido. Após esta operação, a navegação no seu sítio Web será mais hierárquica e mais fácil de navegar.

4. publicar o seu menu

No ecrã do Editor de menus, clique no separador Gerir localizações. Em seguida, selecione a localização que pretende definir como o novo menu. As localizações disponíveis dependem do tema do seu sítio, mas geralmente verá opções como "Menu principal" ou "Menu superior". Assinale as caixas correspondentes para definir o seu novo menu nestas localizações. Este passo ajudá-lo-á a garantir que o seu menu aparece no local certo no seu sítio Web.

Também pode encontrar opções de definição semelhantes na parte inferior da página do menu principal, que são apresentadas como caixas de verificação.

Se isto não funcionar, pode tentar outra abordagem: ir para "estado exterior">"widgets" e, em seguida, arraste o novo menu personalizado ou widget de menu de navegação para o local pretendido. Desta forma, a disposição do menu do sítio ficará como pretende.

Widgets de menu de navegação para o Elementor Pro

Para utilizar os widgets do menu de navegação, é necessário instalar qualquer versão da aplicaçãoElementor ProSe estiver a utilizar a versão gratuita. Se estiver a utilizar a versão gratuita, deve manter o menu predefinido do WordPress ou utilizar um menu de terceiros.

Com o Pro, também pode aceder a mais de 300 modelos,Criador de temas,Website WooCommerceresponder com cânticosPop-ups de marketingO site tem mais animações e widgets adicionais para os utilizadores do WooCommerce.

Como criar um menu de navegação no Elementor

O Widget de Menu de Navegação é muito flexível e rico em funcionalidades, dando-lhe a liberdade de colocar menus no seu sítio Web que não se limitam ao topo da página ou à área do cabeçalho. Pode colocá-lo onde quiser, até mesmo incluí-lo em artigos. Aqui estão algumas das suas principais caraterísticas:

• Pode adicionar vários menus em qualquer parte do sítio.
• Adicione facilmente atractivos efeitos de animação ao passar o cursor.
• Suporta uma conceção reactiva para dispositivos móveis e pode ser personalizado para ser apresentado em computadores, tablets e telemóveis.
• A disposição ajustável, as cores e outros elementos de design permitem-lhe controlar com precisão o aspeto dos seus menus.
• São fornecidas opções exaustivas de preenchimento, espaçamento e alinhamento para garantir que todos os pormenores do menu são perfeitos.

Primeiro, crie um menu padrão do WordPress. Não se esqueça de seguir as dicas acima para saber exatamente como fazer isto.

Se o seu menu WordPress estiver completo, adicione-o ao seu sítio utilizando o widget Menu de Navegação. Para o fazer, crie ou edite o modelo onde pretende que o menu apareça (por exemplocabeçalho). Aqui, encontre o widget do menu de navegação e adicione-o à localização pretendida.

Uma vez concluído, o seu menu WordPress pode agora ser editado - e personalizado - no Elementor!

1. apresentação e animação

Na barra lateral esquerda, deve ver três separadores:Conteúdo, estilo e avançado. A primeira coisa a fazer (se ainda não o tiver feito) é ir ao sítio"elemento"e deve"menu"Mude para o menu que pretende visualizar. Isto permite-lhe vê-lo no ecrã de pré-visualização.

Ao definir a disposição do menu, pode escolher entre uma disposição horizontal, uma disposição vertical ou um menu desdobrável oculto. Experimente diferentes opções de disposição e verá imediatamente como o menu muda em vários estilos. Além disso, pode ajustar o alinhamento dos itens de menu para satisfazer as suas necessidades de design.

No que diz respeito às animações, tem uma variedade de opções para tornar os seus menus mais atractivos. Estas incluem animações de sublinhado, sobrelinhado e sublinhado duplo, bem como animações de margem, animações de fundo e animações de texto. Basta clicar em "ponteiro num medidor" para selecionar o seu tipo de animação preferido e, em seguida, clique em "anime"Ver e selecionar opções específicas. Aqui pode ver alguns exemplos específicos de efeitos de animação.

O Indicador de submenu permite-lhe modificar o estilo de apresentação dos ícones de seta para os submenus. Se pretender personalizar ainda mais o aspeto do submenu, vá para o separador Estilos e clique na secção Menu pendente para a expandir. Aqui pode ajustar o comportamento do submenu na visualização normal e ao passar o cursor do rato, alterar a disposição do texto, adicionar margens, sombras ou separadores e ajustar as margens internas de acordo com as suas necessidades de design. Estas definições tornarão o seu menu mais pessoal e funcional.

2) Cor e espaçamento

Configura a disposição do menu da forma que preferir e pode personalizá-la ainda mais com ajustes de cor e de preenchimento. Ir para"tipo"e expandir o separador"menu principal".

Nas definições de esquema, pode editar o tamanho, o tipo de letra e a espessura do texto, e pode optar por definir o texto em maiúsculas ou minúsculas. Além disso, pode efetuar ajustes de estilo individuais para diferentes tipos de dispositivos. Por exemplo, pode definir o tamanho do texto para aumentar em dispositivos móveis, alterar a cor do texto em dispositivos de secretária ou efetuar quaisquer outros ajustes a seu gosto. Estas opções permitem-lhe proporcionar a melhor experiência de navegação para cada dispositivo.

Pode utilizar as opções Cor do texto e Ponteiro para personalizar a cor dos links de menu quando são visualizados normalmente, quando passam o cursor do rato e quando são activados. Para cada um destes estados, pode ajustar o estilo para os estados pairado e ativo, respetivamente.

O ajuste do espaçamento também é fácil e preciso; pode definir o preenchimento do texto, o espaçamento entre letras, a altura das linhas, etc:

• a tua altura (honorífico)Altura da linha: Ajusta a altura de uma linha, semelhante ao preenchimento vertical, afectando o espaço acima e abaixo do texto.
• espaçamento entre letrasEspaçamento: Define a distância entre as letras; quanto maior for o espaçamento, maior será a distância entre as letras.
• largura do ponteiroEspessura da linha: Definir a espessura da linha no estado ativo ou de pairar.
• Preenchimento horizontalEspaço entre os itens de menu ou, numa disposição vertical, entre os itens de menu e as margens da coluna.
• Preenchimento verticalEspaço entre os itens de menu ou entre o topo e o fundo de uma coluna: Numa apresentação vertical, este é o espaço entre os itens de menu ou entre o topo e o fundo de uma coluna.
• Espaço entreEsta opção aumenta o espaço entre os itens de menu.
• Raio da fronteiraSe utilizar uma cor de fundo, esta definição acrescenta um efeito de canto arredondado.

Se definir pontos de interrupção para dispositivos móveis, pode definir espaçamentos diferentes para os modos de computador e tablet. Caso contrário, terá de editar as opções para dispositivos móveis separadamente.

Por último, no separador Avançado, pode definir classes CSS, ajustar as margens e o preenchimento, adicionar imagens de fundo, alterar as definições de resposta e muito mais. É necessário ter cuidado ao editar estas opções para que não afectem o desempenho do seu sítio Web em dispositivos móveis.

3. configurar o menu móvel

O widget do menu de navegação fornece uma série de opções de definição no separador Layout que são optimizadas para dispositivos mais pequenos. Segue-se uma breve descrição destas opções:

• ponto de interrupção: Definir quando alterar a disposição do menu para uma melhor visualização em dispositivos de ecrã pequeno, como tablets ou telemóveis.
• largura totalQuando esta opção está activada, o menu nos dispositivos móveis expande-se para toda a largura do ecrã e não se limita à largura original da barra de navegação.
• alinhar-se na ordem corretaEscolha entre centrar as ligações no menu móvel ou apresentá-las à esquerda ou à direita.
• mudar de modo ou de fluxo de dadosMenu de hambúrguer: Pode optar por manter o menu de hambúrguer (o ícone com três linhas horizontais) ou ocultá-lo completamente no seu dispositivo móvel.
• Alinhamento de alternânciaPosição do ícone do menu de hambúrguer: Definir a posição do ícone do menu de hambúrguer, centrado, alinhado à esquerda ou alinhado à direita.

No separador Estilos, também pode encontrar opções para ajustar o aspeto dos botões de alternância do menu móvel, incluindo a personalização das cores, dos fundos, dos tamanhos e a adição de contornos. Estas definições ajudam-no a embelezar e otimizar ainda mais a apresentação do menu móvel.

O Elementor tem uma opção de modo de resposta na parte inferior da barra lateral. Permite-lhe pré-visualizar o aspeto do menu móvel nos ecrãs de tablets e dispositivos móveis.

Resumo:

Existem várias formas de criar menus de navegação personalizados no WordPress. Embora a configuração de menu predefinida da plataforma seja simples de utilizar e satisfaça as necessidades básicas, se considerar que estes menus não são suficientemente flexíveis ou que faltam determinadas funcionalidades, os widgets de menu de navegação do Elementor podem ser uma melhor opção. Com o Elementor, criar e personalizar menus é fácil e flexível, com uma vasta gama de possibilidades de personalização.