Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

Volete aggiungere del testo sopra un’immagine in WordPress?

La sovrapposizione di testo è un ottimo modo per fornire informazioni aggiuntive su un’immagine. È anche un modo semplice e veloce per creare banner, intestazioni e persino pubblicità online.

In questo articolo vi mostreremo come potete aggiungere del testo sopra un’immagine in WordPress.

How to add text on top of an image in WordPress

Quando aggiungere testo alle immagini in WordPress

Le immagini possono rendere più interessante il vostro sito WordPress e contribuire a spezzare grandi paragrafi di testo.

Tuttavia, a volte le immagini possono richiedere maggiori spiegazioni. Ad esempio, si potrebbe aggiungere del testo sopra un’immagine per spiegare cosa mostra l’immagine e perché l’avete aggiunta al vostro post.

Molti blog WordPress aggiungono anche del testo sopra un’immagine per creare banner e intestazioni accattivanti e informative.

In questo post abbiamo tre modi, adatti ai principianti, per aggiungere del testo sopra un’immagine in WordPress. Se preferite passare direttamente a un metodo particolare, potete utilizzare i link sottostanti:

Un modo per aggiungere testo sopra un’immagine in WordPress è utilizzare il blocco Cover. È possibile utilizzare questo blocco per mostrare qualsiasi immagine e poi digitare del testo sopra l’immagine. Ciò rende il blocco Copertina perfetto per creare immagini eroiche, intestazioni e banner.

Per aggiungere un blocco di copertina a una pagina o a un post, è sufficiente fare clic sul pulsante “+ Aggiungi blocco” nell’editor di blocchi di Gutenberg.

Ora è possibile digitare “Cover” e selezionare il blocco giusto quando appare.

The WordPress Cover block

Per impostazione predefinita, il blocco Copertina presenta un’immagine e un testo segnaposto.

Per sostituire l’immagine predefinita, è sufficiente fare clic per selezionare l’immagine. Una volta fatto ciò, fare clic sul pulsante “Sostituisci”.

How to add text on top of an image in WordPress

Se si desidera utilizzare un’immagine già presente nella libreria multimediale di WordPress, è sufficiente fare clic su “Apri libreria multimediale”. È possibile scegliere un’immagine esistente.

Se si desidera caricare una nuova immagine, fare clic su “Carica”.

Uploading an image to the WordPress Cover block

Si apre una finestra in cui è possibile scegliere qualsiasi file dal computer.

Dopo aver scelto un’immagine, è possibile utilizzare le impostazioni del blocco per creare effetti interessanti e accattivanti. Ad esempio, si può fare in modo che l’immagine rimanga fissa mentre il visitatore scorre la pagina o aggiungere una sovrapposizione di colori all’immagine.

A colored cover overlay

Se si utilizza una sovrapposizione, è possibile modificarne l’opacità utilizzando il cursore ‘Opacità’. L’impostazione dell’opacità controlla la trasparenza dell’immagine di sfondo.

Quando si è soddisfatti dell’aspetto dell’immagine, si è pronti ad aggiungere del testo.

Per impostazione predefinita, il blocco Copertina ha un’intestazione e un blocco Paragrafo in cui è possibile aggiungere del testo sopra l’immagine.

How to add text on top of an image in WordPress

Per aggiungere del testo, è sufficiente fare clic per selezionare il blocco Intestazione o Paragrafo. Quindi, digitare il testo che si desidera utilizzare.

Quando si aggiunge del testo a un’immagine, questo può risultare difficile da leggere. Questo è particolarmente vero per i visitatori con problemi di vista. Per saperne di più, consultate la nostra guida su come migliorare l’accessibilità del vostro sito WordPress.

Detto questo, è possibile che si voglia dare uno stile al testo in modo che sia più facile da leggere.

Se si lavora con un blocco di intestazione, si possono anche provare i diversi stili di intestazione per vedere quale sia il più facile da leggere.

Styling the text on top of a WordPress image

È inoltre possibile far risaltare il testo utilizzando un colore contrastante.

Per scegliere un colore diverso, selezionare la scheda “Blocco” nel menu di destra. Quindi, fare clic su “Colore” per espandere questa sezione.

Una volta fatto ciò, fare clic su “Testo”. Si apre una finestra a comparsa in cui è possibile scegliere un nuovo colore per tutto il testo del blocco.

Changing the color of text on top of an image

In genere, un testo più grande è più facile da leggere.

Per ingrandire il testo, fare clic sul campo accanto a “Dimensione” e digitare un numero più grande in questo campo.

Adding text on top of an image in WordPress

Una volta soddisfatti dell’aspetto del blocco di copertina, è possibile pubblicare o aggiornare la pagina come di consueto. Ora, se visitate il vostro sito WordPress, vedrete il vostro testo sopra l’immagine.

Metodo 2: Aggiungere testo sopra un’immagine utilizzando il blocco immagine

Il blocco Cover è ottimo per creare banner e intestazioni. Tuttavia, è anche possibile aggiungere del testo sopra un blocco immagine standard di WordPress.

Per iniziare, è necessario aggiungere un blocco immagine alla pagina o al post. Per farlo, è sufficiente fare clic sul pulsante “+ Aggiungi blocco” nell’editor dei blocchi di WordPress.

È quindi possibile digitare “Immagine” e selezionare il blocco giusto per aggiungerlo al post.

The WordPress Image block

È possibile caricare un’immagine dal computer o fare clic su “Libreria multimediale” per scegliere un’immagine dalla libreria multimediale di WordPress.

Dopo aver scelto l’immagine, è possibile modificarne il punto focale, aggiungere una sovrapposizione e cambiare l’opacità seguendo lo stesso procedimento descritto sopra.

Si possono anche provare i diversi cursori “Sfondo fisso” e “Sfondo ripetuto” per vedere cosa funziona meglio per il blocco immagine.

Quando si è soddisfatti dell’aspetto dell’immagine, è sufficiente fare clic sul pulsante “Aggiungi testo all’immagine”.

Adding text on top of an image in WordPress

Questo aggiunge un’area in cui è possibile digitare il testo.

A seconda dell’immagine, i visitatori potrebbero avere difficoltà a leggere il testo in sovrimpressione. In questo caso, può essere utile rendere il testo in grassetto o cambiarne il colore seguendo lo stesso procedimento descritto sopra.

Changing the text color in WordPress

È anche possibile ingrandire il testo.

A tale scopo, nel menu di destra si trova la sezione “Dimensioni”. È quindi possibile fare clic sui diversi numeri per ingrandire o rimpicciolire il testo.

Increasing the text size

Quando si è soddisfatti dell’aspetto del testo e dell’immagine, si può visualizzare l ‘anteprima del sito. Quindi, fare clic su “Salva bozza”, “Aggiorna” o “Pubblica” per salvare le modifiche.

Se utilizzate un tema WordPress a blocchi, potete utilizzare i metodi 1 e 2 per aggiungere del testo sopra un’immagine in qualsiasi parte del tema utilizzando l’Editor completo del sito (FSE) di WordPress.

Per saperne di più su FSE, consultate la nostra guida completa per principianti alla modifica completa del sito WordPress.

Metodo 3: creare un layout di pagina personalizzato con testo sopra un’immagine

I blocchi integrati di WordPress sono un modo semplice e veloce per aggiungere testo sopra un’immagine in WordPress. Tuttavia, se si desidera la libertà di creare pagine completamente personalizzate, è necessario un plugin per la creazione di pagine.

SeedProd è il miglior plugin per il page builder di WordPress sul mercato. Permette di aggiungere testo sopra qualsiasi immagine in tutto il sito web.

Nota: esiste una versione gratuita di SeedProd, ma per questa guida utilizzeremo la versione Pro, che offre più funzioni.

Per maggiori dettagli, potete leggere la nostra recensione completa di SeedProd.

Per prima cosa, è necessario installare e attivare il plugin SeedProd. Per maggiori dettagli, consultate la nostra guida passo-passo su come installare un plugin di WordPress.

Al momento dell’attivazione, è necessario inserire la chiave di licenza SeedProd. È possibile ottenere questa chiave accedendo al proprio account SeedProd. Quindi, fare clic sulla scheda “Download”.

Una volta fatto ciò, è possibile copiare la chiave nella sezione “Chiave di licenza”.

The SeedProd Downloads page

A questo punto è possibile incollare questa chiave nell’area di amministrazione di WordPress, andando alla pagina SeedProd ” Impostazioni.

Una volta qui, incollate la vostra chiave nel campo “Chiave di licenza”.

Verifying your SeedProd license

A questo punto è sufficiente fare clic su “Verifica chiave”.

Dopodiché, andiamo su SeedProd Pagine di destinazione e facciamo clic su “Aggiungi una nuova pagina di destinazione”.

SeedProd's page design templates

Il compito successivo è quello di scegliere un modello, che sarà il punto di partenza della vostra pagina. Indipendentemente dal modello SeedProd scelto, è possibile personalizzare ogni parte del modello per adattarlo perfettamente al proprio sito web e al proprio marchio.

Se si preferisce iniziare con una tela vuota, è possibile fare clic su “Modello vuoto”.

The SeedProd ready-made templates

In tutte le nostre immagini, utilizziamo il modello Tasty Squeeze Page, che è perfetto per ottenere più campagne di abbonamenti.

Una volta trovato un modello che si desidera utilizzare, passarci sopra il mouse. È quindi possibile fare clic sull’icona “Anteprima”.

SeedProd's professionally-designed templates

Viene visualizzata un’anteprima del modello.

Se l’aspetto di questo modello vi soddisfa, fate clic sul pulsante “Scegli questo modello”.

A lead generation and squeeze template

Nel campo “Nome della pagina”, digitare un nome per la pagina.

Per impostazione predefinita, SeedProd utilizzerà questo nome come URL della pagina. Se si desidera modificare questo URL creato automaticamente, è sufficiente modificare il testo nel campo “URL della pagina”.

Creating a custom page layout with SeedProd

Quando si è soddisfatti delle informazioni inserite, fare clic sul pulsante “Salva e inizia a modificare la pagina”. Questo aprirà il modello nell’editor drag-and-drop di SeedProd.

Nella barra laterale di sinistra sono visibili tutti i blocchi e le sezioni che si possono aggiungere alla pagina mediante trascinamento.

Adding blocks to your SeedProd design

A meno che non si stia utilizzando il modello vuoto, la pagina SeedProd avrà già alcuni blocchi e sezioni. Per modificare uno qualsiasi di questi contenuti, è sufficiente fare clic per selezionare il blocco o la sezione.

Il menu di sinistra di SeedProd mostrerà ora tutte le impostazioni che si possono utilizzare per personalizzare questo blocco o sezione. Come si può vedere nell’immagine seguente, se si fa clic su un blocco Titolo, è possibile modificare il testo visualizzato in questo blocco.

Customizing a ready-made SeedProd page design

Il modo più semplice per aggiungere del testo sopra un’immagine è utilizzare una delle sezioni Hero già pronte di SeedProd.

Queste sezioni hanno un’immagine di sfondo a tutta larghezza, con un testo segnaposto aggiunto in cima. È possibile sostituire l’immagine di sfondo e il testo predefiniti con i propri contenuti.

Per iniziare, fare clic sulla scheda “Sezioni” nel menu di sinistra di SeedProd.

Si può quindi fare clic su “Eroe” per vedere tutte le sezioni eroe già pronte che si possono aggiungere alla pagina.

A SeedProd section template

Per visualizzare l’anteprima di uno qualsiasi di questi modelli di sezione, è sufficiente passare il mouse sul modello e fare clic sull’icona della lente di ingrandimento.

Per aggiungere questa sezione eroe al vostro progetto, fate clic su “Scegli questa sezione”.

A SeedProd hero template

Successivamente, si dovrà sostituire l’immagine stock del modello con una propria immagine. Per farlo, basta fare clic sull’immagine stock per selezionarla.

Quindi, nel menu di sinistra di SeedProd, passate il mouse sull’anteprima “Immagine di sfondo” finché non appare l’icona del cestino.

È quindi possibile fare clic su questa icona per eliminare l’immagine segnaposto.

Deleting a background image in SeedProd

Quindi, fate clic su “Usa la tua immagine”. È possibile scegliere un’immagine dalla libreria multimediale di WordPress o utilizzare un’immagine stock.

SeedProd consente di accedere facilmente a migliaia di immagini stock royalty-free. Per dare un’occhiata alla libreria di immagini stock di SeedProd, cliccate su “Usa un’immagine stock”.

Nella barra di ricerca, digitate una parola o una frase che descriva l’immagine che state cercando e fate clic sul pulsante “Cerca”.

Choosing a SeedProd stock image

SeedProd mostrerà ora tutte le immagini stock che corrispondono al termine di ricerca.

Quando si trova un’immagine che si desidera aggiungere al proprio progetto, è sufficiente fare clic su di essa.

SeedProd's stock image library

Una volta aggiunta un’immagine, si è pronti a sostituire il testo segnaposto.

A tale scopo, fare clic per selezionare il blocco Testo. Quindi, nell’area ‘Testo’, è sufficiente digitare il testo che si desidera utilizzare.

Add text on top of an image using SeedProd

Alcuni dei modelli hero di SeedProd presentano contenuti extra, come i pulsanti di invito all’azione.

Volete modificare questo contenuto? Allora è sufficiente fare clic per selezionare il blocco e apportare le modifiche nel menu di sinistra di SeedProd.

Editing your SeedProd text

Un’altra opzione è quella di eliminare il blocco dal modello dell’eroe.

Per farlo, è sufficiente fare clic per selezionare il blocco e poi fare clic sull’icona del cestino.

Deleting SeedProd sections and blocks

Quando si è soddisfatti del design della pagina, si può fare clic sul pulsante “Salva”.

Da qui si può scegliere di pubblicare la pagina o di salvarla come modello.

Publishing a SeedProd design

Per maggiori dettagli sulla creazione di layout di pagina personalizzati con SeedProd, potete consultare la nostra guida su come creare una landing page in WordPress.

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere testo sopra un’immagine in WordPress. Potreste anche consultare la nostra guida su come modificare in blocco le immagini in primo piano e la nostra scelta dei migliori software di web design.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

5 commentiLascia una risposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

    • WPBeginner Support says

      For what it sounds like you’re wanting, you would want to use method 2 and add a link to that block.

      Admin

  2. Trish says

    Hi Editorial Staff,

    Am a bit disappointed with the WordPress Cover Block in that the text overlay is NOT responsive in Mobile view, sadly, making the text totally unreadable.

    Thought you should know of this issue.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.