Come cambiare il colore di sfondo in WordPress (Guida per principianti)

Il colore di sfondo del tuo sito web definisce l'atmosfera generale per i tuoi visitatori.

Forse desideri qualcosa di pulito e professionale, caldo e accogliente, o audace e creativo – qualunque sia l'atmosfera che stai cercando, il giusto colore di sfondo può fare la differenza.

La buona notizia è che cambiarlo non richiede competenze tecniche o strumenti costosi. WordPress ha funzionalità integrate che ti permettono di personalizzare i colori con pochi clic.

Dopo aver aiutato molti proprietari di siti a personalizzare i loro siti web, abbiamo scoperto che la maggior parte delle persone è sorpresa da quanto possa essere semplice e immediato il processo.

Ti guideremo attraverso tre modi semplici per aggiornare il colore di sfondo in WordPress, partendo dall'opzione più adatta ai principianti e passando a tecniche leggermente più avanzate.

Perché il colore di sfondo del tuo WordPress conta davvero 🎨

Pensa al colore di sfondo del tuo sito web come alle pareti della tua casa digitale. Mentre il tuo tema WordPress viene fornito con un colore predefinito, scegliere lo sfondo giusto può fare una grande differenza in quanto il tuo sito appare accogliente ai visitatori.

Ecco perché questo elemento di design di WordPress è così importante:

• Rendono il tuo contenuto più facile da leggere
• Aiutano le informazioni importanti a risaltare
• Stabiliscono l'atmosfera per il tuo sito web
• Possono far sembrare il tuo sito più professionale

Il colore di sfondo giusto può aiutare a evidenziare i tuoi pulsanti importanti e aumentare le tue conversioni. Puoi anche usare colori diversi per organizzare meglio i tuoi contenuti, come usare colori specifici per diverse categorie di blog o annunci speciali.

E se vuoi rendere il tuo sito ancora più coinvolgente, puoi persino aggiungere sfondi video per catturare l'attenzione dei tuoi visitatori.

Detto questo, diamo un'occhiata a come cambiare il colore di sfondo in WordPress. Ti mostreremo diversi modi per personalizzare il colore di sfondo in modo che tu possa saltare alla sezione che preferisci:

• Come cambiare il colore di sfondo nel personalizzatore del tema di WordPress
• Come cambiare il colore di sfondo nell'editor completo del sito (metodo 2024)
• Come cambiare il colore di sfondo in WordPress con CSS
• Come cambiare casualmente i colori di sfondo in WordPress
• Come cambiare il colore di sfondo per singoli post
• Bonus Tip: Use a Page Builder for More Design Control
• Domande frequenti: Cambiare i colori di sfondo in WordPress

Come cambiare il colore di sfondo nel personalizzatore del tema di WordPress

A seconda del tuo tema, potresti essere in grado di cambiare il colore di sfondo utilizzando il personalizzatore del tema di WordPress. Ti consente di modificare l'aspetto del tuo sito in tempo reale e senza la necessità di modificare il codice.

Per accedere al personalizzatore del tema di WordPress, puoi accedere al tuo sito web e quindi andare su Aspetto » Personalizza.

Questo aprirà il Personalizzatore del tema, dove troverai diverse opzioni per modificare il tuo tema. Questo include menu, colori, homepage, widget, immagine di sfondo e altro ancora.

Le opzioni specifiche disponibili dipenderanno dal tema WordPress che il tuo sito sta utilizzando. Per questo tutorial, stiamo utilizzando il tema predefinito Twenty Twenty-One.

Per cambiare il colore di sfondo del tuo sito web, fai clic sulla scheda delle impostazioni 'Colori e modalità scura' dal menu sulla sinistra.

Successivamente, dovrai fare clic sull'opzione 'Colore di sfondo' e scegliere un colore per il tuo sito web.

Puoi utilizzare lo strumento di selezione del colore o inserire un codice colore esadecimale per il tuo sfondo.

Una volta terminate le modifiche, non dimenticare di fare clic sul pulsante ‘Pubblica’.

Ora puoi visitare il tuo sito web WordPress per vedere il nuovo colore di sfondo in azione.

Il tuo tema potrebbe non avere questa opzione disponibile nel Personalizzatore del tema. In tal caso, puoi provare uno dei metodi seguenti.

Come cambiare il colore di sfondo nell'editor completo del sito (metodo 2024)

L'editor completo del sito (FSE) è una piattaforma di editing di WordPress per modificare temi a blocchi. Questo editor rende semplicissimo cambiare il colore di sfondo del tuo sito. Vediamo insieme il processo.

Inizia andando su Aspetto » Editor nella tua bacheca di WordPress.

Ora vedrai un pulsante ‘Stili’ in una delle opzioni del menu.

Fai clic su di esso.

Ora, fai clic sul pulsante di modifica a matita.

Questo ti porterà all'interfaccia di modifica.

Ora noterai un pratico pannello sul lato destro dello schermo. Questo è il tuo centro di controllo del design dove puoi cambiare colori, font e altro ancora.

Per cambiare il colore di sfondo, fai semplicemente clic su ‘Colori’ nel pannello Stili.

Successivamente, fai clic su ‘Sfondo’.

Ora puoi scegliere tra un colore solido o creare una sfumatura. Sentiti libero di scegliere quello che si abbina al tuo stile. Quando sei soddisfatto della tua scelta, premi ‘Salva’ e hai finito!

Come cambiare il colore di sfondo in WordPress con CSS

Ti stai chiedendo come cambiare il colore di sfondo usando CSS?

Un altro modo per cambiare il colore di sfondo del tuo sito web WordPress è aggiungere CSS personalizzato nel Personalizzatore del tema di WordPress.

Per iniziare, vai su Aspetto » Personalizza e poi vai alla scheda ‘CSS aggiuntivo’.

Successivamente, puoi inserire il seguente codice:

body {
 background-color: #FFFFFF;
}

Tutto quello che devi fare è sostituire il codice del colore di sfondo con il codice colore che desideri utilizzare sul tuo sito web. Successivamente, procedi e inserisci il codice nella scheda CSS aggiuntivo.

Una volta terminato, non dimenticare di fare clic sul pulsante 'Pubblica'. Ora puoi visitare il tuo sito web per vedere il nuovo colore di sfondo.

Per maggiori dettagli, consulta la nostra guida su come aggiungere facilmente CSS personalizzato al tuo sito WordPress.

Come cambiare casualmente i colori di sfondo in WordPress

Ora, stai cercando un modo per cambiare casualmente il colore di sfondo in WordPress?

Puoi aggiungere un effetto di cambio colore di sfondo graduale per passare automaticamente tra diversi colori di sfondo. L'effetto attraversa più colori fino a raggiungere il colore finale.

Per aggiungere l'effetto, dovrai aggiungere del codice al tuo sito web WordPress. Ti guideremo attraverso il processo qui sotto.

La prima cosa che dovrai fare è scoprire la classe CSS dell'area in cui desideri aggiungere l'effetto di cambio colore di sfondo graduale.

Puoi farlo utilizzando lo strumento Ispeziona nel tuo browser. Tutto quello che devi fare è posizionare il mouse sull'area di cui vuoi cambiare il colore e fare clic con il pulsante destro del mouse per selezionare lo strumento Ispeziona.

Dopodiché, dovrai annotare la classe CSS che desideri indirizzare. Ad esempio, nello screenshot sopra, vogliamo indirizzare l'area con la classe CSS 'page-header'.

Successivamente, devi aprire un editor di testo semplice sul tuo computer, come un blocco note, e creare un nuovo file. Dovrai salvare il file come 'wpb-background-tutorial.js' sul tuo desktop.

Una volta fatto, puoi aggiungere il seguente codice al file JS che hai appena creato:

jQuery(function($){
        $('.page-header').each(function(){
            var $this = $(this),
            colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];

            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        });

Se studi il codice, noterai che abbiamo utilizzato la classe CSS 'page-header' poiché è l'area che vogliamo indirizzare sul nostro sito web.

Vedrai anche che abbiamo usato quattro colori utilizzando il codice colore esadecimale. Puoi aggiungere tutti i colori che desideri per il tuo sfondo. Tutto quello che devi fare è inserire i codici colore nello snippet e separarli usando una virgola e virgolette singole, come gli altri colori.

Ora che il tuo file JS è pronto, dovrai caricarlo nella cartella JS del tuo tema WordPress. Il modo più semplice per farlo è con un client di protocollo di trasferimento file (FTP), che ti consente di gestire direttamente i file sul tuo server web.

Per questo tutorial, useremo FileZilla. È un client FTP gratuito e semplice per Windows, Mac e Linux. Infatti, è uno strumento comune che abbiamo testato noi stessi per la gestione dei file del sito.

Per iniziare, dovrai accedere al server FTP del tuo sito web. Puoi trovare le credenziali di accesso nell'email del tuo provider di hosting o nel pannello di controllo cPanel del tuo account di hosting.

Dopo aver effettuato l'accesso, vedrai un elenco di cartelle e file del tuo sito web sotto la colonna 'Sito remoto'. Naviga fino alla cartella JS nel tema del tuo sito.

Se il tuo tema non ha una cartella js, puoi crearne una.

Fai semplicemente clic destro sulla cartella del tuo tema nel client FTP e fai clic sull'opzione 'Crea directory'.

Successivamente, dovrai aprire la posizione del tuo file JS sotto la colonna 'Sito locale'.

Quindi fai clic destro sul file e fai clic sull'opzione 'Carica' per aggiungere il file al tuo tema.

Per maggiori dettagli, puoi seguire il nostro tutorial su come usare FTP per caricare file su WordPress.

Successivamente, dovrai inserire il seguente codice nel file funtions.php del tuo tema. Questo codice carica correttamente il file JavaScript e lo script jQuery dipendente di cui hai bisogno affinché questo codice funzioni:

function wpb_bg_color_scripts() {
wp_enqueue_script( 'wpb-background-tutorial',  get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true );
 }
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );

Ti consigliamo di utilizzare il plugin gratuito WPCode per aggiungere in modo sicuro il codice al tuo sito. Per maggiori dettagli, consulta la nostra guida su come incollare snippet dal web in WordPress.

Ora puoi visitare il tuo sito web per vedere i colori che cambiano casualmente in azione nell'area che hai scelto.

Come cambiare il colore di sfondo per singoli post

Puoi anche cambiare il colore di sfondo di ogni singolo post del blog in WordPress invece di utilizzare un unico colore per tutto il tuo sito web utilizzando CSS personalizzato.

Ti permette di cambiare l'aspetto di post specifici e personalizzare i loro sfondi. Ad esempio, puoi personalizzare lo stile di ogni post in base agli autori o mostrare un colore di sfondo diverso per il tuo post più commentato.

Puoi persino cambiare il colore di sfondo per i post di una particolare categoria. Ad esempio, i post di notizie possono avere colori di sfondo diversi rispetto ai tutorial.

La prima cosa che dovrai fare è trovare la classe dell'ID del post nel CSS del tuo tema. Puoi farlo visualizzando un post del blog e quindi facendo clic con il pulsante destro del mouse per utilizzare lo strumento Ispeziona nel tuo browser.

Ecco un esempio di come apparirebbe:

<article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized">

Una volta ottenuto l'ID del post, puoi cambiare il colore di sfondo di un singolo post utilizzando il seguente CSS personalizzato. Sostituisci semplicemente l'ID del post per farlo corrispondere al tuo e il codice colore di sfondo che desideri.

.post-104 {
background-color: #D7DEB5;
color:#FFFFFF;
}

Per aggiungere il CSS personalizzato, puoi utilizzare il Personalizzatore del tema di WordPress. Innanzitutto, assicurati di aver effettuato l'accesso al tuo sito web WordPress. Quindi, visita il tuo post del blog e fai clic sull'opzione 'Personalizza' in alto.

Dopodiché, vai alla scheda CSS aggiuntivo dal menu sulla sinistra.

Successivamente, inserisci il CSS personalizzato.

Una volta fatto, fai clic sul pulsante 'Pubblica'.

Ora puoi visitare il tuo post del blog per vedere il nuovo colore di sfondo.

Se desideri cambiare il colore di sfondo in base all'autore, ai commenti o alla categoria, consulta il nostro tutorial dettagliato su come stilizzare ogni post di WordPress in modo diverso.

Suggerimento bonus: usa un page builder per un maggiore controllo del design

Cambiare i colori di sfondo è solo l'inizio. Se desideri avere il pieno controllo del design del tuo sito web, un page builder può aprire molte più possibilità.

Su WPBeginner, consigliamo SeedProd perché è il page builder più popolare e facile da usare per WordPress. Anche i nostri brand partner lo hanno utilizzato per progettare i loro siti web, tra cui WPForms, Duplicator e Charitable.

Ti offre un controllo completo sul design e ti permette di:

• Progettare qualsiasi pagina senza codice
• Personalizzare colori, layout e spaziatura
• Creare pagine dall'aspetto professionale in pochi minuti
• Far apparire le tue pagine fantastiche su tutti i dispositivi

Abbiamo testato a fondo lo strumento nel nostro ambiente demo e lo abbiamo trovato super intuitivo e facile da usare. Per saperne di più sulla nostra esperienza, puoi consultare la nostra recensione di SeedProd.

Iniziare è facile: installa e attiva SeedProd utilizzando la nostra guida semplice all'installazione di plugin WordPress.

Nota: Puoi iniziare con la versione gratuita, ma SeedProd Pro ti dà accesso a più modelli e opzioni di design se ne hai bisogno.

Una volta che il plugin è attivo, ti verrà chiesto di inserire la tua chiave di licenza. Puoi trovare la chiave nella tua area account SeedProd. Dopo aver inserito la chiave, fai clic sul pulsante 'Verifica chiave'.

Successivamente, puoi andare su SeedProd » Pagine.

Da qui, fai clic sul pulsante 'Aggiungi nuova landing page'.

Dopodiché, dovrai selezionare un tema per la tua landing page. SeedProd offre molti bellissimi modelli di landing page per iniziare.

Puoi anche usare un modello vuoto per iniziare da zero. Tuttavia, suggeriamo di usare un modello poiché è un modo più facile e veloce per creare una landing page.

Quando selezioni un modello, ti verrà chiesto di inserire un Nome pagina e scegliere un URL.

Dopodiché, fai semplicemente clic sul pulsante 'Salva e inizia a modificare la pagina'.

Nella schermata successiva, vedrai il page builder di SeedProd. Qui puoi usare il builder drag-and-drop per aggiungere blocchi dal menu sulla sinistra. Puoi aggiungere un titolo, un video, un'immagine, un pulsante, ecc.

Scorrendo verso il basso, ci sono altri blocchi nella sezione Avanzate. Ad esempio, puoi aggiungere un conto alla rovescia per creare urgenza, mostrare profili social per aumentare i follower, aggiungere un modulo di opzione per raccogliere lead e altro ancora.

Usando il builder drag-and-drop, è facile cambiare la posizione di ogni blocco sulla tua landing page. Puoi persino cambiare il layout, le dimensioni, il colore e il font del testo.

Per cambiare il colore di sfondo della tua landing page, seleziona semplicemente qualsiasi sezione della pagina. Ora vedrai le opzioni nel menu sulla sinistra per modificare lo stile dello sfondo, il colore e aggiungere un'immagine.

Dopo aver finito di modificare la tua landing page, non dimenticare di fare clic sul pulsante 'Salva' in alto.

Successivamente, puoi andare alla scheda 'Connetti' e integrare la pagina con diversi servizi di email marketing. Ad esempio, puoi connetterti a Constant Contact, Brevo (precedentemente Sendinblue) e altri.

Dopo di che, vai avanti e fai clic sulla scheda 'Impostazioni pagina'.

Qui, puoi cambiare lo Stato della pagina da Bozza a Pubblica per rendere la tua pagina attiva.

Oltre a ciò, puoi anche modificare le impostazioni SEO della pagina, visualizzare le analisi, aggiungere codice personalizzato sotto Script e inserire un dominio personalizzato.

Una volta terminato, puoi uscire dal page builder di SeedProd e visitare la tua landing page personalizzata.

Tutorial video

Domande frequenti: Cambiare i colori di sfondo in WordPress

Ecco alcune domande frequenti poste dai nostri lettori riguardo alla modifica dei colori di sfondo in WordPress:

Posso usare un'immagine per il mio sfondo invece di un colore?

Sì, assolutamente. La maggior parte dei temi WordPress che consentono di modificare il colore di sfondo hanno anche un'opzione per caricare un'immagine di sfondo.

Di solito puoi trovare questa impostazione nel Personalizzatore del tema (Aspetto » Personalizza) sotto una scheda come "Immagine di sfondo". Da lì, puoi caricare un file dal tuo computer.

La modifica del colore di sfondo influenzerà la velocità del mio sito?

Un colore di sfondo uniforme ha un impatto trascurabile sulla velocità del tuo sito, rendendolo un miglioramento delle prestazioni sicuro e semplice.

Tuttavia, l'utilizzo di un'immagine di sfondo grande e non ottimizzata può rallentare significativamente i tempi di caricamento della pagina. Se utilizzi un'immagine, consigliamo sempre di comprimerla prima.

Per ulteriori suggerimenti, consulta la nostra guida su come ottimizzare le immagini per il web senza perdere qualità.

Come trovo il codice esadecimale corretto per il colore del mio marchio?

Un codice esadecimale è un codice a sei cifre che rappresenta un colore specifico (ad esempio, #FFFFFF per il bianco puro). Il posto migliore per trovare il codice esadecimale del tuo marchio è nella guida di stile ufficiale della tua azienda.

Se non ne hai una, puoi utilizzare uno strumento online gratuito come HTML Color Codes. Il loro selettore di colori ti consente di trovare il codice esadecimale esatto per qualsiasi tonalità desideri.

Speriamo che questo articolo ti abbia aiutato a imparare come cambiare il colore di sfondo in WordPress. Potresti anche voler consultare la nostra guida su come convertire Figma in WordPress e il nostro confronto dei migliori software di web design.

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