Pubblica su WordPress
Un Menu a Griglia è un menu di sezione — viene visualizzato nel punto della pagina in cui lo incorpori. È un’ottima soluzione per collegamenti rapidi alle categorie, pagine hub e pannelli “cosa ti piacerebbe fare?”. Su WordPress, il plugin Navi+ AI Menu Builder lo posiziona tramite shortcode o blocco Gutenberg; non è necessario modificare i file del tema.
Altre piattaforme (Wix, Squarespace, Webflow, siti personalizzati): vedi Pubblica su Wix / Squarespace / Altri.
Passi
- Installa il plugin — vedi Installa il plugin Navi+ AI Menu Builder.
- Crea il tuo Menu a Griglia in Aspetto → Naviplus Menu Builder. Vedi Menu a Griglia — Come usare e Menu a Griglia Responsivo.
- Copia l’ID di Incorporamento (ad es.
SF-123456789). - Incorpora utilizzando uno dei metodi qui sotto.
Inserisci il menu
Opzione 1 — Shortcode (raccomandato)
[naviwp embed_id="SF-123456789"]
Inserisci questo in qualsiasi post, pagina o widget compatibile con shortcode.
Posizioni tipiche:
- Una sezione hero della homepage con riquadri di categoria.
- Una landing page sopra la piega.
- Lo stato vuoto di un archivio di categoria.
Opzione 2 — Blocco Gutenberg
Nell’editor dei blocchi, + → Naviplus Menu Builder, quindi incolla l’ID di Incorporamento nella barra laterale del blocco. Un semplice blocco Shortcode con [naviwp embed_id="SF-..."] è equivalente.
Opzione 3 — Costruttori di pagine (Elementor, Divi, Bricks, Oxygen)
Usa un widget Shortcode con [naviwp embed_id="SF-..."]. Se un costruttore non ha un widget Shortcode, un widget HTML con il div di incorporamento funziona:
<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>
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
- Strumenti per sviluppatori del browser — metodo manuale tramite l’ispezione del browser
Tre opzioni di pubblicazione
Nell’app Navi+: fai clic su 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 a Griglia immediatamente prima dell'elemento selezionato, visualizzato come un'intera sezione.
Esempio: main → il Menu a Griglia appare sopra l'area principale dei contenuti.
Questa è la configurazione più comune per un Menu a Griglia su WordPress.
Selettori comuni per i temi di WordPress:
main— la maggior parte dei temi#main— Twenty Twenty, Astra, OceanWP.site-main— molti temi#content— Divi, alcuni temi predefiniti
Opzione B: Inserisci Dopo
Inserisce il Menu a Griglia immediatamente dopo l'elemento selezionato.
Esempio: header → il Menu a Griglia appare appena sotto l'intestazione.
Selettori comuni per i temi di WordPress:
header— la maggior parte dei temi.site-header— OceanWP, Astra#masthead— Twenty Twenty-One e temi predefiniti di WordPress
Opzione C: Sostituisci
La maggior parte dei siti WordPress non ha un elemento Menu a Griglia integrato da sostituire. Inserire Prima main è l'approccio raccomandato.
Se il tuo tema ha un elemento in stile griglia che desideri sostituire, usa Modalità Debug o Strumenti per sviluppatori del browser per trovare il suo selettore.
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: main(D) — inserisce il Menu a Griglia solo su desktop.
Suggerimenti per dispositivi mobili
- Usa Menu a Griglia Responsivo per cambiare il numero di colonne per breakpoint — ad es. 4 colonne su desktop, 2 su mobile.
- Mantieni il contenuto dei riquadri breve — un’icona, un’etichetta di una o due parole, eventualmente una piccola descrizione. Etichette lunghe si avvolgono in modo imprevedibile.
- Punta a target di tocco di almeno 44 × 44 px incluso il padding.
Aggiornare il menu in seguito
Le modifiche nell’editor si applicano al successivo caricamento della pagina front-end — non è necessario svuotare la cache di WordPress.