Pagina di test – formattazione

Formattazione — Esempi e riferimenti

Questa pagina raccoglie esempi pratici dei principali strumenti di formattazione disponibili in Gutenberg, senza scrivere codice HTML. Per ogni sezione: prima le istruzioni su come procedere, poi l’esempio visivo del risultato.



1. Spaziatura tra blocchi (Spacer)

Come si fa

  1. Cliccare sul + che appare tra due blocchi esistenti al passaggio del mouse.
  2. Digitare Spacer nella barra di ricerca del selettore blocchi e selezionarlo.
  3. Con il blocco Spacer selezionato, impostare l’altezza nel pannello laterale → campo Altezza.

Esempio — Spacer da 20px

▲ Blocco sopra lo Spacer da 20px

▼ Blocco sotto lo Spacer da 20px

Esempio — Spacer da 60px

▲ Blocco sopra lo Spacer da 60px

▼ Blocco sotto lo Spacer da 60px



2. Separatori

Come si fa

  1. Inserire il blocco Separatore dal selettore blocchi (+).
  2. Con il blocco selezionato, nel pannello laterale cliccare su Stili (icona pennello).
  3. Scegliere tra i tre stili disponibili: Predefinito, Ampio, Puntini. Il colore si cambia in Colore → Separatore.

Esempio — Stile Predefinito

Esempio — Stile Ampio (Wide)

Esempio — Stile Puntini (Dots)



3. Blocco Gruppo — padding e margini

Come si fa

  1. Selezionare uno o più blocchi, poi clic destro → Raggruppa. In alternativa inserire direttamente un blocco Gruppo vuoto e aggiungere blocchi al suo interno.
  2. Selezionare il Gruppo. Nel pannello laterale cliccare su Stile (icona pennello in alto a destra nel pannello).
  3. Espandere la sezione Dimensioni: qui si trovano i controlli per Padding (spazio interno) e Margin (spazio esterno). Cliccando sull’icona a catena si impostano i 4 lati separatamente.
  4. Per aggiungere uno sfondo: Colore → Sfondo. Per un bordo: Bordo → scegliere larghezza, stile e colore.

Esempio — Gruppo con sfondo e padding 2rem

Titolo all’interno del Gruppo

Questo testo è dentro un blocco Gruppo con sfondo grigio chiaro e padding 2rem su tutti i lati. Utile per box informativi, note, sezioni in evidenza.

Esempio — Gruppo con bordo sinistro (stile nota)

Nota o avviso contestuale. Utile per evidenziare informazioni importanti. Il bordo sinistro si imposta in Stile → Bordo → scegliere il lato sinistro.



4. Classi CSS personalizzate (Avanzate)

Come si fa

  1. Selezionare il blocco a cui aggiungere la classe.
  2. Nel pannello laterale, scheda Blocco, scorrere fino alla sezione Avanzate (ultima voce, espandibile con freccia).
  3. Inserire il nome della classe nel campo Classe CSS aggiuntiva, senza il punto iniziale (es. box-highlight, non .box-highlight).

Usare le classi quando si vuole applicare uno stile definito nel tema o nel foglio di stile del sito, senza aggiungere HTML inline.



5. Gerarchia tipografica

Regole da seguire

  • Usare sempre i titoli in ordine crescente (H2 → H3 → H4) senza saltare livelli.
  • L’H1 è il titolo della pagina, impostato automaticamente dal tema — non va aggiunto manualmente nel contenuto.
  • Gli H2 sono le sezioni principali. Gli H3 sono sottosezioni dentro un H2. L’H4 va usato raramente.
  • Il livello del titolo si cambia dalla barra degli strumenti che appare sopra il blocco selezionato.

Titolo H2 — Sezione principale

Paragrafo sotto un H2. Usato per le sezioni principali della pagina.

Titolo H3 — Sottosezione

Paragrafo sotto un H3. Usato per suddividere il contenuto di una sezione H2.

Titolo H4 — Elemento di dettaglio

Paragrafo sotto un H4. Usato raramente, solo per dettagli specifici dentro un H3.



6. Liste

Come si fa

Inserire il blocco Elenco dal selettore. Dalla barra degli strumenti si sceglie tra lista puntata e lista numerata. Si possono creare sotto-voci indentate con Tab. Non usare il trattino o il punto manualmente nel testo: il blocco Elenco gestisce tutto automaticamente.

Esempio — Lista puntata

  • Primo elemento della lista puntata
  • Secondo elemento, con testo più lungo per mostrare come si comporta il testo a capo
  • Terzo elemento
  • Quarto elemento

Esempio — Lista numerata

  1. Primo passo del procedimento
  2. Secondo passo, con descrizione più dettagliata
  3. Terzo passo
  4. Quarto passo



7. Formattazione inline nel testo

Come si fa

Selezionare il testo da formattare dentro un paragrafo: appare una barra degli strumenti flottante con tutte le opzioni di formattazione inline. Non serve HTML.

Esempio di formattazione inline: grassetto, corsivo, testo barrato, collegamento ipertestuale, codice inline. Tutti ottenibili selezionando il testo e usando la barra flottante — nessun HTML necessario.



8. Layout a colonne

Come si fa

  1. Inserire il blocco Colonne dal selettore. Scegliere il numero di colonne e la proporzione iniziale dal pannello che appare.
  2. Cliccare dentro una colonna per inserire blocchi al suo interno (titoli, paragrafi, immagini, ecc.).
  3. Per cambiare la larghezza di una colonna: selezionare la singola colonna (usare il selettore breadcrumb in basso nell’editor) → pannello laterale → campo Larghezza.
  4. Su mobile le colonne si impilano verticalmente in automatico.

Esempio — Due colonne uguali (50% / 50%)

Colonna sinistra

Contenuto della colonna sinistra. Ogni colonna è un contenitore indipendente: si possono inserire titoli, paragrafi, immagini, liste e qualsiasi altro blocco.

Colonna destra

Contenuto della colonna destra. La larghezza si può modificare trascinando il separatore centrale oppure inserendo una percentuale nel pannello laterale.

Esempio — Tre colonne uguali (33% / 33% / 33%)

Prima colonna

Utile per card informative, caratteristiche di un corso, docenti affiancati.

Seconda colonna

Il contenuto di ogni colonna può avere lunghezza diversa senza rompere il layout.

Terza colonna

Testo di esempio per la terza colonna.

Esempio — Due colonne asimmetriche (33% / 67%)

Colonna stretta

Adatta a sidebar, indici, etichette laterali.

Colonna principale (due terzi)

La proporzione si imposta selezionando la singola colonna → pannello laterale → campo Larghezza. Valori tipici: 33% + 67%, oppure 40% + 60%.



9. Testo e immagine affiancati

Due approcci disponibili

A) Blocco “Media e testo” — il modo più rapido. Inserirlo dal selettore, caricare l’immagine cliccando sull’area sinistra, scrivere il testo a destra. La posizione dell’immagine (sinistra/destra) si cambia nel pannello laterale con l’opzione Mostra media sul lato destro. La larghezza dell’immagine si imposta con il cursore Larghezza colonna media.

B) Colonne con blocco Immagine — preferibile quando si devono affiancare più blocchi diversi (titolo + testo + bottone) accanto alla foto. Si usa il blocco Colonne con un blocco Immagine in una colonna e i contenuti nell’altra.

Esempio A — Media e testo, immagine a sinistra

Immagine di esempio

Titolo accanto all’immagine

Il blocco Media e testo affianca automaticamente immagine e contenuto. L’immagine occupa il 40% della larghezza. Cliccando sull’area immagine si carica dalla Libreria multimediale.

Esempio A — Media e testo, immagine a destra

Testo a sinistra, immagine a destra

Per invertire: pannello laterale → attivare Mostra media sul lato destro. Alternare sinistra e destra tra sezioni diverse rende la pagina più dinamica.

Immagine di esempio

Esempio B — Colonne con immagine e blocchi multipli

Immagine di esempio

Titolo del contenuto

Con le Colonne si possono inserire più blocchi affiancati all’immagine: titolo, testo, lista, bottone. La colonna immagine è al 45%, quella contenuto al 55%.

Preferire questo approccio quando il testo da affiancare è strutturato in più elementi.



10. Classi CSS del tema

Come si applicano

Il sito ha classi CSS predefinite nel foglio di stile. Per usarle: selezionare il blocco → pannello laterale → scheda Blocco → sezione Avanzate → campo Classe CSS aggiuntiva. Inserire il nome della classe senza punto iniziale. Le classi qui sotto sono già disponibili e non richiedono CSS aggiuntivo.

10a. Intestazione pagina — page-header

Da applicare a un blocco Gruppo. Il titolo interno deve avere la classe page-header__title, il sottotitolo page-header__subtitle. Produce un’intestazione centrata con bordo inferiore verde e padding coerente con il resto del sito.

Titolo della pagina

Sottotitolo descrittivo della sezione o della pagina

10b. Titoli di sezione — section-title e subsection-title

Da applicare a un blocco Paragrafo (non a un heading Gutenberg). Aggiunge automaticamente il bordo sinistro verde e la spaziatura coerente con le altre sezioni del sito. section-title per titoli principali, subsection-title per livelli secondari.

Esempio di section-title

Esempio di subsection-title

10c. Box introduttivo — page-intro-box

Da applicare a un blocco Gruppo con un paragrafo all’interno. Produce un box grigio chiaro con bordo sinistro verde, adatto a introduzioni, avvisi o note contestuali in cima a una pagina.

Questa sezione introduce il contenuto della pagina. Utile per spiegare brevemente cosa troverà il lettore, indicare prerequisiti, o segnalare informazioni importanti. I termini chiave possono essere in grassetto — il colore verde è applicato automaticamente dal CSS.

10d. Card — card-item

Struttura base di una card. Il Gruppo esterno ha classe card-item. Al suo interno: un paragrafo con card-item__header + una classe colore per l’intestazione colorata, poi un Gruppo con card-item__body per il contenuto. Le classi colore disponibili per l’header sono: card-header--green, card-header--blue, card-header--gray, card-header--teal, card-header--orange, card-header--purple, card-header--cyan, card-header--red.

Laurea Triennale

Testo descrittivo della card. Può contenere informazioni generali sulla sezione.

Laurea Magistrale

Testo descrittivo della card. Header blu con card-header--blue.

10e. Lista link — card-nav-links

Blocco Elenco con classe card-nav-links. Si aggiunge il modificatore per il numero di colonne: card-nav-links--1col, card-nav-links--2col, card-nav-links--3col. Su mobile tornano sempre a colonna singola automaticamente.

1 colonna

2 colonne

3 colonne

10f. Badge qualifica — qualifica-badge

Da applicare a un blocco Paragrafo o a testo inline in una cella di tabella. Aggiunge sfondo colorato e testo in maiuscoletto. Varianti: qualifica-ordinario (verde), qualifica-associato (blu), qualifica-ricercatore (arancione), qualifica-esterno (viola). Tipicamente usati nella tabella docenti.

Professore Ordinario

Professore Associato

Ricercatore

Docente Esterno

10g. Pulsante “Vedi tutti” — view-all-button

Da applicare al blocco Pulsanti (il wrapper esterno, non il singolo pulsante). Produce un bottone verde arrotondato centrato con animazione della freccia su hover. Usare view-all-avvisi-eventi per la sezione avvisi/eventi.

Vedi tutti gli avvisi

Pagina di riferimento — non pubblicare. Ultima revisione: marzo 2025.

MENU