English Tiếng Việt Français Deutsch 中文 日本語 Italiano Português Español
Vedi demo Inizia

Pubblica su WordPress

A Mega Menu (Desktop) è un menu di sezione — non si ancorano alla viewport, si rendono esattamente nel punto della pagina in cui lo incorpori (tipicamente l’intestazione del sito). Su WordPress, il plugin Navi+ AI Menu Builder lo incorpora tramite shortcode o blocco Gutenberg — non modifichi mai i file del tema.

Altre piattaforme (Wix, Squarespace, Webflow, siti personalizzati): vedi Pubblica su Wix / Squarespace / Altri.

Passi

  1. Installa il plugin — vedi Installa il plugin Navi+ AI Menu Builder.
  2. Crea il tuo Mega Menu in Aspetto → Naviplus Menu Builder. Vedi Mega Menu (Desktop) — Come usare per indicazioni sul design.
  3. Copia l’ID di incorporamento del menu (mostrato nel pannello di pubblicazione — appare come SF-123456789).
  4. Inserisci il menu dove vuoi nella pagina (sezione successiva).

Inserisci il menu — tre opzioni

Opzione 1 — Shortcode (funziona ovunque)

Incolla questo in qualsiasi post, pagina o widget compatibile con shortcode:

[naviwp embed_id="SF-123456789"]

Per un Mega Menu che dovrebbe apparire nell’intestazione del sito su ogni pagina, il posto più pulito è un’area widget dell’intestazione (se il tuo tema ne fornisce una). Se no, usa un blocco / parte del template dell’intestazione globale (temi di Full Site Editing), o torna all’Opzione 3 qui sotto.

Opzione 2 — Blocco Gutenberg

  1. Nell’editor dei blocchi clicca + → Naviplus Menu Builder.
  2. Incolla l’ID di incorporamento nella barra laterale del blocco.

Puoi anche inserire un blocco Shortcode generico con [naviwp embed_id="SF-..."].

Opzione 3 — Page builders (Elementor, Divi, Bricks, Oxygen)

Usa il widget Shortcode del builder e incolla [naviwp embed_id="SF-..."]. Se preferisci usare HTML grezzo, inserisci direttamente il div di incorporamento:

<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>

Il plugin carica già il runtime di Navi+, quindi il menu si rende all’interno di quel contenitore.

Opzione 4 — Selettore CSS (posizionamento automatico dall’app Navi+)

Invece di posizionare manualmente uno shortcode, puoi lasciare che Navi+ inserisca o sostituisca automaticamente un elemento utilizzando un Selettore CSS — configurato interamente dall’app Navi+.

Comprendere il Selettore CSS

Un Selettore CSS mira a un elemento HTML specifico sulla tua pagina. Navi+ lo utilizza per sapere esattamente dove posizionare il tuo menu — inserire prima, inserire dopo o sostituire un elemento esistente.

Per trovare il giusto Selettore CSS, usa:

  • Modalità Debug — passa il mouse su qualsiasi elemento e copia istantaneamente il suo selettore
  • Browser DevTools — metodo manuale tramite l’ispezione del browser

Tre opzioni di pubblicazione

Nell’app Navi+: clicca Pubblica sul sito web → attiva “Pubblica menu tramite metodo Inserisci/Sostituisci” → inserisci il tuo Selettore CSS e scegli un’opzione:

Opzione A: Inserisci Prima

Inserisce il menu immediatamente prima dell'elemento selezionato.

Esempio: main → il menu appare sopra l'area del contenuto principale.

Selettori comuni per i temi WordPress:

  • main — la maggior parte dei temi
  • #main — Twenty Twenty, Astra, OceanWP
  • .site-main — molti temi
Opzione B: Inserisci Dopo

Inserisce il menu immediatamente dopo l'elemento selezionato.

Esempio: header → il menu appare appena sotto l'intestazione.

Questa è la configurazione più comune per un Mega Menu desktop.

Selettori comuni per i temi WordPress:

  • header — la maggior parte dei temi
  • .site-header — OceanWP, Astra
  • #masthead — Twenty Twenty-One e temi WordPress predefiniti
  • #header — Divi
Opzione C: Sostituisci

Sostituisce completamente l'elemento selezionato con il menu Navi+. L'elemento originale è nascosto e Navi+ prende il suo posto.

Esempio: .main-navigation → la navigazione predefinita del tema è nascosta e sostituita dal tuo Mega Menu Navi+.

Selettori comuni per i temi WordPress:

  • .main-navigation — Twenty Twenty-One e molti temi WordPress predefiniti
  • #site-navigation — alcuni temi WordPress predefiniti
  • .nav-primary — vari temi

Nota: Un breve lampeggio del menu originale potrebbe apparire mentre Navi+ si carica. Usa l'opzione di ottimizzazione UX integrata nelle impostazioni di pubblicazione per nascondere immediatamente l'elemento originale.

Targeting specifico per dispositivo

Aggiungi un suffisso per applicare il selettore solo su un dispositivo specifico:

Suffisso Si applica a
(M) Solo mobile
(D) Solo desktop
(nessuno) Entrambi

Esempio: header(D) — inserisce solo su desktop.

Considerazioni per dispositivi mobili

Un Mega Menu desktop è, per definizione, un layout desktop-first. Su schermi piccoli di solito non dovrebbe rendere affatto — abbinalo a un Mega Menu (Mobile) o Slide Menu e usa regole di visualizzazione per nascondere ciascuno sull’altro breakpoint.

Nell’editor apri Regole di visualizzazione → Dispositivo e limita il Mega Menu (Desktop) a solo desktop.

Aggiornare il menu in seguito

Modifica il menu nell’amministrazione di WordPress (o nell’app web di Navi+). Le modifiche si applicano al successivo caricamento della pagina front-end — non è necessario svuotare la cache di WordPress, poiché i menu vengono recuperati in tempo reale dal browser.

Correlati