Blocchi di Gutenberg

Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.


Titolo Uno

Titolo due

Titolo tre

Titolo quattro

Titolo cinque
Titolo Sei

Blocco preformattato

La strada non percorsa, di Robert Frost

In un bosco giallo si diramavano due strade,
E mi dispiace di non aver potuto viaggiare entrambi
E fui un viaggiatore, a lungo rimasi fermo
E guardai giù il più lontano possibile
Fino a dove si incurvava nel sottobosco;
Poi prese l'altro, altrettanto giusto,
E avendo forse la pretesa migliore,
Perché era erboso e necessitava di essere calpestato;
Anche se per quanto riguarda il passaggio lì
Li avevo indossati praticamente allo stesso modo,
E quella mattina entrambi giacevano ugualmente
Tra le foglie nessun passo aveva lasciato un'impronta nera.
Oh, ho tenuto il primo per un altro giorno!
Eppure, sapendo come una strada conduce a un'altra,
Dubitavo di dover mai tornare.
Lo racconterò con un sospiro
Da qualche parte, tra moltissimi secoli:
In un bosco due strade si biforcavano, e io...
Ho preso quella meno battuta,
E questo ha fatto tutta la differenza.

...ed ecco una riga di testo davvero, davvero, davvero, davvero lungo, giusto per vedere come viene gestito e per scoprire come va in overflow;

Elenco ordinato

  1. Nullam id dolor id nibh ultricies vehicula ut id elit.
  2. Donec ullamcorper nulla non metus auctor fringilla.
    1. Condimentum euismod aenean.
    2. Purus commodo ridiculus.
    3. Nibh commodo vestibulum.
  3. Cras justo odio, dapibus ac facilisis in.

Elenco non ordinato

  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Donec ullamcorper nulla non metus auctor fringilla.
    • Nibh commodo vestibulum.
    • Aenean eu leo quam.
    • Pellentesco ornare sem lacinia.
  • Cras justo odio, dapibus ac facilisis in.

Versetto

Questo è un esempio del blocco di versi base di Gutenberg.

Un blocco per haiku? 
Perché no?
Blocchi per tutto!

Separatore

Ecco alcuni esempi dei tre stili di separatore del blocco separatore Gutenberg di base.




Tavolo

Ecco un esempio del blocco tabella principale di Gutenberg. 

DipendenteStipendioPosizione
Jane Doe
$100kAmministratore delegato
John Doe$100kCTO
Jane Bloggs$100kIngegneria
Fred Bloggs$100kMarketing

Ultimi articoli, Visualizzazione elenco

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. 

Ultimi articoli, Visualizzazione a griglia

E ora passiamo alla visualizzazione a griglia. Il blocco "Ultimi articoli" viene visualizzato anche con allineamento a larghezza intera e larghezza estesa, quindi assicuratevi di controllare anche questi stili.


citazione

Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Mecenate sed diam eget risus varius blandit sit amet non magna sed diam ed diam eget risus varius eget.

Donec sed odio dui. Mecenate faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio.

Tabor ricco

Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Mecenate sed diam eget risus varius blandit sit amet non magna sed diam ed diam eget risus varius eget.


Blocco di citazione alternativo

Lo stile alternativo di citazione a blocco può essere indirizzato utilizzando .wp-block-quote.is-large. Selettore CSS. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Donec sed odio dui. Mecenate faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Tabor ricco

Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Mecenate sed diam eget risus varius blandit sit amet non magna sed diam ed diam eget risus varius eget.


Audio

Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Allineamento centrato:

Esempio di didascalia di un blocco audio

Curabitur blandit tempus porttitor. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor.


pulsanti

Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Allineamento centrato

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat ante venenatis dapibus posuere velit aliquet. 

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Mecenate sed diam eget risus varius.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Mecenate sed diam eget risus varius.


Categorie


Archivi


Colonne

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Enea eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Enea eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Enea eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Enea eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.


Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Enea eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Enea eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Enea eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Fusce dapibus, tellus ac cursus commodo, tortor mauris condim entum nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condim entum nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condim entum nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condim entum nibh.


Citazioni in evidenza

Ecco un esempio del blocco pull quote principale, impostato per la visualizzazione centrata. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Enea eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere est at lobortis.

Rich Tabor, ThemeBeans.com

Ampio allineamento

Ecco un esempio del blocco pull quote principale, impostato per essere visualizzato con l'attributo wide-aligned, se il tema lo consente. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Qui abbiamo una citazione in evidenza allineata a sinistra.

Tabor ricco

Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.

Qui abbiamo una citazione in evidenza allineata a destra.

Tabor ricco

Donec ullamcorper nulla non metus auctor fringilla. Enea eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.


Blocco immagine

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Mecenate faucibus mollis interdum.

Modello di testo modificabile a livelli, vettoriale, tipografia 3D

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Allineamento a sinistra: dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Enea eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 

Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Mecenate faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Nullam quis risus.

Blocco dati

Analizziamo il posizionamento e lo stile del blocco principale del video. Verificheremo anche gli allineamenti ampio e a schermo intero.

Blocco immagine di copertina

Verifica il posizionamento e lo stile del blocco principale dell'immagine di copertina. Controlleremo gli allineamenti ampio e a schermo intero, nonché l'orientamento orizzontale (sinistra/destra).

Esempio di didascalia

Allineamento a sinistra: dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Enea eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.


Esempio di didascalia

Allineamento a destra: scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Allineamento centrato:

Esempio di superficie animata


Blocchi galleria

Analizziamo il posizionamento e lo stile dei blocchi della galleria.

Galleria a due colonne

Qui sotto è inserito un blocco Galleria con due colonne e due immagini.

Tre colonne

Qui sotto è inserito un blocco Galleria con tre colonne e tre immagini.

Quattro colonne

Qui sotto è inserito un blocco Galleria con quattro colonne e quattro immagini.

Cinque colonne

Qui sotto è inserito un blocco Galleria con cinque colonne e cinque immagini.

Quattro colonne, cinque immagini

Cambiamo un po' le cose. Ora abbiamo inserito un blocco Galleria con quattro colonne e cinque immagini.

Tre colonne, cinque immagini

Ora abbiamo inserito un blocco Galleria con tre colonne e cinque immagini.

Qui sotto troverete un blocco Galleria inserito con due colonne e cinque immagini.

Due colonne, cinque immagini

Tre colonne, quattro immagini

Qui sotto troverete un blocco Galleria inserito con tre colonne e quattro immagini.