Personalizzare il layout di un gruppo

I blocchi Gruppo consentono di organizzare i contenuti in un contenitore personalizzabile nello stile e posizionabile come singolo elemento. Questa guida ti mostrerà come utilizzare le impostazioni di layout per creare sezioni di pagina responsive ben allineate con un blocco Gruppo.

Per impostazione predefinita, un blocco Gruppo organizza i blocchi al suo interno in modo da mostrarli uno sopra l’altro. Modificando la disposizione dei blocchi all’interno di un gruppo è possibile decidere di mostrare i contenuti affiancati (orizzontalmente) o in colonna (verticalmente), per offrire al design una maggiore flessibilità di layout. È possibile personalizzare l’allineamento dei contenuti nel gruppo seguendo questi passaggi:

1. Seleziona Visualizzazione in modalità elenco nella parte superiore della schermata di modifica.
2. Seleziona il blocco Gruppo.
3. Nella barra laterale delle impostazioni del bocco sulla destra, scegli una delle seguenti opzioni:
   • Gruppo: la disposizione predefinita per i i blocchi Gruppo.
   • In colonna: consente di disporre i blocchi verticalmente, uno sopra l’altro. Ideale per la creazione di contenuti chiari e sequenziali come passaggi o elementi in evidenza.
     • In Giustificazione, modifica l’allineamento verticale con opzioni come in alto, al centro o in basso.
   • Riga: consente di posizionare i blocchi affiancati orizzontalmente. Perfetta per confrontare funzionalità diverse o creare gallerie di immagini.
     • In Giustificazione, modifica l’allineamento orizzontale con opzioni come a sinistra, al centro, a destra o spazio intermedio.
   • Griglia: consente di organizzare i blocchi in un layout a grigliapersonalizzabile. Utile per la visualizzazione di prodotti o per la presentazione dei membri di un team.
4. Fai clic su “Salva” oppure “Pubblica” per salvare le modifiche.

Controllare la larghezza complessiva di un blocco Gruppo consente di creare una gerarchia visiva in una pagina e regolare le modalità di visualizzazione dei contenuti su schermi di dimensioni diverse. È possibile modificare la quantità di spazio che il blocco Gruppo occupa scegliendo tra larghezza contenuto, larghezza massima e larghezza intera seguendo questi passaggi:

1. Seleziona Visualizzazione in modalità elenco nella parte superiore della schermata di modifica.
2. Seleziona il blocco Gruppo.
3. Nella barra degli strumenti che viene visualizzata, seleziona l’icona “Allinea” e scegli una delle seguenti opzioni:
   • Contenuto (o “Nessuno”): consente di impostare i blocchi in modo che la loro larghezza corrisponda alla larghezza predefinita dell’area contenuti. Ideale per le sezioni di contenuti standard.
   • Larghezza massima: consente di impostare la larghezza dei blocchi su una larghezza più ampia, ma non intera. Ottima per attirare l’attenzione sui contenuti importanti senza occupare l’intero schermo.
   • Larghezza intera: consente di impostare la larghezza di un blocco in modo che quest’ultimo riempia l’intera area disponibile. Perfetta per creare sezioni di contenuto coinvolgenti come banner o gallerie di immagini di grandi dimensioni.
4. Fai clic su “Salva” oppure “Pubblica” per salvare le modifiche.

Scopri di più sulla modifica della larghezza dei contenuti.

Puoi regolare la quantità di spazio occupata dai contenuti di un gruppo, il che è utile per creare design responsivi che funzionano bene sia sugli schermi dei dispositivi mobili che su quelli desktop. Segui questi passaggi per modificare le impostazioni della larghezza dei contenuti all’interno di un blocco Gruppo:

1. Seleziona Visualizzazione in modalità elenco nella parte superiore della schermata di modifica.
2. Seleziona il blocco Gruppo.
3. Nella barra laterale delle impostazioni del bocco, trova la sezione “Blocchi interni“. Attiva o disattiva l’impostazione “I blocchi interni utilizzano la larghezza del contenuto” :
   • Impostazione attivata: i contenuti seguiranno le impostazioni di larghezza del sito . In alternativa, puoi specificare determinati valori di larghezza utilizzando i controlli dedicati.
   • Impostazione disattivata: i contenuti si estenderanno fino a riempire l’intera larghezza del blocco Gruppo.
4. Fai clic su “Salva” oppure “Pubblica” per salvare le modifiche.

L’impostazione “I blocchi interni utilizzano la larghezza del contenuto” consente di controllare la larghezza dei contenuti all’interno del blocco Gruppo:

Quando l’impostazione è attivata, i contenuti all’interno del blocco Gruppo adottano la larghezza globale dei contenuti impostata sul tuo sito (di solito una larghezza di circa 700-800 px). In questo modo viene creata una colonna di contenuti centrata anche se il blocco Gruppo copre l’intera larghezza della pagina, migliorando la leggibilità sugli schermi più grandi senza rinunciare a un layout accattivante.

Quando l’impostazione è disattivata, i contenuti all’interno del blocco Gruppo si espandono fino a riempire l’intera larghezza del blocco Gruppo stesso. Se il blocco Gruppo è a larghezza intera, anche i contenuti adotteranno la larghezza intera. Ciò è utile per creare design a tutto schermo come gallerie di immagini a larghezza intera o per fare in modo che la larghezza dei contenuti corrisponda a quella dello sfondo del blocco Gruppo .

Un esempio pratico: se hai un blocco Gruppo con uno sfondo colorato che copre l’intera larghezza della pagina, l’attivazione dell’impostazione “I blocchi interni utilizzano la larghezza del contenuto” crea una colonna di contenuto centrata con lo sfondo colorato che si estende a tutto schermo, perfetto per evidenziare informazioni importanti pur mantenendo un aspetto accattivante.

La modifica delle dimensioni consente di regolare altezza, larghezza e spaziatura del blocco Gruppo per adattarlo meglio alle tue esigenze di contenuto e layout. Questo ti aiuta a creare sezioni visivamente bilanciate e lascia il giusto spazio intorno ai contenuti. Per impostare una spaziatura precisa intorno al blocco Gruppo , segui questi passaggi:

1. Seleziona Visualizzazione in modalità elenco nella parte superiore della schermata di modifica.
2. Seleziona il blocco Gruppo.
3. Nella barra laterale delle impostazioni del bocco, trova la sezione Dimensioni .
4. Imposta i valori dei seguenti parametri:
   • Spaziatura interna: spazio tra il contenuto e il bordo del blocco Gruppo. Una maggiore spaziatura interna lascia il giusto spazio intorno ai contenuti.
   • Margine: spazio intorno alla parte esterna del blocco Gruppo. Consente di separare questa sezione da altri contenuti.
5. Per passare dalla regolazione di tutti i margini alla regolazione dei soli margini laterali e viceversa, fai clic sull’icona del link.

Scopri di più sulla personalizzazione delle dimensioni dei blocchi.

La regolazione di questa spaziatura consente di avvicinare o allontanare i contenuti all’interno del blocco Gruppo, creando la giusta relazione visiva tra gli elementi. Questo aiuta i visitatori a distinguere i contenuti correlati mantenendo la coerenza della sezione. Per gestire la spaziatura tra i blocchi all’interno del gruppo, procedi in questo modo:

1. Seleziona Visualizzazione in modalità elenco nella parte superiore della schermata di modifica.
2. Seleziona il blocco Gruppo.
3. Nella barra laterale delle impostazioni del bocco, trova la sezione Spaziatura blocco .
4. Usa i controlli per impostare i seguenti parametri:
   • Spaziatura blocco: spazio tra i singoli blocchi. Una spaziatura maggiore crea una separazione chiara, mentre una minore mette i contenuti in relazione più stretta gli uni con gli altri.
   • Altezza minima: consente di impostare l’altezza minima del blocco Gruppo. Utile per creare sezioni coerenti o per aggiungere spazi bianchi per il bilanciamento visivo.

Scopri di più sulla regolazione dello spazio tra i blocchi.