Immagini di Sfondo di WordPress: Come Aggiungere, Modificare e Personalizzare il Tema

Le immagini di sfondo di WordPress sono disponibili in tutte le forme. Potete caricare un’immagine di sfondo per tutto il vostro sito web o solo per i pulsanti, oppure impostare uno sfondo a tinta unita per la vostra pagina di accesso. Indipendentemente da dove volete metterla, è essenziale capire le basi per caricare un’immagine, compresa un’immagine di sfondo.

Questo articolo spiega cos’è un’immagine di sfondo e come potete modificarla per un risultato migliore. Parleremo anche di come attivare rapidamente le immagini di sfondo sul vostro sito e risolvere eventuali problemi che possono verificarsi lungo la strada.

Cominciamo!

Date un’Occhiata alla Nostra Video-Guida su Come Aggiungere Immagini di Sfondo per WordPress:

Cos’È un’Immagine di Sfondo di WordPress?

Un’immagine di sfondo di WordPress serve come sfondo completo del vostro sito web. Si chiama anche sfondo personalizzato.

Uno sfondo può anche essere a tinta unita.

Indipendentemente dall’opzione che scegliete, il file functions.php gestisce l’immagine di sfondo in un tema WordPress. Viene anche visualizzata dal file header.php di WordPress.

Di conseguenza, coloro che sviluppano temi hanno un maggiore controllo sull’attivazione o meno della funzione di sfondo personalizzato per il vostro tema WordPress. È ancora possibile attivare o disattivare la funzionalità, ma il tema del vostro sito in genere detta le impostazioni predefinite.

Ci sono diversi tipi di sfondi che potete implementare su WordPress. Potete scegliere uno sfondo standard per tutto il sito o uno che si trova dietro elementi specifici come le barre laterali e gli articoli.

Sono possibili sfondi personalizzati anche per posizioni più specifiche sul sito WordPress:

• Dietro una pagina o un articolo di WordPress
• Su una pagina di categoria di WordPress
• All’interno di un blocco di contenuto per una pagina o un articolo
• Nella pagina di accesso
• Dietro il menu di navigazione
• Nelle pagine di manutenzione o Coming Soon

In generale, se il supporto per lo sfondo personalizzato è abilitato in un tema, l’utente ha la possibilità di caricare un’immagine o scegliere un colore per riempire l’intero sfondo del sito.

Le impostazioni si trovano nella bacheca di WordPress sotto Aspetto > Personalizza > Immagine di sfondo. Tuttavia, potete usare altri tipi di sfondi attraverso costruttori di pagine drag-and-drop, plugin e diverse altre opzioni.

Caricare un’immagine di sfondo sulla bacheca è solo una parte del processo. Dopo di che, è necessario configurare le impostazioni dell’immagine di sfondo. A volte potete lasciare le impostazioni così come sono, mentre altre volte è importante riconfigurare le impostazioni per garantire che l’immagine abbia un aspetto eccellente.

Le impostazioni per un’immagine di sfondo di WordPress includono:

• Colori di sfondo
• Dimensionamento
• Posizione dell’immagine
• Se l’immagine deve ripetersi o meno
• Opzioni per riempire lo schermo o allungare l’immagine

Per prima cosa copriremo le migliori pratiche quando si usano le immagini di sfondo di WordPress. Poi andremo a vedere come impostare un’immagine di sfondo di WordPress in varie situazioni.

Molteplici Stili per gli Sfondi

Un vero vantaggio di uno sfondo WordPress è che non deve per forza trattarsi di un’immagine statica. Potete imbattervi in vari tipi di sfondi, che vanno dai video ai template di foto agli slideshow.

Spesso potete implementare sfondi unici con l’aiuto di CSS o plugin personalizzati (o entrambi). Vi mostriamo entrambi i metodi in questo articolo.

Ecco alcuni stili di sfondo da considerare:

• Immagini di sfondo standard: Queste sono immagini statiche (PNG, JPG, e altri formati di immagine) che si estendono sulla maggior parte dello spazio del sito web e si posizionano dietro il contenuto primario. I loro vantaggi includono la semplicità, le opzioni per le foto ad alta risoluzione e il supporto predefinito dal core di WordPress. Gli svantaggi includono la tendenza a complicare la visibilità degli elementi in primo piano o le grandi immagini ad alta risoluzione che rallentano il vostro sito.
• Sfondi a tinta unita: L’immagine di sfondo a tinta unita è utile quando volete aggiungere un po’ di vivacità al vostro sito ma non avete un’immagine che si adatti al vostro marchio o una che stia bene come sfondo. Lo sfondo colorato presenta anche un’immagine più pulita e professionale, e non ci vuole molto tempo per implementarlo. Sono ottimi per adattarsi al vostro marchio senza bisogno di codice personalizzato o di un plugin.
• Sfondi a gradiente: Uno sfondo a gradiente passa da un colore all’altro. È visivamente più attraente di un colore unico, non richiede molto tempo per essere aggiunto, e si può implementare con molti plugin. L’aspetto negativo principale è che un primo piano può apparire bene da un lato del gradiente ma non dall’altro.
• Sfondi pattern o texture: Tutti gli sfondi pattern e texture sono foto, ma si concentrano su elementi ripetitivi nell’immagine o su una texture ravvicinata, come un pannello di legno o dei fili d’erba. La parte buona di un pattern o di una texture è che funziona a meraviglia come sfondo, visto che potete estenderlo, e la maggior parte delle persone non noterà se c’è una rottura nel pattern quando l’immagine non è abbastanza grande.
• Sfondi con diapositive di immagini: Uno sfondo con diapositive di immagini (slideshow) permette ai proprietari del sito di condividere più tipi di design o foto sullo sfondo, così è più facile mantenere alto l’umore dei clienti mentre scorrono le vostre pagine. Tuttavia, gli slideshow potrebbero distrarre o rallentare il vostro sito.
• Sfondi video: Gli sfondi video sono coinvolgenti, divertenti da guardare, e facili per ritrarre lo spirito del vostro marchio. Tuttavia, portano anche a problemi di performance se non sono fatti correttamente e potrebbero spostare l’attenzione del vostro funnel di vendita. Inoltre, i video di sfondo devono essere delle dimensioni perfette e avviarsi al momento giusto. Possono anche diventare costosi da realizzare, a meno che non optiate per video stock gratuiti.

Migliori Pratiche per l’Utilizzo di Immagini di Sfondo di WordPress

Impostare un’immagine di sfondo personalizzata sembra un compito facile. Basta caricare l’immagine nel punto giusto e guardarla apparire sul frontend, giusto?

La maggior parte delle volte è così, ma altre volte scoprirete che l’immagine di sfondo può essere un po’ problematica. Ecco perché si consiglia di seguire le migliori pratiche per le immagini di sfondo di WordPress per eliminare il maggior numero di problemi possibile.

Suggerimenti per l’Utilizzo delle Immagini di Sfondo di WordPress

Usare Immagini di Alta Qualità

La risoluzione dell’immagine di sfondo che usate è capace di fare il bello o il cattivo tempo della vostra presentazione. Si può pensare che un’immagine scattata con lo smartphone sia perfetta per un’immagine di sfondo, ma è probabile che abbia bisogno di una qualità molto più alta.

Potete pagare per un’immagine royalty-free da un sito come Shutterstock. Questi siti offrono tipicamente immagini di livello professionale che sono preparate e pronte da caricare come una grande immagine di sfondo. Potete anche trovarne molte su siti di immagini stock gratuite.

L’immagine di sfondo potrebbe non essere mostrata nella sua interezza sul vostro sito web, poiché gran parte di essa è coperta dal contenuto. Tuttavia, l’immagine reale viene visualizzata su tutto lo schermo.

Se non usate un’immagine di alta qualità, correte il rischio di vedere uno sfondo allungato.

Assicuratevi Che le Immagini di Sfondo Siano della Dimensione Corretta

Insieme alla risoluzione dell’immagine, anche la sua dimensione fisica conta molto.

Gli schermi hanno diverse proporzioni. E i dispositivi mobili rendono tutto ancora più complicato. Ma l’obiettivo è usare un’immagine adatta al più grande degli schermi. Altrimenti correte il rischio di avere ancora una volta l’immagine allungata o non visualizzata correttamente.

In generale, una buona regola è quella di attenersi a una dimensione minima dell’immagine di sfondo WordPress di 1024 x 768 pixel. Tuttavia, altri esperti raccomandano qualcosa di più come 1920 x 1080 pixel. Nel complesso, la cosa migliore da fare è rimanere tra i 1000 e 3000 pixel per la larghezza, a seconda di dove viene visualizzata.

Il prossimo fattore da considerare è il rapporto d’aspetto (aspect ratio). L’immagine di sfondo copre l’intero sito web o solo il quarto superiore?

Tecnicamente, un sito web ha un rapporto d’aspetto verticale (più lungo in altezza che in larghezza). Quindi potete considerare questi tipi di immagini. Tuttavia, gli sfondi sezionali, come quelli per le intestazioni o i banner pubblicitari, dovrebbero rimanere in formato orizzontale (larghezza più lunga dell’altezza).

Inoltre, il rapporto d’aspetto più comune per i desktop oggi è 16:9. Rimanere intorno a questo obiettivo aiuta. Un tema o un plugin responsive può regolare automaticamente l’immagine di sfondo per la visualizzazione mobile.

In definitiva, testare le immagini di sfondo su un sito reale e su più tipi di dispositivi dovrebbe rendere la decisione finale molto più facile.

Ottimizzare Prima di Usare un’Immagine Come Sfondo di WordPress

Come per tutte le immagini caricate su WordPress, se non le ottimizzate prima di pubblicarle sul web non state facendo un buon servizio al vostro sito. Questo è particolarmente importante per le immagini di sfondo poiché spesso appaiono su più pagine in tutto il vostro sito web. Inoltre, sono foto di grandi dimensioni e coprono una quantità significativa di spazio sullo schermo.

Le immagini più grandi mettono a dura prova il vostro server. Mantenete la risoluzione della vostra immagine, ma ottimizzate le sue dimensioni in modo che il vostro sito web si carichi rapidamente.

Avete due opzioni per ottimizzare le foto:

1. Ottimizzare le immagini di sfondo (e tutte le immagini del sito) prima di caricarle su WordPress. Completate questo processo manuale con l’aiuto di strumenti come Photoshop Express, GIMP e Pixlr.
2. Automatizzate il processo di ottimizzazione installando un plugin per WordPress che ridimensiona e rimpicciolisce le foto al momento del caricamento.

Leggete la nostra guida approfondita su come ottimizzare le immagini per migliorare le prestazioni sul web.

Controllare il Supporto di Background Prima di Installare un Tema

Sfortunatamente, non tutti i temi supportano immagini di sfondo personalizzate. Questo spesso accade perché lo sfondo non si adatta al design generale del tema, quindi chi lo ha sviluppato ha scelto di disattivarlo del tutto.

Eppure, se volete davvero uno sfondo sul vostro sito web, è prudente controllare la lista delle caratteristiche quando scaricate un nuovo tema, soprattutto se avete intenzione di pagare per un tema premium. Molti siti di vendita di temi offrono informazioni sul fatto che un tema supporti o meno gli sfondi.

Per esempio, i temi elencati nella libreria dei temi di WordPress indicano il supporto per gli sfondi personalizzati nei tag. Potete anche trovare un riferimento a uno sfondo personalizzato nella descrizione del tema.

Gli altri siti di temi in genere includono informazioni simili sulle immagini di sfondo personalizzate. In caso contrario, contattate la persona che ha sviluppato il tema per capire se è possibile in qualche modo e se sovrascrivere il blocco dell’immagine di sfondo (cosa che vedremo sotto) causerà qualche problema con il tema.

Considerare l’Uso di un Costruttore di Pagine Visive per Facilitare la Creazione di Immagini di Sfondo

I costruttori di pagine come Gutenberg, WPBakery, Divi ed Elementor, offrono liste impressionanti di blocchi e moduli per inserire elementi come immagini e caselle di testo in qualsiasi parte di una pagina web.

Senza un costruttore drag-and-drop, diventa un po’ più difficile configurare un’immagine di sfondo. È particolarmente difficile cercare di risolvere i problemi che si possono incontrare.

I costruttori di pagine tendono anche a sostituire la funzionalità dell’immagine di sfondo predefinita fornita attraverso WordPress. È possibile sovrascrivere le restrizioni del tema o qualsiasi elemento mancante che aiuta a visualizzare un’immagine di sfondo nel codice.

Assicurarsi Che l’Immagine di Sfondo Sia Legale

Il tema della legalità viene sempre fuori quando si parla di immagini, specialmente quelle pubblicate su internet. C’è una tendenza crescente sui social media in cui le persone sembrano assumere che l’aggiunta di un credito a una foto ne rende automaticamente corretto il suo uso.

Questo è falso.

Chiunque scatti la foto ne è proprietario. Anche se quell’immagine proviene da un rapido scatto dell’iPhone, ottiene immediatamente la protezione del copyright per quella foto negli Stati Uniti e in molti altri paesi.

Se volete i diritti legali per usare le foto di qualcun altro, dovreste avere una dichiarazione scritta da parte di chi detiene il copyright che vi permetta di usare le sue immagini: una semplice e-mail è sufficiente. Anche in questo caso, potreste dover attribuire la foto se la persona ve lo chiede.

Abbiamo una guida completa sulla protezione delle immagini sul vostro sito, ma l’articolo vi dà anche informazioni preziose per chi ha interesse a usare foto da altre fonti.

La parte difficile delle immagini di sfondo è che di solito non è pratico aggiungere l’attribuzione, visto che WordPress non ha un posto in cui incorporare una didascalia visibile per le immagini di sfondo. E no, non si può aggiungere l’attribuzione su un articolo o una pagina del blog a caso e aspettarsi che questo serva come credito per un’immagine di sfondo del sito web completo.

Per proteggervi e per rispettare coloro che scattano le foto, considerate uno dei seguenti elementi quando cercate un’immagine di sfondo per WordPress:

• Scattate la foto da voi. È il modo più semplice per assicurarvi di non violare i diritti d’autore di qualcun altro.
• Pagate le foto su siti come Shutterstock e iStockPhoto. A volte sono costosi, ma per un’immagine di sfondo può rientrare nel vostro budget.
• Considerate un sito di immagini gratuite come Unsplash o Pexels. Tuttavia, assicuratevi che l’attribuzione non sia richiesta! Potete occasionalmente trovare immagini su questi siti dove l’attribuzione è suggerita ma non richiesta.
• Contattate il fotografo o l’artista e chiedete se potete usare gratuitamente il suo lavoro. Questo potrebbe essere tutto ciò di cui avete bisogno, specialmente se offrite qualcosa in cambio.
• Non usate un’immagine di sfondo, o considerate di scegliere uno sfondo colorato invece che una foto.

Come Faccio a Impostare un’Immagine di Sfondo in WordPress?

Ci sono vari modi per impostare un’immagine di sfondo in WordPress. Questi metodi di solito cambiano in base alla posizione in cui volete mettere l’immagine.

Per esempio, potreste decidere che vi piacerebbe avere un’immagine di sfondo che rimanga la stessa in tutto il vostro sito web. D’altra parte, è possibile che voi preferiate trovare un modo per mostrare immagini di sfondo uniche per tutte le vostre pagine.

Dato che esistono così tante possibilità, vedremo come aggiungere un’immagine di sfondo o un colore nelle sezioni seguenti:

• L’intero sito
• Una pagina WordPress
• Un articolo su WordPress
• Un blocco di contenuto individuale
• L’intestazione di WordPress
• Una pagina di archivio delle categorie
• La pagina di login di WordPress
• Il menu di navigazione
• Una pagina di manutenzione

Come Aggiungere un’Immagine di Sfondo all’Header e ai Menu di WordPress

Prima di Iniziare: Attivare il Supporto per lo Sfondo Personalizzato su WordPress (Se Necessario)

Chi sviluppa i temi decide il destino delle funzionalità di sfondo di un sito. WordPress ha la funzionalità incorporata nel nucleo, ma uno sviluppatore di temi potrebbe disattivarla, lasciandovi senza alcuna impostazione per attivarla.

Se in qualsiasi punto dei seguenti tutorial trovate che il vostro tema è la ragione per cui vi manca l’opzione Sfondo personalizzato, considerate i seguenti passi per risolverlo rapidamente.

Il principale supporto di sfondo personalizzato per WordPress viene gestito dal file functions.php. Aprite quel file e inserite il seguente codice se manca:

$defaults = array(
    'default-color'          => '',
    'default-image'          => '',
    'default-repeat'         => '',
    'default-position-x'     => '',
    'default-attachment'     => '',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

Tenete a mente che l’elemento che attiva effettivamente il supporto dello sfondo è la funzione add_theme_support() con tutto ciò che contiene. Quel codice attiva la funzione di sfondo nella bacheca di WordPress, che potete usare in molti dei seguenti tutorial in questo articolo.

È anche possibile aggiungere un’immagine di sfondo predefinita per l’intero tema attraverso il file functions.php. Basta andare nell’area del codice precedente con il valore default-image e aggiungere l’URL dell’immagine nello spazio vuoto tra il ' ' dopo il =>.

Questo è un modo semplice e veloce per attivare sfondi personalizzati all’interno della bacheca di WordPress.

Detto questo, vi consigliamo di cambiare il tema se non include il supporto per lo sfondo in primo luogo. La rimozione della funzione di sfondo personalizzato potrebbe avere un suo scopo, o forse chi ha sviluppato il tema ha scoperto che stava causando troppi problemi con il design.

Come Aggiungere un’Immagine di Sfondo al Vostro Intero Sito WordPress

Se il vostro tema offre la possibilità di aggiungere un’immagine di sfondo personalizzata (e molti lo fanno), tutto diventa più facile.

Per iniziare, andate nella vostra bacheca di WordPress e fate clic su Aspetto > Personalizza.

Questo vi porta al Personalizza di WordPress, con le impostazioni di personalizzazione sulla sinistra e un’anteprima del sito web sulla destra.

Qui, fate clic sulla scheda Sfondo.

In alternativa, se potete selezionare Aspetto > Sfondo, potete usarlo per un percorso più diretto a questa impostazione.

L’area di personalizzazione dello sfondo gestisce gli elementi di sfondo per tutto il vostro sito web.

Fate clic sul pulsante Scegli immagine per procedere.

Nella finestra Seleziona immagine, scegliete un’immagine che si adatti bene come sfondo per il vostro marchio e lo stile del sito web. In generale, un modello di colore neutro con una tonalità nera, o bianca, o grigia di solito aiuta a garantire che la maggior parte del vostro testo e del vostro contenuto abbia ancora un bell’aspetto con lo sfondo dietro di esso.

Una volta selezionata la vostra immagine, fate clic sul pulsante Scegli immagine per andare avanti.

Lo sfondo che avete implementato appare ora nell’anteprima del sito web.

Verificate che il vostro contenuto sia ancora distinguibile e presentabile anche con l’immagine scelta. A volte potreste scoprire che avete bisogno di cambiare completamente lo sfondo o altri elementi come il testo o i colori dei link.

Una piccola miniatura dello sfondo appare anche nel pannello delle impostazioni, mostrandovi in che modo l’immagine è stata integrata.

Sono disponibili alcune impostazioni aggiuntive per gli sfondi di WordPress, incluso il campo Impostazioni predefinite.

Fate clic sul campo Impostazioni predefinite per cambiare la formattazione dell’immagine usando design e allineamenti preimpostati.

È possibile scegliere tra le seguenti impostazioni:

• Predefinito: Questo di solito dà lo stesso risultato dell’opzione Ripeti, ma può dipendere dal vostro tema. L’impostazione Predefinito generalmente funziona meglio, ma dipende dall’immagine utilizzata.
• Riempi lo schermo: Questa impostazione allunga l’immagine per assicurarsi che tutte le parti dello schermo vengano coperte, anche se ciò significa ritagliare l’immagine, in modo che vada oltre lo schermo. Funziona bene per molte immagini ad alta risoluzione ma potrebbe causare sfocature con immagini a bassa risoluzione.
• Adatta allo schermo: Questo mantiene il rapporto d’aspetto della foto originale e cerca di usare quel rapporto per adattarlo all’immagine corrente sullo schermo. Fa un buon lavoro nel mantenere l’immagine vicina al suo stato originale ma potrebbe non coprire tutta l’area dello sfondo.
• Ripeti: Questo usa parti della funzione Riempi lo schermo, espandendo e allungando l’immagine, ma ripete anche l’immagine quando non può coprire con successo l’intero schermo. Per i template, quest’opzione di solito va molto bene. Ma per alcune immagini, può generare una linea netta tra le immagini ripetute.
• Personalizzato: Questa impostazione vi dà il maggior controllo sullo sfondo, offrendo diverse opzioni per personalizzare le dimensioni dell’immagine di sfondo di WordPress, come il modo in cui si ripete sulla pagina, si allunga o si sposta quando l’utente scorre.

Non c’è una regola per capire quali di queste impostazioni funzioni meglio perché le immagini sono di dimensioni, risoluzioni e dettagli diversi. Pertanto, è meglio iniziare con l’impostazione Predefinita e poi provare le altre opzioni per vedere quale va meglio per la vostra immagine di sfondo.

Se tutto il resto fallisce, andate all’impostazione Personalizzato per specificare le vostre scelte nel dettaglio.

L’opzione Adatta allo schermo non va bene per questa immagine, soprattutto perché l’immagine originale è molto più lunga che larga, lasciando una quantità significativa di spazio a destra. Potremmo cambiare la posizione dell’immagine al centro, ma molto probabilmente lascerebbe spazio bianco ai lati.

La prossima impostazione da considerare è lo strumento Posizione immagine. Fate clic sulle frecce per spostare la vostra immagine di sfondo, regolando l’orientamento per metterla l’immagine verso il centro o per riempire lo schermo.

In modo simile all’impostazione Impostazioni predefinite, lo strumento Posizione dell’immagine vi richiede di cambiare le impostazioni e subito ricontrollare il vostro lavoro, poiché l’aspetto finale dipende dall’immagine originale e dal suo contenuto.

In seguito, c’è un campo con una casella da spuntare che dice Scorri con la pagina.

Con questa casella selezionata, l’immagine di sfondo si attacca al contenuto in primo piano e scorre insieme all’utente quando questo si sposta su o giù nella pagina.

Deselezionare questa casella tende a cambiare l’orientamento generale dell’immagine di sfondo, ma la sua caratteristica dominante è quella di dire allo sfondo di rimanere statico mentre l’utente scorre la pagina.

Gli elementi di contenuto in primo piano (come i prodotti in questo caso) scivolano sull’immagine di sfondo, creando un effetto più attraente.

Lavorare con le Impostazioni Personalizzate

Quando si opta per un’opzione diversa da Personalizzato, non si ottengono molte impostazioni aggiuntive da configurare.

Tuttavia, scegliendo il preset Personalizzato si aprono diversi altri campi da considerare.

Per esempio, potete scegliere di riempire lo schermo o di adattarlo allo schermo, e poi combinarlo con un’immagine di sfondo ripetuta o non ripetuta, combinando gli elementi dei preset di prima. E potete ancora usare l’opzione Scorri con la pagina.

Vedete se è possibile usare l’immagine originale senza modifiche o impostazioni. A volte la foto originale è una corrispondenza quasi perfetta per essere usata come sfondo, quindi perché pasticciare con ciò che già funziona?

Tuttavia, la sua dimensione potrebbe anche essere troppo grande per il vostro sito web, o forse il rapporto d’aspetto non è proprio della misura giusta. Indipendentemente da ciò, suggeriamo di sperimentare questa impostazione per capire se è giusta per voi.

Una volta che avete deciso le impostazioni di sfondo perfette per voi (per questo tutorial, l’opzione Predefinito è la più adatta), fate clic sul pulsante Pubblica per mettere online le modifiche sul vostro sito web.

Andate al front-end del vostro sito web per vedere lo sfondo in azione.

La homepage è un ottimo punto di partenza. Noterete che l’area dell’intestazione e l’immagine di benvenuto non hanno sfondi. Questo perché l’immagine di benvenuto in cima al sito sta già coprendo l’intera parte orizzontale dello schermo come immagine hero a tutto schermo.

Per quanto riguarda l’intestazione e il menu, imparerete come configurare questi sfondi in alcuni dei seguenti tutorial.

Tenete presente che lo sfondo generale personalizzato di WordPress si attiva su ogni pagina e articolo del vostro sito web. È una caratteristica globale per coloro che vogliono un modo rapido per inserire il brand sul loro sito e aggiungere un po’ di brio.

Per esempio, andando alla pagina Shop di questo sito si scopre il background dietro la selezione dei prodotti.

Come Impostare un Colore di Sfondo Invece di un’Immagine per Tutto il Vostro Sito Web

Il processo di attivazione di un colore di sfondo su tutto il vostro sito web non è molto diverso da quando attivate un’immagine di sfondo. Iniziate andando su Aspetto > Sfondo nella bacheca, poi cercate il campo Colore di sfondo.

Fate clic sul pulsante Seleziona colore per aprire altre impostazioni per scegliere e cambiare diversi colori per il vostro sfondo.

Il pannello dei colori fornisce diverse opzioni per decidere un colore. La prima è quella di digitare, o incollare, un codice di colore. Tutti i colori hanno un codice unico, e potete trovare questi colori e i loro codici associati con una rapida ricerca su internet.

L’altra opzione è quella di fare clic sul pannello dei colori per trovare il colore perfetto per lo sfondo. Ci sono anche campioni di colori comuni verso il fondo del pannello se preferite prendere uno dei colori più semplici.

Per attivare un colore di sfondo, assicuratevi che il colore sia selezionato e mostrato nell’anteprima Seleziona colore.

Dovreste vedere lo sfondo a colori nell’anteprima del Personalizza di WordPress. Se non è così, molto probabilmente significa che avete uno sfondo immagine installato che sta sovrascrivendo lo sfondo a colori.

Tutto quello che dovete fare per rivelare lo sfondo colorato è fare clic sul pulsante Rimuovi sotto l’anteprima di Immagine di sfondo.

Ora il colore appare in tutto il vostro sito, dietro il contenuto. Proprio come fareste con uno sfondo immagine, è prudente controllare il vostro sito web per assicurarvi che tutto il testo, le immagini e i link siano ancora visibili con il nuovo sfondo.

Come Aggiungere un’Immagine di Sfondo alla Pagina di WordPress

Ma cosa succede se volete inserire un’immagine su WordPress per mostrarla come sfondo in una singola pagina di WordPress? Nella sezione precedente abbiamo visto le impostazioni globali per un’immagine di sfondo per tutto il sito.

Guarda la Nostra Video-Guida all’Aggiunta di Immagini di Sfondo a Pagine Singole, Articoli e Blocchi di Contenuto di WordPress

Molte persone amano aggiungere sfondi alle loro pagine perché è possibile incorporare un certo tema o un’atmosfera a una pagina che si applica al contenuto. Per esempio, una pagina About Us potrebbe avere uno sfondo di Milano se l’azienda si trova a Milano. O un’introduzione al libro di un autore potrebbe includere uno sfondo che si adatta al tema della sua storia.

In questa sezione, vedremo come aggiungere un’immagine di sfondo di WordPress a una pagina utilizzando un metodo principale e alcune alternative se non vi dispiace spendere soldi per un plugin o optare per un costruttore di pagine.

Nota: non importa se usate l’editor Gutenberg o l’editor classico di WordPress.

Per gli sfondi specifici della pagina, questi metodi sembrano funzionare meglio:

• Aggiungere uno sfondo di pagina unico con un CSS personalizzato.
• Utilizzando un plugin che permette di avere sfondi di pagina individuali.
• Incorporare uno sfondo personalizzato su ogni pagina con l’aiuto di un costruttore di pagine.

Aggiungere il proprio CSS personalizzato a una pagina comporta la ricerca dell’ID di classe per quella pagina e la richiesta di un URL di sfondo, all’interno del modulo CSS personalizzato, nelle impostazioni della pagina di WordPress. Fortunatamente, non è così difficile capire l’ID di classe di una pagina: possiamo cercarlo o potreste anche già sapere qual è.

Andate alla pagina del vostro sito per cui volete uno sfondo specifico.

Fate clic con il tasto destro del mouse in qualsiasi punto della pagina per rivelare un menu a tendina sullo schermo. Selezionate lo strumento Ispeziona in fondo al menu a tendina.

Il modulo Ispeziona visualizza il codice della pagina stessa, insieme al CSS personalizzato utilizzato globalmente per il vostro sito web. È un’area utile per trovare informazioni su una pagina o un articolo del vostro sito.

La casella di ispezione include linee di codice della pagina, ma siamo interessati solo al tag di classe assegnato a questa pagina in particolare. Per chiarire, ogni pagina di WordPress ha un tag di classe come codice di identificazione.

Usate la funzione di ricerca e digitate body o class per individuare la linea di codice con il tag page-id.

In questo caso, l’ID è page-id-352, ma il vostro sarà diverso.

Copiate l’intera parte di codice con la parola chiave page-id-#, compresi i trattini.

Salvate l’ID della pagina da qualche parte per usarlo nei prossimi passi, quindi tornate alla vostra bacheca di WordPress e fate clic su Aspetto > Personalizza.

Selezionate la scheda CSS aggiuntivo nel Personalizza di WordPress.

Questa sezione vi permette di digitare o incollare qualsiasi CSS personalizzato che volete per manipolare gli elementi in tutto il vostro sito web. In questo caso, è utile per sovrascrivere l’immagine di sfondo predefinita e abilitare un’immagine di sfondo per una pagina e non per le altre.

Incollate il seguente codice nel campo CSS aggiuntivo, ma ricordate di sostituire il “#” con il numero reale che avete estratto come ID della pagina dai passi precedenti. Inoltre, dovete mettere un vero URL dell’immagine al posto del testo di riempimento che abbiamo lì dentro (http://YOURIMAGEURL.jpeg.

body.page-id-# {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Per questo esempio, l’ID della pagina è compilato come 352, e abbiamo un URL dell’immagine di sfondo incollato dalla nostra Libreria Media.

Se necessario, modificate le impostazioni dello sfondo personalizzato se avete problemi ad adattare l’immagine di sfondo dello schermo. Per esempio, potreste voler modificare elementi come la dimensione dell’immagine di sfondo di WordPress, l’attacco o la posizione. In caso contrario, lasciateli tutti come sono nel codice di esempio.

Fate clic sul pulsante Pubblica quando il CSS personalizzato vi soddisfa.

Con quel CSS personalizzato, la pagina specificata include un’immagine di sfondo usando le impostazioni di dimensionamento e posizionamento del codice. Nessun’altra pagina del vostro sito mostrerà lo stesso sfondo, a meno che non ripetiate il CSS per diversi ID di pagina.

Come accennato prima, le altre opzioni per aggiungere uno sfondo unico a una pagina WordPress includono l’uso di un costruttore di pagine o di un plugin che permette di avere immagini di sfondo sulle singole pagine.

Tuttavia, il modo più economico e veloce per mettere un’immagine di sfondo su una pagina individuale è quello di usare il metodo del codice CSS mostrato sopra.

Come Aggiungere un’Immagine di Sfondo a un Articolo WordPress

La maggior parte delle immagini di sfondo vengono inserite dietro le pagine di WordPress o in ogni pagina di un sito web.

La funzione predefinita di sfondo personalizzato in WordPress non ha nulla a che fare con i singoli articoli, oltre al fatto che questo sfondo verrà visualizzato anche per gli articoli del blog. Questo non è l’ideale per tutte le organizzazioni, perché diversi articoli del blog potrebbero avere argomenti drasticamente diversi.

Questi blog potrebbero beneficiare delle loro immagini di sfondo uniche. Tuttavia, gli articoli di WordPress non hanno una propria impostazione dell’immagine di sfondo, il che rende la cosa un po’ più complicata.

Pertanto, abbiamo alcune opzioni da considerare quando si aggiunge un’immagine di sfondo a un articolo (noterete che sono le stesse di quando si lavora con immagini di sfondo specifiche per la pagina):

• Inserire un’immagine di sfondo usando un CSS personalizzato.
• Usare un plugin per implementare uno sfondo sui singoli articoli.
• Installare un costruttore di pagine visuale per gli sfondi degli articoli.

Come la sezione precedente sugli sfondi unici delle pagine, potete aggiungere uno sfondo specifico per l’articolo usando un costruttore di pagine o un plugin.

Visto che fare uno sfondo specifico per un articolo non è molto diverso da farlo per una pagina, toccheremo solo brevemente i passi per gestire questo processo per un singolo articolo.

Quando usate il CSS personalizzato per implementare uno sfondo specifico per l’articolo, usate lo stesso codice che usereste per lo sfondo della pagina, con una differenza: dovete trovare l’ID dell’articolo invece che l’ID della pagina.

Quindi, aprite il frontend di un articolo di WordPress dove vorreste inserire uno sfondo.

Fate clic con il tasto destro sull’articolo e scegliete l’opzione Ispeziona. Completate una ricerca all’interno del codice per individuare la sezione della classe del corpo nel codice. Cercate la parte postid-#: è l’ID del post che dovete inserire nel CSS personalizzato.

Noterete che la formattazione per l’ID dell’articolo è leggermente diversa in questo esempio rispetto all’ID della pagina, dove il tag postid-# non ha un trattino tra “post” e “id” come succede con page-id-#. Inoltre, queste non sono regole rigide, potete trovare vari formati per i tag.

Ora, andate alla vostra bacheca di WordPress e fate clic su Aspetto > Personalizza. Navigate fino alla scheda CSS aggiuntivo.

Incollate il seguente codice in quel campo CSS personalizzato:

body.postid-# {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Dopo di che, prendete il numero di ID del post che avete trovato prima per l’articolo desiderato. Sostituite il “#” nel codice CSS con il numero. Inoltre, cambiate il testo http://YOURIMAGEURL.jpeg con l’URL reale dell’immagine di sfondo che vorreste mostrare, mantenendo le virgolette intorno.

Assicuratevi di premere il pulsante Pubblica prima di lasciare la scheda CSS Aggiuntivo, poiché questo salva le vostre modifiche sul sito web e vi permette di visualizzare lo sfondo sul front-end.

Con queste modifiche CSS in atto, è ora possibile tornare al front-end di quell’articolo del blog WordPress per vedere il nuovo sfondo. Testate gli altri articoli e pagine del blog sul vostro sito per verificare che nessuno degli altri abbia uno sfondo, a meno che non implementate lo stesso codice per quegli ID degli articoli.

Come Aggiungere un’Immagine di Sfondo a un Singolo Blocco di Contenuto

I singoli blocchi di contenuto di WordPress Gutenberg consentono una vasta gamma di opzioni di visualizzazione del contenuto, tra cui caselle di testo, immagini e gallerie.

Questi dividono il vostro contenuto in sezioni separate. Quindi, potete aggiungere un colore di sfondo o un’immagine solo per quel blocco.

Per esempio, diciamo che state scrivendo un articolo sul blog sullo stato dell’industria dell’abbigliamento al dettaglio. Volete finire o iniziare l’articolo con una call-to-action per le persone che si iscrivono al vostro prossimo webinar. Avrebbe senso far risaltare questa sezione usando un colore di sfondo o un’immagine.

Sfortunatamente, l’editor di blocchi di WordPress non offre un’impostazione onnicomprensiva in cui è possibile aggiungere uno sfondo a qualsiasi blocco. Tuttavia, alcuni blocchi hanno la possibilità di incorporare uno sfondo colorato.

C’è anche un blocco, chiamato blocco Copertina, che è quanto di più vicino possiamo pensare per un’immagine di sfondo in un articolo o una pagina. La copertina permette di sovrapporre il testo e alcuni elementi multimediali, rendendolo adatto al nostro obiettivo finale.

Di seguito sono riportate le tecniche da utilizzare per impostare un’immagine o un colore di sfondo per un singolo blocco WordPress.

Impostare uno Sfondo di Colore per un Blocco

Il modo più semplice per aggiungere un po’ di vivacità a un singolo blocco è quello di aggiungere uno sfondo a colori. Non è fantasioso come uno sfondo immagine, ma lo sfondo a colori è in realtà l’unico tipo di sfondo nell’editor dei blocchi di WordPress disponibile per i blocchi standard.

Nota: alcuni blocchi non hanno alcuna impostazione di sfondo. In questo caso, è meglio usare un blocco Copertina e sovrapporvi altri blocchi, come spiegato più avanti in questo articolo.

Il blocco Paragrafo, per esempio, ha un’impostazione per attivare uno sfondo colorato.

Per attivarlo, selezionate il blocco, poi individuate le Impostazioni colore sotto la scheda Blocco sul lato destro.

Questa sezione rivela i campi Colore del testo e Colore dello sfondo.

Andate all’area Colore dello sfondo e selezionate un colore dall’elenco delle opzioni disponibili. Potete anche scegliere il link Colore personalizzato per inserire il vostro codice colore o scegliere un colore unico.

Come potete vedere, una volta che questa impostazione è in atto, lo sfondo del blocco Paragrafo diventa di un colore diverso, in questo caso, blu.

Aggiungere uno Sfondo Colorato a Qualsiasi Blocco di WordPress

Come detto prima, non tutti i blocchi di WordPress hanno questa funzione di sfondo integrata. Cosa si deve fare se si vuole creare una galleria, o qualche altro elemento di blocco, che non offre l’opzione dello sfondo?

La soluzione più rapida è quella di utilizzare la funzione di blocco Gruppo in WordPress.

Per farlo, selezionate più blocchi già presenti nel vostro contenuto. Per questo esempio, selezioneremo contemporaneamente un blocco Paragrafo e un blocco Galleria.

Fate clic sull’icona con i quadratini sovrapposti che appare nel menu delle icone.

Scegliete l’opzione Gruppo nel menu a discesa.

Questo prende tutti i blocchi attualmente selezionati e li combina in un gruppo, permettendovi di spostarli o modificarli tutti insieme invece che in blocchi separati.

Questo imposta il gruppo come un proprio blocco. Significa che potete andare alla scheda Impostazioni del blocco sul lato destro della pagina per trovare le sue impostazioni.

Cercate la scheda Impostazioni colore e fate clic su quella.

Proprio come un blocco Paragrafo standard, il blocco Gruppo ha anche una funzione per il Colore di sfondo.

Scegliete il colore che vi piace di più per questa situazione per verificare che tutto all’interno di quel gruppo abbia quel colore di sfondo.

Il bello del blocco Gruppo è che prende un altro blocco che non ha uno sfondo (come il blocco Gallery) e vi permette di attivare comunque uno sfondo per esso.

Aggiungere un’Immagine di Sfondo a un Blocco di WordPress

I blocchi di WordPress si trovano sia nelle pagine che negli articoli. Pertanto, possiamo implementare questa tattica in entrambi. È possibile inserire qualsiasi contenuto sopra lo sfondo del blocco raggruppato – o solo in un blocco WordPress.

Per iniziare questo processo, fate clic sul pulsante Aggiungi blocco o sull’icona “+” e cercate il blocco di copertura.

Scegliete quel blocco per inserirlo nel vostro articolo o pagina.

Dovete poi fare clic sul pulsante Carica o Seleziona elemento multimediale, che vi permette di cercare le immagini che potete usare come sfondo.

Scegliete l’immagine che volete e fate clic sul pulsante Seleziona.

Ora potete vedere quell’immagine come sfondo per il blocco Copertina.

Sentitevi liberi di fare clic su quel blocco per iniziare a digitare il contenuto del paragrafo, dato che la funzione principale è per la sovrapposizione del testo.

Il bello del blocco Copertina è che offre diverse opzioni di formattazione, permettendovi di saltare da un’intestazione a un formato paragrafo in pochi secondi.

Per aggiungere altri blocchi su quello sfondo, fate clic sul pulsante con l’icona “+” all’interno dello stesso blocco Copertina. Potreste dover premere il tasto Invio una volta per rivelare il pulsante.

In modo simile all’aggiunta di un blocco di contenuto in un articolo regolare, il blocco Copertina vi permette di scorrere tutti i potenziali blocchi di contenuto in WordPress.

Ciò significa che è possibile inserire un’immagine, una galleria, colonne o qualsiasi tipo di blocco WordPress all’interno del blocco Copertina, rendendolo la soluzione ideale per sfondi di immagini con un blocco individuale.

Per questo esempio, abbiamo inserito un’immagine e l’abbiamo formattata un po’ per farla sembrare accettabile all’interno del blocco Copertina.

Ogni blocco che mettete davanti allo sfondo ha le sue impostazioni personalizzate nella scheda Blocco sul lato destro, quindi considerate di modificarle mentre le inserite nel blocco Copertina.

A un certo punto, potreste voler modificare o personalizzare la stessa immagine di sfondo. In questo caso, scegliete il blocco Copertina, poi andate alla scheda Impostazioni blocco sul lato destro della pagina.

Questo rivela una miriade di impostazioni da regolare per l’immagine di sfondo, tra cui le seguenti:

• Sfondo fisso
• Sfondo ripetuto
• Selettore del punto focale
• Dimensioni
• Sovrapposizione
• Opacità
• Avanzate

Una delle impostazioni più importanti da considerare è verso il fondo del pannello Impostazioni del blocco.

Scorrete verso il basso per trovare la sezione Sovrapposizione. Aprite la sezione per rivelare un elenco di sovrapposizioni di colore e opzioni per rendere quei colori solidi o sfumati.

Questa è una grande opzione per cambiare leggermente il colore dello sfondo per abbinare il vostro marchio o evidenziare il contenuto in primo piano. Potete anche regolare l’Opacità per assicurarvi che la sovrapposizione del colore non sovrasti lo sfondo.

In alternativa, considerate il plugin Stackable Page Builder Gutenberg Blocks per aprire strumenti più avanzati per gli sfondi sui singoli blocchi.

Come Mettere un’Immagine di Sfondo Dietro l’Intestazione di WordPress

Fino ad ora, abbiamo parlato di come aggiungere un’immagine di sfondo al vostro intero sito WordPress, insieme a metodi per sfondi su aree specifiche come blocchi WordPress, articoli e pagine. Ma che dire dell’area che contiene il vostro menu e il vostro logo?

A volte, uno sfondo dietro la vostra intestazione è tutto ciò di cui avete bisogno.

Impostare un’immagine di sfondo per l’intestazione aggiunge nuovo brio al vostro sito, specialmente se c’è una qualche celebrazione o una grande vendita in corso che potete evidenziare.

Per iniziare, andate su Aspetto > Header nella bacheca di WordPress.

Nota: potete anche trovare le impostazioni dell’intestazione andando su Aspetto > Personalizza > Header.

Ora dovreste vedere un’anteprima della vostra homepage sul lato destro dello schermo, insieme alle impostazioni dell’header a sinistra.

Il modulo Header spiega le dimensioni preferite per qualsiasi immagine di sfondo dell’intestazione, quindi potete scegliere di ritagliare la vostra immagine prima di caricarla o aspettare di avere l’immagine sulla vostra bacheca di WordPress.

Sotto il titolo Current header, fate clic sul pulsante Aggiungi nuova immagine.

Gli header possono essere complicati perché dovete assicurarvi che tutti i link e gli elementi di testo (per non parlare del vostro logo) appaiano chiaramente sopra l’immagine di sfondo.

Pertanto, vi consigliamo di testare le immagini di sfondo e considerare immagini che si attengono a colori più solidi e modelli. Non renderanno così difficile vedere le voci del vostro menu e il vostro logo.

Selezionate un’immagine che vi sembra ideale, poi fate clic sul pulsante Seleziona e ritaglia per procedere.

Ci piace lo strumento di ritaglio integrato poiché fornisce automaticamente le dimensioni giuste per l’immagine di sfondo dell’header. Questo dovrebbe accelerare il processo rispetto a quando si modifica una foto, magari tramite Photoshop, prima del caricamento.

Spostate la casella di ritaglio nella posizione che ha più senso per la vostra immagine di sfondo. Sentitevi liberi di trascinare uno degli angoli se avete bisogno di ridurre l’immagine ancora di più.

Una volta che avete il ritaglio perfetto, fate clic sul pulsante Ritaglia immagine.

L’immagine di sfondo dell’header viene immediatamente attivata nell’anteprima del Personalizza di WordPress, aiutandovi a vedere esattamente cosa vedranno i vostri clienti con questo tipo di sfondo.

Noterete che l’immagine di sfondo dell’header non si estende al resto del contenuto della pagina. Rimane nell’header, dietro qualsiasi cosa che si trova lì, come un logo, uno slogan, un menu e una barra di ricerca.

Un’altra opzione per lo sfondo dell’header è quella di caricare diverse immagini e farle ruotare in modo casuale, aggiungendo un po’ di brio e sorpresa al vostro sito web ogni volta che un utente arriva sulla homepage.

Per far sì che questo funzioni, dovete prima avere diverse immagini caricate nella casella delle impostazioni dell’header. Fate clic sul pulsante Aggiungi nuova immagine per completare questo processo.

Una volta che avete più di un’immagine, fate clic sul pulsante Randomize Uploaded Headers per attivare la funzione che mostra ogni volta uno sfondo diverso per l’header.

Potreste notare che l’aggiunta di un’immagine di sfondo all’header rende difficile vedere alcuni elementi dello stesso, come il vostro menu o un carrello della spesa.

Se questo è il caso, vi suggeriamo di non eliminare immediatamente l’immagine dell’header. Andate invece ai campi Colore del testo e Colore del link per vedere se qualche aggiustamento può aiutare.

L’impostazione del colore del testo controlla qualsiasi testo nell’header che non è collegato a un’altra pagina interna o esterna. Molte volte questo equivale unicamente al tagline del sito, se ne avete uno, ma a volte possono esserci altri elementi come il totale del carrello della spesa o le icone dei social media che cambiano colore con il testo.

L’altra casella è per il Colore del link. Molto probabilmente vedrete più modifiche quando regolate questo campo colore poiché include tutte le voci di menu collegate ad altre pagine.

Ecco un esempio di cosa succede quando scegliete un nuovo colore sia per il Colore del testo che per il Colore del link. Potete vedere che il tagline e il nome del sito sono cambiati, il menu è diventato bianco, e così la maggior parte degli altri elementi dell’header come l’icona del carrello.

Per coloro che non sono interessati a usare un’immagine di sfondo per l’header, c’è anche la possibilità di usare uno sfondo a tinta unita.

Per questo, trovate il campo Colore di sfondo sotto la stessa area Impostazioni dell’header.

Fate clic sul pulsante Seleziona colore e scegliete dal pannello dei colori per vedere i risultati dell’anteprima. Potete anche cambiare i colori del testo quando usate un colore di sfondo.

Dopo aver testato ciò che funziona meglio per il vostro header e aver deciso l’immagine di sfondo perfetta, fate clic sul pulsante Pubblica in modo che chiunque possa vedere le modifiche.

E se avete qualche problema nel rendere le modifiche sul front-end, provate a eliminare la cache di WordPress.

Come Aggiungere Immagini di Sfondo alle Pagine di Categoria e di Accesso di WordPress

Come Aggiungere un’Immagine di Sfondo alla Categoria WordPress

Una pagina di archivio delle categorie di WordPress compila tutti gli articoli elencati sotto una certa categoria. Per esempio, molti siti web hanno categorie per tipi di post personalizzati come Prodotti. Per impostazione predefinita, tutti i siti WordPress hanno categorie per i post. Quelli che non si categorizzano vengono etichettati con la categoria Uncategorized.

Poiché le pagine di archivio delle categorie aggregano contenuti simili, ha senso includere un’immagine di sfondo pertinente su quelle pagine per mostrare meglio la categoria. Per esempio, potreste avere uno sfondo orientato alla tecnologia per una categoria Web Design o uno sfondo a forma di conchiglia o di spiaggia per una categoria Viaggi.

Il metodo CSS personalizzato (descritto di seguito) è l’opzione più economica. Tuttavia, potete anche dare un’occhiata ai vari costruttori di pagine e plugin per vedere quali di essi permettono di avere sfondi sulle pagine delle categorie.

Per completare questo compito con i CSS, aprite la vostra bacheca di WordPress e andate su Aspetto > Personalizza.

Selezionate la scheda CSS aggiuntivo per aprire il modulo che permette di digitare il vostro CSS.

Aprite una delle pagine del vostro archivio di categoria sul vostro sito WordPress. Di solito, queste pagine hanno URL come questo: http://yourwebsitedomain.com/category/travel. Dovete cambiare la parte travel con qualsiasi categoria che avete sul vostro sito e cambiare la parte yourwebsitedoman con il vostro nome di dominio attuale.

Fate clic con il tasto destro del mouse su un punto qualsiasi della pagina della categoria e poi su Inspect. Apparirà lo strumento Inspect nel vostro browser e potrete leggere il codice di quella pagina.

Cercate “body” o “class” per individuare la classe CSS per le pagine di categoria, insieme alla classe per questa categoria in particolare.

Per questa situazione, la nostra classe CSS è “category-travel”, poiché abbiamo una categoria chiamata “Travel” sul sito.

Salvate il tag CSS per dopo.

Dopo di che, tornate alla sezione CSS aggiuntivo nella sezione Personalizza di WordPress.

Incollate il seguente codice in quella casella, sostituendo la classe category-travel con la vostra e mettendo un vero URL dell’immagine nel posto che dice http://YOURIMAGEURL.jpeg.

body.category-travel {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Fate clic sul pulsante Pubblica per salvare le modifiche.

Infine, tornate alla pagina dell’archivio delle categorie sul front-end del vostro sito WordPress. Ora dovrebbe mostrare la stessa pagina di prima, ma con lo sfondo specificato nel codice CSS. Se avete qualche problema con la formattazione dell’immagine di sfondo di WordPress, tornate al pannello CSS aggiuntivo per regolare elementi come la posizione dello sfondo, le dimensioni e la funzione di ripetizione.

Come Aggiungere un’Immagine di Sfondo alla Vostra Pagina di Accesso a WordPress

La pagina di accesso di WordPress ha due versioni: una per gli utenti regolari che arrivano sul vostro sito e vogliono registrarsi e accedere, e l’altra per gli utenti interni, come amministratori e autori.

Queste pagine di login sono separate dal funzionamento principale del vostro sito web (la maggior parte dei file si trova nel file wp-login.php). Quindi, lo strumento dell’immagine di sfondo personalizzata non si rifletterà nei moduli di login.

È però possibile farlo usando un plugin chiamato Custom Login Page Customizer. Per iniziare, installate e attivate il plugin sul vostro sito WordPress.

A sinistra, vedrete una nuova scheda per LoginPress nel menu della bacheca di WordPress.

Andate su LoginPress > Impostazioni.

Qui, potete regolare le impostazioni del plugin prima di aggiungere il vostro sfondo e personalizzare qualsiasi altra parte della vostra pagina di accesso.

Per esempio, avete impostazioni per ricordare automaticamente gli utenti, mostrare campi password personalizzati e far scadere le sessioni dopo un certo periodo di tempo.

Per attivare un’immagine di sfondo personalizzata per la pagina di accesso, fate clic su LoginPress > Customizer.

Questo vi manda al Personalizza di WordPress, dove ora troverete una nuova pagina per gli strumenti di LoginPress. Noterete le schede per Temi, Logo, Sfondo e altro.

È anche possibile personalizzare la pagina di accesso facendo clic sui pulsanti all’interno dell’anteprima visiva.

Non copriremo tutte le altre impostazioni poiché in questo momento ci stiamo concentrando principalmente sullo sfondo.

Fate clic sulla scheda Sfondo per procedere.

Il primo ordine del giorno è quello di decidere se desiderate uno sfondo a colori o a immagini.

Se preferite uno sfondo colorato, individuate il campo Colore di sfondo e fate clic su Seleziona colore. Questo rivela un pannello di colori che vi permette di scegliere esattamente quale colore ha senso per il vostro business.

Come potete vedere, il cambiamento entra in vigore anche nell’anteprima del Personalizza di WordPress.

Proprio sotto l’impostazione del Colore di sfondo, c’è una sezione Immagine di sfondo.

Attivate l’interruttore Abilita immagine di sfondo per mostrare una collezione di immagini di sfondo pre-costituite.

Non ce ne sono molte da scegliere nella versione gratuita, ma il plugin ne aggiunge alte se decidete di passare alla versione premium.

Andate avanti e provate questi sfondi pre-costituiti per vedere se possono funzionare per il vostro marchio.

La cosa più comune è caricare la vostra immagine come sfondo della pagina di accesso.

Cercate la voce Immagine di sfondo e fate clic sul pulsante Seleziona immagine.

Tornerete alla Libreria Media di WordPress per caricare un’immagine dal vostro computer o sceglierne una già presente in WordPress.

Selezionate la foto desiderata e fate clic sul pulsante Scegli immagine.

L’immagine di sfondo attivata appare come miniatura nel pannello del Personalizza e nell’anteprima effettiva della vostra pagina di accesso.

Ora avete l’opzione di fare clic sul pulsante Pubblica e attenervi a quello che c’è sullo schermo. Oppure, potete scorrere fino alle impostazioni aggiuntive per assicurarvi che l’immagine caricata appaia effettivamente nella sua forma migliore.

Fate clic sul campo a discesa Background Repeat e provate opzioni come Repeat, No-repeat e Repeat-x.

A seconda delle dimensioni della vostra foto, potreste vedere l’immagine muoversi un po’.

Successivamente, guardate tra le opzioni di Select Position per spostare ancora di più l’immagine di sfondo.

Per impostazione predefinita, posizionano l’immagine al centro dello schermo, ma a volte è meglio situarla da qualche parte come in basso a destra o in alto a sinistra. Provate tutte le opzioni per capire quale funziona meglio per la vostra immagine di sfondo.

Andando avanti, il menu a discesa per l’opzione Background Image Size include delle impostazioni relative a come l’immagine copre lo spazio dello schermo, regolando le sue dimensioni con ogni opzione preimpostata.

Anche in questo caso, fate delle prove per decidere quale sembra migliore. Potreste scoprire che qualcosa come l’impostazione Contain offre una visione migliore delle impostazioni Auto o Cover.

E questo è tutto quello che c’è da fare per caricare e attivare un’immagine di sfondo per la vostra pagina di accesso!

L’ultima impostazione possibile è quella di mostrare un video come sfondo invece di un’immagine. Attivate questa impostazione se avete un video interessante relativo alla vostra attività e se non distrae troppo le persone che si collegano al sito.

Una volta fatto tutto, cliccate sul pulsante Pubblica per attivare lo sfondo della vostra pagina di accesso e vederla visualizzata ogni volta che un utente cerca di registrarsi o di accedere al sito.

Come Aggiungere un’Immagine di Sfondo al Vostro Menu di Navigazione

Potreste aver notato alcuni siti web con menu fantasiosi che includono immagini di sfondo o icone. Questa è una pratica comune nel mondo dell’eCommerce, dove il marchio può avere un mega-menu con categorie e immagini di sfondo per ogni pulsante di categoria.

Se vi interessa aggiungere sfondi al vostro menu, guardate il nostro articolo sui migliori plugin di menu per WordPress. Molti di questi plugin di menu offrono opzioni per includere sfondi di immagini e colori nel vostro menu.

Visto che ci sono diversi plugin per aggiungere un certo sfondo per i menu di navigazione, vi daremo i tutorial per due di loro, uno dei quali permette di avere uno sfondo dietro il sottomenu. L’altro invece aggiunge uno sfondo al vostro menu mobile.

Per aggiungere un’immagine di sfondo a diversi sottomenu, installate e attivate il plugin WP Mega Menu. Questo plugin vi permette di attivare e gestire un mega-menu con più livelli a discesa. È ideale per i grandi negozi online, ma serve anche per i menu più piccoli, specialmente se volete aggiungere un’immagine di sfondo o delle icone.

Cominciate trovando la scheda WP Mega Menu nella bacheca di WordPress.

Fate clic sulla voce di menu Temi.

Qui, potete vedere un elenco di temi predefiniti creati per il vostro menu dal plugin.

Potete fare clic per modificare uno dei temi o aggiungere il vostro design da zero.

Ogni tema ha le sue impostazioni dove si specificano elementi come il titolo del tema, le opzioni della barra dei menu e il logo del marchio. Quasi ogni parte del vostro menu è personalizzabile, dal menu a discesa ai sottomenu.

Tuttavia, per lo sfondo del menu, dovete semplicemente sapere quale tema volete scegliere.

Andate su Aspetto > Menu nella bacheca.

Vedrete un nuovo modulo con link a Mega Menu Settings.

Fate clic per attivare il mega-menu, poi scegliete quello che vi piace di più per il vostro sito.

Infine, fate clic sul pulsante Salva.

Ora, spostate la vostra attenzione sull’area Struttura del menu.

Scorrendo sopra una qualsiasi delle vostre attuali voci di menu si scopre un pulsante WP Mega Menu. È qui che si personalizza il layout e il design di ogni sezione a discesa.

Fate clic clic sul pulsante WP Mega Menu per qualsiasi voce di menu desideriate. In questo caso, aggiungeremo un mega-menu a tendina alla scheda Shop.

Nota: Diamo per scontato che voi abbiate già un menu configurato sul vostro sito WordPress. Leggete la nostra guida sui menu a discesa di WordPress se avete bisogno di aiuto.

Nella nuova finestra popup, fate clic sull’interruttore per attivare Mega Menu per quella particolare voce di menu.

Potete quindi aggiungere una riga a discesa e trascinare alcuni dei molti widget dal lato sinistro in quella riga. Per esempio, trascineremo un elenco di prodotti in modo che vengano visualizzati quando qualcuno scorre sulla voce di menu Shop.

Per aggiungere uno sfondo a quest’area a discesa, fate clic sul pulsante Opzioni nell’angolo in basso a sinistra.

Trovate il campo Carica immagine di sfondo.

Fate clic sul pulsante Carica per trovare la foto giusta nella vostra Libreria Media per usarla come sfondo.

Una miniatura dell’immagine appare dopo che l’avete selezionata dalla Libreria Media.

Ci sono altre impostazioni da considerare, quindi sentitevi liberi di controllare quelle, se volete.

Assicuratevi di fare clic sul pulsante Salva modifiche in fondo al pannello Opzioni.

È inoltre necessario fare clic su Salva menu nell’area Struttura del menu della bacheca di WordPress.

Ora, navigate nel front-end del vostro sito web per vedere il menu. Se scorrete sopra la voce che abbiamo appena personalizzato, dovreste vedere una sezione a discesa con lo sfondo.

Un altro modo per aggiungere un’immagine di sfondo a un menu è quello di utilizzare un menu mobile e responsive che viene visualizzato quando qualcuno accede al vostro sito web attraverso un dispositivo mobile.

Potete mettere uno sfondo dietro il menu mobile con l’aiuto del plugin WP Mobile Menu.

Dopo aver installato e attivato il plugin WP Mobile Menu, andate su Mobile Menu Options nella bacheca di WordPress.

Il plugin offre diversi modi per configurare il vostro menu mobile. Il requisito generale è quello di abilitare uno dei formati di menu e indicare quale menu WordPress si desidera utilizzare per quel menu mobile.

Per esempio, possiamo fare clic sull’interruttore Enable Left Menu (attivando un menu mobile che si trova sul lato sinistro dello schermo) e scegliere l’opzione Main Menu dal menu a tendina Left Menu. Questo collega il nostro attuale Main Menu con il menu mobile, così i visitatori vedono le stesse schede.

Dipende dal tipo di menu mobile che create, ma dato che stiamo impostando un menu a sinistra, possiamo fare clic sulla scheda Left Menu per rivelare le impostazioni appropriate per aggiungere uno sfondo.

Scorrete fino al campo Panel Background Image e fate clic sul segno “+” per aprire la Libreria Media.

Selezionate un’immagine dalla vostra Libreria Media e aggiungetela al campo.

Dovreste vedere una versione in miniatura dell’immagine di sfondo come conferma.

Selezionate il pulsante Save Changes per attivare lo sfondo.

Visto che il plugin genera dei menu per cellulari, il menu può apparire solo quando il vostro browser è impostato su una larghezza ridotta o quando andate al vostro sito su un telefono o un tablet.

Il nuovo menu viene consolidato sotto un’icona hamburger (tre linee orizzontali).

Fate clic su questo per testare il nuovo menu con lo sfondo.

Come mostrato nello screenshot, lo sfondo viene messo dietro l’intero menu mobile in modo che chiunque lo possa vedere.

Come Aggiungere un’Immagine di Sfondo di WordPress a una Pagina di Manutenzione

Tutti i siti web occasionalmente richiedono manutenzione, e a volte questa manutenzione richiede così tanto tempo che la visualizzazione di una pagina di manutenzione aiuta.

Le immagini di sfondo giocano un ruolo importante quando si lavora con le pagine di manutenzione. La maggior parte delle pagine di manutenzione consiste in un’immagine di sfondo a tutto schermo e forse del testo o dei link con altre risorse.

Se avete già una pagina di manutenzione che non include un’immagine di sfondo, considerate i seguenti passi se volete personalizzare il modo in cui accogliete le persone sul sito quando questo è temporaneamente chiuso per manutenzione.

È possibile aggiungere un’immagine di sfondo a una pagina di manutenzione con l’aiuto del plugin Maintenance. Installate e attivate il plugin sul vostro sito web.

Una volta che è attivo, trovate il pulsante Maintenance is On/Off nella parte superiore della bacheca.

Fate clic sul pulsante per andare alla pagina delle impostazioni del plugin Maintenance.

Un altro modo per arrivare alla pagina delle impostazioni è facendo clic sulla voce del menu Maintenance nel menu laterale della bacheca.

La pagina Settings del plugin Maintenance include una discreta collezione di opzioni da personalizzare, ma l’area principale da considerare è il modulo General Settings. Qui, è possibile scrivere un Headline e una Description, entrambi i quali servono come testo che si sovrappone allo sfondo che stiamo per inserire.

Il titolo della pagina viene visualizzato nella scheda del browser, quindi dovreste considerare di personalizzare anche quello.

È possibile utilizzare il plugin Maintenance per qualsiasi cosa, dalle pagine di manutenzione alle pagine “Coming Soon”, quindi si potrebbe digitare qualcosa come “Il nostro sito è in fase di manutenzione”, o potreste mostrare un po’ di informazioni sulla vostra azienda e includere un modulo per le persone a digitare i loro indirizzi email.

Andando avanti, il plugin offre un’opzione per caricare il vostro logo, che si sovrappone anche all’immagine di sfondo.

Fate clic sul pulsante Carica logo e scegliete il vostro logo per vedere la sua miniatura nella bacheca.

Infine, il campo Immagine di sfondo vi chiede di fare clic su Upload Background Image.

Caricate un’immagine dal vostro computer o passate attraverso la vostra Libreria Media per trovare uno sfondo adatto alla pagina di manutenzione.

Nota: le migliori immagini di sfondo per la pagina di manutenzione sono grandi, ad alta risoluzione e hanno orientamento orizzontale. Un’alternativa di sfondo “Portrait Mode” è disponibile nelle impostazioni qui sotto.

Una volta scelto lo sfondo, vedrete un’anteprima in miniatura più piccola nella bacheca.

Anche se un’immagine di sfondo con un orientamento orizzontale ha più senso per i computer desktop e gli schermi più larghi, molte persone finiscono sul vostro sito usando schermi con orientamenti verticali, come con un telefono tenuto in verticale.

Pertanto, un’immagine di sfondo più ampia non sarà altrettanto bella. Ecco perché il plugin offre un’immagine di sfondo in modalità ritratto che serve come alternativa, che verrà introdotta reattivamente ogni volta che un utente visita la pagina usando uno schermo orientato in verticale.

È importante includere un’immagine in questo campo, quindi fate sul pulsante Upload image for portrait device orientation.

Questa volta, trovate un’immagine che sia più alta che larga (modalità ritratto). Potete sempre ritagliare l’immagine di sfondo originale per farla diventare un ritratto, oppure avete la possibilità di caricare un’immagine completamente diversa per riempire lo spazio.

Evidenziate l’immagine che volete e fate clic sul pulsante Seleziona immagine per inserirla nella bacheca.

Tutte queste impostazioni non significano nulla se non si attiva la modalità di manutenzione.

Per farlo, individuate l’interruttore Maintenance On/Off nella parte superiore della pagina delle impostazioni.

Posizionate l’interruttore su “On”, poi selezionate il pulsante Save Changes.

Andate al front-end del vostro sito web per assicurarvi che l’immagine di sfondo e la pagina di manutenzione appaiano correttamente.

C’è una buona probabilità che non sia così.

Ci sono due ragioni per questo: in primo luogo, è necessario uscire dall’account WordPress Admin per vedere il sito in modalità di manutenzione. In secondo luogo, potrebbe essere necessario eliminare la cache del sito per aggiornare il cambiamento del contenuto.

Per esempio, quando usciamo dall’account Admin, la pagina di manutenzione ora appare su qualsiasi pagina.

L’immagine di sfondo è lì, insieme alle mie personalizzazioni come il logo e la descrizione del testo.

Inoltre, cambiando le dimensioni delle finestre del browser in un orientamento più verticale, lo sfondo della modalità ritratto scatta in posizione.

Dovreste anche vedere la modalità verticale quando visitate il sito su un telefono o un tablet.

Un altro tipo di immagine di sfondo con il plugin si chiama Preloader Image. Questo essenzialmente carica un’immagine veloce con un effetto animato prima di rivelare la pagina di manutenzione effettiva, lo sfondo e il contenuto.

Come l’immagine di sfondo regolare, fate clic sul pulsante Upload Preloader per trovare un’immagine che sembra carina e aggiungetela alla bacheca.

Di nuovo, fate sul pulsante Save Changes ed eliminate la cache.

Per default, l’effetto Preloader Image gira per un momento, e poi scompare per presentare la pagina di manutenzione e l’immagine di sfondo.

Sta a voi decidere se volete mantenere questo tipo di effetto o no.

Diversi altri elementi di sfondo sono disponibili in modo che possiate sperimentare nel pannello delle impostazioni del plugin Maintenance.

Per esempio, potreste voler aggiungere un colore di sfondo invece di un’immagine di sfondo.

Se questo è il caso, andate al campo Colore di sfondo e selezionate un colore che si adatti al vostro marchio.

Il colore di sfondo non viene mostrato per la pagina di manutenzione a meno che non si disabilitino tutte le altre immagini di sfondo.

Quindi, assicuratevi di eliminare l’immagine di sfondo.

Dovete anche eliminare l’immagine di sfondo della modalità ritratto.

Salvate le modifiche e cancellate la cache. Poi andate al front-end del vostro sito per vedere il colore di sfondo in vigore.

Altre impostazioni da considerare includono elementi come il colore del carattere, la famiglia del carattere e la sfocatura dello sfondo.

Raccomandiamo anche di pensare se è necessario avere un login front-end o no. Questo fornisce un modo per gli utenti di accedere ai loro account e ottenere l’accesso ai profili, se necessario.

Una volta fatto tutto, fate clic sul pulsante Save Changes.

Il plugin Maintenance offre anche diversi temi pre-costituiti con belle immagini di sfondo e layout e testi progettati professionalmente.

Potete trovare temi per pagine coming soon e layout di manutenzione, insieme a pagine per raccogliere indirizzi email e altre informazioni di contatto.

È necessario acquistare i temi per utilizzarli.

A seconda del vostro budget, sono piuttosto economici e hanno un aspetto fantastico.

Se invece non vi interessa comprare un tema, tutte le impostazioni di cui sopra sono a vostra disposizione. Potete anche andare nel modulo CSS Personalizzato per configurare la vostra pagina di manutenzione e l’immagine di sfondo come volete.

Ricordate che le impostazioni della pagina di manutenzione raramente entrano in vigore a meno che non usciate dall’account admin e facciate clic sul pulsante Clear Cache.

Potete trovare il pulsante Clear Cache nell’angolo in alto a destra della bacheca quando usate Kinsta. Se usate un altro host, considerate uno dei tanti plugin di caching sul mercato.

Una volta cancellata la cache e salvate le impostazioni, dovreste vedere una bella immagine di sfondo che completa la pagina di manutenzione!

Come Aggiungere uno Sfondo a WordPress con un Page Builder di Terze Parti

Il nostro articolo sui migliori costruttori di pagine offre una lista di opzioni per scegliere un costruttore di pagine con funzioni drag-and-drop. WordPress include già un page builder in Gutenberg, ma molti proprietari di siti web preferiscono altre soluzioni.

La seguente sezione spiega come implementare uno sfondo usando alcuni popolari costruttori di pagine, tra cui Elementor, Beaver Builder e Page Builder di SiteOrigin.

Aggiungere uno Sfondo a WordPress con Elementor

Elementor, il popolare costruttore di pagine pensato per accelerare drasticamente la creazione di siti web, offre un plugin gratuito con diversi strumenti per le immagini di sfondo.

Inoltre, Elementor presenta una flessibilità dello sfondo visivo per varie parti del vostro sito web invece di limitare gli sfondi all’intero sito web. Per esempio, è possibile aggiungere uno sfondo dietro qualsiasi sezione dei blocchi di costruzione e mostrare sfondi diversi da pagina a pagina.

Per iniziare, installate e attivate il plugin Elementor.

Elementor posiziona le sue impostazioni per lo sfondo in ogni sezione del costruttore, rendendo facile selezionare un elemento e implementare uno sfondo se necessario. Pertanto, potete tecnicamente andare in qualsiasi pagina o articolo e aspettarvi di avere accesso a un pulsante di caricamento dello sfondo.

In questo caso, andiamo alla Homepage del nostro sito di prova. Visitate la pagina di vostra scelta selezionandolo dall’elenco in Pagine > Tutte le pagine. Potete anche fare lo stesso con Articoli.

Una volta sull’editor di pagina predefinito di WordPress, fate clic sul pulsante per Edit With Elementor.

Questo sposta la vista sul vostro schermo all’editor di Elementor. Qui, il lato sinistro ha un menu con moduli drag-and-drop per costruire e modificare la vostra pagina.

La funzionalità di sfondo non è disponibile in una sezione o blocco, ma piuttosto nelle Impostazioni primarie per quella pagina.

Quindi, fate clic sulla piccola icona Settings (sembra un ingranaggio) nell’angolo in basso a sinistra dell’editor.

Vedrete una sezione per le impostazioni generali della pagina.

Fate clic sulla scheda Style nella parte superiore della sezione Page Settings.

Sotto Style, individuate il campo Background Type e fate clic sull’icona del pennello per aggiungere uno sfondo standard.

Poi, scegliete il tipo di sfondo che volete far apparire. Per esempio, il campo Colore vi permette di passare a uno sfondo in tinta unica. C’è anche un’opzione Gradient nel campo Background Type se questo è più nel vostro stile.

Fate clic sul pulsante Choose Image sotto il campo Immagine per visualizzare la vostra Libreria Media e scegliere un’immagine di sfondo adatta a questa pagina.

Come sempre, provate le vostre immagini di sfondo e attenetevi alle dimensioni ottimali e alle migliori pratiche (alta risoluzione e orientamento verticale per la maggior parte), poi selezionate l’immagine che funziona bene e fate clic sul pulsante Insert Media.

L’immagine di sfondo selezionata appare ora nell’anteprima del sito Elementor a destra. Potreste aver bisogno di regolare altre parti del vostro contenuto per assicurarvi che elementi come testo e immagini appaiano quando sono sopra lo sfondo.

Elementor fornisce impostazioni di sfondo dell’immagine come Position, Attachment, Repeat e WordPress Background Image Size. Modificate le impostazioni per determinare se il vostro sfondo vi vede meglio come allegato fisso, o forse con un orientamento in alto a destra o una dimensione alternativa.

Premete il pulsante Update per salvare tutte le modifiche alla pagina e pubblicare il nuovo sfondo del vostro sito web.

Sfondi di Sezione con Elementor

Elementor offre funzionalità avanzate di sfondo per la maggior parte delle sezioni aggiunte alle vostre pagine.

Tutto quello che dovete fare è selezionare una sezione su una pagina Elementor e modificare le impostazioni di sfondo per limitare lo sfondo solo a quell’area.

Per esempio, possiamo selezionare la sezione Text Editor per visualizzare le impostazioni della sezione Text.

Scegliete la scheda Avanzate e trovate la sezione Sfondo all’interno di quella scheda.

Le impostazioni dello sfondo includono Background Type, Color, Image e altro, similmente alle impostazioni che abbiamo visto per le impostazioni generali dello sfondo della pagina. L’unica differenza queste impostazioni sono limitate alla sezione selezionata.

Scegliete l’icona del Paint Brush per il Background Type, poi fate clic sul pulsante Choose Image sotto il campo Image.

Scegliete un’immagine dalla Libreria Media e fate clic sul pulsante Insert Media.

Come potete vedere, l’immagine di sfondo rimane all’interno dei confini di quella sezione rimanendo però dietro il contenuto già creato per quella sezione.

Usate i selettori Position, Attachment, Repeat e Size per modificare il modo in cui l’immagine di sfondo viene presentata nella sezione.

Infine, fate clic sul pulsante Update per salvare le modifiche.

Aggiungere un’Immagine di Sfondo con Beaver Builder

Il plugin Beaver Builder include una versione Lite con alcuni strumenti di base. È uno dei costruttori di pagine più popolari sul mercato, che offre molti moduli di contenuto per elementi come video, immagini, paragrafi e altro.

Oltre a questo, potete implementare un’immagine di sfondo, un colore o un video, usando strumenti visivi e CSS per posizionare l’elemento di sfondo su tutto il vostro sito web, una pagina o una singola sezione di una pagina.

Per prima cosa, installate il plugin Beaver Builder.

Andate su qualsiasi pagina o articolo per modificarlo con Beaver Builder.

È necessario convertire le pagine create in precedenza nel formato Beaver Builder. In alternativa, avete la possibilità di creare una pagina da zero e scegliere di modificare la pagina in Beaver Builder.

Per convertire una pagina corrente in Beaver Builder, aprite l’editor della pagina e fate clic sull’icona con i tre puntini per aprire il menu View nell’angolo in alto a destra.

Scorrete verso il basso fino a trovare il link Convert to Beaver Builder.

Quando ci fate clic sopra, tutti i contenuti che avete sulla vostra pagina vengono elaborati e spostati in moduli Beaver Builder compatibili.

Per creare una pagina da zero, andate su Pagine > Aggiungi nuovo.

Poi fate clic sul pulsante Launch Beaver Builder.

Il plugin Beaver Builder vi porta a una vista frontale della pagina web. Occupa la maggior parte dello schermo agendo come un vero editor front-end in cui si clicca sugli elementi e si spostano le caselle con il mouse.

Il primo modo di aggiungere uno sfondo attraverso Beaver Builder è quello di caricare uno sfondo su un blocco di sezione. Questo potrebbe occupare la maggior parte della pagina o una frazione della pagina, a seconda delle dimensioni del vostro blocco sezione.

Una volta selezionato, trovate il pulsante Row Settings (l’icona ⚙).

Fate clic su quell’icona per rivelare le impostazioni per quella riga. Potete farlo anche con sezioni e colonne e altri tipi di blocchi.

Vedrete un pannello di impostazioni apparire in cima all’anteprima del vostro sito web. Fate clic sulla scheda Style, poi cercate la sezione Background.

Sotto Background, fate clic sul menu a tendina per mostrare tutti i tipi di sfondo.

Avete diversi tipi di Sfondo da considerare, uno dei quali è appositamente per le foto (Photo). Le altre opzioni sono:

• Color
• Gradient
• Video
• Embedded coe

Sentitevi liberi di provare i diversi tipi di sfondo.

Per esempio, potreste trovare che uno sfondo Gradient funziona meglio per la vostra immagine. Ogni tipo di sfondo include le proprie impostazioni. Il tipo Gradient, in questo caso, richiede due colori perché il gradiente passi da uno all’altro.

Optando per lo sfondo Photo potete scegliere un elemento dalla Libreria Media o incollare un URL per l’immagine. Fate sul link Select Photo se usate una foto della vostra Libreria Media.

Trovate la vostro foto di sfondo preferita e fate clic sul pulsante Select Photo.

Beaver Builder posiziona la foto nello spazio dello sfondo scelto in precedenza. La sezione Photo Settings chiede come vorresti formattare la foto. Scegliete tra opzioni come Size, Repeat, Position e Attachment.

Foto di Sfondo di Beaver Builder a Pagina intera e Globale

Beaver Builder funziona con gli strumenti di design predefiniti di WordPress e questo vuol dire che potete approfittare delle caratteristiche integrate per gli sfondi.

Pertanto, potete andare alla scheda Aspetto > Sfondo per attivare uno sfondo fotografico per tutto il vostro sito web.

In alternativa, aprite qualsiasi pagina web in Beaver Builder e fate clic sul menu a discesa Tools nell’angolo in alto a sinistra.

Qui, fate clic sull’opzione Global Settings.

Il pannello delle impostazioni globali offre la possibilità di cambiare l’intero sito web, sovrascrivendo o modificando il codice integrato di WordPress. Pertanto, vorremmo inserire un blocco di codice CSS per cambiare l’immagine di sfondo dell’intero sito web (globalmente).

Fate clic sulla scheda CSS nelle impostazioni globali (Global Settings) e incollate il seguente frammento di codice nel campo:

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

Ha più senso usare Beaver Builder per gli sfondi delle pagine personalizzate, poiché ogni pagina ha la sua immagine come sfondo.

Nell’editor di pagina, aprite di nuovo il menu Tools.

Selezionate l’opzione Layout CSS & Javascript.

Incollate lo stesso codice nella scheda CSS, cambiando il testo URL to Image con l’URL reale e regolando le impostazioni che volete:

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

Aggiungere una Riga Semplice o uno Sfondo di Widget con Page Builder by SiteOrigin

Page Builder by SiteOrigin è ancora un altro strumento di creazione di siti web visivi drag-and-drop. Offre capacità limitate per inserire sfondi per l’intero sito web (dovreste ricorrere allo strumento standard WordPress Custom Background). Tuttavia, fornisce impostazioni per aggiungere immagini di sfondo e colori per le righe e i widget utilizzati da SiteOrigin.

Per prima cosa, scaricate e attivate il plugin Page Builder by SiteOrigin.

Aprite una nuova pagina o considerate l’aggiunta di una riga SiteOrigin a una pagina corrente del vostro sito web.

Ogni sezione di SiteOrigin vi chiede di aggiungere un widget o di aggiungere una riga. Avete anche la possibilità di sfogliare i Layout pre-costruiti (Pre-built Layouts) se preferite non iniziare il design da zero.

La buona notizia è che sia i widget che le righe in SiteOrigin hanno impostazioni per includere immagini di sfondo.

Quindi, fate clic sul pulsante Add Widget o Add Row per procedere.

In questo esempio, ci concentreremo sulla libreria Widgets.

Qui potete scegliere uno dei tanti widget forniti da SiteOrigin, dai menu di navigazione alle pagine ai contenuti degli articoli e alle liste di prodotti.

Sceglieremo il widget Products per questo esempio, ma potete scegliere uno dei tanti altri widget in base alle esigenze del vostro design. Inoltre, potete raggruppare questi widget con una riga, poi aggiungere un’immagine di sfondo a quella riga in modo che lo sfondo appaia dietro a più widget.

Il nuovo widget o riga finisce nell’editor di pagina di SiteOrigin. La maggior parte delle opzioni di SiteOrigin rimane nella bacheca di WordPress, quindi non c’è un editor front-end come con altri costruttori di pagine.

Per aggiungere uno sfondo a qualsiasi elemento di SiteOrigin, scorrete sull’elemento e fate clic sul link Edit.

Ho scelto il widget Products per questo esempio, ma ogni widget ha le sue impostazioni per configurare il suo aspetto sul vostro sito web.

Gli strumenti per lo sfondo si trovano sotto il menu a tendina Design. Fate clic su quello per andare avanti.

Trovate il campo Background Image e fate clic sul pulsante Seleziona immagine.

Avete anche la possibilità di incollare un URL esterno (External URL) per l’immagine di sfondo.

La Libreria Media vi mostra le immagini attuali che avete caricato su WordPress. Fate clic sull’immagine che funziona meglio per questo sfondo e selezionate il pulsante Done per inserirla nel modulo SiteOrigin.

Ora il campo Background Image presenta una versione in miniatura di quella foto.

Scorrete le impostazioni per configurare tutto, dalla visualizzazione dell’immagine di sfondo (Background Image Display) al colore del font (Font Color) per il testo in sovrapposizione.

In generale, dovreste essere in grado di ottenere i risultati desiderati scegliendo la visualizzazione Cover. Sembra che il plugin SiteOrigin abbia come impostazione predefinita la visualizzazione Tiled, quindi potreste doverla cambiare.

Assicuratevi di fare clic sul pulsante Done quando avete completato le vostre impostazioni personalizzate per lo sfondo.

Il widget (in questo caso, il widget Products) va nell’editor WordPress di SiteOrigin per quella pagina. Potete trascinare questo elemento dove volete sulla pagina e aggiungere nuovi widget e righe sopra e sotto di esso.

Dovete fare clic sul pulsante Preview o Update e poi navigare nel front-end della pagina per vedere i risultati.

Lo sfondo che abbiamo aggiunto ora appare vincolato dal widget Products di prima. Questo sfondo ha ovviamente bisogno di alcune modifiche per diventare più carino, ma è comunque un buon inizio per riempire lo spazio con un’immagine di sfondo dall’aspetto molto più creativo.

Aggiungere Immagini di Sfondo Uniche con Brizy

L’ultimo costruttore di pagine per questa dimostrazione, Brizy, offre modelli eleganti e un’interfaccia front-end superiore per aggiungere design insoliti e personalizzazioni rapide.

Il costruttore di pagine Brizy include un ampio set di moduli drag-and-drop da incorporare nel vostro sito web attuale. Vi permette anche di iniziare da un modello vuoto e costruire il vostro intero sito web con Brizy.

Per questo forse sarete felici di sapere che Brizy ha anche uno strumento di sfondo per quasi tutti gli elementi che includete attraverso il costruttore di pagine. Per non parlare del fatto che avrete a disposizione diversi stili di sfondo unici, come l’aggiunta di un video in loop sullo sfondo o una mappa completa.

Per approfittare di queste impostazioni di sfondo, installate e attivate il plugin Brizy per iniziare.

Gran parte del processo di progettazione di Brizy richiede di iniziare con un template vuoto. Brizy tenterà di convertire i vostri vecchi design in moduli Brizy, ma noi troviamo che sia meglio iniziare da capo.

Andate su una pagina o un articolo nella vostra bacheca di WordPress e iniziate a costruire la pagina con un titolo e forse qualche contenuto.

Dovreste vedere un pulsante per Edit With Brizy. Fate clic su quello e verrete rediretti al costruttore di pagine completo di Brizy.

Il costruttore di pagine Brizy mostra un’anteprima completa del vostro sito web con pulsanti, testo e immagini. Se la pagina è vuota, fate clic sul pulsante Start Building Your Page.

Cercate le schede Layouts and Blocks nella barra del menu superiore.

I layout forniscono pagine web pre-costruite, piene di contenuti e pronte a partire finché non si personalizza il contenuto della propria azienda. I blocchi sono pezzi più piccoli di pagine web, ma sono ancora pre-costruiti e spesso più facili da usare e manipolare rispetto alla creazione di un blocco in autonomia.

Non importa in che direzione andate. Sfogliate i layout e i blocchi e aggiungetene quanti ne volete alla pagina. Questi sono semplicemente gli elementi che userete per formare una pagina web completa.

Dopo che avete alcuni blocchi o layout sulla pagina web, tornate alla schermata dell’editor per guardare il vostro lavoro.

Vedrete che ogni sezione del blocco include un’icona Settings in alto a destra, che di solito appare quando scorrete la sezione.

Fate clic su questo per il blocco di vostra scelta: aggiungeremo uno sfondo a quel blocco.

Il pannello Block Settings rimane nell’angolo in alto a destra. Scorrete le icone del menu per vedere cosa fanno.

Uno di questi è per i colori (Colors) e si riferisce allo sfondo colorato. Potete cambiarlo e aggiungere un gradiente se siete più propensi a mantenere una vista di sfondo a tinta unita o a gradiente.

Il pulsante con l’icona a sinistra contiene le impostazioni dello sfondo.

Fate clic su questo pulsante per aprire gli strumenti rapidi e caricare un’immagine di sfondo in questo blocco.

Brizy offre tre elementi media per gli sfondi:

• Immagini
• Video
• Mappe

Per prima cosa, provate il tipo Image per capire come funziona con il vostro layout attuale.

Fate sull’area di Image upload per trovare una foto nella Libreria Media e aggiungerla allo sfondo.

Per questo tutorial abbiamo trovato una foto di un pannello di legno e abbiamo indicato che preferiremmo non avere un effetto di parallasse.

Questo aggiunge un effetto piacevole poiché lo sfondo colorato serve come una sovrapposizione, ma si vede ancora la struttura del legno dietro di esso.

Ricordate che potete sempre regolare il campo Parallax per rendere l’immagine di sfondo fissa, animata o a scorrimento.

Ed è così che si inserisce un’immagine di sfondo con Brizy!

La parte migliore di Brizy è che potete continuare a muovervi attraverso il design e fare clic sul pulsante Settings di ogni sezione.

Una sezione più in basso, possiamo inserire un’altra immagine di sfondo senza spenderci molto tempo.

E per dimostrare la potenza degli altri tipi di sfondo, possiamo fare clic sul tipo di sfondo Map, digitate un indirizzo, e guardate come una mappa di quel luogo appare proprio dietro il contenuto in primo piano.

La mappa viene situata come sfondo completo e ha una funzione di zoom se non viene bene con le impostazioni predefinite.

Infine, vi consigliamo di controllare lo strumento video di sfondo Brizy, situato nella stessa sezione dello strumento di sfondo dell’immagine. Funziona inserendo un URL video (YouTube o Vimeo), cosa che aggiungerà un video completo proprio dietro il contenuto in primo piano. Fornisce anche un’impostazione per mettere in loop il video e scegliere quando dovrebbe iniziare mentre l’utente scorre sulla sezione.

La gif animata qui sotto dà un breve esempio del video in azione, anche se probabilmente farebbe comodo un po’ di editing.

Ridimensionamento dell’Immagine di sfondo, Sourcing e Modifiche di Base

Abbiamo accennato prima nell’articolo che anche se non c’è una dimensione perfetta per un’immagine di sfondo, è meglio iniziare con un formato piccolo di 1024 x 768 pixel e di attenersi a un rapporto di aspetto comune come 16:9. Il rapporto d’aspetto non è tanto importante quanto la dimensione e la risoluzione dell’immagine, dato che potete ritagliare l’immagine o lasciare che WordPress lo faccia per voi.

È anche essenziale trovare i posti giusti per comprare o prendere in prestito le immagini di sfondo di WordPress se non avete intenzione di scattare le vostre foto.

Dove Trovare Immagini di Sfondo Adatte

Per la vostra ricerca di immagini di sfondo, guardate la nostra guida su come trovare e aggiungere foto stock senza lasciare WordPress. Abbiamo anche una lista di fonti utili per cercare foto stock ad alta risoluzione, molte delle quali sono gratuite.

In generale, vi consigliamo di scattare/creare da voi le immagini di sfondo. Se questo non è possibile o non avete esperienza con la fotografia o il design grafico, pensate alle risorse gratuite di fotografia stock. Potete anche scegliere di pagare per un’immagine di sfondo da uno dei tanti siti web di immagini stock premium, alcuni dei quali fanno pagare una quota mensile per scaricare un mucchio di foto.

Alcuni dei siti più famosi per le immagini stock sono:

• Unsplash – Gratis e senza attribuzione.
• Visual Hunt – Foto gratis. La maggior parte delle immagini non richiede attribuzione.
• Pexels – Gratis e senza attribuzione.
• Pixabay – Gratis per la maggior parte delle immagini che non richiedono attribuzione.
• iStockphoto – Un abbonamento premium abbastanza economico per immagini royalty-free.
• Shutterstock – Immagini royalty-free per una quota di abbonamento ragionevole.

Come Cambiare l’Immagine di Sfondo di WordPress con i CSS Personalizzati

Come abbiamo imparato, è possibile aggiungere un’immagine di sfondo WordPress con gli strumenti standard integrati di WordPress o con un plugin. Non importa quale strada scegliete, basta che otteniate il risultato desiderato. C’è anche la possibilità di utilizzare CSS personalizzati per stilizzare l’immagine di sfondo o aggiungerla al vostro sito.

Non copriremo le complessità del CSS personalizzato, perché ogni immagine di sfondo e tema avrà un processo diverso. Tuttavia, vi consigliamo di leggere la nostra guida su come modificare, aggiungere e personalizzare i CSS in WordPress. L’articolo copre suggerimenti utili per aggiungere immagini di sfondo a quasi tutte le sezioni del sito web, dalle voci di menu a specifici blocchi di pagina.

Risolvere i Problemi Comuni con un’Immagine di Sfondo di WordPress

Tutti i siti WordPress sono dotati della possibilità di aggiungere uno sfondo. Tuttavia, questa caratteristica principale non funziona per tutti i siti web. Per esempio, potreste scoprire che il tema che state usando non supporta gli sfondi personalizzati. O forse continuate a caricare uno sfondo, ma non appare in modo del tutto corretto (troppo grande o troppo sfocato).

Incontrare un problema con lo sfondo di WordPress è frustrante e, purtroppo, piuttosto comune. Abbiamo compilato alcuni dei problemi più comuni con le immagini di sfondo qui sotto e abbiamo tracciato ogni linea d’azione.

Come Risolvere i 5 Problemi Più Comuni con le Immagini di Sfondo in WordPress

Il Mio Tema Non Supporta un’Immagine di Sfondo di WordPress

Gli sviluppatori di temi controllano la funzione Custom Backgrounds in WordPress. Possono attivarla o disattivarla, a seconda che vogliano abilitare il supporto per lo sfondo personalizzato. Lo sfondo viene disattivato quando non è necessario, o forse è in conflitto con il design generale del tema.

Se vedete che il vostro tema non supporta uno sfondo personalizzato o limita le vostre capacità quando aggiungete uno sfondo, considerate queste soluzioni:

• Sostituite il tema con uno che supporta gli sfondi personalizzati. Cercate Sfondi personalizzati negli elenchi delle caratteristiche quando acquistate o scaricate temi.
• Usate un plugin di sfondo per sovrascrivere la funzione predefinita di sfondo personalizzato che viene bloccata.

Anche se potete includere il vostro codice personalizzato o andare nei file del tema per attivare gli sfondi personalizzati, di solito raccomandiamo di non usare entrambe le opzioni. La cosa migliore da fare è trovare un tema che supporti gli sfondi o aggiungere un plugin che permetta di installare gli sfondi ma senza compromettere molto la funzionalità del tema.

La Mia Immagine di Sfondo di WordPress È Troppo Scura o È del Colore Sbagliato

Un’immagine di sfondo scurita potrebbe derivare da alcune delle impostazioni che si attivano insieme all’immagine di sfondo stessa. La maggior parte delle volte, ha a che fare con un filtro di sovrapposizione o uno sfondo poco colorato.

Per la maggior parte dei casi in cui lo sfondo è scolorito, dovete controllare il vostro tema o il plugin che controlla lo sfondo stesso.

Cercate un’impostazione vicino al campo dello sfondo che parla di filtri o sovrapposizione. Potreste anche trovare una funzione di opacità che dovrebbe essere cancellata in modo che il vostro sfondo venga visualizzato correttamente.

Se tutto il resto fallisce, il tema potrebbe avere un filtro di sfondo hardcoded nei file del tema. In questo caso, contattate chi ha sviluppato il tema per capire ciò che è possibile correggere nel colore di sfondo.

La Mia Immagine di Sfondo di WordPress Non È Nella Giusta Posizione

L’immagine di sfondo che appare nella posizione sbagliata tende a disturbare il design generale del vostro sito web. Potreste scoprire che lo sfondo è troppo a sinistra o a destra, o forse quello che dovrebbe essere il centro dello sfondo non appare affatto sullo schermo.

Per fortuna, per spostarsi sullo sfondo bastano pochi clic.

Andate su Aspetto > Sfondo nella bacheca di WordPress. Trovate l’immagine che avete attualmente caricato come sfondo e cercate il campo Posizione. Questo campo vi permette di spostare il posizionamento dello sfondo, con opzioni per spostarlo a sinistra, a destra, in alto, in basso o agli angoli.

Vi consigliamo di fare clic su tutti i pulsanti di posizionamento per vedere i risultati che producono. Dopo aver trovato la posizione giusta, salvate la pagina.

La Mia Immagine di Sfondo di WordPress Si Ripete Più e Più Volte

Le texture e gli sfondi a tinta unica spesso hanno un aspetto migliore se ripetuti, visto che nascondono le interruzioni dell’immagine. Molte immagini si vedono proprio male quando ripetute come sfondo, specialmente quelle con molti dettagli e vari gradi di colore.

Un layout di immagine di sfondo ripetuto è utile se la vostra immagine originale non è abbastanza grande da coprire l’intero sfondo senza sembrare allungata. Pertanto, WordPress a volte usa un layout ripetuto per mantenere la risoluzione dell’immagine.

La soluzione principale a questo problema si trova nella sezione Sfondo da Aspetto > Sfondo in WordPress. Con una foto caricata come sfondo, provate i preset come Fill Screen, Fit To Screen, o Custom, invece dell’opzione Repeat .

Tuttavia, potreste scoprire che cercare di ottenere un’immagine più piccola per coprire l’intera schermata di sfondo genera risultati sgradevoli. In questo caso, la soluzione migliore è sostituire completamente l’immagine di sfondo e cercarne una grande, ad alta risoluzione e pronta per essere pubblicata sul web.

La Mia Immagine di Sfondo di WordPress È Allungata

Un’immagine di sfondo allungata significa che le vostre impostazioni di sfondo personalizzate tentano di prendere un’immagine più piccola e coprire l’intero schermo con l’immagine.

Questo può accadere anche con immagini più grandi e ad alta risoluzione se non corrispondono al rapporto d’aspetto richiesto. Per le immagini di sfondo allungate, pensate al file di origine. Scegliere un’immagine diversa e più adatta è l’opzione migliore.

Un altro problema è che potreste avere le impostazioni dello sfondo mal configurate. Verificate cose come la posizione dell’immagine di sfondo o l’effetto allungato che può emergere con la modalità Fill Screen. Potrebbe essere necessario attenersi solo alle dimensioni originali o aggiungere una funzione Repeat per far funzionare il tutto.

Altri Suggerimenti per la Risoluzione dei Problemi dello Sfondo

• Chi sviluppa temi ha pieno potere sulla funzione di sfondo personalizzato in WordPress. Se avete installato un tema e non riuscite a far funzionare lo sfondo, la cosa migliore è contattare chi ha sviluppato il tema o installarne uno nuovo per vedere se questo risolve il problema.
• I colori e le immagini di sfondo personalizzati spesso sovrascrivono qualsiasi codice CSS personalizzato che si implementa per controllare le dimensioni, il posizionamento o l’origine dell’immagine di sfondo. Potrebbe essere necessario attenersi alle impostazioni di sfondo del tema invece di usare CSS personalizzati.
• Un tema può essere venduto con uno sfondo personalizzato già attivato. Di solito, tutto quello che dovete fare è sostituire l’immagine di sfondo con una nuova. A volte, è necessario attingere ai file del tema o usare CSS personalizzati per sovrascrivere le impostazioni.

I Migliori Plugin per Immagini di Sfondo per WordPress

Se volete avere ulteriori capacità di editing per un’immagine di sfondo, vi interessano gli sfondi video, o strumenti che permettono di avere sfondi specifici per la pagina, potete considerare i seguenti plugin per immagini di sfondo per WordPress:

Simple Full Screen Background Image

Il plugin Simple Full Screen Background Image non è molto diverso dallo strumento predefinito per le immagini di sfondo in WordPress, tranne che aggiunge funzioni automatiche per cose come il ridimensionamento e la scalatura per i browser.

Nel complesso, questo plugin funziona meglio per coloro che hanno un tema che blocca la possibilità di aggiungere uno sfondo, o forse stanno avendo problemi con lo strumento di sfondo integrato in WordPress. Sovrascrive quello che avete su WordPress e aggiunge uno speciale pulsante di sfondo nella vostra bacheca di WordPress per caricare istantaneamente un’immagine dal vostro computer.

Non c’è altro da dire!

Il plugin ha anche una versione Premium che offre una scalatura migliorata, supporto per un numero illimitato di sfondi, effetti unici, e molto altro.

Advanced WordPress Backgrounds

Il plugin Advanced WordPress Backgrounds ha un approccio diverso agli sfondi di WordPress, perché vi permette di approfittare di effetti unici che ravvivano il vostro sfondo. Un esempio è lo sfondo in parallasse, che può muoversi lentamente mentre l’utente scorre il vostro sito web.

Il plugin offre anche il supporto per i video. Gli sfondi video sono estratti da luoghi come YouTube e Vimeo, ma potete anche ospitarli autonomamente.

È anche possibile avere uno sfondo a tinta unita o testurizzato. Tutti questi tipi di sfondo includono caratteristiche avanzate che non potete trovare con lo strumento di base per gli sfondi di WordPress. Alcune di queste includono effetti di scorrimento e scalatura, effetti di opacità e opzioni di velocità personalizzate.

AWB supporta Gutenberg e può andare insieme all’editor standard di WordPress e a molti altri costruttori di pagine visuali. Infine, è possibile usare le sue opzioni CSS personalizzate per aggiungere ancora più stile ai vostri sfondi.

Perfect Images + Retina

Il plugin Perfect Images + Retina è utile come soluzione due in uno. Permette di gestire la dimensione e l’aspetto dell’immagine di sfondo di WordPress, mentre rigenera le miniature e sostituisce le immagini. La gestione delle immagini è davvero impressionante, ed è particolarmente cruciale per gli sfondi ad alta risoluzione.

Il plugin fornisce anche una funzione di sfondo con la versione premium. Genera un equivalente retina per l’immagine di sfondo in modo che le immagini appaiano senza problemi anche su display ad alta risoluzione.

Maintenance

Maintenance è un plugin semplice e facile da usare per progettare pagine di manutenzione e coming soon. Il plugin Maintenance ha sia la versione gratuita che quella premium, ma quella gratuita è sufficiente per attivare una pagina di manutenzione e aggiungere un’immagine di sfondo con testo e campi sovrapposti.

Potete anche caricare il vostro logo, personalizzare cose come font e icone, e scegliere vari modelli con le loro belle immagini di sfondo. Potete anche installare i suoi molti modelli pre-costruiti, ma la maggior parte di essi richiede la licenza premium del plugin.

Riepilogo

Un’immagine di sfondo di base per WordPress non richiede grandi sforzi per essere caricata e comparire su tutto il vostro sito web. Si tratta di una funzionalità integrata nel core di WordPress, quindi è facile scambiare gli sfondi per determinati eventi o festività. Potete anche rimanere con lo stesso sfondo per tutta la vita.

Oltre allo sfondo standard di WordPress, è possibile usare codice CSS personalizzato, plugin e costruttori di pagine per implementare tutti i tipi di sfondi sul vostro sito WordPress. Da sfondi immagine su pagine specifiche a sfondi per il vostro pulsante del menu, le possibilità sono infinite.

Ora è il momento di aggiungere quello sfondo che avete sempre desiderato al vostro sito WordPress.

Ci siamo persi qualcosa? Lasciate un commento se avete problemi ad aggiungere o gestire le immagini di sfondo di WordPress.