Come aggiungere un'immagine di sfondo in WordPress

Vuoi aggiungere un'immagine di sfondo al tuo sito WordPress? Le immagini di sfondo possono essere utilizzate per rendere il tuo sito Web più accattivante ed esteticamente piacevole. In questo articolo, ti mostreremo come aggiungere facilmente un'immagine di sfondo al tuo sito WordPress.

Video Tutorial

Se il video non ti piace o hai bisogno di ulteriori istruzioni, continua a leggere.

Metodo 1. Aggiungi un'immagine di sfondo usando le impostazioni del tema di WordPress

La maggior parte dei temi gratuiti e premium di WordPress ha un supporto personalizzato. Questa funzione ti consente di impostare facilmente un'immagine di sfondo sul tuo sito WordPress.

Se il tuo tema supporta funzionalità di sfondo personalizzate, ti consigliamo di utilizzare questo metodo per aggiungere un'immagine di sfondo al tuo sito WordPress. Tuttavia, se il tuo tema non supporta la funzionalità di sfondo personalizzata, puoi utilizzare altri metodi in questo articolo.

Per prima cosa devi visitare il Aspetto »Personalizza pagina nel tuo amministratore di WordPress. In questo modo verrà avviato il personalizzatore del tema WordPress in cui è possibile modificare diverse impostazioni del tema durante la visualizzazione di un'anteprima live del sito Web.

Successivamente, è necessario fare clic sull'opzione 'Immagine di sfondo'. Il pannello scorrerà e ti mostrerà le opzioni per caricare o selezionare un'immagine di sfondo per il tuo sito web.

Fare clic sul pulsante Seleziona immagine per continuare.

Verrà visualizzata la finestra popup di caricamento media di WordPress in cui è possibile caricare un'immagine dal tuo computer. È inoltre possibile selezionare un'immagine caricata in precedenza dalla libreria multimediale.

Successivamente, è necessario fare clic sul pulsante Scegli immagine dopo aver caricato o selezionato l'immagine che si desidera utilizzare come sfondo.

Questo chiuderà il popup del media uploader e vedrai l'anteprima dell'immagine selezionata nel customizer del tema.

Sotto l'immagine potrai anche vedere le opzioni dell'immagine di sfondo. In preimpostazione, è possibile selezionare la modalità di visualizzazione dell'immagine di sfondo: schermo di riempimento, schermo di adattamento, ripetizione o personalizzato.

Puoi anche selezionare la posizione dell'immagine di sfondo cliccando sulle frecce qui sotto. Cliccando sul centro si allinea l'immagine al centro dello schermo.

Non dimenticare di fare clic sul pulsante "Salva e pubblica" nella parte superiore per memorizzare le tue impostazioni. Questo è tutto, hai aggiunto con successo un'immagine di sfondo al tuo sito WordPress.

Vai avanti e visita il tuo sito web per vederlo in azione.

Metodo 2. Aggiungi un'immagine di sfondo personalizzata in WordPress usando il plugin

Questo metodo è molto più flessibile. Funziona con qualsiasi tema WordPress e ti consente di impostare più immagini di sfondo. Puoi anche impostare sfondi diversi per qualsiasi post, pagina, categoria o qualsiasi altra sezione del tuo sito WordPress.

Rende automaticamente tutte le immagini di sfondo a schermo intero e reattivi ai dispositivi mobili. Ciò significa che l'immagine di sfondo si ridimensionerà automaticamente su dispositivi più piccoli.

Innanzitutto, è necessario installare e attivare il plug-in Background Pro a schermo intero. Per ulteriori dettagli, consulta la nostra guida passo passo su come installare un plug-in di WordPress.

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

Ti verrà chiesto di aggiungere la tua chiave di licenza. Puoi ottenere queste informazioni dall'email che hai ricevuto dopo aver acquistato il plug-in o dal tuo account sul sito web del plugin.

Successivamente, è necessario fare clic sul pulsante Salva impostazioni per memorizzare le modifiche. Ora sei pronto per iniziare ad aggiungere immagini di sfondo al tuo sito WordPress.

Vai avanti e fai clic sul pulsante "Aggiungi nuova immagine" nella pagina delle impostazioni del plugin. Questo ti porterà alla schermata di caricamento dell'immagine di sfondo.

Fai clic sul pulsante Scegli immagine per caricare o selezionare un'immagine. Non appena si seleziona l'immagine, sarà possibile vedere un'anteprima in diretta dell'immagine sullo schermo.

Successivamente, è necessario fornire un nome per questa immagine. Questo nome verrà utilizzato internamente, quindi puoi usare qualsiasi cosa qui.

Infine, è necessario selezionare la posizione in cui si desidera utilizzare questa immagine come pagina di sfondo. Full Screen Background Pro ti consente di impostare le immagini come sfondo a livello globale, oppure puoi scegliere tra diverse sezioni del tuo sito Web come categorie, archivi, prima pagina, pagina del blog, ecc..

Non dimenticare di fare clic sul pulsante Salva immagine per salvare l'immagine di sfondo.

Puoi aggiungere tutte le immagini che desideri visitando Aspetto »Immagine a schermo intero BG pagina.

Se imposti più di un'immagine da utilizzare globalmente, il plug-in inizierà automaticamente a visualizzare le immagini di sfondo come slideshow.

È possibile regolare il tempo necessario per l'attenuazione di un'immagine e il tempo dopo il quale la nuova immagine di sfondo inizia a sfumare.

Il tempo che inserisci qui è in millisecondi. Se vuoi che l'immagine di sfondo si dissolva dopo 20 secondi, dovrai inserire 20000.

Non dimenticare di fare clic sul pulsante Salva impostazioni per memorizzare le modifiche.

Impostazione dell'immagine di sfondo per singoli messaggi, pagine, categorie, ecc

Full Screen Background Pro consente inoltre di impostare immagini di sfondo per singoli post, pagine, categorie, tag, ecc.

Basta modificare il post / pagina in cui si desidera visualizzare un'immagine di sfondo diversa. Nella schermata di modifica post, noterai la nuova casella "Immagine di sfondo a schermo intero" sotto l'editor di post.

Per utilizzare un'immagine di sfondo per una categoria specifica, è necessario visitare Aspetto »Immagine a schermo intero BG pagina e quindi fare clic sul pulsante 'Aggiungi nuova immagine'.

Dopo aver caricato l'immagine, puoi selezionare "Categoria" come contesto in cui desideri visualizzare l'immagine di sfondo.

Ora inserisci l'ID o lo slug specifico della categoria in cui desideri visualizzare l'immagine. Consulta la nostra guida su come trovare l'ID di categoria in WordPress.

Non dimenticare di salvare l'immagine per memorizzare le tue impostazioni.

Metodo 3. Aggiungi immagini di sfondo personalizzate ovunque in WordPress usando i CSS

Per impostazione predefinita, WordPress aggiunge diverse classi CSS a diversi elementi HTML in tutto il tuo sito WordPress. Puoi facilmente aggiungere immagini di sfondo personalizzate a singoli post, categorie, autore 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 del corpo quando qualcuno vedrà la pagina della categoria TV.

Puoi usare lo strumento inspect per vedere esattamente quali classi CSS vengono aggiunte da WordPress al body tag.

Puoi usare entrambi categoria-tv o categoria-4 Classe CSS per modellare diversamente questa pagina di categoria.

Aggiungiamo un'immagine di sfondo personalizzata a una pagina di archivio di categorie. Dovrai aggiungere questo CSS personalizzato al tuo tema.

 body.category-tv background-image: url ("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); posizione di sfondo: centro; dimensione di sfondo: copertina; background-repeat: no-repeat; background-attachment: fixed;  

Non dimenticare di sostituire l'URL dell'immagine di sfondo e la classe di categoria con la tua categoria.

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

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere un'immagine di sfondo in WordPress. Potresti anche voler vedere il nostro elenco di trucchi estremamente utili per il file di funzioni di WordPress.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.