Libreria dei blocchi Gutenberg

Questa pagina raccoglie i principali blocchi nativi di Gutenberg delle categorie Testo, Design e Media, ciascuno racchiuso in una propria sezione con titolo. Serve come riferimento per verificare stili, spaziature e comportamento responsive di ogni blocco nel tema.

Titoli (H1–H6) e le 4 classi dimensione di WordPress

Titolo di primo livello — H1

Titolo di secondo livello — H2

Titolo di terzo livello — H3

Titolo di quarto livello — H4

Titolo di quinto livello — H5
Titolo di sesto livello — H6

Classe .has-x-large-font-size — dimensione fluida in vw, si adatta alla risoluzione dello schermo.

Classe .has-large-font-size — testo large.

Classe .has-medium-font-size — testo medium.

Classe .has-small-font-size — testo small.

Paragrafo

Un paragrafo standard di esempio. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Elenco

Elenco puntato

  • Prima voce dell’elenco
  • Seconda voce dell’elenco
  • Terza voce dell’elenco

Elenco numerato

  1. Primo passaggio
  2. Secondo passaggio
  3. Terzo passaggio

Citazione

Una citazione di esempio, utile per verificare lo stile delle blockquote nel tema.

Autore di esempio

Pullquote

Una pullquote mette in evidenza una frase importante, staccandola visivamente dal resto del testo.

Fonte di esempio

Codice

function esempio() {
    return true;
}

Preformattato

Testo preformattato,
che mantiene   spazi multipli e
interruzioni di riga esattamente come scritto.

Verso

Riga di un verso,
che mantiene le interruzioni
come in una poesia.

Dettagli

Clicca per saperne di più

Contenuto nascosto che viene mostrato aprendo il dettaglio, utile per FAQ o approfondimenti opzionali.

Tabella

Colonna 1Colonna 2Colonna 3
Riga 1 — ARiga 1 — BRiga 1 — C
Riga 2 — ARiga 2 — BRiga 2 — C

Immagine

Placeholder immagine a tutta larghezza

Galleria

Placeholder galleria 1
Placeholder galleria 2
Placeholder galleria 3

Titolo sopra l’immagine

Copertina

Titolo sopra l’immagine

Media e testo — immagine a sinistra

Placeholder immagine

Blocco Immagine + Testo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Media e testo — immagine a destra

Blocco Testo + Immagine

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Placeholder immagine

Audio

Esempio di traccia audio.

Video

Esempio di video.

File

documento-di-esempio.pdfScarica

Pulsanti

Pulsante primario
Pulsante secondario

Colonne

Colonna 1

Testo di esempio per la prima colonna.

Colonna 2

Testo di esempio per la seconda colonna.

Colonna 3

Testo di esempio per la terza colonna.

Riga, Stack e Griglia

Riga (flex orizzontale)

Elemento 1

Elemento 2

Elemento 3

Stack (flex verticale)

Elemento 1

Elemento 2

Elemento 3

Griglia

Elemento 1

Elemento 2

Elemento 3

Schede

Accordion

Contenuto della prima voce, visibile aprendo la relativa intestazione.

Contenuto della seconda voce, indipendente dalla prima.

Contenuto della terza voce, utile per verificare più elementi aperti/chiusi insieme.

Gruppo

Il blocco Group serve a raggruppare più blocchi insieme, ad esempio per applicare uno sfondo o un padding comune a più elementi.

Separatore

Spaziatore

Testo prima dello spaziatore.

Testo dopo lo spaziatore, distanziato di 60px.