Tutorial WordPress affidabili, quando ne hai più bisogno.
Guida per principianti a WordPress
WPB Cup
25 Milioni+
Siti web che utilizzano i nostri plugin
16+
Anni di esperienza con WordPress
3000+
Tutorial WordPress di esperti

Come aggiungere testo sopra un'immagine in WordPress (3 metodi)

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.

Come aggiungere testo sopra un'immagine in WordPress

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:

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.

blocco copertina WordPress

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’.

copertina WordPress 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.

copertina sostituisci carica

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.

sovrapposizione colore copertina

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.

Come aggiungere testo sopra un'immagine in WordPress

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.

Stilizzare il testo sopra un'immagine WordPress

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.

Cambiare il colore del testo sopra un'immagine

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.

Aggiungere testo sopra un'immagine in WordPress

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.

blocco immagine WordPress

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’.

Aggiungi testo 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.

colore blocco immagine

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.

Testo piccolo grande

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'.

La pagina Download di SeedProd

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'.

Verifica della tua licenza SeedProd

Quindi devi semplicemente fare clic su 'Verifica chiave'.

Dopodiché, andremo su SeedProd » Pagine di destinazione e faremo clic su 'Aggiungi nuova pagina di destinazione'.

Modelli di design di pagine di SeedProd

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'.

SeedProd scegli modello

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'.

Modelli di SeedProd progettati professionalmente

Questo mostrerà un'anteprima del modello.

Se sei soddisfatto dell'aspetto di questo modello, fai clic sul pulsante 'Scegli questo modello'.

Un modello di lead generation e squeeze

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'.

Creazione di un layout di pagina personalizzato con SeedProd

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.

Aggiunta di blocchi al tuo design SeedProd

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.

Personalizzazione di un design di pagina SeedProd pronto all'uso

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.

Un modello di sezione SeedProd

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'.

Un modello di hero SeedProd

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.

Eliminazione di un'immagine di sfondo in SeedProd

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'.

Scelta di un'immagine stock di SeedProd

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.

Libreria di immagini stock di SeedProd

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.

Aggiungere testo sopra un'immagine usando SeedProd

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.

Modifica del tuo testo 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.

Eliminazione di sezioni e blocchi SeedProd

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.

Pubblicazione di un design SeedProd

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:

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.

Dichiarazione: Il nostro contenuto è supportato dai lettori. Ciò significa che se fai clic su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come è finanziato WPBeginner, perché è importante e come puoi supportarci. Ecco il nostro processo editoriale.

Il Toolkit WordPress Definitivo

Ottieni l'accesso GRATUITO al nostro toolkit - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Interazioni del lettore

9 CommentsLeave a Reply

  1. 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.

    • 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

  2. 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?

    • Dipenderebbe dal metodo che stai utilizzando e dal tema specifico che stai utilizzando per quel problema e da come risolverlo.

      Amministratore

      • 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.

    • Per quello che sembra tu voglia, dovresti usare il metodo 2 e aggiungere un link a quel blocco.

      Amministratore

  3. 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.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tieni presente che tutti i commenti sono moderati secondo la nostra politica sui commenti, e il tuo indirizzo email NON verrà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avviamo una conversazione personale e significativa.