O bloco Nav Menu permite incorporar menus de navegação nas suas páginas de destino e modelos de sites do SeedProd. Você tem a flexibilidade de criar um menu personalizado simples diretamente no construtor ou conectar qualquer menu WordPress existente do seu site.
O bloco suporta layouts horizontais e verticais, um botão 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:
Passo 1: Adicione 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
Depois de adicionado, clique no bloco Menu de navegação para abrir suas configurações. Na guia 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 definir as opções Texto (o rótulo visível do link), Link URL (o URL de destino), Abrir em nova janela e Não seguir. Clique em + Adicionar novo item para adicionar mais links ao menu.
- Menu WordPress: Conecte um menu WordPress existente a este bloco. Selecione um menu na lista suspensa de menus registrados em seu site. Um link para a tela Menus 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 72 px.
- Espaço entre: Defina o espaçamento entre os itens do menu de 1 a 100 px.
- Divisória: Insira um caractere ou sequência de caracteres 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 compacto em telas menores.
O botão do menu móvel exibe um ícone de menu hambúrguer em dispositivos móveis. Quando tocado, ele se expande para mostrar o menu completo.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar a tipografia, as cores, o estilo do submenu e o espaçamento do seu bloco 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 de fontes, a espessura da fonte, o tamanho, a altura da linha, o espaçamento entre letras e a transformação do texto para links de 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 do 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, Extra Grande ou 2X Grande.
Submenu:
- Cor de fundo do submenu: defina a cor de fundo dos painéis do submenu suspenso.
- Cor do texto do submenu: defina a cor do texto dos links do submenu.
- Cor do submenu ao passar o mouse: defina a cor do texto ao passar o mouse sobre os links do submenu.
- Raio da borda do submenu: defina o raio dos cantos dos painéis do submenu de 1 a 50 px.
- Altura da linha do submenu: defina a altura da linha dos itens do submenu de 1 a 60 px.
- Largura da borda do submenu: defina a largura da borda dos painéis do submenu de 1 a 60 px.
- Cor da borda do submenu: defina a cor da borda dos painéis do submenu.
- Sombra do submenu: Adicione uma sombra projetada aos painéis do submenu.
- Preenchimento do submenu: defina o preenchimento interno do painel do submenu (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 ao redor na página.
- Preenchimento: ajuste o espaçamento interno do seu bloco Menu de navegação (superior, direito, inferior, esquerdo). Isso cria um espaço entre os links do menu e as bordas do bloco.
Atributos:
- CSS ID: Exibe o identificador único gerado automaticamente para o seu bloco Nav Menu. Este ID é criado automaticamente pelo SeedProd para personalização de estilo ou direcionamento 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 na área de trabalho: oculta o bloco do menu de navegação nas telas da área de trabalho.
- Ocultar no tablet: Oculte o bloco Menu de navegação em dispositivos tablet.
- Ocultar no celular: Oculte o bloco 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 do menu de navegação é exibido. As opções incluem Saltar, Aparecer gradualmente, Ampliar, Girar e muito mais.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco 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 rapidamente o que procuram e mantém-nos envolvidos com o seu site. Use o tipo de menu Simples para listas rápidas de links personalizados ou conecte um menu do WordPress para manter a sua navegação consistente com o resto do seu site.