Vuoi aggiungere testo alle tue immagini di WordPress? Quei titoli e citazioni accattivanti che vedi sovrapposti alle foto possono davvero far risaltare i tuoi contenuti. Si chiama overlay di testo ed è un ottimo modo per rendere le tue immagini più coinvolgenti.
Se ti sei chiesto come creare questi overlay di testo, potresti pensare di aver bisogno di software o competenze di design speciali. Buone notizie: non è così!
Abbiamo testato tutti i tipi di metodi e trovato diversi modi semplici per aggiungere testo alle immagini direttamente in WordPress. Nessuna esperienza di design necessaria e nessun software aggiuntivo da acquistare.
Pronto per imparare come? Ti mostreremo tre modi semplici per aggiungere testo sopra un'immagine in WordPress. Al termine di questa guida, creerai con sicurezza overlay di testo dall'aspetto professionale per il tuo sito web.

Quando aggiungere testo sopra le immagini in WordPress
Le immagini possono aumentare significativamente l'attrattiva del tuo sito web WordPress, rendendolo più interessante visivamente e aiutando a spezzare lunghe sezioni di testo.
Tuttavia, ci sono momenti in cui un'immagine da sola non racconta tutta la storia. In questi casi, l'aggiunta di overlay di testo può fornire un contesto aggiuntivo, aiutando il tuo pubblico a capire perché l'immagine è rilevante per il contenuto.
Sia che tu gestisca un blog WordPress o un negozio online, gli overlay di testo possono trasformare immagini normali in intestazioni o banner che attirano l'attenzione.
In questo post, presentiamo tre modi semplici per aggiungere testo sopra un'immagine in WordPress. Se preferisci passare direttamente a un metodo specifico, puoi usare i link qui sotto:
- Metodo 1: Aggiungere testo sopra un'immagine usando il blocco Copertina
- Metodo 2: Aggiungere testo sopra un'immagine usando il blocco Immagine
- Method 3: Create a Custom Page Layout with Text on Top of an Image
Metodo 1: Aggiungere testo sopra un'immagine usando il blocco Copertina
Un modo per aggiungere testo sopra un'immagine in WordPress è usare il blocco Copertina. Puoi usare questo blocco per mostrare qualsiasi immagine e poi digitare testo sopra l'immagine. Questo rende il blocco Copertina perfetto per creare immagini hero, intestazioni e banner.
Per aggiungere un blocco Copertina a una pagina o a un post, fai semplicemente clic sul pulsante più ‘+ Aggiungi blocco’ nell'editor a blocchi di Gutenberg.
Ora puoi digitare ‘Copertina’ e selezionare il blocco corretto quando appare.

Qui, puoi scegliere il blocco Copertina predefinito.
Ma puoi anche optare per l'opzione preimpostata con l'immagine e il testo segnaposto. Con la seconda opzione, puoi semplicemente sostituire l'immagine e il testo esistenti con i tuoi.
Per sostituire l'immagine predefinita, fai semplicemente clic per selezionare l'immagine. Una volta fatto, fai clic sul pulsante ‘Sostituisci’.

Se vuoi usare un'immagine che è già nella tua libreria multimediale di WordPress, fai semplicemente clic su ‘Apri libreria multimediale’. Puoi quindi scegliere un'immagine esistente.
Se vuoi caricare una nuova immagine, fai clic su ‘Carica’ invece.

Questo apre una finestra in cui puoi scegliere qualsiasi file dal tuo computer.
Dopo aver scelto un'immagine, puoi utilizzare le impostazioni del blocco per creare effetti interessanti e accattivanti.
Ad esempio, puoi rendere l'immagine fissa mentre il visitatore scorre la pagina o aggiungere una sovrapposizione di colore all'immagine.

Se utilizzi una sovrapposizione, puoi modificarne l'opacità utilizzando il cursore 'Opacità'. L'impostazione di opacità controlla la trasparenza dell'immagine di sfondo.
Quando sei soddisfatto dell'aspetto dell'immagine, sei pronto per aggiungere del testo.
Per impostazione predefinita, il blocco Copertina ha un blocco Titolo e un blocco Paragrafo in cui puoi aggiungere testo sopra l'immagine.

Per aggiungere del testo, fai semplicemente clic per selezionare il blocco Titolo o Paragrafo. Quindi, procedi e digita il testo che desideri utilizzare.
Quando aggiungi testo sopra le immagini, assicurati che il tuo testo sia leggibile per tutti i visitatori. Un buon contrasto tra testo e sfondo aiuta tutti a leggere i tuoi contenuti più facilmente. Per saperne di più, consulta la nostra guida su come migliorare l'accessibilità sul tuo sito WordPress.
Detto questo, potresti voler stilizzare il tuo testo in modo che sia più facile da leggere.
Se stai lavorando con un blocco Titolo, puoi anche provare i diversi stili di titolo per vedere quale è più facile da leggere.

Puoi anche aiutare il tuo testo a risaltare utilizzando un colore contrastante.
Per scegliere un colore diverso, seleziona la scheda 'Blocco' nel menu a destra. Quindi, fai clic su 'Colore' per espandere questa sezione.
Una volta fatto ciò, fai clic su 'Testo'. Si aprirà una finestra popup dove potrai scegliere un nuovo colore per tutto il testo nel blocco.

In genere, un testo più grande è più facile da leggere.
Per rendere il tuo testo più grande, fai clic sul campo accanto a 'Dimensione' e quindi digita un numero più grande in questo campo.

Una volta che sei soddisfatto dell'aspetto del tuo blocco Copertina, puoi pubblicare o aggiornare la tua pagina come al solito. Ora, se visiti il tuo sito web WordPress, vedrai il tuo testo sopra l'immagine.
Metodo 2: Aggiungere testo sopra un'immagine usando il blocco Immagine
Il blocco Copertina è ottimo per creare banner e intestazioni. Tuttavia, puoi anche aggiungere testo sopra un blocco Immagine standard di WordPress.
Per iniziare, dovrai aggiungere un blocco Immagine alla tua pagina o al tuo post. Per fare ciò, fai semplicemente clic sul pulsante più '+ Aggiungi blocco' nell'editor a blocchi di WordPress.
Puoi quindi digitare 'Immagine' e selezionare il blocco corretto per aggiungerlo al tuo post.

Puoi quindi caricare un'immagine dal tuo computer o fare clic su ‘Libreria multimediale’ per scegliere un'immagine dalla libreria multimediale di WordPress.
Dopo aver scelto la tua immagine, puoi cambiarne il punto focale, aggiungere una sovrapposizione e cambiare l'opacità seguendo lo stesso processo descritto sopra.
Puoi anche provare i diversi cursori ‘Sfondo fisso’ e ‘Sfondo ripetuto’ per vedere cosa funziona meglio per il tuo blocco Immagine.
Quando sei soddisfatto dell'aspetto della tua immagine, fai semplicemente clic sul pulsante ‘Aggiungi testo sull'immagine’.

Questo aggiunge un'area in cui puoi digitare il tuo testo.
A seconda della tua immagine, i visitatori potrebbero avere difficoltà a leggere il testo della sovrapposizione. Qui, può essere utile rendere il testo in grassetto o cambiarne il colore seguendo lo stesso processo descritto sopra.

Puoi anche rendere il tuo testo più grande.
Per fare ciò, trova la sezione ‘Dimensione’ nel menu a destra. Puoi quindi procedere e fare clic sui diversi numeri per rendere il tuo testo più grande o più piccolo.

Quando sei soddisfatto dell'aspetto del tuo testo e della tua immagine, procedi e visualizza in anteprima il tuo sito web. Quindi, fai clic su ‘Salva bozza’, ‘Aggiorna’ o ‘Pubblica’ per salvare le modifiche.
Se utilizzi un tema WordPress a blocchi, puoi utilizzare i Metodi 1 e 2 per aggiungere testo sopra un'immagine in qualsiasi parte del tuo tema utilizzando l'Editor completo del sito di WordPress (FSE).
Puoi saperne di più sull'FSE nella nostra guida completa per principianti alla modifica completa del sito di WordPress.
Metodo 3: Crea un layout di pagina personalizzato con testo sopra un'immagine
I blocchi integrati di WordPress sono un modo rapido e semplice per aggiungere testo sopra un'immagine in WordPress. Tuttavia, se desideri la libertà di creare design di pagina completamente personalizzati, avrai bisogno di un plugin per la creazione di pagine.
SeedProd è il miglior plugin per la creazione di pagine WordPress sul mercato. Ti consente di aggiungere testo sopra qualsiasi immagine in tutto il tuo sito web.
Nota: Esiste una versione gratuita di SeedProd, ma per questa guida utilizzeremo la versione Pro poiché ha più funzionalità.
Puoi leggere la nostra recensione completa di SeedProd per maggiori dettagli.
Per prima cosa, devi installare e attivare il plugin SeedProd. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.
Dopo l'attivazione, dovrai inserire la tua chiave di licenza SeedProd. Puoi ottenere questa chiave accedendo al tuo account SeedProd. Quindi, fai clic sulla scheda 'Download'.
Una volta fatto ciò, puoi copiare la chiave nella sezione 'Chiave di licenza'.

Ora puoi incollare questa chiave nella tua area di amministrazione di WordPress andando alla pagina SeedProd » Impostazioni.
Una volta qui, procedi e incolla la tua chiave nel campo 'Chiave di licenza'.

Quindi devi semplicemente fare clic su 'Verifica chiave'.
Dopodiché, andremo su SeedProd » Pagine di destinazione e faremo clic su 'Aggiungi nuova pagina di destinazione'.

Questo primo passaggio è necessario prima di poter aggiungere testo sopra le tue immagini.
Il tuo prossimo compito è scegliere un modello, che sarà il punto di partenza della tua pagina.
Indipendentemente dal modello SeedProd che scegli, puoi personalizzare ogni parte del modello per adattarlo perfettamente al tuo sito web e al tuo marchio. Se preferisci iniziare con una tela bianca, puoi fare clic su 'Modello vuoto'.

In tutte le nostre immagini, stiamo utilizzando il modello Tasty Squeeze Page, che è perfetto per le campagne di ottenere più iscritti.
Una volta trovato un modello che potresti voler utilizzare, passaci sopra il mouse. Puoi quindi fare clic sull'icona 'Anteprima'.

Questo mostrerà un'anteprima del modello.
Se sei soddisfatto dell'aspetto di questo modello, fai clic sul pulsante 'Scegli questo modello'.

Nel campo 'Nome pagina', digita un nome per la pagina.
Per impostazione predefinita, SeedProd utilizzerà questo nome come URL della pagina. Se desideri modificare questo URL creato automaticamente, modifica semplicemente il testo nel campo 'URL pagina'.

Quando sei soddisfatto delle informazioni inserite, fai clic sul pulsante 'Salva e inizia a modificare la pagina'. Questo aprirà il modello nell'editor drag-and-drop di SeedProd.
Nella barra laterale sinistra, vedrai tutti i blocchi e le sezioni che puoi trascinare e rilasciare sulla tua pagina.

A meno che tu non stia utilizzando il Modello vuoto, la tua pagina SeedProd avrà già alcuni blocchi e sezioni. Per modificare uno qualsiasi di questi contenuti, fai semplicemente clic per selezionare il blocco o la sezione.
Il menu di sinistra di SeedProd mostrerà ora tutte le impostazioni che puoi utilizzare per personalizzare questo blocco o sezione. Come puoi vedere nell'immagine seguente, puoi cambiare il testo che appare nel blocco Titolo.

Il modo più semplice per aggiungere testo sopra un'immagine è utilizzare una delle sezioni Hero già pronte di SeedProd.
Queste sezioni hanno un'immagine di sfondo segnaposto a schermo intero, con del testo segnaposto aggiunto sopra. Puoi semplicemente sostituire l'immagine di sfondo e il testo predefiniti con i tuoi contenuti.
Per iniziare, fai clic sulla scheda 'Sezioni' nel menu di sinistra di SeedProd.
Puoi quindi fare clic su 'Hero' per vedere tutti i modelli di sezione hero già pronti che puoi aggiungere alla tua pagina.

Per visualizzare in anteprima uno qualsiasi di questi modelli di sezione, passa il mouse sopra il modello e fai clic sull'icona della lente d'ingrandimento.
Per procedere e aggiungere questa sezione hero al tuo design, fai semplicemente clic su 'Scegli questa sezione'.

Successivamente, vorrai sostituire l'immagine stock del modello con la tua immagine. Per farlo, fai semplicemente clic sull'immagine stock per selezionarla.
Quindi, nel menu di sinistra di SeedProd, passa il mouse sopra l'anteprima dell'immagine di sfondo finché non appare un'icona a forma di cestino.
Puoi quindi procedere e fare clic su questa icona per eliminare l'immagine segnaposto.

Successivamente, fai clic su ‘Usa la tua immagine’. Puoi quindi scegliere un'immagine dalla libreria multimediale di WordPress o utilizzare un'immagine di repertorio.
SeedProd ti offre un facile accesso a migliaia di immagini stock royalty-free. Per dare un'occhiata alla libreria di immagini stock di SeedProd, fai clic su 'Usa un'immagine stock'.
Nella barra di ricerca, digita una parola o una frase che descriva l'immagine che stai cercando e fai clic sul pulsante 'Cerca'.

SeedProd mostrerà ora tutte le immagini stock che corrispondono al tuo termine di ricerca.
Quando trovi un'immagine che vuoi aggiungere al tuo design, fai semplicemente clic su di essa.

Una volta aggiunta un'immagine, sei pronto per sostituire il testo segnaposto.
Per farlo, fai clic per selezionare il blocco di testo. Quindi nell'area 'Testo', digita semplicemente il testo che desideri utilizzare.

Alcuni dei modelli hero di SeedProd hanno contenuti aggiuntivi, come pulsanti di invito all'azione.
Vuoi cambiare questo contenuto? Allora fai semplicemente clic per selezionare il blocco e poi apporta le tue modifiche nel menu di sinistra di SeedProd.

Un'altra opzione è eliminare il blocco dal modello hero.
Per farlo, fai semplicemente clic per selezionare il blocco e poi fai clic sull'icona del cestino.

Quando sei soddisfatto del design della tua pagina, puoi fare clic sul pulsante 'Salva'.
Da qui, puoi scegliere di pubblicare la pagina o salvarla come modello.

Per maggiori dettagli sulla creazione di layout di pagina personalizzati con SeedProd, puoi consultare la nostra guida su come creare una landing page in WordPress.
Suggerimenti bonus per la gestione di immagini e file in WordPress
Aggiungere testo alle immagini è solo un modo per migliorare l'aspetto del tuo sito. Vuoi fare di più con le tue immagini? Dai un'occhiata a queste guide semplici:
- Come caricare facilmente immagini in modalità lazy in WordPress
- Come aggiungere più gallerie nei post e nelle pagine di WordPress
- Come aggiungere correttamente uno slider di contenuti in primo piano in WordPress
- Come aggiungere un bordo attorno a un'immagine in WordPress
- Come ritagliare e modificare le miniature dei post di WordPress
- Come aggiungere facilmente immagini interattive a 360 gradi in WordPress
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere testo sopra un'immagine in WordPress. Potresti anche voler consultare la nostra guida su come modificare in blocco le immagini in primo piano e le nostre scelte esperte per i migliori plugin per slider di WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.

Ben
Bel tutorial. Per il metodo 1, dove possiamo aggiungere un testo sovrapposto all'immagine, come rendere cliccabile sia l'immagine che il testo sovrapposto? Il che significa che quando si passa il mouse sull'immagine, è cliccabile. Al momento, abbiamo provato molti metodi ma siamo riusciti a rendere cliccabile solo il testo sovrapposto. Per favore, condividi il tuo parere.
Supporto WPBeginner
Il blocco di copertina non è progettato con tale funzionalità in mente. Per ottenerlo, dovresti usare un blocco immagine e stilizzare l'immagine secondo il design che desideri.
Amministratore
Jiří Vaněk
Vorrei chiedere riguardo alla reattività del sito web. Quando posiziono del testo su un'immagine in una posizione specifica sul desktop, finisce in una posizione completamente diversa sul mobile. Come viene gestita la reattività in questo contesto? È piuttosto difficile per me mantenere lo stesso design sia sul desktop che sul mobile, poiché l'immagine si adatta a causa delle dimensioni ridotte dello schermo. O si tratta più di un problema con il tema scelto?
Supporto WPBeginner
Dipenderebbe dal metodo che stai utilizzando e dal tema specifico che stai utilizzando per quel problema e da come risolverlo.
Amministratore
Jiří Vaněk
Grazie per la tua risposta. Sto usando il tema GeneratePress. Pensavo ci potesse essere una soluzione, magari usando CSS o un altro metodo, per fissare tutto in posizione. Seguirò il tuo consiglio e cercherò di ottenere maggiori informazioni dagli sviluppatori del tema. Rispondono molto velocemente e sono molto disponibili. Grazie per il tuo tempo.
Viktorija
Ciao, sto cercando di aggiungere un titolo e quando ci si clicca sopra porta a un'immagine.
Supporto WPBeginner
Per quello che sembra tu voglia, dovresti usare il metodo 2 e aggiungere un link a quel blocco.
Amministratore
Trish
Ciao Staff Editoriale,
Sono un po' deluso dal Blocco Copertina di WordPress poiché l'overlay del testo NON è reattivo nella visualizzazione mobile, rendendo purtroppo il testo totalmente illeggibile.
Pensavo dovessi saperlo di questo problema.
Supporto WPBeginner
Grazie per aver condiviso che il blocco non è attualmente reattivo.
Amministratore