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

Le immagini di sfondo possono trasformare completamente l'aspetto e la sensazione del tuo sito WordPress. Ma immagini allungate, allineamento errato o problemi di dimensione del file possono ostacolare. Soprattutto se non sei sicuro di quale metodo utilizzare.

Dalla nostra esperienza nella gestione di decine di siti WordPress, abbiamo imparato che la maggior parte delle persone rende questo processo molto più difficile di quanto debba essere.

La buona notizia è che WordPress offre diverse opzioni integrate per aggiungere immagini di sfondo, oltre a eccellenti plugin che lo rendono ancora più facile. Una volta che conosci i metodi giusti, puoi aggiungere bellissimi sfondi all'intero sito, a singole pagine o a sezioni specifiche in pochi clic.

In questa guida, ti mostreremo 5 modi affidabili per aggiungere immagini di sfondo in WordPress che funzionano per qualsiasi livello di abilità. 🎨

Perché aggiungere un'immagine di sfondo in WordPress?

Aggiungere un'immagine al tuo sito web WordPress può renderlo più attraente per i visitatori. Puoi catturare rapidamente l'attenzione degli utenti e coinvolgerli con i tuoi contenuti.

Ti consente inoltre di personalizzare il design del tuo sito web in base al tuo marchio. Ad esempio, puoi caricare sottili foto dei tuoi prodotti o della mascotte del tuo marchio sullo sfondo.

Inoltre, puoi aggiungere un video di YouTube come sfondo completo o una slideshow di immagini che darà vita ai tuoi contenuti.

Tuttavia, ti suggeriamo di selezionare immagini di sfondo che non siano distraenti o che rendano difficile la lettura dei contenuti sul tuo blog WordPress. Uno sfondo dovrebbe migliorare l'esperienza utente e aiutare a trasmettere il tuo messaggio ai visitatori.

Inoltre, è importante scegliere un'immagine di sfondo che sia ottimizzata per i dispositivi mobili e che non influenzi la velocità del tuo sito web. Altrimenti, danneggerà il tuo SEO di WordPress.

In questo articolo, condivideremo diversi modi per aggiungere un'immagine di sfondo a WordPress.

Tratteremo molteplici metodi, tra cui il personalizzatore del tema di WordPress, l'editor completo del sito, i plugin, i temi builder e altro ancora. Fai semplicemente clic sul link qui sotto per passare alla sezione che preferisci:

• Metodo 1. Aggiungere un'immagine di sfondo utilizzando il personalizzatore del tema di WordPress
• Metodo 2. Aggiungere un'immagine di sfondo personalizzata utilizzando l'editor completo del sito
• Metodo 3. Aggiungere un'immagine di sfondo utilizzando un tema builder di WordPress
• Metodo 4. Aggiungere un'immagine di sfondo utilizzando CSS Hero
• Metodo 5. Aggiungere immagini di sfondo personalizzate ovunque in WordPress utilizzando il codice CSS
• Risorse bonus: Guide ai file di immagini e multimediali per migliorare l'UX del sito WordPress

Pronto? Iniziamo.

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

La maggior parte dei temi WordPress più diffusi supporta sfondi personalizzati. Questa funzionalità ti consente di impostare facilmente un'immagine di sfondo. Consigliamo questo metodo se il tuo tema lo supporta.

Tuttavia, se la tua opzione del menu personalizzatore è mancante, il tuo tema potrebbe avere l'editing completo del sito abilitato. Nella sezione successiva, spiegheremo come utilizzare l'editor completo del sito per modificare la tua immagine di sfondo.

Nel frattempo, per utilizzare il 'Personalizzatore', devi visitare la pagina Aspetto » Personalizza nella tua bacheca di WordPress.

Questo avvierà il personalizzatore del tema di WordPress, che ti consentirà di modificare diverse impostazioni del tema mentre visualizzi un'anteprima live del tuo sito web.

Nota che le opzioni che vedi varieranno in base al tema WordPress che stai utilizzando. In questo tutorial, stiamo utilizzando il tema Sydney.

Se stai utilizzando un tema diverso, potresti dover consultare la documentazione di quel tema. Se non riesci a trovare un'immagine di sfondo nel personalizzatore, puoi anche contattare lo sviluppatore del tema per scoprire come aggiungerne una.

Nelle opzioni del personalizzatore del tema Sydney, devi fare clic su 'Generale' nel pannello a sinistra.

Una volta fatto ciò, vedrai diverse opzioni 'Generali' per personalizzare il tuo tema Sydney.

A questo punto, dovrai fare clic sulla sezione 'Immagine di sfondo'.

Nella schermata successiva, vedrai l'opzione per aggiungere la tua immagine di sfondo.

Procedi e fai clic sul pulsante 'Seleziona immagine'.

Questo aprirà la libreria multimediale di WordPress.

Qui, puoi caricare un'immagine dal tuo computer o selezionarne una che hai precedentemente caricato.

Dopo aver scelto l'immagine per lo sfondo, dovrai fare clic sul pulsante 'Seleziona'.

Questo chiuderà il popup multimediale e vedrai un'anteprima dell'immagine di sfondo selezionata nel personalizzatore del tema.

Nel pannello di sinistra, puoi regolare la posizione dell'immagine (alto, centro, basso, sinistra, destra) per controllare come appare sullo sfondo. Puoi anche ridimensionarla usando il menu a discesa 'Dimensione immagine' menu a discesa per adattarla, riempirla o coprire l'area.

Se desideri che l'immagine si ripeta sullo sfondo, seleziona la casella che dice 'Ripeti immagine di sfondo'. Puoi anche far scorrere l'immagine insieme al contenuto della pagina quando selezioni la casella 'Scorri con la pagina'.

Una volta che sei soddisfatto dell'aspetto, fai clic sul pulsante 'Pubblica' in alto per salvare le tue impostazioni.

Tutto qui. Hai aggiunto con successo un'immagine di sfondo al tuo sito WordPress. Vai avanti e visita il tuo sito web per vederla in azione.

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

Se stai utilizzando un tema WordPress basato su blocchi, puoi aggiungere un'immagine di sfondo personalizzata utilizzando l'editor completo del sito (FSE).

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

Per questo tutorial, utilizzeremo il tema predefinito 'Twenty Twenty-Two'. Per avviare l'editor completo del sito, vai semplicemente su Aspetto » Editor dalla tua area di amministrazione di WordPress.

Una volta nell'editor completo del sito, dovrai aggiungere un blocco 'Copertina' al tuo modello per caricare un'immagine di sfondo.

Fai semplicemente clic sul segno '+' in alto e aggiungi un blocco 'Copertina'.

Per aggiungere un'immagine di sfondo al blocco 'Copertina', fai clic sul pulsante 'Carica' o 'Libreria multimediale'.

Questo aprirà la finestra di caricamento multimediale di WordPress.

Il passaggio successivo consiste nello scegliere un'immagine che desideri utilizzare come sfondo del sito web.

Una volta scelta l'immagine, fai semplicemente clic sul pulsante 'Seleziona'.

Una volta aggiunta l'immagine al blocco 'Copertina', dovrai impostarla come sfondo della pagina.

Per farlo, fai semplicemente clic sull'icona 'Visualizzazione elenco' in alto (icona con 3 trattini). Questo aprirà una vista strutturata degli elementi del tema, come l'intestazione del sito e il piè di pagina.

Dopodiché, trascina e rilascia semplicemente tutti gli elementi del modello sotto il blocco 'Copertina' nella visualizzazione elenco.

Una volta che sono tutti lì sotto, l'immagine del blocco 'Copertina' apparirà come sfondo del sito.

Dopodiché, puoi regolare l'immagine di sfondo facendo clic sul blocco 'Copertina' e selezionando l'icona dell'ingranaggio nell'angolo in alto a destra dello schermo. Questo aprirà il pannello delle impostazioni 'Blocco'.

Qui troverai opzioni per rendere l'immagine uno sfondo fisso, regolare la sua sovrapposizione, modificare il colore e altro ancora.

Al termine, non dimenticare di fare clic sul pulsante 'Salva'.

Ed ecco fatto! Hai aggiunto con successo un'immagine di sfondo utilizzando l'editor completo del sito.

Metodo 3. Aggiungere un'immagine di sfondo utilizzando un tema builder di WordPress

Un altro modo per aggiungere immagini di sfondo personalizzate al tuo sito web è utilizzare un tema builder per WordPress come SeedProd. È il miglior plugin per landing page di WordPress con funzionalità drag-and-drop che ti consente di personalizzare facilmente il design del tuo sito web senza toccare una singola riga di codice.

Utilizziamo anche SeedProd su alcuni dei nostri siti di brand, e ha funzionato molto bene. Per maggiori dettagli sulla nostra esperienza, puoi consultare la nostra estesa recensione di SeedProd.

Per questo tutorial, utilizzeremo la versione SeedProd Pro perché include il theme builder. Esiste anche una versione SeedProd Lite che puoi provare gratuitamente.

Innanzitutto, dovrai installare e attivare il plugin SeedProd. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin WordPress.

Dopo l'attivazione, vedrai la schermata di benvenuto di SeedProd nella tua bacheca di WordPress.

Successivamente, dovrai inserire la tua chiave di licenza e fare clic sul pulsante 'Verifica chiave' per attivare la versione pro del plugin. Puoi trovare la tua chiave di licenza nella tua area account SeedProd.

Una volta che tutto è pronto, dovrai andare su SeedProd » Theme Builder nel tuo pannello di amministrazione di WordPress.

Fai clic sul pulsante 'Temi' in alto.

SeedProd ti offrirà ora diversi modelli di tema tra cui scegliere.

Puoi passare il mouse e fare clic su qualsiasi modello che desideri utilizzare. Per questo tutorial, utilizzeremo il modello di tema 'Starter'.

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

Per aggiungere un'immagine di sfondo che appaia sull'intero sito web e su tutti i modelli di tema, fai clic sull'opzione 'Modifica design' sotto CSS globale.

Nella schermata successiva, vedrai le impostazioni CSS globali che puoi modificare.

Fai semplicemente clic sull'opzione 'Sfondo' per iniziare la personalizzazione.

Dopodiché, vedrai le opzioni 'Immagine di sfondo'.

Fai clic su 'Usa la tua immagine' per caricare la tua foto. In alternativa, puoi fare clic sul pulsante 'Usa un'immagine stock' per cercare un'immagine stock da utilizzare come sfondo del tuo sito web.

Una volta aggiunta un'immagine di sfondo, il builder di SeedProd visualizzerà un'anteprima in tempo reale.

Puoi regolare la posizione dello sfondo, se necessario. Puoi anche scegliere se utilizzare la copertina a schermo intero o ripeterla, tra le altre opzioni.

Inoltre, puoi modificare il livello di oscurità della tua immagine di sfondo spostando il cursore 'Oscura sfondo'. Maggiore è il punteggio, più scura sarà l'immagine.

Una volta terminata la modifica dell'immagine di sfondo, fai semplicemente clic sul pulsante 'Salva' in alto e chiudi le impostazioni CSS globali.

Se desideri aggiungere un'immagine di sfondo personalizzata per diverse parti del tuo sito web, puoi modificare i singoli modelli del tema in SeedProd. Per maggiori dettagli, non esitare a consultare la nostra guida su come creare facilmente un tema WordPress personalizzato.

Metodo 4. Aggiungere un'immagine di sfondo utilizzando CSS Hero

CSS Hero è un plugin WordPress che ti consente di apportare qualsiasi modifica al tuo tema senza codifica.

Puoi aggiungere immagini di sfondo rapidamente in pochi semplici passaggi. Ma prima, dovrai installare e attivare CSS Hero. Per maggiori dettagli, consulta la nostra guida su come installare un plugin di WordPress.

Una volta fatto, puoi iniziare a personalizzare il tuo sito web.

La prima cosa da fare è aprire la tua homepage nel browser. Lì, vedrai il link 'Personalizza con CSS Hero' nella tua barra di amministrazione.

Fai semplicemente clic sul link e vedrai aprirsi le opzioni di CSS Hero.

Una volta dentro, dovrai passare il mouse sull'area a cui desideri aggiungere un'immagine. Quindi, fai clic sull'area per accedere all'opzione 'Sfondo' nella barra laterale sinistra.

Fai clic su 'Sfondo' per vedere le impostazioni per aggiungere un'immagine.

Da lì, fai semplicemente clic su 'Immagine'.

Quindi, puoi scegliere un'immagine da Unsplash o caricare la tua per creare lo sfondo.

Quando fai clic sull'immagine desiderata, vedrai il pulsante 'Applica immagine'.

Quindi, potresti voler scegliere le dimensioni che desideri per la tua immagine. Consigliamo di scegliere la versione grande in modo che si estenda su tutta la pagina.

Infine, puoi premere 'Salva e pubblica' in basso per salvare l'immagine di sfondo per il tuo sito.

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

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

Ad esempio, se hai una categoria sul tuo sito web 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">

Puoi utilizzare lo strumento di ispezione per vedere quali classi CSS WordPress aggiunge al tag body. Ecco un esempio:

Puoi usare la classe CSS category-tv o category-4 per stilizzare diversamente solo questa pagina di categoria.

Ad esempio, aggiungiamo un'immagine di sfondo personalizzata alla pagina archivio della categoria.

Sebbene sia pratica comune modificare il file functions.php di un tema per aggiungere codice CSS, è insicuro e non molto adatto ai principianti. Un piccolo errore e rischi di compromettere il tuo sito web.

Ecco perché consigliamo sempre di utilizzare WPCode invece. È il miglior plugin per aggiungere snippet di codice personalizzati senza troppi problemi.

Usiamo WPCode per aggiungere e gestire snippet di codice tra i nostri brand. È stato un modo semplice ed efficace per rimanere organizzati e mantenere tutto in funzione senza intoppi. Se desideri saperne di più, consulta la nostra recensione dettagliata di WPCode.

Per fare ciò, installiamo e attiviamo il plugin WPCode. Se hai bisogno di aiuto, puoi consultare la nostra guida su come installare un plugin di WordPress.

Dopo l'attivazione, naviga semplicemente su Snippet di codice » + Aggiungi nuovo dalla tua area di amministrazione di WordPress.

Nella schermata successiva, dovrai passare il mouse sopra l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)' e fare clic sul pulsante 'Usa snippet' quando appare.

Nella schermata successiva, puoi iniziare aggiungendo un titolo per il tuo snippet CSS personalizzato. Potresti voler scegliere qualcosa di semplice e pertinente, poiché questo ti aiuterà a riconoscere il codice in seguito.

Dopodiché, puoi digitare o incollare il seguente CSS personalizzato nella casella 'Anteprima codice'.

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 dimenticare di sostituire l'URL dell'immagine di sfondo e la classe della categoria con quelli del tuo sito.

Ecco come potrebbe apparire nell'editor di WPCode:

Dovrai quindi impostare il 'Tipo di codice' selezionando 'Snippet CSS' dal menu a discesa.

Una volta che tutto sembra a posto, puoi attivare l'interruttore per abilitare lo snippet di codice e fare clic su 'Salva Snippet'.

Inoltre, puoi aggiungere sfondi personalizzati a singoli post e pagine.

WordPress ha una classe CSS con l'ID del post o della pagina nel tag body. Puoi usare lo stesso codice CSS e semplicemente sostituire .category-tv con la classe CSS specifica del post.

Per maggiori dettagli, consulta il nostro tutorial su come aggiungere CSS personalizzato in WordPress.

Risorse bonus: Guide ai file di immagini e multimediali per migliorare l'UX del sito WordPress

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere un'immagine di sfondo in WordPress. Potresti anche voler consultare la nostra guida su:

• Come aggiungere correttamente immagini in WordPress
• Come creare una galleria di immagini in WordPress
• Come creare uno slider video e immagini per WordPress
• Come aggiungere miniature ai link dei post precedenti e successivi in WordPress
• Come incorporare Spotify in WordPress
• Come incorporare Apple Podcasts in WordPress
• Il miglior software per la progettazione di siti web
• Come ottimizzare le immagini per le prestazioni web senza perdere qualità

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.