O bloco de Menu de Navegação permite incorporar menus de navegação em suas páginas de destino e modelos de site SeedProd. Você tem a flexibilidade de criar um menu personalizado simples diretamente no construtor ou conectar qualquer menu existente do WordPress do seu site.
O bloco suporta layouts horizontal e vertical, um alternador de menu móvel recolhível, submenus com controle total de estilo e configurações de link por item — tornando-o uma solução de navegação flexível para cabeçalhos, rodapés e barras laterais.
Adicionando o Bloco de Menu de Navegação às Suas Páginas
Siga estas etapas para adicionar um bloco de Menu de Navegação à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Menu de Navegação na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionar, clique no bloco de Menu de Navegação para abrir suas configurações. Na aba Conteúdo, comece selecionando o tipo de menu na seção Configurações.
Tipo de Menu:
- Simples: Crie um menu personalizado diretamente no SeedProd adicionando itens manualmente. Cada item pode ser arrastado para reordenar, duplicar ou excluir. Clique em qualquer item para expandir suas configurações e configurar o Texto (o rótulo do link visível), Link de URL (o URL de destino), Abrir em Nova Janela e as opções No Follow. Clique em + Adicionar Novo Item para adicionar mais links ao menu.
- Menu WordPress: Conecte um menu existente do WordPress a este bloco. Selecione um menu na lista suspensa de menus registrados no seu site. Um link para a tela de Menus do WordPress é fornecido para criar ou gerenciar menus, se necessário.
Configurações:
- Tamanho da Fonte: Defina o tamanho da fonte dos links dos itens do menu de 10 a 72px.
- Espaço Entre: Defina o espaçamento entre os itens do menu de 1 a 100px.
- Divisor: Insira um caractere ou string para usar como separador visual entre os itens do menu (por exemplo,
|). - Alinhamento: Defina o alinhamento horizontal do menu — Esquerda, Centro ou Direita. Suporta valores por dispositivo para desktop, tablet e celular.
- Menu Móvel: Ative para habilitar um menu hambúrguer recolhível em dispositivos móveis, substituindo o menu completo por um botão de alternância compacto em telas menores.
O alternador do Menu Móvel exibe um ícone de menu hambúrguer em dispositivos móveis. Ao ser tocado, ele se expande para mostrar o menu completo.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a tipografia, cores, estilo do submenu e espaçamento do seu bloco de Menu de Navegação.
Estilos Avançados:
- Layout da Lista: Escolha se os itens do menu serão exibidos em um layout Vertical (empilhado) ou Horizontal (lado a lado).
- Tipografia: Ajuste a família da fonte, peso da fonte, tamanho, altura da linha, espaçamento entre letras e transformação de texto para os links dos itens do menu. Suporta valores por dispositivo para desktop, tablet e celular.
- Cor do Texto Ativo: Defina a cor do link do item de menu atualmente ativo.
- Cor do Texto ao Passar o Mouse: Defina a cor dos links dos itens de menu ao passar o mouse.
- Sombra do Texto: Adicione uma sombra ao texto do link do menu. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, X Grande ou XX Grande.
Menu Suspenso:
- Cor de Fundo do Menu Suspenso: Defina a cor de fundo dos painéis do menu suspenso.
- Cor do Texto do Menu Suspenso: Defina a cor do texto dos links do menu suspenso.
- Cor ao Passar o Mouse no Menu Suspenso: Defina a cor do texto ao passar o mouse nos links do menu suspenso.
- Raio da Borda do Menu Suspenso: Defina o raio do canto dos painéis do menu suspenso de 1 a 50px.
- Altura da Linha do Menu Suspenso: Defina a altura da linha dos itens do menu suspenso de 1 a 60px.
- Largura da Borda do Menu Suspenso: Defina a largura da borda dos painéis do menu suspenso de 1 a 60px.
- Cor da Borda do Menu Suspenso: Defina a cor da borda dos painéis do menu suspenso.
- Sombra do Menu Suspenso: Adicione uma sombra projetada aos painéis do menu suspenso.
- Preenchimento do Menu Suspenso: Defina o preenchimento interno do painel do menu suspenso (Superior, Direito, Inferior, Esquerdo).
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Menu de Navegação (Superior, Direito, Inferior, Esquerdo). Isso determina quanto espaço aparece entre o menu e os elementos circundantes na página.
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco de Menu de Navegação (Superior, Direito, Inferior, Esquerdo). Isso cria espaço entre os links do menu e as bordas do bloco.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Menu de Navegação. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação de JavaScript.
- Classe Personalizada: Adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos Personalizados: Adicione quaisquer atributos HTML ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor.
Visibilidade do Dispositivo:
- Ocultar em Desktop: Oculte o bloco de Menu de Navegação em telas de desktop.
- Ocultar em Tablet: Oculte o bloco de Menu de Navegação em dispositivos tablet.
- Ocultar em Dispositivos Móveis: Oculte o bloco de Menu de Navegação em dispositivos móveis.
Efeitos de Animação:
- Animação de Entrada: Escolha entre vários efeitos de animação que são reproduzidos quando o bloco de Menu de Navegação entra na tela. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitas outras.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Menu de Navegação e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Menu de Navegação à sua página! Um menu de navegação bem posicionado ajuda os visitantes a encontrar o que procuram rapidamente e os mantém engajados com seu site. Use o tipo de menu Simples para listas rápidas de links personalizados ou conecte um menu do WordPress para manter sua navegação consistente com o restante do seu site.