Come aggiungere un’immagine di sfondo in WordPress (6 modi semplici)

Volete aggiungere un’immagine di sfondo al vostro sito WordPress?

Le immagini di sfondo possono rendere il vostro sito web più coinvolgente e vivace.

In questo articolo vi mostreremo come aggiungere facilmente un’immagine di sfondo al vostro sito WordPress.

Perché aggiungere un’immagine di sfondo a WordPress?

L’aggiunta di un’immagine al vostro sito WordPress può renderlo più attraente per i visitatori. Potete catturare rapidamente l’attenzione degli utenti e coinvolgerli con i vostri contenuti.

Inoltre, consente di personalizzare il design del sito web in base al proprio marchio. Ad esempio, è possibile caricare sullo sfondo foto discrete dei propri prodotti o della mascotte del marchio.

Inoltre, è possibile aggiungere un video di YouTube come sfondo completo o una presentazione di immagini che darà vita ai contenuti.

Tuttavia, suggeriamo di scegliere immagini di sfondo che non distraggano o rendano difficile la lettura dei contenuti del vostro blog WordPress. Lo sfondo deve migliorare l’esperienza dell’utente e contribuire a trasmettere il vostro messaggio ai visitatori.

È anche importante scegliere un’immagine di sfondo che sia compatibile con i dispositivi mobili e che non influisca sulla velocità del sito web. Altrimenti, danneggerà la SEO di WordPress.

Detto questo, esaminiamo i diversi modi in cui è possibile aggiungere un’immagine di sfondo a WordPress. Verranno illustrati diversi metodi, tra cui l’uso del personalizzatore di temi di WordPress, l’editor completo del sito, un plugin, il costruttore di temi e altro ancora.

È sufficiente fare clic su un link qui sotto per passare alla sezione desiderata:

• Aggiungere un’immagine di sfondo utilizzando il personalizzatore del tema WordPress
• Aggiungere un’immagine di sfondo personalizzata utilizzando l’editor del sito completo
• Aggiungere un’immagine di sfondo utilizzando il Theme Builder di WordPress
• Aggiungere un’immagine di sfondo personalizzata in WordPress utilizzando un plugin
• Aggiungere immagini di sfondo utilizzando CSS Hero
• Aggiungere immagini di sfondo personalizzate ovunque in WordPress utilizzando il codice CSS

Metodo 1. Aggiungere un’immagine di sfondo utilizzando il personalizzatore del tema WordPress

La maggior parte dei temi WordPress più diffusi è dotata di supporto per lo sfondo personalizzato. Questa funzione consente di impostare facilmente un’immagine di sfondo e consigliamo questo metodo se il tema lo supporta.

Tuttavia, se l’opzione del menu del customizer è assente, è possibile che il tema abbia abilitato l’editor completo del sito. Nella prossima sezione vedremo come utilizzare l’editor completo del sito per modificare l’immagine di sfondo.

Per utilizzare il Customizer, è necessario visitare la pagina Aspetto ” Personalizza nell’amministrazione di WordPress. In questo modo si aprirà il personalizzatore del tema di WordPress, dove è possibile modificare diverse impostazioni del tema visualizzando un’anteprima live del sito web.

Una cosa importante da ricordare è che le opzioni visualizzate variano in base al tema WordPress utilizzato. Per questa esercitazione, utilizziamo il tema Astra.

Se si utilizza un tema diverso, potrebbe essere necessario consultare la documentazione del tema o contattare lo sviluppatore del tema per scoprire come aggiungere un’immagine di sfondo, se non è possibile trovarla nel personalizzatore.

Nelle opzioni del personalizzatore del tema Astra, è necessario fare clic su “Globale” nel pannello a sinistra.

Successivamente, verranno visualizzate diverse opzioni globali per personalizzare il tema Astra.

Cliccate sulla sezione “Colori”.

Qui è possibile modificare i colori del tema, compreso il colore dello sfondo. È inoltre possibile personalizzare i link, il testo del corpo, le intestazioni, i bordi e altro ancora.

Per aggiungere un’immagine di sfondo, scorrere fino alla sezione “Colore della superficie”. Quindi si può fare clic sull’opzione “Sfondo del sito” e passare alla scheda “Immagine”.

A questo punto, è sufficiente fare clic sul pulsante “Seleziona immagine di sfondo”.

Si aprirà la libreria multimediale di WordPress, dove è possibile caricare un’immagine dal computer o selezionarne una precedentemente caricata.

Dopo aver scelto l’immagine per lo sfondo, è necessario fare clic sul pulsante “Seleziona”.

In questo modo si chiuderà la finestra a comparsa dei media e si vedrà un’anteprima dell’immagine di sfondo selezionata nel personalizzatore del tema.

Non dimenticate di fare clic sul pulsante “Pubblica” in alto per salvare le impostazioni.

Questo è tutto. Avete aggiunto con successo un’immagine di sfondo al vostro sito WordPress. Visitate il vostro sito per vederla in azione.

Metodo 2. Aggiungere un’immagine di sfondo personalizzata utilizzando l’editor del sito completo

Se si utilizza un tema WordPress a blocchi, è possibile aggiungere un’immagine di sfondo personalizzata utilizzando l’editor completo del sito (FSE).

L’editor completo del sito consente di modificare il design del sito web utilizzando i blocchi. È proprio come modificare un post o una pagina del blog utilizzando l’editor di blocchi di WordPress.

Per questa esercitazione, utilizzeremo il tema predefinito Twenty Twenty-Two. Per lanciare l’editor completo del sito, basta andare su Aspetto ” Editor dalla dashboard di WordPress.

Una volta entrati nell’editor completo del sito, dovrete aggiungere un blocco Cover al vostro modello per caricare un’immagine di sfondo.

È sufficiente fare clic sul segno “+” in alto e aggiungere un blocco di copertina.

Fare clic sul pulsante “Carica” o “Libreria multimediale” nel blocco Copertina per aggiungere un’immagine di sfondo al blocco.

Si aprirà il popup del caricatore multimediale di WordPress.

È possibile scegliere un’immagine da utilizzare come sfondo del sito web.

Una volta scelta l’immagine, è sufficiente fare clic sul pulsante “Seleziona”.

Una volta aggiunta l’immagine al blocco Cover, il passo successivo è impostarla come sfondo della pagina.

A tal fine, fare clic sull’icona Vista elenco in alto (icona con 3 trattini) per aprire una vista schematica degli elementi del tema, come l’intestazione e il piè di pagina del sito.

A questo punto, è sufficiente trascinare e rilasciare tutti gli elementi del modello sotto il blocco Cover nella vista elenco.

Quando sono tutti lì sotto, l’immagine del blocco Cover apparirà come sfondo del sito.

Successivamente, è possibile regolare l’immagine di sfondo facendo clic sul blocco Copertina e selezionando l’icona dell’ingranaggio nell’angolo in alto a destra dello schermo. Si aprirà il pannello delle impostazioni del blocco.

Sono disponibili opzioni per rendere l’immagine uno sfondo fisso, uno sfondo ripetuto, regolare la sovrapposizione, modificare il colore e altro ancora.

Al termine, non dimenticate di fare clic sul pulsante “Salva”.

Ecco fatto! Avete aggiunto con successo un’immagine di sfondo utilizzando l’editor completo del sito.

Metodo 3. Aggiungere un’immagine di sfondo con il costruttore di temi WordPress

Un altro modo per aggiungere immagini di sfondo personalizzate al vostro sito web è utilizzare un costruttore di temi WordPress come SeedProd.

È il miglior plugin per pagine di destinazione e costruttore di siti web per WordPress. La funzionalità drag and drop consente di personalizzare facilmente il design del sito web senza toccare una sola riga di codice.

Per questo tutorial, utilizzeremo la versione SeedProd Pro perché include il costruttore di temi. Esiste anche una versione SeedProd Lite che si può provare gratuitamente.

Per prima cosa, è necessario installare e attivare il plugin SeedProd. Se avete bisogno di aiuto, consultate la nostra guida su come installare un plugin di WordPress.

Una volta che il plugin è attivo, verrà visualizzata la schermata di benvenuto di SeedProd nella dashboard di WordPress. Quindi, è sufficiente inserire la chiave di licenza e fare clic sul pulsante “Verifica chiave”. La chiave di licenza si trova nell’area del proprio account SeedProd.

Successivamente, è necessario andare su SeedProd ” Theme Builder nel pannello di amministrazione di WordPress.

Fare clic sul pulsante “Temi” in alto.

SeedProd offre ora diversi modelli di temi tra cui scegliere.

È possibile passare il mouse su qualsiasi modello che si desidera utilizzare e fare clic su di esso. Per questa esercitazione utilizzeremo il modello del tema ‘Starter’.

Da qui, SeedProd genererà diversi modelli come la homepage, il singolo post, la singola pagina, la barra laterale, l’intestazione e altro ancora.

Per aggiungere un’immagine di sfondo che appaia sull’intero sito web e su tutti i template del tema, fare clic sull’opzione “Modifica design” in Global CSS.

Nella schermata successiva, vengono visualizzate le impostazioni CSS globali che possono essere modificate.

È sufficiente fare clic sull’opzione “Sfondo”.

Successivamente, verranno visualizzate le opzioni relative all’immagine di sfondo.

Cliccate sul pulsante “Usa la tua immagine” per caricare la vostra foto o sul pulsante “Usa un’immagine stock” per cercare un’immagine stock da usare come sfondo del vostro sito web.

Una volta aggiunta l’immagine di sfondo, il costruttore SeedProd visualizza un’anteprima dal vivo.

Il plugin offre anche opzioni per modificare la posizione dello sfondo. È possibile scegliere se utilizzare la copertina a schermo intero, se metterla in ripetizione e altro ancora.

Inoltre, è possibile modificare la luminosità dell’immagine di sfondo spostando il cursore “Dim Background”. Più alto è il punteggio, più scura sarà l’immagine.

Una volta terminata la modifica dell’immagine di sfondo, è sufficiente fare clic sul pulsante “Salva” in alto e chiudere le Impostazioni CSS globali.

Se si desidera aggiungere un’immagine di sfondo personalizzata per diverse parti del sito, è possibile modificare i singoli modelli di tema in SeedProd.

Per maggiori dettagli, consultate la nostra guida su come creare facilmente un tema WordPress personalizzato.

Metodo 4. Aggiungere un’immagine di sfondo personalizzata in WordPress utilizzando un plugin

L’uso di un plugin di WordPress per aggiungere un’immagine di sfondo è molto più flessibile delle opzioni integrate di WordPress.

Per iniziare, è necessario installare e attivare il plugin Full Screen Background Pro. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Questo plugin consente di impostare uno sfondo diverso per qualsiasi post, pagina, categoria e altro ancora. In più, saranno automaticamente a schermo intero e si adatteranno ai dispositivi mobili.

Dopo l’attivazione, è necessario visitare Aspetto ” Immagine BG a schermo intero per configurare le impostazioni del plugin.

Vi verrà chiesto di aggiungere la vostra chiave di licenza. È possibile ottenere queste informazioni dall’e-mail ricevuta dopo l’acquisto del plugin o dal proprio account sul sito web del plugin.

Successivamente, è necessario fare clic sul pulsante “Salva opzioni” per attivare la chiave. Ora siete pronti per iniziare ad aggiungere immagini di sfondo al vostro sito WordPress.

Fare clic sul pulsante “Aggiungi nuova immagine” nella pagina delle impostazioni del plugin.

A questo punto dovrebbe apparire la schermata di caricamento dell’immagine di sfondo.

Fare clic sul pulsante “Scegli immagine” per caricare o selezionare un’immagine. Una volta selezionata l’immagine, sarà possibile vederne un’anteprima dal vivo sullo schermo.

Successivamente, è necessario fornire un nome all’immagine. Questo nome è solo per voi, quindi potete digitare qualsiasi cosa. Infine, è necessario selezionare il luogo in cui si desidera utilizzare questa immagine come pagina di sfondo.

Una volta scelto se sarà lo sfondo dell’intero sito, dei post, delle categorie, degli archivi o di altre parti, non dimenticate di salvare le modifiche.

È possibile aggiungere tutte le immagini desiderate a diverse aree del sito visitando la pagina Aspetto ” Immagine BG a schermo intero e ripetendo questa procedura.

Se si imposta più di un’immagine da utilizzare globalmente o per i post, le pagine e le categorie, il plugin inizierà automaticamente a visualizzare le immagini di sfondo come una presentazione.

È possibile regolare il tempo di dissolvenza di un’immagine e il tempo dopo il quale inizia la dissolvenza di una nuova immagine di sfondo nelle Impostazioni del plugin.

Il tempo immesso è espresso in millisecondi. 1 secondo corrisponde a 1000 millisecondi. Se si desidera che l’immagine di sfondo svanisca dopo 20 secondi, è necessario immettere 20000.

Non dimenticate di fare clic sul pulsante “Salva opzioni” per memorizzare le modifiche.

Immagini di sfondo per post, pagine e categorie

Full Screen Background Pro consente anche di impostare immagini di sfondo per singoli post, pagine, categorie, tag e altro ancora.

È sufficiente modificare il post/pagina in cui si desidera visualizzare un’immagine di sfondo diversa. Nella schermata di modifica del post, si noterà la nuova casella “Immagine di sfondo a schermo intero” sotto l’editor del post.

Per utilizzare un’immagine di sfondo per le categorie, i post e le pagine, è necessario visitare la pagina Aspetto ” Immagine BG a schermo intero e poi fare clic sul pulsante “Aggiungi nuova immagine”.

Dopo aver caricato l’immagine, è possibile selezionare una categoria, i post, le pagine, gli archivi e altre opzioni dal menu a discesa “Scegli il contesto in cui visualizzare questa immagine”.

Supponiamo di voler mostrare un’immagine di sfondo per le pagine delle categorie. A tale scopo, è sufficiente selezionare “Categoria” dal menu a discesa.

Il plugin offre anche un’opzione per limitare l’immagine di sfondo a categorie, post e pagine specifiche.

Ad esempio, se si desidera aggiungere un’immagine di sfondo personalizzata per categorie specifiche, è sufficiente inserire i nomi delle categorie nel campo “Seleziona le categorie a cui limitare le immagini”.

Non dimenticare di salvare l’immagine per memorizzare le impostazioni.

Ora avete aggiunto con successo un’immagine di sfondo per determinati post, pagine e categorie.

Metodo 5. Aggiungere immagini di sfondo usando CSS Hero

CSS Hero è un plugin per WordPress che consente di apportare modifiche al tema senza toccare una sola riga di codice.

È possibile aggiungere rapidamente immagini di sfondo in pochi semplici passi. Innanzitutto, è necessario installare e attivare CSS Hero. Per maggiori dettagli, consultate la nostra guida su come installare un plugin di WordPress.

Una volta fatto questo, è il momento di iniziare a personalizzare il sito web. Aprite la vostra homepage nel browser. Vedrete il link “Personalizza con CSS Hero” nella barra di amministrazione.

Dopo aver fatto clic su questo link, si apriranno le opzioni di CSS Hero. Passare il mouse sull’area a cui si desidera aggiungere un’immagine.

Facendo clic sull’area selezionata, è possibile visualizzare l’opzione ‘Sfondo’ nella barra laterale sinistra.

Fare clic su “Sfondo” per visualizzare le impostazioni per l’aggiunta di un’immagine.

Da qui, si può fare clic su “Immagine”. A questo punto è possibile scegliere un’immagine da Unsplash o caricare la propria per creare lo sfondo.

Quando si fa clic sull’immagine desiderata, viene visualizzato il pulsante “Applica immagine”. A questo punto è possibile scegliere le dimensioni dell’immagine. È possibile scegliere la versione grande, in modo che si estenda su tutta la pagina.

Premete “Salva e pubblica” in basso per salvare l’immagine di sfondo per il vostro sito.

Metodo 6. Aggiungere immagini di sfondo personalizzate ovunque in WordPress utilizzando il codice CSS

Per impostazione predefinita, WordPress aggiunge diverse classi CSS a diversi elementi HTML del vostro sito WordPress. È possibile aggiungere facilmente immagini di sfondo personalizzate a singoli post, categorie, autori e altre pagine utilizzando queste classi CSS generate da WordPress.

Ad esempio, se sul vostro sito web avete una categoria chiamata TV, WordPress aggiungerà automaticamente queste classi CSS al tag body quando qualcuno visualizza la pagina della categoria TV.

<body class="archive category category-tv category-4">

È possibile utilizzare lo strumento Inspect per vedere esattamente quali classi CSS vengono aggiunte da WordPress al tag body.

È possibile utilizzare la classe CSS category-tv o category-4 per creare uno stile diverso solo per questa pagina di categoria.

Aggiungiamo un’immagine di sfondo personalizzata alla pagina dell’archivio di una categoria. È necessario aggiungere questo CSS personalizzato al tema.

body.category-tv {
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Non dimenticate di sostituire l’URL dell’immagine di sfondo e la classe della categoria con quelle del vostro sito.

È anche possibile aggiungere sfondi personalizzati a singoli post e pagine. WordPress aggiunge una classe CSS con l’ID del post o della pagina nel tag body. È possibile utilizzare lo stesso codice CSS, basta sostituire .category-tv con la classe CSS specifica del post.

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere un’immagine di sfondo in WordPress. Potreste anche voler consultare la nostra guida su come avviare un negozio online e sul miglior software di progettazione di siti web.

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