Come aggiungere correttamente le immagini di sfondo di WordPress al tuo sito Web?

Aggiungere immagini di sfondo di WordPress al tuo sito Web è facile? La risposta è per la maggior parte sì a meno che il tuo tema non lo supporti.

La verità è che molti temi WordPress in questi giorni hanno offerto alcuni modi semplici per aggiungere e modificare le immagini di sfondo esistenti.

Puoi anche modificare le immagini di sfondo di WordPress utilizzando CSS o un plug-in, che apre le opzioni per impostare l'immagine di sfondo su pagine, post e categorie.

Questo articolo ti mostrerà come fare tutto quanto sopra per far risaltare il tuo sito web con un aspetto accattivante.

Cosa sono le immagini di sfondo di WordPress ?

Un'immagine di sfondo di WordPress è un'immagine applicata dietro il contenuto principale. Invece di essere l'obiettivo principale del tuo sito web, come l'immagine di un eroe, sono spesso più sottili e completano altri contenuti delle tue pagine web.

Oltre ad aiutare a creare pagine Web che offrono una migliore esperienza di lettura, le immagini di sfondo WP offrono molte possibilità di progettazione che distinguono il tuo sito Web dalla concorrenza.

Essere diversi dai concorrenti significa aumentare la consapevolezza del tuo marchio dedicando uno sforzo extra alla progettazione del tuo sito Web, il che non è sempre facile. In questi casi, puoi chiedere a un'agenzia digitale servizi di web design professionale.

Ma perché vuoi cambiare lo sfondo? Bene, quello predefinito potrebbe non piacerti o non assomigliare al tuo marchio. O forse non è affatto un'immagine, solo un colore solido. O forse all'inizio amavi quello esistente, ma ora ti sei stufato.

Qualunque sia la ragione, sperimentiamo di cambiarla.

Usa la personalizzazione di WordPress predefinita per aggiungere un'immagine di sfondo di WordPress

I temi WordPress di solito offrono un modo semplice per utilizzare un colore o un'immagine sullo sfondo. La maggior parte delle persone sceglie di cambiare il colore di sfondo che meglio si adatta al marchio e al gusto del proprio sito.

In questa guida utilizzeremo Woostify, un fantastico tema per i siti di eCommerce. A seconda del tema, il metodo potrebbe differire leggermente.

1. Dalla dashboard di WordPress, vai su Aspetto > Sfondo/Sfondo o Aspetto > Personalizza > Sfondo .

2. Fare clic sul pulsante Seleziona immagine per aprire il Catalogo multimediale.

3. Scegli l'immagine desiderata. Puoi caricarlo dal tuo computer o selezionarne uno esistente dalla Libreria multimediale.

4. Fai clic sul pulsante Scegli immagine quando sei felice.
5. Se ti piace quello che vedi nell'Anteprima, fai clic sul pulsante Pubblica . E questo è tutto!

Inoltre, WordPress offre un semplice strumento di modifica delle immagini di sfondo. Puoi sperimentarlo per vedere quale dimensione, posizione, ecc. È la migliore.

Non preoccuparti di rimanere bloccato con qualcosa. È facile tornare alle impostazioni e cambiare lo sfondo (e le relative opzioni) ogni volta che vuoi.

Usa Elementor Page Builder per aggiungere immagini di sfondo di WordPress a un post/pagina

Elementor è un generatore di pagine prevalente che accelera notevolmente la produzione di siti Web. Offre un plug-in gratuito che puoi utilizzare per aggiungere immagini di sfondo di WordPress.

1. Per iniziare, devi installare e attivare il plug-in Elementor.
2. Per prima cosa, vai al post o alla pagina di tua scelta. Una volta nell'editor di pagine WordPress predefinito, fai clic sul pulsante Modifica con Elementor .

Verrà aperto l'editor di Elementor. Sul lato sinistro vedrai un menu che elenca tutti i blocchi drag-and-drop per costruire e modificare il tuo post/pagina.

3. Fai clic sulla piccola icona delle impostazioni nell'angolo in basso a sinistra del generatore di pagine.

4. Quindi, scegli la scheda Stile .

5. Successivamente, fai clic sull'icona del pennello per aggiungere un'immagine di sfondo di WordPress .

6. Quindi, fai clic sul pulsante Scegli immagine per visualizzare la Libreria multimediale.

7. Scegli l'immagine desiderata. Puoi caricarlo dal tuo computer o selezionarne uno esistente dalla Libreria multimediale.

8. Quindi, fai clic sul pulsante "Inserisci supporto" nell'angolo in basso a destra.

Ora, l'immagine di sfondo selezionata dovrebbe apparire nell'anteprima a destra. Potrebbe essere necessario modificare altri contenuti per garantire che elementi come immagini e testo vengano visualizzati correttamente.

9. Ricordati di premere il pulsante "AGGIORNA" per salvare tutte le modifiche e aggiornare il post/la pagina.

Inoltre, Elementor fornisce alcune regolazioni per le immagini di sfondo di WordPress come Posizione, Allegato, Ripeti, ecc. Sentiti libero di sperimentarle per capire lo sfondo migliore.

Usa un plugin per aggiungere immagini di sfondo di WordPress

Ci sono diversi plugin gratuiti ma eccellenti che possono fare il lavoro di aggiungere immagini di sfondo di WordPress . Ad esempio semplice immagine di sfondo a schermo intero, sfondi WordPress avanzati, gestione sfondo completo, ecc.

Aggiungi un'immagine di sfondo di WordPress per l'intero sito

In questa guida, utilizzeremo l'immagine di sfondo a schermo intero semplice in quanto è semplice, da cui il nome.

Questo plugin fornisce una semplice installazione e configurazione di un'immagine di sfondo di WordPress per il tuo sito web. Ridimensiona automaticamente l'immagine con il browser. Quindi riempie sempre lo schermo, indipendentemente dai dispositivi utilizzati dai visitatori.

Per metterlo in atto bastano pochi semplici passaggi. È disponibile una versione a pagamento che aggiunge funzionalità extra. Tuttavia, quello gratuito è tutto ciò di cui abbiamo bisogno.

1. Installa e attiva il plugin Simple Screen Background Image.
2. Dalla dashboard di WordPress, vai su Aspetto > Immagine BG a schermo intero .

3. Fare clic sul pulsante Scegli immagine per aprire il Catalogo multimediale.

4. Scegli l'immagine desiderata. Puoi caricarlo dal tuo computer o selezionarne uno esistente dalla Libreria multimediale.

5. Fai clic sul pulsante Scegli immagine quando sei felice.
6. Infine, fai clic sul pulsante "Salva opzioni" e controlla il tuo sito web. L'immagine dovrebbe ora essere visualizzata sul sito come immagine di sfondo di WordPress a schermo intero.

Tieni presente che l'impostazione del plug-in per le immagini di sfondo di WordPress ha la precedenza sul Personalizzatore di WordPress predefinito. Questa non è una brutta cosa di alcun tipo, solo qualcosa da tenere a mente.

Aggiungi immagini di sfondo di WordPress su una pagina /post specifico

In questa guida, utilizzeremo il plug-in Advanced WordPress Backgrounds menzionato sopra.

Questo plugin consente di aggiungere sfondi usando i blocchi Gutenberg. Puoi impostare un colore, un'immagine o anche un video come sfondo di WordPress. Sono tutti visualizzabili su dispositivi mobili. Inoltre, puoi aggiungere un effetto di parallasse alle immagini e ai video di sfondo di WordPress.

In questo caso, aggiungeremo solo un'immagine di sfondo statica all'area dei contenuti, in particolare post/pagine.

Poiché funziona con i blocchi Gutenberg, assicurati di passare dalla modalità Editor classico se necessario.

1. Installa e attiva il plugin.
2. Apri un post/pagina esistente o creane uno nuovo.
3. Fare clic sul pulsante più nell'angolo in alto a sinistra. Quindi, scorri verso il basso fino alla sezione Design e scegli il blocco AWB. Accanto al blocco apparirà una barra delle icone in alto e una colonna di menu laterale.

4. Fare clic sul pulsante Immagine nella colonna laterale. Quindi fare clic sul pulsante Seleziona immagine sotto di esso per aprire il Catalogo multimediale.

5. Scegli l'immagine desiderata. Quindi, fare clic sul pulsante Seleziona . Una volta fatto, dovresti vedere l'immagine di sfondo.

6. Nella barra delle icone in alto, fai clic sull'icona a forma di hamburger. Quindi, scegli l'opzione Larghezza intera per coprire l'intera larghezza. Questo è del tutto facoltativo.

Nella colonna laterale, puoi modificare le dimensioni, la spaziatura, la posizione e molto altro dell'immagine di sfondo di WordPress. Sentiti libero di sperimentarlo.

Ora non resta che aggiungere contenuto all'interno del blocco. Se stai modificando un post/pagina esistente, taglia e incolla il contenuto nel blocco.

Ricordati di salvare il post/la pagina quando sei soddisfatto del risultato.

Usa i CSS per aggiungere immagini di sfondo di WordPress

Ora esploreremo come modificare le immagini di sfondo di WordPress usando i CSS . Questo può essere fatto per l'intero sito o per categorie specifiche utilizzando il Personalizzatore di WordPress.

1. Dalla dashboard di WordPress, vai su Aspetto > Personalizza per accedere al Personalizzatore di WordPress.

2. Scorri verso il basso e fai clic sulla sezione CSS aggiuntivo .

3. Copia e incolla il codice appropriato di seguito nel campo CSS:

Aggiungi un'immagine di sfondo di WordPress per l'intero sito

 body { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Assicurati di sostituire il testo segnaposto 'imageURL' con l'URL del file immagine effettivo. Per vederlo, seleziona l'immagine desiderata nella Libreria multimediale per visualizzare le informazioni sull'immagine.

E se conosci CSS, sentiti libero di modificarlo come preferisci.

Aggiungi immagini di sfondo di WordPress su una pagina di categoria specifica

 body.category-categoryid { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Assicurati di sostituire il testo segnaposto "imageURL" con l'URL del file immagine effettivo e "categoryid" con il nome di categoria corretto.

Per conoscere l'ID della categoria, segui le istruzioni seguenti:

1. Dalla dashboard di WordPress, vai su Messaggi > Categorie .

2. Passa il mouse sopra il testo Modifica della categoria a cui vuoi fare riferimento. Vedrai l'URL in basso a sinistra della pagina, che mostra l'ID della categoria.

Migliori pratiche per l'utilizzo di immagini di sfondo in WordPress

L'impostazione di un'immagine di sfondo personalizzata su WordPress sembra un compito facile. Sì! È vero nella maggior parte dei casi, ma non sempre.

Pertanto, ti consigliamo di seguire le migliori pratiche per l'immagine di sfondo di WordPress per eliminare il maggior numero possibile di problemi.

Controlla il supporto dell'immagine di sfondo prima di utilizzare un tema WordPress

Sfortunatamente, non tutti i temi WordPress supportano immagini di sfondo personalizzate. Di solito è perché gli sfondi non corrispondono al design generale del tema. Pertanto, gli sviluppatori hanno scelto di disattivarlo completamente.

Pertanto, dovresti controllare l'elenco delle funzionalità quando scarichi un nuovo tema, soprattutto se prevedi di pagarne uno premium. Molti siti Web che vendono temi forniscono informazioni sul fatto che un tema WordPress supporti o meno le immagini di sfondo.

Attenersi a immagini di alta qualità

La risoluzione delle immagini di sfondo previste spesso crea o interrompe la sua presentazione. Potresti pensare che una foto che hai scattato con il telefono sia abbastanza buona per uno sfondo. Ma è probabile che debba essere di qualità molto superiore.

Puoi pagare per foto royalty-free da siti come Shutterstock. Questi siti hanno spesso immagini di livello professionale pronte per essere caricate come immagini di sfondo di grandi dimensioni. Puoi anche trovarne molti su siti di immagini stock gratuiti.

L'immagine di sfondo potrebbe non essere completamente visibile sul tuo sito WordPress, poiché la maggior parte di essa è coperta dal contenuto. Tuttavia, è ancora visualizzato sull'intero schermo. Pertanto, corri il rischio di vedere uno sfondo allungato se non utilizzi un'immagine di alta qualità.

Ottimizza le immagini di sfondo

Come per tutte le foto caricate sul tuo sito WordPress, dovresti ottimizzare le immagini di sfondo prima della pubblicazione.

Ciò è particolarmente importante per le immagini di sfondo poiché spesso vengono visualizzate su più pagine del tuo sito. Inoltre, sono foto di grandi dimensioni e occupano molto spazio sullo schermo. Inoltre, le immagini più grandi mettono a dura prova il server. Pertanto, ricorda di ottimizzare le tue immagini di sfondo in modo che il tuo sito si carichi rapidamente.

Hai due opzioni qui:

• Ottimizza le immagini di sfondo (e tutte le foto del tuo sito Web) prima di caricarle sul server. Puoi completare questo processo manuale con l'aiuto di strumenti come Photoshop, GIMP e Pixlr.
• Automatizza il processo di ottimizzazione installando un plug-in WordPress che ridimensiona e rimpicciolisce le immagini durante il caricamento.

Pensieri finali

L'aggiunta di immagini di sfondo di WordPress al tuo sito Web può sembrare una cosa da poco. Ma se fatto bene, può avere un impatto enorme.

Inoltre, può aiutare a mantenere fresca la tua presenza online. Pertanto, i tuoi visitatori non si annoiano a vedere le stesse foto più e più volte.

Idealmente, usa il Personalizzatore di WordPress per aggiungere un'immagine di sfondo quando possibile, poiché è specificamente progettato per funzionare come previsto.

Tuttavia, hai anche altre opzioni per aggiungere e modificare le immagini di sfondo di WordPress, come mostrato sopra.

Ora vai avanti e diventa creativo con lo sfondo del tuo sito Web per coinvolgere visivamente i tuoi visitatori.