Publicar no WordPress
A Menu em Grade é um menu de seção — ele é renderizado no local da página onde você o incorpora. É uma ótima opção para atalhos de categoria, páginas centrais e painéis “o que você gostaria de fazer?”. No WordPress, o plugin Navi+ AI Menu Builder o coloca via shortcode ou bloco Gutenberg; você nunca edita arquivos de tema.
Outras plataformas (Wix, Squarespace, Webflow, sites personalizados): veja Publicar no Wix / Squarespace / Outros.
Passos
- Instale o plugin — veja Instalar o plugin Navi+ AI Menu Builder.
- Construa seu Menu em Grade em Aparência → Naviplus Menu Builder. Veja Menu em Grade — Como usar e Menu em Grade Responsivo.
- Copie o ID de Incorporação (por exemplo,
SF-123456789). - Incorpore-o usando um dos métodos abaixo.
Inserir o menu
Opção 1 — Shortcode (recomendado)
[naviwp embed_id="SF-123456789"]
Coloque isso em qualquer post, página ou widget que reconheça shortcode.
Locais típicos:
- Uma seção de destaque na página inicial com blocos de categoria.
- Uma página de destino acima da dobra.
- O estado vazio de um arquivo de categoria.
Opção 2 — Bloco Gutenberg
No editor de blocos, + → Naviplus Menu Builder, em seguida, cole o ID de Incorporação na barra lateral do bloco. Um bloco Shortcode simples com [naviwp embed_id="SF-..."] é equivalente.
Opção 3 — Construtores de página (Elementor, Divi, Bricks, Oxygen)
Use um widget Shortcode com [naviwp embed_id="SF-..."]. Se um construtor não tiver um widget Shortcode, um widget HTML com o div de incorporação funciona:
<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>
Opção 4 — Seletor CSS (auto-colocação do aplicativo Navi+)
Em vez de colocar um shortcode manualmente, você pode deixar o Navi+ inserir ou substituir automaticamente um elemento usando um Seletor CSS — configurado inteiramente a partir do aplicativo Navi+.
Entendendo o Seletor CSS
Um Seletor CSS direciona um elemento HTML específico na sua página. O Navi+ o usa para saber exatamente onde colocar seu menu — inserir antes, inserir depois ou substituir um elemento existente.
Para encontrar o Seletor CSS correto, use:
- Modo de Depuração — passe o mouse sobre qualquer elemento e copie instantaneamente seu seletor
- DevTools do Navegador — método manual via inspetor do navegador
Três opções de publicação
No aplicativo Navi+: clique em Publicar no site → ative “Publicar menu pelo método Inserir/Substituir” → insira seu Seletor CSS e escolha uma opção:
Opção A: Inserir Antes
Insere o Menu em Grade imediatamente antes do elemento selecionado, exibido como uma seção completa.
Exemplo: main → o Menu em Grade aparece acima da área de conteúdo principal.
Esta é a configuração mais comum para um Menu em Grade no WordPress.
Seletores comuns para temas WordPress:
main— a maioria dos temas#main— Twenty Twenty, Astra, OceanWP.site-main— muitos temas#content— Divi, alguns temas padrão
Opção B: Inserir Depois
Insere o Menu em Grade imediatamente depois do elemento selecionado.
Exemplo: header → o Menu em Grade aparece logo abaixo do cabeçalho.
Seletores comuns para temas WordPress:
header— a maioria dos temas.site-header— OceanWP, Astra#masthead— Twenty Twenty-One e temas padrão do WordPress
Opção C: Substituir
A maioria dos sites WordPress não tem um elemento de Menu em Grade embutido para substituir. Inserir Antes main é a abordagem recomendada.
Se seu tema tiver um elemento de estilo grade que você deseja substituir, use Modo de Depuração ou DevTools do Navegador para encontrar seu seletor.
Direcionamento específico para dispositivos
Adicione um sufixo para aplicar o seletor apenas em um dispositivo específico:
| Sufixo | Aplica-se a |
|---|---|
(M) |
Somente móvel |
(D) |
Somente desktop |
| (nenhum) | Ambos |
Exemplo: main(D) — insere o Menu em Grade apenas no desktop.
Dicas para dispositivos móveis
- Use Menu em Grade Responsivo para alternar a contagem de colunas por ponto de interrupção — por exemplo, 4 colunas no desktop, 2 no móvel.
- Mantenha o conteúdo dos blocos curto — um ícone, um rótulo de uma ou duas palavras, opcionalmente uma pequena descrição. Rótulos longos envolvem de forma imprevisível.
- Busque alvos de toque de pelo menos 44 × 44 px, incluindo preenchimento.
Atualizando o menu depois
Edições no editor se aplicam na próxima carga de página no front-end — nenhum flush de cache do WordPress é necessário.