Masonry layout e Menu speciale

Guida pratica Pro Navigation 3 min di lettura

In un mega menu normale ogni blocco ha la sua colonna, quindi un breve elenco di link lascia uno spazio vuoto sotto di sé. Il masonry layout raggruppa più blocchi in un’unica colonna in modo che si impilino, ad esempio due brevi elenchi di marchi che condividono la prima colonna.

Modelli

Entrambi si trovano nel gruppo Menu speciale di Seleziona modello.

Masonry layout

Quattro colonne (blocchi Gruppo di voci) con elenchi di link impilati dentro ogni colonna.

Menu speciale

Un elenco di categorie a sinistra; ogni categoria ha il proprio pannello di elenchi di link e immagini a destra, come nei grandi menu dei marketplace.

Parti dal modello Masonry layout

1. Aggiungi il modello

   Nell’albero Elementi dell’editor, fai clic su Aggiungi sottomenu sotto una voce di primo livello. Punta su Menu speciale (1), poi fai clic su Seleziona su Masonry layout (2).

   

   (1) Punta sul gruppo Menu speciale, (2) scegli Masonry layout

2. Modifica il contenuto di esempio

   Il modello aggiunge 4 blocchi Gruppo di voci al 25% di larghezza, con elenchi di link dentro. Passa il mouse su ogni titolo o link, fai clic su Modifica voce e cambia Titolo e Link.

3. Aggiungi o rimuovi blocchi in una colonna

   Dentro un gruppo, fai clic su Aggiungi blocco per impilare un altro blocco, come un elenco di link o un’immagine. Per rimuoverne uno, passa il mouse su di esso e fai clic su Elimina voce.

4. Salva e pubblica

   Fai clic su Salva, poi su Pubblica.

Crea un mosaico da un mega menu vuoto

1. Aggiungi un mega menu vuoto

   Fai clic su Aggiungi sottomenu, punta su Mega menu e fai clic su Seleziona su Vuoto. Va bene anche un mega menu esistente.

2. Aggiungi un Gruppo di voci per colonna

   Fai clic su Aggiungi blocco, scegli Multiblocco e seleziona Gruppo di voci; ogni gruppo è una colonna. Nell’albero Elementi compare come Gruppo di voci (layout a griglia masonry).

   

   (1) Scegli una scheda, (2) passa il mouse su un layout e fai clic su Seleziona.

3. Imposta le larghezze dei gruppi

   Un nuovo gruppo è largo il 50%. Imposta la Larghezza di ogni gruppo in modo che le colonne stiano in una riga, ad esempio 25% per 4 colonne o 33,33% per 3.

4. Riempi ogni gruppo

   Dentro ogni gruppo, fai clic su Aggiungi blocco e aggiungi i blocchi di quella colonna. Imposta la Larghezza di ogni blocco interno al 100% in modo che si impilino invece di stare affiancati.

5. Salva e pubblica

   Fai clic su Salva, poi su Pubblica.

Usa il modello Menu speciale

1. Aggiungi il modello

   Fai clic su Aggiungi sottomenu, punta su Menu speciale e fai clic su Seleziona sul modello Menu speciale.

   

   (1) Punta sul gruppo Menu speciale, (2) scegli Masonry layout

2. Modifica le categorie e i pannelli

   Ogni categoria a sinistra è una scheda: rinominala, poi riempi il suo pannello con Aggiungi blocco. Vedi Tabbed menu.

3. Salva e pubblica

   Fai clic su Salva, poi su Pubblica.

Entrambi i modelli si aprono in un pannello mega menu, quindi la sezione Sottomenu della voce principale imposta larghezza, allineamento e sfondo del pannello. Vedi Layout del pannello del mega menu.

Risoluzione dei problemi

I blocchi stanno affiancati invece di impilarsi

Controlla nell’albero Elementi che i blocchi interni siano dentro un Gruppo di voci e che la loro Larghezza sia 100%.

I gruppi vanno a capo su una seconda riga

Le larghezze dei gruppi sommano più del 100%. Riducile in modo che stiano in una sola riga.

Pagine correlate

• Mega menuCrea un ampio pannello di sottomenu con blocchi come elenchi di link, immagini, prodotti e un modulo di contatto.
• Tabbed menuLascia che i clienti passino da un gruppo di contenuti all'altro, come Uomo, Donna e Bambini, dentro un unico sottomenu.
• Panoramica dei blocchiAggiungi a un mega menu o a una scheda blocchi come link, immagini, prodotti e conti alla rovescia.

Questa pagina ti è stata utile?

Segnala un problema