Un post di solo testo, senza immagini, ottiene un coinvolgimento da 2 a 3 volte inferiore rispetto a un articolo con contenuti visivi. Le immagini spezzano i muri di testo, mantengono l'attenzione e aiutano a spiegare concetti difficili da rendere a parole. Inoltre, le immagini con testi alternativi e nomi file descrittivi portano traffico di ricerca da Google Immagini: per un blog tecnico si traducono in centinaia di visite extra al mese.

L'editor Gutenberg (l'editor a blocchi di WordPress) gestisce le immagini senza bisogno di alcun plugin. Cinque blocchi integrati coprono tutti gli scenari di base: dalla singola immagine alle gallerie e alle copertine a schermo intero con testo in sovrimpressione. Ma i principianti hanno ancora domande: quale blocco scegliere, come allineare un'immagine senza che il testo si rompa, come posizionare due immagini affiancate o perché usare un filtro bicromatico.

Ecco una guida passo passo di ogni blocco, con impostazioni che le guide rapide non menzionano. Nessun plugin, solo gli strumenti nativi di Gutenberg.

💡 Panoramica rapida:

• Aggiungi una singola immagine con il blocco «Immagine» e configura l'allineamento tramite la barra degli strumenti: per un'immagine sola è sufficiente
• Posiziona un'immagine accanto al testo con il blocco «Media e testo»: mantiene le proporzioni in modo rigido, il testo non si sovrappone
• Disponi due o più immagini in fila con il blocco «Galleria» e specifica il numero di colonne: la griglia si allinea automaticamente
• Sovrapponi del testo a una foto con il blocco «Copertina», usando filtri, sovrapposizione ed effetto parallasse opzionale
• Attiva la lightbox nelle impostazioni del blocco «Immagine»: l'immagine si apre a schermo intero senza ricaricare la pagina

Quali blocchi di Gutenberg gestiscono le immagini

WordPress offre di default cinque blocchi legati alle immagini. Ciascuno risolve un compito specifico, non vanno confusi tra loro.

• Immagine (Image), una singola immagine con allineamento, didascalia, link, filtro bicromatico e impostazioni lightbox. Il mattone fondamentale per qualsiasi post. Documentazione
• Galleria (Gallery), una griglia di più immagini con impostazioni delle colonne. Sostituisce le gallerie classiche del vecchio editor e lo shortcode [gallery]. Documentazione
• Media e testo (Media & Text), un blocco a due colonne: immagine a sinistra (o a destra), testo accanto. Un accoppiamento rigido che non si disallinea al variare della risoluzione. Documentazione
• Copertina (Cover), un'immagine di sfondo con un livello di testo e pulsanti in primo piano. Puoi configurare la sovrapposizione colore, l'opacità e lo sfondo fisso. Documentazione
• File (File), un link per il download con una scheda. Serve per istruzioni in PDF e archivi, non per mostrare un'immagine nella pagina.

I primi quattro sono il tuo arsenale principale. Il blocco «File» non si usa per illustrare i contenuti, quindi tratteremo solo i blocchi visivi qui sotto.

Come aggiungere una singola immagine e configurare l'allineamento

Lo scenario più comune: inserire un'immagine nel testo e regolarne la posizione rispetto ai paragrafi.

Clicca il pulsante «+» (aggiungi blocco) nell'interfaccia dell'editor e seleziona «Immagine». Appare una finestra di caricamento: puoi trascinare un file dal computer, selezionarlo dalla libreria media di WordPress o incollare un URL. Dopo il caricamento, l'immagine compare subito nell'editor e sopra di essa appare una barra degli strumenti con i pulsanti di allineamento.

Opzioni di allineamento disponibili:

• Allinea a sinistra, l'immagine è spostata a sinistra, il testo le scorre a destra
• Allinea al centro, l'immagine è al centro, il testo sopra e sotto
• Allinea a destra, versione speculare dell'allineamento a sinistra
• Larghezza ampia, l'immagine si estende oltre i confini del blocco di testo ma non a tutto schermo
• Larghezza intera, l'immagine si estende da un bordo all'altro dell'area del contenuto

I punti blu agli angoli dell'immagine permettono di ridimensionarla trascinando, senza dover calcolare pixel nei CSS. Nella barra laterale destra (scheda «Blocco»), puoi configurare il testo alternativo per la SEO e un link che gli utenti seguiranno cliccando l'immagine.

Due consigli che fanno risparmiare tempo. Primo: attiva la lightbox (l'opzione «Ingrandisci al clic» nelle impostazioni del link del blocco): quando viene cliccata, l'immagine si apre a schermo intero, l'utente non lascia la pagina. Secondo: il filtro bicromatico (icona del cerchio nella barra degli strumenti del blocco) cambia la combinazione cromatica dell'immagine senza usare Photoshop, utile quando screenshot da fonti diverse stonano visivamente tra loro. Il filtro non modifica il file sorgente nella libreria media, puoi sempre reimpostarlo.

Ma c'è un problema: «allinea a sinistra» e «allinea a destra» funzionano bene solo quando il testo è abbastanza lungo. Se il paragrafo è corto, l'immagine «cade» fuori dal flusso e l'intestazione successiva vi si sovrappone. In questi casi, è meglio usare il blocco «Media e testo».

Blocco «Media e testo»: immagine e paragrafo in un tutt'uno

Il blocco Media e testo fissa rigidamente la proporzione: metà larghezza per l'immagine, metà per il testo. Nessun disallineamento al cambiare della risoluzione dello schermo.

Si aggiunge allo stesso modo: pulsante «+», cerca «Media e testo». Seleziona un'immagine e scrivi il testo nella colonna adiacente. Nella barra laterale sono disponibili queste opzioni:

• Inverti posizione (immagine a sinistra o a destra)
• Modalità a schermo intero (si estende per tutta la larghezza disponibile)
• Colore di sfondo per la metà del testo

Il blocco è particolarmente comodo per le istruzioni passo passo: screenshot di un'impostazione a sinistra, descrizione di cosa succede a destra. Il lettore non perde il collegamento tra testo e immagine durante lo scorrimento.

In pratica, Media e testo aiuta anche in situazioni più terra terra. Per esempio, hai inserito uno screenshot con allineamento a sinistra e l'H2 successivo «si è scontrato» con l'immagine. È troppo tardi per cambiare la struttura del paragrafo: avvolgi immagine e testo in Media e testo e il problema si risolve in 10 secondi.

Come posizionare due o più immagini affiancate con il blocco galleria

Se devi mostrare una serie di screenshot o creare una raccolta fotografica, usa il blocco «Galleria». A differenza del vecchio editor classico, dove la galleria viveva come uno shortcode [gallery] a parte, Gutenberg la gestisce in modo visivo.

Aggiungi il blocco «Galleria», carica le immagini necessarie: si dispongono automaticamente in una griglia. Nelle impostazioni del blocco (pannello di destra), seleziona il numero di colonne: 2, 3, 4 o più. Per due immagini affiancate, imposta «2 colonne»: otterrai una fila ordinata senza regolazioni manuali delle dimensioni.

Funzionalità aggiuntive del blocco galleria:

• Ritaglio delle miniature: tutte le immagini vengono portate alla stessa dimensione, la griglia appare uniforme
• Configurazione della spaziatura tra le immagini
• Assegnazione di un link a ciascuna immagine separatamente

Se il progetto richiede un layout non standard (immagini di dimensioni diverse in una stessa griglia), le capacità della galleria integrata potrebbero non bastare. In quel caso viene in soccorso il blocco «Colonne» (Columns), al cui interno si annidano blocchi «Immagine» separati con impostazioni indipendenti. Ma per gli scenari tipici, le gallerie native sono sufficienti.

Nota: non confondere il blocco «Galleria» con più blocchi «Immagine» disposti in colonne. La galleria ritaglia automaticamente le miniature, tutte le immagini appaiono della stessa altezza a prescindere dalle proporzioni originali. Le colonne non fanno questa regolazione: un'immagine risulta più alta dell'altra e la fila «galleggia». Per una raccolta fotografica veloce, usa la galleria; per un layout preciso al pixel, usa le colonne.

Come sovrapporre testo a un'immagine con il blocco «Copertina»

Il blocco «Copertina» è un'immagine di sfondo con un livello di testo. In sostanza, un banner all'interno del post. Si usa per formattare sezioni dell'articolo, citazioni o conclusioni chiave.

Seleziona il blocco «Copertina», carica un'immagine e inserisci il testo direttamente sopra di essa. Nella barra laterale puoi configurare:

• Colore di sovrapposizione, riempimento semitrasparente sopra l'immagine, rende il testo leggibile su qualsiasi sfondo
• Opacità, intensità della sovrapposizione da appena percettibile a quasi solida
• Sfondo fisso, durante lo scorrimento della pagina l'immagine resta ferma (effetto parallasse)
• Ripetizione sfondo, riempie il blocco con un motivo ripetuto, per texture e ornamenti

Lo sfondo fisso è una tecnica molto usata nelle landing page e nei portfolio WordPress. Fa un bell'effetto, ma sui dispositivi mobili viene spesso disabilitato dal browser per motivi di prestazioni. Non farci affidamento come tecnica principale per i telefoni.

Il blocco «Copertina» si annida dentro altri blocchi: dentro colonne, gruppi o righe. E sulla copertina puoi posizionare non solo testo, ma anche un pulsante: aggiungi un blocco «Pulsanti» dentro la copertina e ottieni un banner CTA già pronto con sfondo. Tutto con gli strumenti integrati, senza CSS né plugin aggiuntivi.

Se la copertina rallenta il caricamento su mobile, disabilita lo sfondo fisso e comprimi l'immagine a 200-250 KB. WordPress, a partire dalla versione 5.8, converte automaticamente PNG e JPEG in WebP durante il caricamento, ma è meglio preparare il file sorgente in anticipo tramite TinyPNG o conversione in AVIF.

⁉️🤔 Domande frequenti

Perché il testo «salta» e si scontra con i blocchi adiacenti dopo aver aggiunto un'immagine?

Succede quando l'immagine è allineata a sinistra o a destra e c'è troppo poco testo intorno. Gutenberg non «sostiene» automaticamente l'altezza del blocco sotto l'immagine, ma si basa sul volume del testo circostante. Soluzione: avvolgi immagine e testo in un blocco «Media e testo», che mantiene le proporzioni in modo rigido. Oppure aggiungi altre 2-3 righe di testo in modo che il testo scorra correttamente.

In cosa differisce il blocco «Galleria» da più blocchi «Immagine» posizionati in colonne?

La galleria fornisce una griglia unificata con ritaglio automatico delle miniature: tutte le immagini appaiono della stessa dimensione a prescindere dalle proporzioni originali. Le colonne con immagini separate non fanno questa regolazione: un'immagine può risultare più alta dell'altra e la fila «galleggia». Per una raccolta fotografica veloce, scegli la galleria; per un layout preciso al pixel, usa le colonne.

Posso aggiungere il testo alternativo per più immagini di una galleria in una volta sola?

No, il blocco «Galleria» non supporta la modifica in blocco dei testi alternativi. Ogni immagine nella galleria è un file media separato e il testo alternativo si imposta individualmente: clicca su un'immagine specifica nella galleria, vai alla barra laterale e compila il campo «Testo alternativo». Oppure scrivi il testo alternativo in anticipo nella libreria media di WordPress: verrà ripreso automaticamente al momento dell'inserimento.

Il blocco «Copertina» rallenta il caricamento della pagina su mobile. Come risolvere?

Lo sfondo fisso (parallasse) è il principale colpevole. Disabilita l'opzione «Sfondo fisso» nelle impostazioni del blocco e il browser smetterà di renderizzare l'effetto pesante durante lo scorrimento. Secondo passo: comprimi l'immagine della copertina a 200-250 KB. Servizi come TinyPNG o la conversione in WebP/AVIF riducono le dimensioni senza perdita visibile di qualità. WordPress 5.8+ converte automaticamente PNG e JPEG in WebP durante il caricamento, ma è meglio preparare il file sorgente in anticipo.

Ha senso usare il blocco «File» se voglio solo mostrare un'immagine?

No. Il blocco «File» mostra un pulsante di download e il nome del file, non l'immagine in sé. Serve per istruzioni in PDF, archivi ZIP, file CSV e altri documenti che l'utente deve salvare sul proprio dispositivo. Per mostrare un'immagine, usa sempre il blocco «Immagine».

In cosa differisce la lightbox di Gutenberg da plugin per lightbox come FooBox o Meow Lightbox?

La lightbox integrata (l'opzione «Ingrandisci al clic» nelle impostazioni del link del blocco «Immagine») funziona senza codice aggiuntivo e non crea conflitti con i temi; è apparsa in WordPress 6.4 alla fine del 2023. I plugin offrono più impostazioni: visualizzazione della galleria con scorrimento a swipe, effetti di oscuramento, contatore delle immagini. Se inserisci 2-3 immagini per post, quella integrata è sufficiente. Per gallerie fotografiche e portfolio, installa un plugin.

Quale blocco scegliere per la tua esigenza: riepilogo breve

Gutenberg copre tutti gli scenari di base per lavorare con le immagini senza un solo plugin. Inserisci una singola immagine con il blocco «Immagine» e non dimenticare il testo alternativo: è la tua principale risorsa SEO per Google Immagini. Attiva la lightbox: la funzionalità è gratuita e chi legge da mobile ti ringrazierà.

Se ti serve un abbinamento rigido «immagine + testo», scegli «Media e testo»: non si sfalda su nessuno schermo. Per una serie di immagini, «Galleria» con impostazioni delle colonne: il ritaglio automatico allineerà tutto in fila. Per testo sopra una foto, «Copertina» con sovrapposizione e parallasse opzionale, e puoi aggiungere un pulsante all'interno per ottenere un banner CTA.

Padroneggiare questi quattro blocchi è fattibile in 10-15 minuti in un post di prova. Apri una bozza, trascina i blocchi sulla tela: l'interfaccia di Gutenberg è progettata per il lavoro visivo, non per il codice. Se il prossimo post uscirà con immagini invece che con un muro di testo, sei già un passo avanti.