{"id":43626,"date":"2021-03-19T11:53:39","date_gmt":"2021-03-19T10:53:39","guid":{"rendered":"https:\/\/kinsta.com\/?p=90115"},"modified":"2023-03-13T16:51:49","modified_gmt":"2023-03-13T15:51:49","slug":"immagini-di-sfondo-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/","title":{"rendered":"Immagini di Sfondo di WordPress: Come Aggiungere, Modificare e Personalizzare il Tema"},"content":{"rendered":"<p>Le immagini di sfondo di WordPress sono disponibili in tutte le forme. Potete caricare un&#8217;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, \u00e8 essenziale capire le basi per <a href=\"https:\/\/kinsta.com\/it\/blog\/aumentare-dimensione-massima-caricamento-wordpress\/\">caricare un&#8217;immagine<\/a>, compresa un&#8217;immagine di sfondo.<\/p>\n<p>Questo articolo spiega cos&#8217;\u00e8 un&#8217;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 <a href=\"https:\/\/kinsta.com\/it\/blog\/errori-wordpress\/\">risolvere eventuali problemi<\/a> che possono verificarsi lungo la strada.<\/p>\n<p>Cominciamo!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h3>Date un&#8217;Occhiata alla Nostra <a href=\"https:\/\/www.youtube.com\/watch?v=BsMIX1wNMNY\">Video-Guida<\/a> su Come Aggiungere Immagini di Sfondo per WordPress:<\/h3>\n<p class=\"p1\"><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=BsMIX1wNMNY\"><\/kinsta-video><\/p>\n<h2>Cos&#8217;\u00c8 un&#8217;Immagine di Sfondo di WordPress?<\/h2>\n<p>Un&#8217;immagine di sfondo di WordPress serve come sfondo completo del vostro sito web. Si chiama anche sfondo personalizzato.<\/p>\n<figure style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/WordPress-Background-Image-Example-e1614937251379.png\" alt=\"Un esempio di immagine di sfondo di WordPress\" width=\"1100\" height=\"671\"><figcaption class=\"wp-caption-text\">Un esempio di immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>Uno sfondo pu\u00f2 anche essere a tinta unita.<\/p>\n<p>Indipendentemente dall&#8217;opzione che scegliete, il file <strong>functions.php <\/strong>gestisce l&#8217;immagine di sfondo in un tema WordPress. Viene anche visualizzata dal file <strong>header.php <\/strong>di WordPress.<\/p>\n<p>Di conseguenza, coloro che sviluppano temi hanno un maggiore controllo sull&#8217;attivazione o meno della funzione di sfondo personalizzato per il vostro <a href=\"https:\/\/kinsta.com\/it\/blog\/temi-wordpress-veloci\/\">tema WordPress<\/a>. \u00c8 ancora possibile <strong>attivare <\/strong>o <strong>disattivare <\/strong>la funzionalit\u00e0, ma il tema del vostro sito in genere detta le impostazioni predefinite.<\/p>\n<p>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.<\/p>\n<p>Sono possibili sfondi personalizzati anche per posizioni pi\u00f9 specifiche sul sito WordPress:<\/p>\n<ul>\n<li>Dietro una pagina o un articolo di WordPress<\/li>\n<li>Su una pagina di categoria di WordPress<\/li>\n<li>All&#8217;interno di un blocco di contenuto per una pagina o un articolo<\/li>\n<li>Nella <a href=\"https:\/\/kinsta.com\/it\/blog\/url-login-wordpress\/\">pagina di accesso<\/a><\/li>\n<li>Dietro il menu di navigazione<\/li>\n<li>Nelle pagine di manutenzione o Coming Soon<\/li>\n<\/ul>\n<p>In generale, se il supporto per lo sfondo personalizzato \u00e8 abilitato in un tema, l&#8217;utente ha la possibilit\u00e0 di caricare un&#8217;immagine o scegliere un colore per riempire l&#8217;intero sfondo del sito.<\/p>\n<p>Le impostazioni si trovano nella bacheca di WordPress sotto <strong>Aspetto &gt; Personalizza &gt; Immagine di sfondo. <\/strong>Tuttavia, potete usare altri tipi di sfondi attraverso <a href=\"https:\/\/kinsta.com\/it\/blog\/page-builder-wordpress\/\">costruttori di pagine drag-and-drop<\/a>, plugin e diverse altre opzioni.<\/p>\n<p>Caricare un&#8217;immagine di sfondo sulla bacheca \u00e8 solo una parte del processo. Dopo di che, \u00e8 necessario configurare le impostazioni dell&#8217;immagine di sfondo. A volte potete lasciare le impostazioni cos\u00ec come sono, mentre altre volte \u00e8 importante riconfigurare le impostazioni per garantire che l&#8217;immagine abbia un aspetto eccellente.<\/p>\n<p>Le impostazioni per un&#8217;immagine di sfondo di WordPress includono:<\/p>\n<ul>\n<li>Colori di sfondo<\/li>\n<li>Dimensionamento<\/li>\n<li>Posizione dell&#8217;immagine<\/li>\n<li>Se l&#8217;immagine deve ripetersi o meno<\/li>\n<li>Opzioni per riempire lo schermo o allungare l&#8217;immagine<\/li>\n<\/ul>\n<p>Per prima cosa copriremo le migliori pratiche quando si usano le immagini di sfondo di WordPress. Poi andremo a vedere come impostare un&#8217;immagine di sfondo di WordPress in varie situazioni.<\/p>\n\n<h2>Molteplici Stili per gli Sfondi<\/h2>\n<p>Un vero vantaggio di uno sfondo WordPress \u00e8 che non deve per forza trattarsi di un\u2019<a href=\"https:\/\/kinsta.com\/it\/blog\/formati-file-immagine\/\">immagine<\/a> statica. Potete imbattervi in vari tipi di sfondi, che vanno dai video ai template di foto agli slideshow.<\/p>\n<figure style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Kinsta-Background-Example-e1615198933785.png\" alt=\"Un esempio di immagine di sfondo sul sito di Kinsta\" width=\"1100\" height=\"693\"><figcaption class=\"wp-caption-text\">Un esempio di immagine di sfondo sul sito di Kinsta<\/figcaption><\/figure>\n<p>Spesso potete implementare sfondi unici con l&#8217;aiuto di CSS o plugin personalizzati (o entrambi). Vi mostriamo entrambi i metodi in questo articolo.<\/p>\n<p>Ecco alcuni stili di sfondo da considerare:<\/p>\n<ul>\n<li><strong>Immagini di sfondo standard:<\/strong> 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\u00e0, 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\u00e0 degli elementi in primo piano o le grandi immagini ad alta risoluzione che rallentano il vostro sito.<\/li>\n<li><strong>Sfondi a tinta unita: <\/strong>L&#8217;immagine di sfondo a <a href=\"https:\/\/kinsta.com\/it\/blog\/schemi-di-colore-siti-web\/\">tinta unita<\/a> \u00e8 utile quando volete aggiungere un po&#8217; di vivacit\u00e0 al vostro sito ma non avete un&#8217;immagine che si adatti al vostro marchio o una che stia bene come sfondo. Lo sfondo colorato presenta anche un&#8217;immagine pi\u00f9 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.<\/li>\n<li><strong>Sfondi a gradiente:<\/strong> Uno sfondo a gradiente passa da un colore all&#8217;altro. \u00c8 visivamente pi\u00f9 attraente di un colore unico, non richiede molto tempo per essere aggiunto, e si pu\u00f2 implementare con molti plugin. L&#8217;aspetto negativo principale \u00e8 che un primo piano pu\u00f2 apparire bene da un lato del gradiente ma non dall&#8217;altro.<\/li>\n<li><strong>Sfondi pattern o texture:<\/strong> Tutti gli sfondi pattern e texture sono foto, ma si concentrano su elementi ripetitivi nell&#8217;immagine o su una texture ravvicinata, come un pannello di legno o dei fili d&#8217;erba. La parte buona di un pattern o di una texture \u00e8 che funziona a meraviglia come sfondo, visto che potete estenderlo, e la maggior parte delle persone non noter\u00e0 se c&#8217;\u00e8 una rottura nel pattern quando l&#8217;immagine non \u00e8 abbastanza grande.<\/li>\n<li><strong>Sfondi con diapositive di immagini: <\/strong>Uno sfondo con <a href=\"https:\/\/kinsta.com\/it\/blog\/slider-wordpress\/\">diapositive di immagini (slideshow)<\/a> permette ai proprietari del sito di condividere pi\u00f9 tipi di design o foto sullo sfondo, cos\u00ec \u00e8 pi\u00f9 facile mantenere alto l&#8217;umore dei clienti mentre scorrono le vostre pagine. Tuttavia, gli slideshow potrebbero distrarre o rallentare il vostro sito.<\/li>\n<li><strong>Sfondi video:<\/strong> 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&#8217;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.<\/li>\n<\/ul>\n<h2>Migliori Pratiche per l&#8217;Utilizzo di Immagini di Sfondo di WordPress<\/h2>\n<p>Impostare un&#8217;immagine di sfondo personalizzata sembra un compito facile. Basta caricare l&#8217;immagine nel punto giusto e guardarla apparire sul frontend, giusto?<\/p>\n<p>La maggior parte delle volte \u00e8 cos\u00ec, ma altre volte scoprirete che l&#8217;immagine di sfondo pu\u00f2 essere un po&#8217; problematica. Ecco perch\u00e9 si consiglia di seguire le <a href=\"https:\/\/kinsta.com\/it\/blog\/migliori-pratiche-di-web-design\/\">migliori pratiche<\/a> per le immagini di sfondo di WordPress per eliminare il maggior numero di problemi possibile.<\/p>\n<h3>Suggerimenti per l&#8217;Utilizzo delle Immagini di Sfondo di WordPress<\/h3>\n<p class=\"p1\"><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=RLR1vILiE98\"><\/kinsta-video><\/p>\n<h3>Usare Immagini di Alta Qualit\u00e0<\/h3>\n<p>La risoluzione dell&#8217;immagine di sfondo che usate \u00e8 capace di fare il bello o il cattivo tempo della vostra presentazione. Si pu\u00f2 pensare che un&#8217;immagine scattata con lo smartphone sia perfetta per un&#8217;immagine di sfondo, ma \u00e8 probabile che abbia bisogno di una qualit\u00e0 molto pi\u00f9 alta.<\/p>\n<figure style=\"width: 1139px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Unsplash-Free-Stock-Photos.png\" alt=\"Foto stock gratuite su Unsplash\" width=\"1139\" height=\"729\"><figcaption class=\"wp-caption-text\">Foto stock gratuite su Unsplash<\/figcaption><\/figure>\n<p>Potete pagare per un&#8217;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 <a href=\"https:\/\/kinsta.com\/it\/blog\/immagini-gratuite-per-wordpress\/\">siti di immagini stock gratuite<\/a>.<\/p>\n<p>L&#8217;immagine di sfondo potrebbe non essere mostrata nella sua interezza sul vostro sito web, poich\u00e9 gran parte di essa \u00e8 coperta dal contenuto. Tuttavia, l&#8217;immagine reale viene visualizzata su tutto lo schermo.<\/p>\n<p>Se non usate un&#8217;immagine di alta qualit\u00e0, correte il rischio di vedere uno sfondo allungato.<\/p>\n<h3>Assicuratevi Che le Immagini di Sfondo Siano della Dimensione Corretta<\/h3>\n<p>Insieme alla risoluzione dell&#8217;immagine, anche la sua dimensione fisica conta molto.<\/p>\n<p>Gli <a href=\"https:\/\/kinsta.com\/it\/blog\/responsive-web-design\/\">schermi hanno diverse proporzioni<\/a>. E i dispositivi mobili rendono tutto ancora pi\u00f9 complicato. Ma l&#8217;obiettivo \u00e8 usare un&#8217;immagine adatta al pi\u00f9 grande degli schermi. Altrimenti correte il rischio di avere ancora una volta l&#8217;immagine allungata o non visualizzata correttamente.<\/p>\n<p>In generale, una buona regola \u00e8 quella di attenersi a una dimensione minima dell&#8217;immagine di sfondo WordPress di <strong>1024 x 768 <\/strong>pixel. Tuttavia, altri esperti raccomandano qualcosa di pi\u00f9 come <strong>1920 x 1080 <\/strong>pixel. Nel complesso, la cosa migliore da fare \u00e8 rimanere tra i 1000 e 3000 pixel per la larghezza, a seconda di dove viene visualizzata.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/starting-large.png\" alt=\"Dimensioni dell'immagine di sfondo di WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Dimensioni dell&#8217;immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>Il prossimo fattore da considerare \u00e8 il rapporto d&#8217;aspetto (aspect ratio). L&#8217;immagine di sfondo copre l&#8217;intero sito web o solo il quarto superiore?<\/p>\n<p>Tecnicamente, un sito web ha un rapporto d&#8217;aspetto verticale (pi\u00f9 lungo in altezza che in larghezza). Quindi potete considerare questi tipi di immagini. Tuttavia, gli sfondi sezionali, come quelli per le intestazioni o i <a href=\"https:\/\/kinsta.com\/it\/blog\/dimensioni-banner-pubblicitari\/\">banner pubblicitari<\/a>, dovrebbero rimanere in formato orizzontale (larghezza pi\u00f9 lunga dell&#8217;altezza).<\/p>\n<p>Inoltre, il rapporto d&#8217;aspetto pi\u00f9 comune per i desktop oggi \u00e8 <strong>16:9<\/strong>. Rimanere intorno a questo obiettivo aiuta. Un tema o un plugin responsive pu\u00f2 regolare automaticamente l&#8217;immagine di sfondo per la visualizzazione mobile.<\/p>\n<p>In definitiva, testare le immagini di sfondo su un sito reale e su pi\u00f9 tipi di dispositivi dovrebbe rendere la decisione finale molto pi\u00f9 facile.<\/p>\n<h3>Ottimizzare Prima di Usare un&#8217;Immagine Come Sfondo di WordPress<\/h3>\n<p>Come per tutte le immagini caricate su WordPress, se non <a href=\"https:\/\/kinsta.com\/it\/blog\/ottimizzare-le-immagini-per-web-e-prestazioni\/\">le ottimizzate prima di pubblicarle sul web<\/a> non state facendo un buon servizio al vostro sito. Questo \u00e8 particolarmente importante per le immagini di sfondo poich\u00e9 spesso appaiono su pi\u00f9 pagine in tutto il vostro sito web. Inoltre, sono foto di grandi dimensioni e coprono una quantit\u00e0 significativa di spazio sullo schermo.<\/p>\n<p>Le immagini pi\u00f9 grandi mettono a dura prova il vostro server. Mantenete la risoluzione della vostra immagine, ma ottimizzate le sue dimensioni in modo che il vostro <a href=\"https:\/\/kinsta.com\/it\/impara\/velocizzare-wordpress\/\">sito web si carichi rapidamente<\/a>.<\/p>\n<p>Avete due opzioni per ottimizzare le foto:<\/p>\n<ol>\n<li>Ottimizzare le immagini di sfondo (e tutte le immagini del sito) prima di caricarle su WordPress. Completate questo processo manuale con l&#8217;aiuto di strumenti come Photoshop Express, GIMP e Pixlr.<\/li>\n<li>Automatizzate il processo di ottimizzazione installando un plugin per WordPress che ridimensiona e rimpicciolisce le foto al momento del caricamento.<\/li>\n<\/ol>\n<p><a href=\"https:\/\/kinsta.com\/it\/blog\/ottimizzare-le-immagini-per-web-e-prestazioni\/\">Leggete la nostra guida approfondita<\/a> su come ottimizzare le immagini per migliorare le prestazioni sul web.<\/p>\n<h3>Controllare il Supporto di Background Prima di Installare un Tema<\/h3>\n<p>Sfortunatamente, non tutti i temi supportano immagini di sfondo personalizzate. Questo spesso accade perch\u00e9 lo sfondo non si adatta al design generale del tema, quindi chi lo ha sviluppato ha scelto di disattivarlo del tutto.<\/p>\n<p>Eppure, se volete davvero uno sfondo sul vostro sito web, \u00e8 prudente controllare la lista delle caratteristiche quando scaricate un nuovo tema, soprattutto se avete intenzione di <a href=\"https:\/\/kinsta.com\/it\/blog\/come-funzionano-i-temi-di-wordpress\/\">pagare per un tema premium<\/a>. Molti <a href=\"https:\/\/kinsta.com\/it\/blog\/temi-wordpress-veloci\/\">siti di vendita di temi<\/a> offrono informazioni sul fatto che un tema supporti o meno gli sfondi.<\/p>\n<p>Per esempio, i temi elencati nella <a href=\"https:\/\/wordpress.org\/themes\/\">libreria dei temi di WordPress<\/a> indicano il supporto per gli sfondi personalizzati nei tag. Potete anche trovare un riferimento a uno sfondo personalizzato nella descrizione del tema.<\/p>\n<figure style=\"width: 1237px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/01\/the-feature-for-custom-background.png\" alt=\"Supporto 'Sfondo personalizzato' per i temi\" width=\"1237\" height=\"1321\"><figcaption class=\"wp-caption-text\">Supporto &#8216;Sfondo personalizzato&#8217; per i temi<\/figcaption><\/figure>\n<p>Gli altri siti di temi in genere includono informazioni simili sulle immagini di sfondo personalizzate. In caso contrario, contattate <a href=\"https:\/\/kinsta.com\/it\/blog\/assumere-uno-sviluppatore-wordpress\/\">la persona che ha sviluppato il tema<\/a> per capire se \u00e8 possibile in qualche modo e se sovrascrivere il blocco dell&#8217;immagine di sfondo (cosa che vedremo sotto) causer\u00e0 qualche problema con il tema.<\/p>\n<h3>Considerare l&#8217;Uso di un Costruttore di Pagine Visive per Facilitare la Creazione di Immagini di Sfondo<\/h3>\n<p>I costruttori di pagine come Gutenberg, WPBakery, <a href=\"https:\/\/kinsta.com\/it\/blog\/divi-vs-elementor\/\">Divi ed Elementor<\/a>, offrono liste impressionanti di blocchi e moduli per inserire elementi come immagini e caselle di testo in qualsiasi parte di una pagina web.<\/p>\n<figure style=\"width: 1324px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/elementor-e.png\" alt=\"Costruttore di siti web Elementor\" width=\"1324\" height=\"435\"><figcaption class=\"wp-caption-text\">Costruttore di siti web Elementor<\/figcaption><\/figure>\n<p>Senza un <a href=\"https:\/\/kinsta.com\/it\/blog\/page-builder-wordpress\/\">costruttore drag-and-drop<\/a>, diventa un po&#8217; pi\u00f9 difficile configurare un&#8217;immagine di sfondo. \u00c8 particolarmente difficile cercare di risolvere i problemi che si possono incontrare.<\/p>\n<p>I costruttori di pagine tendono anche a sostituire la funzionalit\u00e0 dell&#8217;immagine di sfondo predefinita fornita attraverso WordPress. \u00c8 possibile sovrascrivere le restrizioni del tema o qualsiasi elemento mancante che aiuta a visualizzare un&#8217;immagine di sfondo nel codice.<\/p>\n<h3>Assicurarsi Che l\u2019Immagine di Sfondo Sia Legale<\/h3>\n<p>Il tema della legalit\u00e0 viene sempre fuori quando si parla di immagini, specialmente quelle pubblicate su internet. C&#8217;\u00e8 una tendenza crescente sui <a href=\"https:\/\/kinsta.com\/it\/blog\/plugin-wordpress-social-media\/\">social media<\/a> in cui le persone sembrano assumere che l&#8217;aggiunta di un credito a una foto ne rende automaticamente corretto il suo uso.<\/p>\n<p>Questo \u00e8 falso.<\/p>\n<p>Chiunque scatti la foto ne \u00e8 proprietario. Anche se quell&#8217;immagine proviene da un rapido scatto dell&#8217;iPhone, ottiene immediatamente la protezione del copyright per quella foto negli Stati Uniti e in molti altri paesi.<\/p>\n<p>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 \u00e8 sufficiente. Anche in questo caso, potreste dover attribuire la foto se la persona ve lo chiede.<\/p>\n<p>Abbiamo una <a href=\"https:\/\/kinsta.com\/it\/blog\/proteggere-le-immagini\/\">guida completa sulla protezione delle immagini sul vostro sito<\/a>, ma l&#8217;articolo vi d\u00e0 anche informazioni preziose per chi ha interesse a usare foto da altre fonti.<\/p>\n<p>La parte difficile delle immagini di sfondo \u00e8 che di solito non \u00e8 pratico aggiungere l&#8217;attribuzione, visto che WordPress non ha un posto in cui incorporare una didascalia visibile per le immagini di sfondo. E no, non si pu\u00f2 aggiungere l&#8217;attribuzione su un articolo o una pagina del blog a caso e aspettarsi che questo serva come credito per un&#8217;immagine di sfondo del sito web completo.<\/p>\n<p>Per proteggervi e per rispettare coloro che scattano le foto, considerate uno dei seguenti elementi quando cercate un&#8217;immagine di sfondo per WordPress:<\/p>\n<ul>\n<li>Scattate la foto da voi. \u00c8 il modo pi\u00f9 semplice per assicurarvi di non violare i diritti d&#8217;autore di qualcun altro.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/blog\/wordpress-stock-photos\/#2-pixelrockstar-premium-yet-insanely-affordable\">Pagate le foto<\/a> su siti come Shutterstock e iStockPhoto. A volte sono costosi, ma per un&#8217;immagine di sfondo pu\u00f2 rientrare nel vostro budget.<\/li>\n<li>Considerate un <a href=\"https:\/\/kinsta.com\/it\/blog\/immagini-gratuite-per-wordpress\/\">sito di immagini gratuite<\/a> come Unsplash o Pexels. Tuttavia, assicuratevi che l&#8217;attribuzione non sia richiesta! Potete occasionalmente trovare immagini su questi siti dove l&#8217;attribuzione \u00e8 suggerita ma non richiesta.<\/li>\n<li>Contattate il fotografo o l&#8217;artista e chiedete se potete usare gratuitamente il suo lavoro. Questo potrebbe essere tutto ci\u00f2 di cui avete bisogno, specialmente se offrite qualcosa in cambio.<\/li>\n<li>Non usate un&#8217;immagine di sfondo, o considerate di scegliere uno sfondo colorato invece che una foto.<\/li>\n<\/ul>\n<h2>Come Faccio a Impostare un&#8217;Immagine di Sfondo in WordPress?<\/h2>\n<p>Ci sono vari modi per impostare un&#8217;immagine di sfondo in WordPress. Questi metodi di solito cambiano in base alla posizione in cui volete mettere l&#8217;immagine.<\/p>\n<p>Per esempio, potreste decidere che vi piacerebbe avere un&#8217;immagine di sfondo che rimanga la stessa in tutto il vostro sito web. D&#8217;altra parte, \u00e8 possibile che voi preferiate trovare un modo per mostrare immagini di sfondo uniche per tutte le vostre pagine.<\/p>\n<p>Dato che esistono cos\u00ec tante possibilit\u00e0, vedremo come aggiungere un&#8217;immagine di sfondo o un colore nelle sezioni seguenti:<\/p>\n<ul>\n<li>L&#8217;intero sito<\/li>\n<li>Una pagina WordPress<\/li>\n<li>Un articolo su WordPress<\/li>\n<li>Un <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-5-0\/\">blocco di contenuto<\/a> individuale<\/li>\n<li>L&#8217;intestazione di WordPress<\/li>\n<li>Una pagina di archivio delle categorie<\/li>\n<li>La pagina di login di WordPress<\/li>\n<li>Il menu di navigazione<\/li>\n<li>Una pagina di manutenzione<\/li>\n<\/ul>\n<h3>Come Aggiungere un&#8217;Immagine di Sfondo all&#8217;Header e ai Menu di WordPress<\/h3>\n<p class=\"p1\"><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=5bSeC5NQjp0\"><\/kinsta-video><\/p>\n<h3>Prima di Iniziare: Attivare il Supporto per lo Sfondo Personalizzato su WordPress (Se Necessario)<\/h3>\n<p>Chi sviluppa i temi decide il destino delle funzionalit\u00e0 di sfondo di un sito. WordPress ha la funzionalit\u00e0 incorporata nel nucleo, ma uno sviluppatore di temi potrebbe disattivarla, lasciandovi senza alcuna impostazione per attivarla.<\/p>\n<p>Se in qualsiasi punto dei seguenti tutorial trovate che <a href=\"https:\/\/kinsta.com\/it\/blog\/come-funzionano-i-temi-di-wordpress\/\">il vostro tema \u00e8 la ragione<\/a> per cui vi manca l&#8217;opzione <strong>Sfondo personalizzato<\/strong>, considerate i seguenti passi per risolverlo rapidamente.<\/p>\n<p>Il principale supporto di sfondo personalizzato per WordPress viene gestito dal file <strong>functions.php.<\/strong> Aprite quel file e inserite il seguente codice se manca:<\/p>\n<pre><code class=\"language-css\">$defaults = array(\n    'default-color'          =&gt; '',\n    'default-image'          =&gt; '',\n    'default-repeat'         =&gt; '',\n    'default-position-x'     =&gt; '',\n    'default-attachment'     =&gt; '',\n    'wp-head-callback'       =&gt; '_custom_background_cb',\n    'admin-head-callback'    =&gt; '',\n    'admin-preview-callback' =&gt; ''\n);\nadd_theme_support( 'custom-background', $defaults );<\/code><\/pre>\n<p>Tenete a mente che l&#8217;elemento che attiva effettivamente il supporto dello sfondo \u00e8 la funzione <code>add_theme_support()<\/code> con tutto ci\u00f2 che contiene. Quel codice attiva la funzione di sfondo nella <a href=\"https:\/\/kinsta.com\/it\/blog\/amministrazione-wordpress\/\">bacheca di WordPress<\/a>, che potete usare in molti dei seguenti tutorial in questo articolo.<\/p>\n<p>\u00c8 anche possibile aggiungere un&#8217;immagine di sfondo predefinita per l&#8217;intero tema attraverso il file <strong>functions.php. <\/strong>Basta andare nell&#8217;area del codice precedente con il valore <code>default-image<\/code> e aggiungere l&#8217;URL dell&#8217;immagine nello spazio vuoto tra il <code>' '<\/code> dopo il <code>=&gt;<\/code>.<\/p>\n<p>Questo \u00e8 un modo semplice e veloce per attivare sfondi personalizzati all&#8217;interno della bacheca di WordPress.<\/p>\n<p>Detto questo, vi consigliamo di <a href=\"https:\/\/kinsta.com\/it\/blog\/cambiare-tema-wordpress\/\">cambiare il tema<\/a> 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.<\/p>\n<h3>Come Aggiungere un&#8217;Immagine di Sfondo al Vostro Intero Sito WordPress<\/h3>\n<p>Se il vostro tema offre la possibilit\u00e0 di aggiungere un&#8217;immagine di sfondo personalizzata (e molti lo fanno), tutto diventa pi\u00f9 facile.<\/p>\n<p>Per iniziare, andate nella vostra bacheca di WordPress e fate clic su <strong>Aspetto &gt; Personalizza.<\/strong><\/p>\n<figure style=\"width: 1090px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/custom-ize.png\" alt=\"Fate clic sul link 'Personalizza' sotto il menu Aspetto\" width=\"1090\" height=\"912\"><figcaption class=\"wp-caption-text\">Fate clic sul link &#8216;Personalizza&#8217; sotto il menu Aspetto<\/figcaption><\/figure>\n<p>Questo vi porta al <strong>Personalizza di WordPress<\/strong>, con le impostazioni di personalizzazione sulla sinistra e un&#8217;anteprima del sito web sulla destra.<\/p>\n<p>Qui, fate clic sulla scheda <strong>Sfondo.<\/strong><\/p>\n<figure style=\"width: 1885px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/background-tab.png\" alt=\"Immagine di sfondo di WordPress nell'editor\" width=\"1885\" height=\"940\"><figcaption class=\"wp-caption-text\">Immagine di sfondo di WordPress nell&#8217;editor<\/figcaption><\/figure>\n<p>In alternativa, se potete selezionare <strong>Aspetto &gt; Sfondo, <\/strong>potete usarlo per un percorso pi\u00f9 diretto a questa impostazione.<\/p>\n<figure style=\"width: 1302px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/back-back.png\" alt=\"Fare clic sul link \"Sfondo\" sotto il menu Aspetto\" width=\"1302\" height=\"905\"><figcaption class=\"wp-caption-text\">Fare clic sul link &#8220;Sfondo&#8221; sotto il menu Aspetto<\/figcaption><\/figure>\n<p>L&#8217;area di personalizzazione dello <strong>sfondo<\/strong> gestisce gli elementi di sfondo per tutto il vostro sito web.<\/p>\n<p>Fate clic sul pulsante <strong>Scegli immagine <\/strong>per procedere.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-background.png\" alt=\"Fare clic sul pulsante \"Scegli immagine\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8220;Scegli immagine&#8221;<\/figcaption><\/figure>\n<p>Nella finestra <strong>Seleziona immagine<\/strong>, scegliete un&#8217;immagine che si adatti bene come sfondo per il vostro <a href=\"https:\/\/kinsta.com\/it\/blog\/tendenze-web-design\/\">marchio e lo stile del sito web<\/a>. In generale, un modello di colore neutro con una tonalit\u00e0 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&#8217;aspetto con lo sfondo dietro di esso.<\/p>\n<p>Una volta selezionata la vostra immagine, fate clic sul pulsante <strong>Scegli immagine<\/strong> per andare avanti.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/choose-the-im.png\" alt=\"Scegliere l'immagine di sfondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Scegliere l&#8217;immagine di sfondo<\/figcaption><\/figure>\n<p>Lo sfondo che avete implementato appare ora nell&#8217;anteprima del sito web.<\/p>\n<p>Verificate che il vostro contenuto sia ancora distinguibile e presentabile anche con l&#8217;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.<\/p>\n<p>Una piccola <a href=\"https:\/\/kinsta.com\/it\/blog\/rigenerare-le-miniature\/\">miniatura<\/a> dello sfondo appare anche nel pannello delle <strong>impostazioni<\/strong>, mostrandovi in che modo l&#8217;immagine \u00e8 stata integrata.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/thats-where-it-is.png\" alt=\"Miniature delle immagini di sfondo di WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Miniature delle immagini di sfondo di WordPress<\/figcaption><\/figure>\n<p>Sono disponibili alcune impostazioni aggiuntive per gli sfondi di WordPress, incluso il campo <strong>Impostazioni predefinite.<\/strong><\/p>\n<p>Fate clic sul campo <strong>Impostazioni predefinite<\/strong> per cambiare la formattazione dell&#8217;immagine usando design e allineamenti preimpostati.<\/p>\n<figure style=\"width: 1890px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/preset.png\" alt=\"L'opzione 'Impostazioni predefinite' per le immagini di sfondo di WordPress\" width=\"1890\" height=\"940\"><figcaption class=\"wp-caption-text\">L&#8217;opzione &#8216;Impostazioni predefinite&#8217; per le immagini di sfondo di WordPress<\/figcaption><\/figure>\n<p>\u00c8 possibile scegliere tra le seguenti impostazioni:<\/p>\n<ul>\n<li><strong>Predefinito<\/strong>: Questo di solito d\u00e0 lo stesso risultato dell\u2019opzione <strong>Ripeti<\/strong>, ma pu\u00f2 dipendere dal vostro tema. L&#8217;impostazione Predefinito generalmente funziona meglio, ma dipende dall&#8217;immagine utilizzata.<\/li>\n<li><strong>Riempi lo schermo:<\/strong> Questa impostazione allunga l&#8217;immagine per assicurarsi che tutte le parti dello schermo vengano coperte, anche se ci\u00f2 significa ritagliare l&#8217;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.<\/li>\n<li><strong>Adatta allo schermo<\/strong>: Questo mantiene il rapporto d&#8217;aspetto della foto originale e cerca di usare quel rapporto per adattarlo all&#8217;immagine corrente sullo schermo. Fa un buon lavoro nel mantenere l&#8217;immagine vicina al suo stato originale ma potrebbe non coprire tutta l&#8217;area dello sfondo.<\/li>\n<li><strong>Ripeti: <\/strong>Questo usa parti della funzione <strong>Riempi lo schermo<\/strong>, espandendo e allungando l&#8217;immagine, ma ripete anche l&#8217;immagine quando non pu\u00f2 coprire con successo l&#8217;intero schermo. Per i template, quest\u2019opzione di solito va molto bene. Ma per alcune immagini, pu\u00f2 generare una linea netta tra le immagini ripetute.<\/li>\n<li><strong>Personalizzato:<\/strong> Questa impostazione vi d\u00e0 il maggior controllo sullo sfondo, offrendo diverse opzioni per personalizzare le dimensioni dell&#8217;immagine di sfondo di WordPress, come il modo in cui si ripete sulla pagina, si allunga o si sposta quando l&#8217;utente scorre.<\/li>\n<\/ul>\n<p>Non c&#8217;\u00e8 una regola per capire quali di queste impostazioni funzioni meglio perch\u00e9 le immagini sono di dimensioni, risoluzioni e dettagli diversi. Pertanto, \u00e8 meglio iniziare con l\u2019impostazione <strong>Predefinita <\/strong>e poi provare le altre opzioni per vedere quale va meglio per la vostra immagine di sfondo.<\/p>\n<p>Se tutto il resto fallisce, andate all&#8217;impostazione <strong>Personalizzato <\/strong>per specificare le vostre scelte nel dettaglio.<\/p>\n<figure style=\"width: 1406px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/fill.png\" alt=\"Impostazione 'Riempi lo schermo' per le immagini di sfondo di WordPress\" width=\"1406\" height=\"940\"><figcaption class=\"wp-caption-text\">Preset &#8216;Riempi lo schermo&#8217; per le immagini di sfondo di WordPress<\/figcaption><\/figure>\n<p>L\u2019opzione <strong>Adatta allo schermo <\/strong>non va bene per questa immagine, soprattutto perch\u00e9 l&#8217;immagine originale \u00e8 molto pi\u00f9 lunga che larga, lasciando una quantit\u00e0 significativa di spazio a destra. Potremmo cambiare la <strong>posizione dell&#8217;immagine <\/strong>al <strong>centro<\/strong>, ma molto probabilmente lascerebbe spazio bianco ai lati.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/fit-to.png\" alt=\"Il preset 'Adatta allo schermo'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Il preset &#8216;Adatta allo schermo&#8217;<\/figcaption><\/figure>\n<p>La prossima impostazione da considerare \u00e8 lo strumento <strong>Posizione immagine.<\/strong> Fate clic sulle frecce per spostare la vostra immagine di sfondo, regolando l&#8217;orientamento per metterla l&#8217;immagine verso il centro o per riempire lo schermo.<\/p>\n<p>In modo simile all&#8217;impostazione <strong>Impostazioni predefinite<\/strong>, lo strumento <strong>Posizione dell\u2019immagine<\/strong> vi richiede di cambiare le impostazioni e subito ricontrollare il vostro lavoro, poich\u00e9 l\u2019aspetto finale dipende dall&#8217;immagine originale e dal suo contenuto.<\/p>\n<figure style=\"width: 1886px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/moves-around.png\" alt=\"Posizione dell'immagine di sfondo di WordPress\" width=\"1886\" height=\"940\"><figcaption class=\"wp-caption-text\">Posizione dell&#8217;immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>In seguito, c&#8217;\u00e8 un campo con una casella da spuntare che dice <strong>Scorri con la pagina<\/strong>.<\/p>\n<p>Con questa casella selezionata, l&#8217;immagine di sfondo si attacca al contenuto in primo piano e scorre insieme all&#8217;utente quando questo si sposta su o gi\u00f9 nella pagina.<\/p>\n<figure style=\"width: 1885px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/scroll.png\" alt=\"Abilitazione dell'opzione 'Scorri con la pagina'\" width=\"1885\" height=\"940\"><figcaption class=\"wp-caption-text\">Abilitazione dell&#8217;opzione &#8216;Scorri con la pagina&#8217;<\/figcaption><\/figure>\n<p>Deselezionare questa casella tende a cambiare l&#8217;orientamento generale dell&#8217;immagine di sfondo, ma la sua caratteristica dominante \u00e8 quella di dire allo sfondo di rimanere statico mentre l&#8217;utente scorre la pagina.<\/p>\n<p>Gli elementi di contenuto in primo piano (come i <a href=\"https:\/\/kinsta.com\/it\/blog\/conversioni-pagine-prodotto-woocommerce\/\">prodotti<\/a> in questo caso) scivolano sull&#8217;immagine di sfondo, creando un effetto pi\u00f9 attraente.<\/p>\n<figure style=\"width: 1878px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/no-scroll.png\" alt=\"Disabilitare l'opzione 'Scorri con la pagina'\" width=\"1878\" height=\"940\"><figcaption class=\"wp-caption-text\">Disabilitare l&#8217;opzione &#8216;Scorri con la pagina&#8217;<\/figcaption><\/figure>\n<h4>Lavorare con le Impostazioni Personalizzate<\/h4>\n<p>Quando si opta per un\u2019opzione diversa da <strong>Personalizzato<\/strong>, non si ottengono molte impostazioni aggiuntive da configurare.<\/p>\n<p>Tuttavia, scegliendo il preset Personalizzato si aprono diversi altri campi da considerare.<\/p>\n<p>Per esempio, potete scegliere di <strong>riempire lo schermo <\/strong>o di <strong>adattarlo allo schermo, <\/strong>e poi combinarlo con un&#8217;immagine di sfondo ripetuta o non ripetuta, combinando gli elementi dei preset di prima. E potete ancora usare l&#8217;opzione <strong>Scorri con la pagina<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/custom-one.png\" alt=\"Preset e dimensioni dell'immagine per le immagini di sfondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Preset e dimensioni dell&#8217;immagine per le immagini di sfondo<\/figcaption><\/figure>\n<p>Vedete se \u00e8 possibile usare l&#8217;immagine originale senza modifiche o impostazioni. A volte la foto originale \u00e8 una corrispondenza quasi perfetta per essere usata come sfondo, quindi perch\u00e9 pasticciare con ci\u00f2 che gi\u00e0 funziona?<\/p>\n<p>Tuttavia, la sua dimensione potrebbe anche essere <a href=\"https:\/\/kinsta.com\/it\/blog\/speed-test-sito-web\/\">troppo grande per il vostro sito web<\/a>, o forse il rapporto d&#8217;aspetto non \u00e8 proprio della misura giusta. Indipendentemente da ci\u00f2, suggeriamo di sperimentare questa impostazione per capire se \u00e8 giusta per voi.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/no-repeat-or.png\" alt=\"Impostazione della dimensione dell'immagine di sfondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Impostazione della dimensione dell&#8217;immagine di sfondo<\/figcaption><\/figure>\n<p>Una volta che avete deciso le impostazioni di sfondo perfette per voi (per questo tutorial, l&#8217;opzione Predefinito \u00e8 la pi\u00f9 adatta), fate clic sul pulsante <strong>Pubblica <\/strong>per mettere online le modifiche sul vostro sito web.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/publish-to-page.png\" alt=\"Premere il pulsante 'Pubblica'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Premere il pulsante &#8216;Pubblica&#8217;<\/figcaption><\/figure>\n<p>Andate al front-end del vostro sito web per vedere lo sfondo in azione.<\/p>\n<p>La <a href=\"https:\/\/kinsta.com\/it\/blog\/cambiare-homepage-wordpress\/\">homepage<\/a> \u00e8 un ottimo punto di partenza. Noterete che l&#8217;area dell&#8217;intestazione e l&#8217;immagine di benvenuto non hanno sfondi. Questo perch\u00e9 l&#8217;immagine di benvenuto in cima al sito sta gi\u00e0 coprendo l&#8217;intera parte orizzontale dello schermo come immagine hero a tutto schermo.<\/p>\n<p>Per quanto riguarda l&#8217;intestazione e il <a href=\"https:\/\/kinsta.com\/it\/blog\/plugin-menu-wordpress\/\">menu<\/a>, imparerete come configurare questi sfondi in alcuni dei seguenti tutorial.<\/p>\n<figure style=\"width: 1548px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-back.png\" alt=\"Vedere l'immagine di sfondo di WordPress\" width=\"1548\" height=\"1885\"><figcaption class=\"wp-caption-text\">Vedere l&#8217;immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>Tenete presente che lo sfondo generale personalizzato di WordPress si attiva su ogni pagina e articolo del vostro sito web. \u00c8 una caratteristica globale per coloro che vogliono un modo rapido per inserire il brand sul loro sito e aggiungere un po&#8217; di brio.<\/p>\n<p>Per esempio, andando alla pagina <strong>Shop <\/strong>di questo sito si scopre il background dietro la selezione dei prodotti.<\/p>\n<figure style=\"width: 1571px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/every-page.png\" alt=\"L'immagine di sfondo di WordPress su un'altra pagina\" width=\"1571\" height=\"1266\"><figcaption class=\"wp-caption-text\">L&#8217;immagine di sfondo di WordPress su un&#8217;altra pagina<\/figcaption><\/figure>\n<h4>Come Impostare un Colore di Sfondo Invece di un&#8217;Immagine per Tutto il Vostro Sito Web<\/h4>\n<p>Il processo di attivazione di un colore di sfondo su tutto il vostro sito web non \u00e8 molto diverso da quando attivate un&#8217;immagine di sfondo. Iniziate andando su <strong>Aspetto &gt; Sfondo<\/strong> nella bacheca, poi cercate il campo<strong> Colore di sfondo.<\/strong><\/p>\n<p>Fate clic sul pulsante <strong>Seleziona colore<\/strong> per aprire altre impostazioni per scegliere e cambiare diversi colori per il vostro sfondo.<\/p>\n<figure style=\"width: 1906px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/bacgkround-select.jpg\" alt=\"Selezione di un colore unico come sfondo\" width=\"1906\" height=\"940\"><figcaption class=\"wp-caption-text\">Selezione di un colore unico come sfondo<\/figcaption><\/figure>\n<p>Il pannello dei colori fornisce diverse opzioni per <a href=\"https:\/\/kinsta.com\/it\/blog\/schemi-di-colore-siti-web\/\">decidere un colore<\/a>. La prima \u00e8 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.<\/p>\n<p>L&#8217;altra opzione \u00e8 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\u00f9 semplici.<\/p>\n<p>Per attivare un colore di sfondo, assicuratevi che il colore sia selezionato e mostrato nell&#8217;anteprima <strong>Seleziona colore.<\/strong><\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/bg-col.jpg\" alt=\"Scegliere un 'colore di sfondo'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Scegliere un &#8216;colore di sfondo&#8217;<\/figcaption><\/figure>\n<p>Dovreste vedere lo sfondo a colori nell&#8217;anteprima del <a href=\"https:\/\/kinsta.com\/it\/blog\/come-personalizzare-il-vostro-tema-wordpress\/\">Personalizza di WordPress<\/a>. Se non \u00e8 cos\u00ec, molto probabilmente significa che avete uno sfondo immagine installato che sta sovrascrivendo lo sfondo a colori.<\/p>\n<p>Tutto quello che dovete fare per rivelare lo sfondo colorato \u00e8 fare clic sul pulsante <strong>Rimuovi <\/strong>sotto l&#8217;anteprima di <strong>Immagine di sfondo<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/remove-image.jpg\" alt=\"Rimuovere l'immagine di sfondo di WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Rimuovere l&#8217;immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>Ora il colore appare in tutto il vostro sito, dietro il contenuto. Proprio come fareste con uno sfondo immagine, \u00e8 prudente controllare il vostro sito web per assicurarvi che tutto il testo, le immagini e i link siano ancora visibili con il nuovo sfondo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/once-removed.jpg\" alt=\"Anteprima di uno sfondo arancione unico di WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Anteprima di uno sfondo arancione unico di WordPress<\/figcaption><\/figure>\n<h3>Come Aggiungere un&#8217;Immagine di Sfondo alla Pagina di WordPress<\/h3>\n<p>Ma cosa succede se volete inserire un&#8217;immagine su WordPress per mostrarla come sfondo in una singola pagina di WordPress? Nella sezione precedente abbiamo visto le impostazioni globali per un&#8217;immagine di sfondo per tutto il sito.<\/p>\n<p>Guarda la Nostra <a href=\"https:\/\/www.youtube.com\/watch?v=ewE57bZIyRE\">Video-Guida<\/a> all&#8217;Aggiunta di Immagini di Sfondo a Pagine Singole, Articoli e Blocchi di Contenuto di WordPress<\/p>\n<p class=\"p1\"><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=ewE57bZIyRE\"><\/kinsta-video><\/p>\n<p>Molte persone amano aggiungere sfondi alle loro pagine perch\u00e9 \u00e8 possibile incorporare un certo tema o un&#8217;atmosfera a una pagina che si applica al contenuto. Per esempio, una pagina <a href=\"https:\/\/kinsta.com\/it\/su-di-noi\/\">About Us<\/a> potrebbe avere uno sfondo di Milano se l&#8217;azienda si trova a Milano. O un&#8217;introduzione al libro di un autore potrebbe includere uno sfondo che si adatta al tema della sua storia.<\/p>\n<p>In questa sezione, vedremo come aggiungere un&#8217;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.<\/p>\n<p><strong>Nota: <\/strong>non importa se usate l&#8217;editor Gutenberg o l&#8217;editor classico di WordPress.<\/p>\n<p>Per gli sfondi specifici della pagina, questi metodi sembrano funzionare meglio:<\/p>\n<ul>\n<li>Aggiungere uno sfondo di pagina unico con un <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-css\/\">CSS personalizzato<\/a>.<\/li>\n<li>Utilizzando un plugin che permette di avere sfondi di pagina individuali.<\/li>\n<li>Incorporare uno sfondo personalizzato su ogni pagina con l&#8217;aiuto di un costruttore di pagine.<\/li>\n<\/ul>\n<p>Aggiungere il proprio CSS personalizzato a una pagina comporta la ricerca dell&#8217;ID di classe per quella pagina e la richiesta di un URL di sfondo, all&#8217;interno del modulo CSS personalizzato, nelle impostazioni della pagina di WordPress. Fortunatamente, non \u00e8 cos\u00ec difficile capire l&#8217;ID di classe di una pagina: possiamo cercarlo o potreste anche gi\u00e0 sapere qual \u00e8.<\/p>\n<p>Andate alla pagina del vostro sito per cui volete uno sfondo specifico.<\/p>\n<figure style=\"width: 1473px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/this-is-the-page.png\" alt=\"Aggiungere un'immagine di sfondo di WordPress specifica per la pagina\" width=\"1473\" height=\"835\"><figcaption class=\"wp-caption-text\">Aggiungere un&#8217;immagine di sfondo di WordPress specifica per la pagina<\/figcaption><\/figure>\n<p>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.<\/p>\n<p>Il modulo Ispeziona visualizza il codice della pagina stessa, insieme al CSS personalizzato utilizzato globalmente per il vostro sito web. \u00c8 un&#8217;area utile per trovare informazioni su una pagina o un articolo del vostro sito.<\/p>\n<figure style=\"width: 1106px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/inspect-the-page.png\" alt=\"Ispezionare una pagina web\" width=\"1106\" height=\"825\"><figcaption class=\"wp-caption-text\">Ispezionare una pagina web<\/figcaption><\/figure>\n<p>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.<\/p>\n<p>Usate la funzione di ricerca e digitate <code>body<\/code> o <code>class<\/code> per individuare la linea di codice con il tag <code>page-id<\/code>.<\/p>\n<p>In questo caso, l&#8217;ID \u00e8 <code>page-id-352<\/code>, ma il vostro sar\u00e0 diverso.<\/p>\n<p>Copiate l&#8217;intera parte di codice con la parola chiave <code>page-id-#<\/code>, compresi i trattini.<\/p>\n<figure style=\"width: 1251px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/body-class.png\" alt=\"Trovare l'ID della pagina in WordPress\" width=\"1251\" height=\"657\"><figcaption class=\"wp-caption-text\">Trovare l&#8217;ID della pagina in WordPress<\/figcaption><\/figure>\n<p>Salvate l\u2019<a href=\"https:\/\/kinsta.com\/it\/blog\/trovare-id-post-wordpress\/\">ID della pagina<\/a> da qualche parte per usarlo nei prossimi passi, quindi tornate alla vostra bacheca di WordPress e fate clic su <strong>Aspetto &gt; Personalizza.<\/strong><\/p>\n<figure style=\"width: 1348px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/custom-is-s-s.png\" alt=\"Il Personalizza del tema\" width=\"1348\" height=\"905\"><figcaption class=\"wp-caption-text\">Il Personalizza del tema<\/figcaption><\/figure>\n<p>Selezionate la scheda <strong>CSS aggiuntivo <\/strong>nel Personalizza di WordPress.<\/p>\n<figure style=\"width: 1508px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-css.png\" alt=\"Sezione 'CSS aggiuntivo' nel Personalizza\" width=\"1508\" height=\"916\"><figcaption class=\"wp-caption-text\">Sezione &#8216;CSS aggiuntivo&#8217; nel Personalizza<\/figcaption><\/figure>\n<p>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, \u00e8 utile per sovrascrivere l&#8217;immagine di sfondo predefinita e abilitare un&#8217;immagine di sfondo per una pagina e non per le altre.<\/p>\n<p>Incollate il seguente codice nel campo CSS aggiuntivo, ma ricordate di sostituire il &#8220;<strong>#<\/strong>&#8221; con il numero reale che avete estratto come ID della pagina dai passi precedenti. Inoltre, dovete mettere un vero URL dell&#8217;immagine al posto del testo di riempimento che abbiamo l\u00ec dentro (<code>http:\/\/YOURIMAGEURL.jpeg<\/code>.<\/p>\n<pre><code class=\"language-html\">body.page-id-# {\nbackground-image: url(\"http:\/\/YOURIMAGEURL.jpeg\");\nbackground-position: center center;\nbackground-size: cover;\nbackground-repeat: no-repeat;\nbackground-attachment: fixed;\n}<\/code><\/pre>\n<p>Per questo esempio, l&#8217;ID della pagina \u00e8 compilato come 352, e abbiamo un URL dell&#8217;immagine di sfondo incollato dalla <a href=\"https:\/\/kinsta.com\/it\/blog\/libreria-media-wordpress\/\">nostra Libreria Media<\/a>.<\/p>\n<p>Se necessario, modificate le impostazioni dello sfondo personalizzato se avete problemi ad adattare l&#8217;immagine di sfondo dello schermo. Per esempio, potreste voler modificare elementi come la dimensione dell&#8217;immagine di sfondo di WordPress, l&#8217;attacco o la posizione. In caso contrario, lasciateli tutti come sono nel codice di esempio.<\/p>\n<figure style=\"width: 1485px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/insert-it.png\" alt=\"Aggiungere CSS personalizzati a un sito WordPress\" width=\"1485\" height=\"923\"><figcaption class=\"wp-caption-text\">Aggiungere CSS personalizzati a un sito WordPress<\/figcaption><\/figure>\n<p>Fate clic sul pulsante <strong>Pubblica <\/strong>quando il CSS personalizzato vi soddisfa.<\/p>\n<figure style=\"width: 1512px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/publish-the-thing.png\" alt=\"Fare clic sul pulsante \"Pubblica\"\" width=\"1512\" height=\"827\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8220;Pubblica&#8221;<\/figcaption><\/figure>\n<p>Con quel CSS personalizzato, la pagina specificata include un&#8217;immagine di sfondo usando le impostazioni di dimensionamento e posizionamento del codice. Nessun&#8217;altra pagina del vostro sito mostrer\u00e0 lo stesso sfondo, a meno che non ripetiate il CSS per diversi <a href=\"https:\/\/kinsta.com\/it\/blog\/trovare-id-post-wordpress\/\">ID di pagina<\/a>.<\/p>\n<figure style=\"width: 1335px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/background-just-for-page.png\" alt=\"L'immagine di sfondo ora viene mostrata nella pagina\" width=\"1335\" height=\"899\"><figcaption class=\"wp-caption-text\">L&#8217;immagine di sfondo ora viene mostrata nella pagina<\/figcaption><\/figure>\n<p>Come accennato prima, le altre opzioni per aggiungere uno sfondo unico a una pagina WordPress includono l&#8217;uso di un costruttore di pagine o di un plugin che permette di avere immagini di sfondo sulle singole pagine.<\/p>\n<p>Tuttavia, il modo pi\u00f9 economico e veloce per mettere un&#8217;immagine di sfondo su una pagina individuale \u00e8 quello di usare il metodo del codice CSS mostrato sopra.<\/p>\n<h3>Come Aggiungere un&#8217;Immagine di Sfondo a un Articolo WordPress<\/h3>\n<p>La maggior parte delle immagini di sfondo vengono inserite dietro le pagine di WordPress o in ogni pagina di un sito web.<\/p>\n<p>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\u00e0 visualizzato anche per gli articoli del blog. Questo non \u00e8 l&#8217;ideale per tutte le organizzazioni, perch\u00e9 diversi articoli del blog potrebbero avere argomenti drasticamente diversi.<\/p>\n<p>Questi blog potrebbero beneficiare delle loro immagini di sfondo uniche. Tuttavia, gli articoli di WordPress non hanno una propria impostazione dell&#8217;immagine di sfondo, il che rende la cosa un po&#8217; pi\u00f9 complicata.<\/p>\n<p>Pertanto, abbiamo alcune opzioni da considerare quando si aggiunge un&#8217;immagine di sfondo a un articolo (noterete che sono le stesse di quando si lavora con immagini di sfondo specifiche per la pagina):<\/p>\n<ul>\n<li>Inserire un&#8217;immagine di sfondo usando un CSS personalizzato.<\/li>\n<li>Usare un plugin per implementare uno sfondo sui singoli articoli.<\/li>\n<li>Installare un costruttore di pagine visuale per gli sfondi degli articoli.<\/li>\n<\/ul>\n<p>Come la sezione precedente sugli sfondi unici delle pagine, potete aggiungere uno sfondo specifico per l\u2019articolo usando un costruttore di pagine o un plugin.<\/p>\n<p>Visto che fare uno sfondo specifico per un articolo non \u00e8 molto diverso da farlo per una pagina, toccheremo solo brevemente i passi per gestire questo processo per un singolo articolo.<\/p>\n<p>Quando usate il CSS personalizzato per implementare uno sfondo specifico per l\u2019articolo, usate lo stesso codice che usereste per lo sfondo della pagina, con una differenza: dovete trovare l&#8217;ID dell\u2019articolo invece che l&#8217;ID della pagina.<\/p>\n<p>Quindi, aprite il frontend di un articolo di WordPress dove vorreste inserire uno sfondo.<\/p>\n<figure style=\"width: 1294px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-actual-post.png\" alt=\"Immagine di sfondo di WordPress per gli articoli\" width=\"1294\" height=\"883\"><figcaption class=\"wp-caption-text\">Immagine di sfondo di WordPress per gli articoli<\/figcaption><\/figure>\n<p>Fate clic con il tasto destro sull\u2019articolo e scegliete l&#8217;opzione Ispeziona. Completate una ricerca all&#8217;interno del codice per individuare la sezione della classe del corpo nel codice. Cercate la parte <code>postid-#<\/code>: \u00e8 l&#8217;ID del post che dovete inserire nel CSS personalizzato.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-91278 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/find-post-id-1.png\" alt=\"trova l'id del post\" width=\"735\" height=\"767\"><\/p>\n<p>Noterete che la formattazione per l&#8217;ID dell\u2019articolo \u00e8 leggermente diversa in questo esempio rispetto all&#8217;ID della pagina, dove il tag <code>postid-#<\/code> non ha un trattino tra &#8220;post&#8221; e &#8220;id&#8221; come succede con <code>page-id-#<\/code>. Inoltre, queste non sono regole rigide, potete trovare vari formati per i tag.<\/p>\n<p>Ora, andate alla vostra bacheca di WordPress e fate clic su <strong>Aspetto &gt; Personalizza. <\/strong>Navigate fino alla scheda <strong>CSS aggiuntivo.<\/strong><\/p>\n<figure style=\"width: 1190px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-css-s.png\" alt=\"La sezione 'CSS aggiuntivo'\" width=\"1190\" height=\"842\"><figcaption class=\"wp-caption-text\">La sezione &#8216;CSS aggiuntivo&#8217;<\/figcaption><\/figure>\n<p>Incollate il seguente codice in quel campo CSS personalizzato:<\/p>\n<pre><code class=\"language-html\">body.postid-# {\nbackground-image: url(\"http:\/\/YOURIMAGEURL.jpeg\");\nbackground-position: center center;\nbackground-size: cover;\nbackground-repeat: no-repeat;\nbackground-attachment: fixed;\n}<\/code><\/pre>\n<p>Dopo di che, prendete il numero di ID del post che avete trovato prima per l\u2019articolo desiderato. Sostituite il &#8220;#&#8221; nel codice CSS con il numero. Inoltre, cambiate il testo <code>http:\/\/YOURIMAGEURL.jpeg<\/code> con l&#8217;URL reale dell&#8217;immagine di sfondo che vorreste mostrare, mantenendo le virgolette intorno.<\/p>\n<figure style=\"width: 1141px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-css-typed-in.png\" alt=\"Aggiungere il CSS personalizzato per uno specifico id del post\" width=\"1141\" height=\"820\"><figcaption class=\"wp-caption-text\">Aggiungere il CSS personalizzato per uno specifico id del post<\/figcaption><\/figure>\n<p>Assicuratevi di premere il pulsante <strong>Pubblica <\/strong>prima di lasciare la scheda CSS Aggiuntivo, poich\u00e9 questo salva le vostre modifiche sul sito web e vi permette di visualizzare lo sfondo sul front-end.<\/p>\n<figure style=\"width: 1161px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/publish-but.png\" alt=\"Premere il pulsante \"Pubblica\" per salvare le modifiche\" width=\"1161\" height=\"816\"><figcaption class=\"wp-caption-text\">Premere il pulsante &#8220;Pubblica&#8221; per salvare le modifiche<\/figcaption><\/figure>\n<p>Con queste modifiche CSS in atto, \u00e8 ora possibile tornare al front-end di quell\u2019articolo del blog WordPress per vedere il nuovo sfondo. <a href=\"https:\/\/kinsta.com\/it\/blog\/speed-test-sito-web\/\">Testate<\/a> 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.<\/p>\n<figure style=\"width: 1316px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-post-now-has-it.png\" alt=\"L'immagine di sfondo sull\u2019articolo\" width=\"1316\" height=\"883\"><figcaption class=\"wp-caption-text\">L&#8217;immagine di sfondo sull\u2019articolo<\/figcaption><\/figure>\n<h3>Come Aggiungere un&#8217;Immagine di Sfondo a un Singolo Blocco di Contenuto<\/h3>\n<p>I singoli blocchi di contenuto di WordPress <a href=\"https:\/\/kinsta.com\/it\/blog\/gutenberg-editor-wordpress\/\">Gutenberg<\/a> consentono una vasta gamma di opzioni di visualizzazione del contenuto, tra cui caselle di testo, immagini e gallerie.<\/p>\n<p>Questi dividono il vostro contenuto in sezioni separate. Quindi, potete aggiungere un colore di sfondo o un&#8217;immagine solo per quel blocco.<\/p>\n<p>Per esempio, diciamo che state scrivendo un articolo sul blog sullo stato dell&#8217;industria dell&#8217;abbigliamento al dettaglio. Volete finire o iniziare l\u2019articolo con una call-to-action per le persone che si iscrivono al <a href=\"https:\/\/kinsta.com\/it\/webinars\/\">vostro prossimo webinar<\/a>. Avrebbe senso far risaltare questa sezione usando un colore di sfondo o un&#8217;immagine.<\/p>\n<p>Sfortunatamente, l&#8217;editor di blocchi di WordPress non offre un&#8217;impostazione onnicomprensiva in cui \u00e8 possibile aggiungere uno sfondo a qualsiasi blocco. Tuttavia, alcuni blocchi hanno la possibilit\u00e0 di incorporare uno sfondo colorato.<\/p>\n<p>C&#8217;\u00e8 anche un blocco, chiamato blocco Copertina, che \u00e8 quanto di pi\u00f9 vicino possiamo pensare per un&#8217;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.<\/p>\n<p>Di seguito sono riportate le tecniche da utilizzare per impostare un&#8217;immagine o un colore di sfondo per un singolo blocco WordPress.<\/p>\n<h4>Impostare uno Sfondo di Colore per un Blocco<\/h4>\n<p>Il modo pi\u00f9 semplice per aggiungere un po&#8217; di vivacit\u00e0 a un singolo blocco \u00e8 quello di aggiungere uno sfondo a colori. Non \u00e8 fantasioso come uno sfondo immagine, ma lo sfondo a colori \u00e8 in realt\u00e0 l&#8217;unico tipo di sfondo nell&#8217;editor dei blocchi di WordPress disponibile per i blocchi standard.<\/p>\n<p><strong>Nota: <\/strong>alcuni blocchi non hanno alcuna impostazione di sfondo. In questo caso, \u00e8 meglio usare un blocco Copertina e sovrapporvi altri blocchi, come spiegato pi\u00f9 avanti in questo articolo.<\/p>\n<p>Il blocco <strong>Paragrafo<\/strong>, per esempio, ha un&#8217;impostazione per attivare uno sfondo colorato.<\/p>\n<p>Per attivarlo, selezionate il blocco, poi individuate le <strong>Impostazioni colore <\/strong>sotto la scheda <strong>Blocco <\/strong>sul lato destro.<\/p>\n<figure style=\"width: 1901px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-block.png\" alt=\"Cambiare lo sfondo \"Impostazioni di colore\"\" width=\"1901\" height=\"885\"><figcaption class=\"wp-caption-text\">Cambiare lo sfondo &#8220;Impostazioni di colore&#8221;<\/figcaption><\/figure>\n<p>Questa sezione rivela i campi <strong>Colore del testo <\/strong>e <strong>Colore dello sfondo<\/strong>.<\/p>\n<p>Andate all&#8217;area <strong>Colore dello sfondo <\/strong>e selezionate un colore dall&#8217;elenco delle opzioni disponibili. Potete anche scegliere il link <strong>Colore personalizzato <\/strong>per inserire il vostro codice colore o scegliere un colore unico.<\/p>\n<p>Come potete vedere, una volta che questa impostazione \u00e8 in atto, lo sfondo del blocco Paragrafo diventa di un colore diverso, in questo caso, blu.<\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/color-back.png\" alt=\"Scegliere un colore di sfondo\" width=\"1900\" height=\"896\"><figcaption class=\"wp-caption-text\">Scegliere un colore di sfondo<\/figcaption><\/figure>\n<h4>Aggiungere uno Sfondo Colorato a Qualsiasi Blocco di WordPress<\/h4>\n<p>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&#8217;opzione dello sfondo?<\/p>\n<p>La soluzione pi\u00f9 rapida \u00e8 quella di utilizzare la funzione di blocco <strong>Gruppo <\/strong>in WordPress.<\/p>\n<p>Per farlo, selezionate pi\u00f9 blocchi gi\u00e0 presenti nel vostro contenuto. Per questo esempio, selezioneremo contemporaneamente un blocco <strong>Paragrafo <\/strong>e un blocco <strong>Galleria.<\/strong><\/p>\n<p>Fate clic sull&#8217;icona con i quadratini sovrapposti che appare nel menu delle icone.<\/p>\n<figure style=\"width: 1561px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-both.png\" alt=\"La sezione 'La nostra squadra' su una pagina\" width=\"1561\" height=\"940\"><figcaption class=\"wp-caption-text\">La sezione &#8216;La nostra squadra&#8217; su una pagina<\/figcaption><\/figure>\n<p>Scegliete l&#8217;opzione <strong>Gruppo <\/strong>nel menu a discesa.<\/p>\n<p>Questo prende tutti i blocchi attualmente selezionati e <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-5-3\/#editing-experience\">li combina in un gruppo<\/a>, permettendovi di spostarli o modificarli tutti insieme invece che in blocchi separati.<\/p>\n<figure style=\"width: 1575px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/group-theme.png\" alt=\"Raggruppare le sezioni come un blocco\" width=\"1575\" height=\"927\"><figcaption class=\"wp-caption-text\">Raggruppare le sezioni come un blocco<\/figcaption><\/figure>\n<p>Questo imposta il <strong>gruppo <\/strong>come un proprio blocco. Significa che potete andare alla scheda <strong>Impostazioni del blocco<\/strong> sul lato destro della pagina per trovare le sue impostazioni.<\/p>\n<p>Cercate la scheda <strong>Impostazioni colore <\/strong>e fate clic su quella.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/color-sets.png\" alt=\"Cambiare le \"impostazioni di colore\" per il blocco raggruppato\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Cambiare le &#8220;impostazioni di colore&#8221; per il blocco raggruppato<\/figcaption><\/figure>\n<p>Proprio come un blocco Paragrafo standard, il blocco Gruppo ha anche una funzione per il Colore di sfondo.<\/p>\n<p>Scegliete il colore che vi piace di pi\u00f9 per questa situazione per verificare che tutto all&#8217;interno di quel gruppo abbia quel colore di sfondo.<\/p>\n<p>Il bello del blocco Gruppo \u00e8 che prende un altro blocco che non ha uno sfondo (come il blocco Gallery) e vi permette di attivare comunque uno sfondo per esso.<\/p>\n<figure style=\"width: 1454px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/back-color-in-group.png\" alt=\"Impostare il colore di sfondo come blu\" width=\"1454\" height=\"894\"><figcaption class=\"wp-caption-text\">Impostare il colore di sfondo come blu<\/figcaption><\/figure>\n<h4>Aggiungere un&#8217;Immagine di Sfondo a un Blocco di WordPress<\/h4>\n<p>I blocchi di WordPress si trovano sia nelle pagine che negli articoli. Pertanto, possiamo implementare questa tattica in entrambi. \u00c8 possibile inserire qualsiasi contenuto sopra lo sfondo del blocco raggruppato &#8211; o solo in un blocco WordPress.<\/p>\n<p>Per iniziare questo processo, fate clic sul pulsante <strong>Aggiungi blocco <\/strong>o sull&#8217;icona &#8220;<strong>+<\/strong>&#8221; e cercate il blocco di <strong>copertura.<\/strong><\/p>\n<p>Scegliete quel blocco per inserirlo nel vostro articolo o pagina.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/go-for-cov.png\" alt=\"Aggiungere un blocco di immagine di copertina\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Aggiungere un blocco di immagine di copertina<\/figcaption><\/figure>\n<p>Dovete poi fare clic sul pulsante <strong>Carica o Seleziona elemento multimediale<\/strong>, che vi permette di cercare le immagini che potete usare come sfondo.<\/p>\n<figure style=\"width: 1865px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-med.png\" alt=\"Fare clic sul pulsante \"Seleziona elemento multimediale\"\" width=\"1865\" height=\"836\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8220;Seleziona elemento multimediale&#8221;<\/figcaption><\/figure>\n<p>Scegliete l&#8217;immagine che volete e fate clic sul pulsante <strong>Seleziona.<\/strong><\/p>\n<figure style=\"width: 1777px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/sel.png\" alt=\"Scegliere l'immagine e fare clic sul pulsante 'Seleziona'\" width=\"1777\" height=\"834\"><figcaption class=\"wp-caption-text\">Scegliere l&#8217;immagine e fare clic sul pulsante &#8216;Seleziona&#8217;<\/figcaption><\/figure>\n<p>Ora potete vedere quell&#8217;immagine come sfondo per il blocco Copertina.<\/p>\n<p>Sentitevi liberi di fare clic su quel blocco per iniziare a digitare il contenuto del paragrafo, dato che la funzione principale \u00e8 per la sovrapposizione del testo.<\/p>\n<p>Il bello del blocco Copertina \u00e8 che offre diverse opzioni di <a href=\"https:\/\/kinsta.com\/it\/blog\/migliori-editor-di-testo\/\">formattazione<\/a>, permettendovi di saltare da un&#8217;intestazione a un formato paragrafo in pochi secondi.<\/p>\n<figure style=\"width: 1902px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-res-ult.png\" alt=\"Immagine di sfondo di WordPress nella sezione\" width=\"1902\" height=\"892\"><figcaption class=\"wp-caption-text\">Immagine di sfondo di WordPress nella sezione<\/figcaption><\/figure>\n<p>Per aggiungere altri blocchi su quello sfondo, fate clic sul pulsante con l&#8217;icona &#8220;<strong>+<\/strong>&#8221; all&#8217;interno dello stesso blocco Copertina. Potreste dover premere il tasto Invio una volta per rivelare il pulsante.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/blurring.png\" alt=\"Fare clic sul segno pi\u00f9 all'interno della sezione del blocco\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Fare clic sul segno pi\u00f9 all&#8217;interno della sezione del blocco<\/figcaption><\/figure>\n<p>In modo simile all&#8217;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.<\/p>\n<p>Ci\u00f2 significa che \u00e8 possibile inserire un&#8217;immagine, una <a href=\"https:\/\/kinsta.com\/it\/blog\/plugin-wordpress-gallerie-fotografiche\/\">galleria<\/a>, colonne o qualsiasi tipo di blocco WordPress all&#8217;interno del blocco Copertina, rendendolo la soluzione ideale per sfondi di immagini con un blocco individuale.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/search-for-block-1.png\" alt=\"Ricerca del blocco\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Ricerca del blocco<\/figcaption><\/figure>\n<p>Per questo esempio, abbiamo inserito un&#8217;immagine e l\u2019abbiamo formattata un po&#8217; per farla sembrare accettabile all&#8217;interno del blocco Copertina.<\/p>\n<p>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.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-block-complete.png\" alt=\"Un esempio di blocco con immagine di sfondo WordPress\" width=\"1920\" height=\"883\"><figcaption class=\"wp-caption-text\">Un esempio di blocco con immagine di sfondo WordPress<\/figcaption><\/figure>\n<p>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.<\/p>\n<p>Questo rivela una miriade di impostazioni da regolare per l&#8217;immagine di sfondo, tra cui le seguenti:<\/p>\n<ul>\n<li>Sfondo fisso<\/li>\n<li>Sfondo ripetuto<\/li>\n<li>Selettore del punto focale<\/li>\n<li>Dimensioni<\/li>\n<li>Sovrapposizione<\/li>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/plugin-menu-wordpress\/#responsive-menu\">Opacit\u00e0<\/a><\/li>\n<li>Avanzate<\/li>\n<\/ul>\n<figure style=\"width: 1680px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-clock-sets.png\" alt=\"Cambiare le impostazioni del blocco\" width=\"1680\" height=\"940\"><figcaption class=\"wp-caption-text\">Cambiare le impostazioni del blocco<\/figcaption><\/figure>\n<p>Una delle impostazioni pi\u00f9 importanti da considerare \u00e8 verso il fondo del pannello <strong>Impostazioni del blocco<\/strong>.<\/p>\n<p>Scorrete verso il basso per trovare la sezione <strong>Sovrapposizione.<\/strong> Aprite la sezione per rivelare un elenco di sovrapposizioni di colore e opzioni per rendere quei colori solidi o sfumati.<\/p>\n<p>Questa \u00e8 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&#8217;<strong>Opacit\u00e0 <\/strong>per assicurarvi che la sovrapposizione del colore non sovrasti lo sfondo.<\/p>\n<figure style=\"width: 1905px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/new-color.png\" alt=\"Cambiare il colore di sfondo del blocco\" width=\"1905\" height=\"895\"><figcaption class=\"wp-caption-text\">Cambiare il colore di sfondo del blocco<\/figcaption><\/figure>\n<p>In alternativa, considerate il <a href=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\">plugin Stackable Page Builder Gutenberg Blocks<\/a> per aprire strumenti pi\u00f9 avanzati per gli sfondi sui singoli blocchi.<\/p>\n<h3>Come Mettere un&#8217;Immagine di Sfondo Dietro l&#8217;Intestazione di WordPress<\/h3>\n<p>Fino ad ora, abbiamo parlato di come aggiungere un&#8217;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&#8217;area che contiene il vostro menu e il vostro logo?<\/p>\n<p>A volte, uno sfondo dietro la vostra intestazione \u00e8 tutto ci\u00f2 di cui avete bisogno.<\/p>\n<p>Impostare un&#8217;immagine di sfondo per l&#8217;intestazione <a href=\"https:\/\/kinsta.com\/it\/blog\/cambiare-tema-wordpress\/\">aggiunge nuovo brio<\/a> al vostro sito, specialmente se c&#8217;\u00e8 una qualche celebrazione o una grande vendita in corso che potete evidenziare.<\/p>\n<p>Per iniziare, andate su <strong>Aspetto &gt; Header <\/strong> nella bacheca di WordPress.<\/p>\n<p><strong>Nota: <\/strong>potete anche trovare le impostazioni dell&#8217;intestazione andando su <strong>Aspetto &gt; Personalizza &gt; Header.<\/strong><\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/head-here.png\" alt=\"Bacheca di WordPress &gt; Aspetto &gt; Header\" width=\"1920\" height=\"910\"><figcaption class=\"wp-caption-text\">Bacheca di WordPress &gt; Aspetto &gt; Header<\/figcaption><\/figure>\n<p>Ora dovreste vedere un&#8217;anteprima della vostra homepage sul lato destro dello schermo, insieme alle impostazioni dell\u2019header a sinistra.<\/p>\n<p>Il modulo Header spiega le dimensioni preferite per qualsiasi immagine di sfondo dell&#8217;intestazione, quindi potete scegliere di ritagliare la vostra immagine prima di caricarla o aspettare di avere l&#8217;immagine sulla vostra bacheca di WordPress.<\/p>\n<p>Sotto il titolo <strong>Current header<\/strong>, fate clic sul pulsante <strong>Aggiungi nuova immagine.<\/strong><\/p>\n<figure style=\"width: 1886px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/add-news.png\" alt=\"Fare clic sul pulsante 'Aggiungi nuova immagine'\" width=\"1886\" height=\"940\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8216;Aggiungi nuova immagine&#8217;<\/figcaption><\/figure>\n<p>Gli header possono essere complicati perch\u00e9 dovete assicurarvi che tutti i <a href=\"https:\/\/kinsta.com\/it\/blog\/link-di-ancoraggio\/\">link<\/a> e gli elementi di testo (per non parlare del vostro logo) appaiano chiaramente sopra l&#8217;immagine di sfondo.<\/p>\n<p>Pertanto, vi consigliamo di testare le immagini di sfondo e considerare immagini che si attengono a colori pi\u00f9 solidi e modelli. Non renderanno cos\u00ec difficile vedere le voci del vostro menu e il vostro logo.<\/p>\n<p>Selezionate un&#8217;immagine che vi sembra ideale, poi fate clic sul pulsante <strong>Seleziona e ritaglia<\/strong> per procedere.<\/p>\n<figure style=\"width: 1860px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/crop-func.png\" alt=\"Scegliere un'immagine\" width=\"1860\" height=\"880\"><figcaption class=\"wp-caption-text\">Scegliere un&#8217;immagine<\/figcaption><\/figure>\n<p>Ci piace lo strumento di ritaglio integrato poich\u00e9 fornisce automaticamente le dimensioni giuste per l&#8217;immagine di sfondo dell\u2019header. Questo dovrebbe accelerare il processo rispetto a quando si modifica una foto, magari tramite Photoshop, prima del caricamento.<\/p>\n<p>Spostate la casella di ritaglio nella posizione che ha pi\u00f9 senso per la vostra immagine di sfondo. Sentitevi liberi di trascinare uno degli angoli se avete bisogno di ridurre l&#8217;immagine ancora di pi\u00f9.<\/p>\n<p>Una volta che avete il ritaglio perfetto, fate clic sul pulsante <strong>Ritaglia immagine.<\/strong><\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/crop-im.png\" alt=\"Ritagliare l'immagine\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Ritagliare l&#8217;immagine<\/figcaption><\/figure>\n<p>L&#8217;immagine di sfondo dell\u2019header viene immediatamente attivata nell&#8217;anteprima del Personalizza di WordPress, aiutandovi a vedere esattamente cosa vedranno i vostri clienti con questo tipo di sfondo.<\/p>\n<p>Noterete che l&#8217;immagine di sfondo dell\u2019header non si estende al resto del contenuto della pagina. Rimane nell\u2019header, dietro qualsiasi cosa che si trova l\u00ec, come un logo, uno slogan, un menu e una <a href=\"https:\/\/kinsta.com\/it\/blog\/ricerca-wordpress\/\">barra di ricerca<\/a>.<\/p>\n<figure style=\"width: 1901px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-actual-thing.png\" alt=\"Seleziona l'immagine di sfondo dell\u2019header\" width=\"1901\" height=\"940\"><figcaption class=\"wp-caption-text\">Seleziona l&#8217;immagine di sfondo dell\u2019header<\/figcaption><\/figure>\n<p>Un&#8217;altra opzione per lo sfondo dell\u2019header \u00e8 quella di caricare diverse immagini e farle ruotare in modo casuale, aggiungendo un po&#8217; di brio e sorpresa al vostro sito web ogni volta che un utente arriva sulla homepage.<\/p>\n<p>Per far s\u00ec che questo funzioni, dovete prima avere diverse immagini caricate nella casella delle impostazioni dell\u2019header. Fate clic sul pulsante <strong>Aggiungi nuova immagine<\/strong> per completare questo processo.<\/p>\n<p>Una volta che avete pi\u00f9 di un&#8217;immagine, fate clic sul pulsante <strong>Randomize Uploaded Headers <\/strong> per attivare la funzione che mostra ogni volta uno sfondo diverso per l\u2019header.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/random.png\" alt=\"Aggiungere altri l\u2019header\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Aggiungere altri header<\/figcaption><\/figure>\n<p>Potreste notare che l&#8217;aggiunta di un&#8217;immagine di sfondo all\u2019header rende difficile vedere alcuni elementi dello stesso, come il vostro menu o un carrello della spesa.<\/p>\n<p>Se questo \u00e8 il caso, vi suggeriamo di non eliminare immediatamente l&#8217;immagine dell\u2019header. Andate invece ai campi <strong>Colore del testo<\/strong> e <strong>Colore del link<\/strong> per vedere se qualche aggiustamento pu\u00f2 aiutare.<\/p>\n<p>L&#8217;impostazione del colore del testo controlla qualsiasi testo nell\u2019header che non \u00e8 collegato a un&#8217;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.<\/p>\n<p>L&#8217;altra casella \u00e8 per il Colore del link. Molto probabilmente vedrete pi\u00f9 modifiche quando regolate questo campo colore poich\u00e9 include tutte le voci di menu collegate ad altre pagine.<\/p>\n<figure style=\"width: 1921px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/lino-color.png\" alt=\"Colore del testo sopra l'immagine di sfondo di WordPress\" width=\"1921\" height=\"941\"><figcaption class=\"wp-caption-text\">Colore del testo sopra l&#8217;immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>Ecco un esempio di cosa succede quando scegliete un nuovo colore sia per il <strong>Colore del testo<\/strong> che per il <strong>Colore del link<\/strong>. Potete vedere che il tagline e il nome del sito sono cambiati, il menu \u00e8 diventato bianco, e cos\u00ec la maggior parte degli altri elementi dell\u2019header come l&#8217;icona del carrello.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/text-and-link.png\" alt=\"Controllo degli elementi dell\u2019header\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Controllo degli elementi dell\u2019header<\/figcaption><\/figure>\n<p>Per coloro che non sono interessati a usare un&#8217;immagine di sfondo per l\u2019header, c\u2019\u00e8 anche la possibilit\u00e0 di usare uno sfondo a tinta unita.<\/p>\n<p>Per questo, trovate il campo Colore di sfondo sotto la stessa area Impostazioni dell\u2019header.<\/p>\n<p>Fate clic sul pulsante <strong>Seleziona colore<\/strong> e scegliete dal pannello dei colori per vedere i risultati dell&#8217;anteprima. Potete anche cambiare i colori del testo quando usate un colore di sfondo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/do-the-back-color.png\" alt=\"Impostare un colore di sfondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Impostare un colore di sfondo<\/figcaption><\/figure>\n<p>Dopo aver testato ci\u00f2 che funziona meglio per il vostro header e aver deciso l&#8217;immagine di sfondo perfetta, fate clic sul pulsante <strong>Pubblica<\/strong> in modo che chiunque possa vedere le modifiche.<\/p>\n<p>E se avete qualche problema nel rendere le modifiche sul front-end, provate a <a href=\"https:\/\/kinsta.com\/it\/blog\/cancellare-la-cache-di-wordpress\/\">eliminare la cache di WordPress<\/a>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/hit-pub.png\" alt=\"Fare clic sul pulsante \"Pubblica\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8220;Pubblica&#8221;<\/figcaption><\/figure>\n<h3>Come Aggiungere Immagini di Sfondo alle Pagine di Categoria e di Accesso di WordPress<\/h3>\n<p class=\"p1\"><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=7z3l5tsU3nU\"><\/kinsta-video><\/p>\n<h3>Come Aggiungere un&#8217;Immagine di Sfondo alla Categoria WordPress<\/h3>\n<p>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 <strong>Uncategorized.<\/strong><\/p>\n<p>Poich\u00e9 le pagine di archivio delle categorie aggregano contenuti simili, ha senso includere un&#8217;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.<\/p>\n<p>Il metodo CSS personalizzato (descritto di seguito) \u00e8 l&#8217;opzione pi\u00f9 economica. Tuttavia, potete anche dare un&#8217;occhiata ai vari costruttori di pagine e plugin per vedere quali di essi permettono di avere sfondi sulle pagine delle categorie.<\/p>\n<p>Per completare questo compito con i CSS, aprite la vostra bacheca di WordPress e andate su <strong>Aspetto &gt; Personalizza.<\/strong><\/p>\n<p>Selezionate la scheda <strong>CSS aggiuntivo<\/strong> per aprire il modulo che permette di digitare il vostro CSS.<\/p>\n<figure style=\"width: 1538px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/additonal.png\" alt=\"La sezione \"CSS aggiuntivo\"\" width=\"1538\" height=\"940\"><figcaption class=\"wp-caption-text\">La sezione &#8220;CSS aggiuntivo&#8221;<\/figcaption><\/figure>\n<p>Aprite una delle pagine del vostro archivio di categoria sul vostro sito WordPress. Di solito, queste pagine hanno URL come questo: <code>http:\/\/yourwebsitedomain.com\/category\/travel<\/code>. Dovete cambiare la parte <strong>travel <\/strong>con qualsiasi categoria che avete sul vostro sito e cambiare la parte <strong>yourwebsitedoman <\/strong>con il vostro nome di dominio attuale.<\/p>\n<p>Fate clic con il tasto destro del mouse su un punto qualsiasi della pagina della categoria e poi su Inspect. Apparir\u00e0 lo strumento Inspect nel vostro browser e potrete leggere il codice di quella pagina.<\/p>\n<figure style=\"width: 1433px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/insepting.png\" alt=\"Fare clic con il tasto destro del mouse sulla pagina web e selezionare \"Ispeziona\"\" width=\"1433\" height=\"812\"><figcaption class=\"wp-caption-text\">Fare clic con il tasto destro del mouse sulla pagina web e selezionare &#8220;Ispeziona&#8221;<\/figcaption><\/figure>\n<p>Cercate &#8220;body&#8221; o &#8220;class&#8221; per individuare la classe CSS per le pagine di categoria, insieme alla classe per questa categoria in particolare.<\/p>\n<p>Per questa situazione, la nostra classe CSS \u00e8 &#8220;category-travel&#8221;, poich\u00e9 abbiamo una categoria chiamata &#8220;Travel&#8221; sul sito.<\/p>\n<p>Salvate il tag CSS per dopo.<\/p>\n<figure style=\"width: 986px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/travel-cat.png\" alt=\"Annotare la categoria elencata\" width=\"986\" height=\"771\"><figcaption class=\"wp-caption-text\">Annotare la categoria elencata<\/figcaption><\/figure>\n<p>Dopo di che, tornate alla sezione <strong>CSS aggiuntivo <\/strong>nella sezione Personalizza di WordPress.<\/p>\n<p>Incollate il seguente codice in quella casella, sostituendo la classe <code>category-travel<\/code> con la vostra e mettendo un vero URL dell&#8217;immagine nel posto che dice <code>http:\/\/YOURIMAGEURL.jpeg<\/code>.<\/p>\n<pre><code class=\"language-html\">body.category-travel {\nbackground-image: url(\"http:\/\/YOURIMAGEURL.jpeg\");\nbackground-position: center center;\nbackground-size: cover;\nbackground-repeat: no-repeat;\nbackground-attachment: fixed;\n}<\/code><\/pre>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/publish-it-is.png\" alt=\"Aggiungere un codice personalizzato per l'immagine di sfondo di WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Aggiungere un codice personalizzato per l&#8217;immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>Fate clic sul pulsante <strong>Pubblica <\/strong>per salvare le modifiche.<\/p>\n<figure style=\"width: 1160px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/go-and-pub.png\" alt=\"Aggiunta del codice 'CSS personalizzato'\" width=\"1160\" height=\"778\"><figcaption class=\"wp-caption-text\">Aggiunta del codice &#8216;CSS personalizzato&#8217;<\/figcaption><\/figure>\n<p>Infine, tornate alla pagina dell&#8217;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&#8217;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.<\/p>\n<figure style=\"width: 1597px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-cat-page.png\" alt=\"Tornare alla pagina della categoria per vedere lo sfondo\" width=\"1597\" height=\"904\"><figcaption class=\"wp-caption-text\">Tornare alle pagina della categoria per vedere lo sfondo<\/figcaption><\/figure>\n<h3>Come Aggiungere un&#8217;Immagine di Sfondo alla Vostra Pagina di Accesso a WordPress<\/h3>\n<p>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&#8217;altra per gli utenti interni, come amministratori e autori.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/it\/blog\/url-login-wordpress\/\">Queste pagine di login<\/a> sono separate dal funzionamento principale del vostro sito web (la maggior parte dei file si trova nel file <strong>wp-login.php<\/strong>). Quindi, lo strumento dell&#8217;immagine di sfondo personalizzata non si rifletter\u00e0 nei moduli di login.<\/p>\n<p>\u00c8 per\u00f2 possibile farlo usando un plugin chiamato <a href=\"https:\/\/wordpress.org\/plugins\/loginpress\/\">Custom Login Page Customizer<\/a>. Per iniziare, installate e attivate il plugin sul vostro sito WordPress.<\/p>\n<figure style=\"width: 1329px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/Custom-Login-Page-Customizer.png\" alt=\"Plugin LoginPress\" width=\"1329\" height=\"434\"><figcaption class=\"wp-caption-text\">Plugin LoginPress<\/figcaption><\/figure>\n<p>A sinistra, vedrete una nuova scheda per LoginPress nel menu della bacheca di WordPress.<\/p>\n<p>Andate su <strong>LoginPress &gt; Impostazioni.<\/strong><\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/loginpresss.png\" alt=\"Le impostazioni di LoginPress\" width=\"1900\" height=\"912\"><figcaption class=\"wp-caption-text\">Le impostazioni di LoginPress<\/figcaption><\/figure>\n<p>Qui, potete regolare le impostazioni del plugin prima di aggiungere il vostro sfondo e personalizzare qualsiasi altra parte della vostra pagina di accesso.<\/p>\n<p>Per esempio, avete impostazioni per ricordare automaticamente gli utenti, mostrare campi password personalizzati e far scadere le sessioni dopo un certo periodo di tempo.<\/p>\n<figure style=\"width: 1413px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-sets.png\" alt=\"Cambiare le impostazioni di LoginPress\" width=\"1413\" height=\"940\"><figcaption class=\"wp-caption-text\">Cambiare le impostazioni di LoginPress<\/figcaption><\/figure>\n<p>Per attivare un&#8217;immagine di sfondo personalizzata per la pagina di accesso, fate clic su <strong>LoginPress &gt; Customizer.<\/strong><\/p>\n<figure style=\"width: 1352px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/customizer-o.png\" alt=\"Andate su 'LoginPress &gt; Customizer'\" width=\"1352\" height=\"940\"><figcaption class=\"wp-caption-text\">Andate su &#8216;LoginPress &gt; Customizer&#8217;<\/figcaption><\/figure>\n<p>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.<\/p>\n<p>\u00c8 anche possibile personalizzare la pagina di accesso facendo clic sui pulsanti all&#8217;interno dell&#8217;anteprima visiva.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/setting-to-go.png\" alt=\"Impostazione di un tema LoginPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Impostazione di un tema LoginPress<\/figcaption><\/figure>\n<p>Non copriremo tutte le altre impostazioni poich\u00e9 in questo momento ci stiamo concentrando principalmente sullo sfondo.<\/p>\n<p>Fate clic sulla scheda <strong>Sfondo<\/strong> per procedere.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/change-the-back.png\" alt=\"Andate alla scheda di sfondo 'LoginPress'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Andate alla scheda di sfondo &#8216;LoginPress&#8217;<\/figcaption><\/figure>\n<p>Il primo ordine del giorno \u00e8 quello di decidere se desiderate uno sfondo a colori o a immagini.<\/p>\n<p>Se preferite uno sfondo colorato, individuate il campo <strong>Colore di sfondo<\/strong> e fate clic su <strong>Seleziona colore<\/strong>. Questo rivela un pannello di colori che vi permette di scegliere esattamente quale colore ha senso per il vostro business.<\/p>\n<p>Come potete vedere, il cambiamento entra in vigore anche nell&#8217;anteprima del Personalizza di WordPress.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/change-color.png\" alt=\"Selezionare il colore di sfondo di 'LoginPress'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Selezionare il colore di sfondo di &#8216;LoginPress&#8217;<\/figcaption><\/figure>\n<p>Proprio sotto l&#8217;impostazione del <strong>Colore di sfondo<\/strong>, c&#8217;\u00e8 una sezione <strong>Immagine di sfondo.<\/strong><\/p>\n<p>Attivate l&#8217;interruttore <strong>Abilita immagine di sfondo<\/strong> per mostrare una collezione di immagini di sfondo pre-costituite.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/enable-this.png\" alt=\"Abilitare l'immagine di sfondo di WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Abilitare l&#8217;immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>Non ce ne sono molte da scegliere nella versione gratuita, ma il plugin ne aggiunge alte se decidete di passare alla versione premium.<\/p>\n<p>Andate avanti e provate questi sfondi pre-costituiti per vedere se possono funzionare per il vostro marchio.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/changing-the-back.png\" alt=\"Impostare una galleria di sfondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Impostare una galleria di sfondo<\/figcaption><\/figure>\n<p>La cosa pi\u00f9 comune \u00e8 caricare la vostra immagine come sfondo della pagina di accesso.<\/p>\n<p>Cercate la voce Immagine di sfondo e fate clic sul pulsante <strong>Seleziona immagine<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-image-s-s-s.png\" alt=\"Scegliere l'opzione 'Seleziona immagine'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Scegliere l&#8217;opzione &#8216;Seleziona immagine&#8217;<\/figcaption><\/figure>\n<p>Tornerete alla Libreria Media di WordPress per caricare un&#8217;immagine dal vostro computer o sceglierne una gi\u00e0 presente in WordPress.<\/p>\n<p>Selezionate la foto desiderata e fate clic sul pulsante <strong>Scegli immagine<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/choosing-that.png\" alt=\"Scegliere l'immagine di sfondo per la pagina login di WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Scegliere l&#8217;immagine di sfondo per la pagine login di WordPress<\/figcaption><\/figure>\n<p>L&#8217;immagine di sfondo attivata appare come miniatura nel pannello del Personalizza e nell&#8217;anteprima effettiva della vostra pagina di accesso.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-result-s-s.png\" alt=\"Impostare le opzioni dell'immagine di sfondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Impostare le opzioni dell&#8217;immagine di sfondo<\/figcaption><\/figure>\n<p>Ora avete l&#8217;opzione di fare clic sul pulsante <strong>Pubblica<\/strong> e attenervi a quello che c&#8217;\u00e8 sullo schermo. Oppure, potete scorrere fino alle impostazioni aggiuntive per assicurarvi che l&#8217;immagine caricata appaia effettivamente nella sua forma migliore.<\/p>\n<p>Fate clic sul campo a discesa <strong>Background Repeat <\/strong> e provate opzioni come <strong>Repeat<\/strong>, <strong>No-repeat <\/strong>e <strong>Repeat-x<\/strong>.<\/p>\n<p>A seconda delle dimensioni della vostra foto, potreste vedere l&#8217;immagine muoversi un po&#8217;.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/repeating.png\" alt=\"Scegliere le impostazioni di 'Background Repeat'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Scegliere le impostazioni di &#8216;Background Repeat&#8217;<\/figcaption><\/figure>\n<p>Successivamente, guardate tra le opzioni di Select Position per spostare ancora di pi\u00f9 l&#8217;immagine di sfondo.<\/p>\n<p>Per impostazione predefinita, posizionano l&#8217;immagine al centro dello schermo, ma a volte \u00e8 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.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-pos.png\" alt=\"Selezionare la posizione dello sfondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Selezionare la posizione dello sfondo<\/figcaption><\/figure>\n<p>Andando avanti, il menu a discesa per l\u2019opzione Background Image Size include delle impostazioni relative a come l&#8217;immagine copre lo spazio dello schermo, regolando le sue dimensioni con ogni opzione preimpostata.<\/p>\n<p>Anche in questo caso, fate delle prove per decidere quale sembra migliore. Potreste scoprire che qualcosa come l&#8217;impostazione Contain offre una visione migliore delle impostazioni Auto o Cover.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/enabling.png\" alt=\"Impostare la dimensione dell'immagine di sfondo di WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Impostare la dimensione dell&#8217;immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>E questo \u00e8 tutto quello che c&#8217;\u00e8 da fare per caricare e attivare un&#8217;immagine di sfondo per la vostra pagina di accesso!<\/p>\n<p>L&#8217;ultima impostazione possibile \u00e8 quella di mostrare un video come sfondo invece di un&#8217;immagine. Attivate questa impostazione se avete un video interessante relativo alla vostra attivit\u00e0 e se non distrae troppo le persone che si collegano al sito.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/video-on.png\" alt=\"Abilitare il 'Video di sfondo'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Abilitare il &#8216;Video di sfondo&#8217;<\/figcaption><\/figure>\n<p>Una volta fatto tutto, cliccate sul pulsante <strong>Pubblica <\/strong>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.<\/p>\n<h3>Come Aggiungere un&#8217;Immagine di Sfondo al Vostro Menu di Navigazione<\/h3>\n<p>Potreste aver notato alcuni siti web con menu fantasiosi che includono immagini di sfondo o icone. Questa \u00e8 una pratica comune nel mondo dell&#8217;eCommerce, dove il marchio pu\u00f2 avere un mega-menu con categorie e immagini di sfondo per ogni pulsante di categoria.<\/p>\n<p>Se vi interessa aggiungere sfondi al vostro menu, guardate il <a href=\"https:\/\/kinsta.com\/it\/blog\/plugin-menu-wordpress\/\">nostro articolo sui migliori plugin di menu per WordPress<\/a>. Molti di questi plugin di menu offrono opzioni per includere sfondi di immagini e colori nel vostro menu.<\/p>\n<p>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&#8217;altro invece aggiunge uno sfondo al vostro menu mobile.<\/p>\n<p>Per aggiungere un&#8217;immagine di sfondo a diversi sottomenu, installate e attivate il <a href=\"https:\/\/wordpress.org\/plugins\/wp-megamenu\/\">plugin WP Mega Menu<\/a>. Questo plugin vi permette di attivare e gestire un mega-menu con pi\u00f9 livelli a discesa. \u00c8 ideale per i grandi negozi online, ma serve anche per i menu pi\u00f9 piccoli, specialmente se volete aggiungere un&#8217;immagine di sfondo o delle icone.<\/p>\n<figure style=\"width: 1402px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/wp-mega-menu.png\" alt=\"Plugin WP Mega Menu\" width=\"1402\" height=\"374\"><figcaption class=\"wp-caption-text\">Plugin WP Mega Menu<\/figcaption><\/figure>\n<p>Cominciate trovando la scheda WP Mega Menu nella bacheca di WordPress.<\/p>\n<p>Fate clic sulla voce di menu <strong>Temi.<\/strong><\/p>\n<figure style=\"width: 1240px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/themes-s-s.png\" alt=\"Andate al pannello 'Temi'\" width=\"1240\" height=\"905\"><figcaption class=\"wp-caption-text\">Andate al pannello &#8216;Temi&#8217;<\/figcaption><\/figure>\n<p>Qui, potete vedere un elenco di temi predefiniti creati per il vostro menu dal plugin.<\/p>\n<p>Potete fare clic per modificare uno dei temi o aggiungere il vostro design da zero.<\/p>\n<figure style=\"width: 1867px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/see-themes.png\" alt=\"La sezione Mega Menu Themes\" width=\"1867\" height=\"841\"><figcaption class=\"wp-caption-text\">La sezione Mega Menu Themes<\/figcaption><\/figure>\n<p>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 \u00e8 personalizzabile, dal menu a discesa ai sottomenu.<\/p>\n<p>Tuttavia, per lo sfondo del menu, dovete semplicemente sapere quale tema volete scegliere.<\/p>\n<figure style=\"width: 1757px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/main-sets.png\" alt=\"Le impostazioni del tema di Mega Menu\" width=\"1757\" height=\"843\"><figcaption class=\"wp-caption-text\">Le impostazioni del tema di Mega Menu<\/figcaption><\/figure>\n<p>Andate su <strong>Aspetto &gt; Menu <\/strong>nella bacheca.<\/p>\n<figure style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/app-menu.png\" alt=\"Andate su 'Aspetto &gt; Menu'\" width=\"1470\" height=\"737\"><figcaption class=\"wp-caption-text\">Andate su &#8216;Aspetto &gt; Menu&#8217;<\/figcaption><\/figure>\n<p>Vedrete un nuovo modulo con link a <strong>Mega Menu Settings<\/strong>.<\/p>\n<p>Fate clic per <strong>attivare <\/strong>il mega-menu, poi scegliete quello che vi piace di pi\u00f9 per il vostro sito.<\/p>\n<p>Infine, fate clic sul pulsante <strong>Salva<\/strong>.<\/p>\n<figure style=\"width: 1471px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/enable-it-s.png\" alt=\"Fare clic sul pulsante 'Abilita'\" width=\"1471\" height=\"901\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8216;Abilita&#8217;<\/figcaption><\/figure>\n<p>Ora, spostate la vostra attenzione sull&#8217;area <strong>Struttura del menu.<\/strong><\/p>\n<p>Scorrendo sopra una qualsiasi delle vostre attuali voci di menu si scopre un pulsante <strong>WP Mega Menu.<\/strong> \u00c8 qui che si personalizza il layout e il design di ogni sezione a discesa.<\/p>\n<p>Fate clic clic sul pulsante <strong>WP Mega Menu <\/strong>per qualsiasi voce di menu desideriate. In questo caso, aggiungeremo un mega-menu a tendina alla scheda Shop.<\/p>\n<p><strong>Nota: <\/strong>Diamo per scontato che voi abbiate gi\u00e0 un menu configurato sul vostro sito WordPress. Leggete la nostra <a href=\"https:\/\/kinsta.com\/it\/blog\/menu-a-tendina-wordpress\/\">guida sui menu a discesa di WordPress<\/a> se avete bisogno di aiuto.<\/p>\n<figure style=\"width: 1455px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/selected-on.png\" alt=\"Aggiungere il mega-menu al vostro sito\" width=\"1455\" height=\"857\"><figcaption class=\"wp-caption-text\">Aggiungere il mega-menu al vostro sito<\/figcaption><\/figure>\n<p>Nella nuova finestra popup, fate clic sull&#8217;interruttore per attivare Mega Menu per quella particolare voce di menu.<\/p>\n<p>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.<\/p>\n<figure style=\"width: 1855px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-row.png\" alt=\"Fare clic sul pulsante \"Aggiungi ora\"\" width=\"1855\" height=\"918\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8220;Aggiungi ora&#8221;<\/figcaption><\/figure>\n<p>Per aggiungere uno sfondo a quest&#8217;area a discesa, fate clic sul pulsante <strong>Opzioni <\/strong>nell&#8217;angolo in basso a sinistra.<\/p>\n<figure style=\"width: 1701px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/options-s-s.png\" alt=\"Scegliere il link 'Opzioni'\" width=\"1701\" height=\"916\"><figcaption class=\"wp-caption-text\">Scegliere il link &#8216;Opzioni&#8217;<\/figcaption><\/figure>\n<p>Trovate il campo <strong>Carica immagine di sfondo.<\/strong><\/p>\n<p>Fate clic sul pulsante <strong>Carica <\/strong>per trovare la foto giusta nella vostra Libreria Media per usarla come sfondo.<\/p>\n<figure style=\"width: 1751px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/image-bg-up.png\" alt=\"Selezionare il pulsante \"Carica immagine\"\" width=\"1751\" height=\"785\"><figcaption class=\"wp-caption-text\">Selezionare il pulsante &#8220;Carica immagine&#8221;<\/figcaption><\/figure>\n<p>Una miniatura dell&#8217;immagine appare dopo che l&#8217;avete selezionata dalla Libreria Media.<\/p>\n<p>Ci sono altre impostazioni da considerare, quindi sentitevi liberi di controllare quelle, se volete.<\/p>\n<figure style=\"width: 1768px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-image-uploaded.png\" alt=\"Verificare la miniatura\" width=\"1768\" height=\"728\"><figcaption class=\"wp-caption-text\">Verificare la miniatura<\/figcaption><\/figure>\n<p>Assicuratevi di fare clic sul pulsante <strong>Salva modifiche <\/strong>in fondo al pannello <strong>Opzioni.<\/strong><\/p>\n<figure style=\"width: 1767px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-them-s-s.png\" alt=\"Fare clic sul pulsante \"Salva modifiche\"\" width=\"1767\" height=\"864\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8220;Salva modifiche&#8221;<\/figcaption><\/figure>\n<p>\u00c8 inoltre necessario fare clic su Salva menu nell&#8217;area Struttura del menu della bacheca di WordPress.<\/p>\n<figure style=\"width: 1887px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-menu-s.png\" alt=\"Fare clic sul pulsante 'Salva menu'\" width=\"1887\" height=\"877\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8216;Salva menu&#8217;<\/figcaption><\/figure>\n<p>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.<\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-shop-bg.png\" alt=\"Il menu ora ha un'immagine di sfondo\" width=\"1900\" height=\"867\"><figcaption class=\"wp-caption-text\">Il menu ora ha un&#8217;immagine di sfondo<\/figcaption><\/figure>\n<p>Un altro modo per aggiungere un&#8217;immagine di sfondo a un menu \u00e8 quello di utilizzare un menu mobile e responsive che viene visualizzato quando qualcuno accede al vostro sito web attraverso un dispositivo mobile.<\/p>\n<p>Potete mettere uno sfondo dietro il menu mobile con l&#8217;aiuto del plugin <a href=\"https:\/\/kinsta.com\/it\/blog\/plugin-wordpress-mobile\/#wp-mobile-menu\">WP Mobile Menu.<\/a><\/p>\n<figure style=\"width: 1640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/WP-Mobile-Menu.png\" alt=\"Plugin WP Mobile Menu\" width=\"1640\" height=\"433\"><figcaption class=\"wp-caption-text\">Plugin WP Mobile Menu<\/figcaption><\/figure>\n<p>Dopo aver installato e attivato il plugin WP Mobile Menu, andate su Mobile Menu Options nella bacheca di WordPress.<\/p>\n<figure style=\"width: 1361px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/mobile-menu-options.png\" alt=\"Vai al link 'Opzioni menu mobile'\" width=\"1361\" height=\"906\"><figcaption class=\"wp-caption-text\">Vai al link &#8216;Opzioni menu mobile&#8217;<\/figcaption><\/figure>\n<p>Il plugin offre diversi modi per configurare il vostro menu mobile. Il requisito generale \u00e8 quello di abilitare uno dei formati di menu e indicare quale menu WordPress si desidera utilizzare per quel menu mobile.<\/p>\n<p>Per esempio, possiamo fare clic sull&#8217;interruttore <strong>Enable Left Menu <\/strong>(attivando un menu mobile che si trova sul lato sinistro dello schermo) e scegliere l&#8217;opzione <strong>Main Menu <\/strong>dal menu a tendina <strong>Left Menu.<\/strong> Questo collega il nostro attuale Main Menu con il menu mobile, cos\u00ec i visitatori vedono le stesse schede.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/turn-on-a-menu.png\" alt=\"Impostare le opzioni del menu mobile\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Impostare le opzioni del menu mobile<\/figcaption><\/figure>\n<p>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.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/left-menu.png\" alt=\"Scegliere le impostazioni del menu di sinistra\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Scegliere le impostazioni del menu di sinistra<\/figcaption><\/figure>\n<p>Scorrete fino al campo <strong>Panel Background Image <\/strong>e fate clic sul segno &#8220;<strong>+<\/strong>&#8221; per aprire la Libreria Media.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/bg-panel.png\" alt=\"Aggiungere un'immagine di sfondo al menu mobile\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Aggiungere un&#8217;immagine di sfondo al menu mobile<\/figcaption><\/figure>\n<p>Selezionate un&#8217;immagine dalla vostra Libreria Media e aggiungetela al campo.<\/p>\n<p>Dovreste vedere una versione in miniatura dell&#8217;immagine di sfondo come conferma.<\/p>\n<p>Selezionate il pulsante <strong>Save Changes <\/strong>per attivare lo sfondo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-the-change.png\" alt=\"Verificare l'immagine di sfondo con la miniatura\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Verificare l&#8217;immagine di sfondo con la miniatura<\/figcaption><\/figure>\n<p>Visto che il plugin genera dei menu per cellulari, il menu pu\u00f2 apparire solo quando il vostro browser \u00e8 impostato su una larghezza ridotta o quando andate al vostro sito su un telefono o un tablet.<\/p>\n<p>Il nuovo menu viene consolidato sotto un&#8217;icona hamburger (tre linee orizzontali).<\/p>\n<p>Fate clic su questo per testare il nuovo menu con lo sfondo.<\/p>\n<figure style=\"width: 1196px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/click-on-it-now.png\" alt=\"Fare clic sull'icona del menu hamburger\" width=\"1196\" height=\"844\"><figcaption class=\"wp-caption-text\">Fare clic sull&#8217;icona del menu hamburger<\/figcaption><\/figure>\n<p>Come mostrato nello screenshot, lo sfondo viene messo dietro l&#8217;intero menu mobile in modo che chiunque lo possa vedere.<\/p>\n<figure style=\"width: 1195px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-finished-product-background.png\" alt=\"Menu mobile con un'immagine di sfondo\" width=\"1195\" height=\"826\"><figcaption class=\"wp-caption-text\">Menu mobile con un&#8217;immagine di sfondo<\/figcaption><\/figure>\n<h3>Come Aggiungere un&#8217;Immagine di Sfondo di WordPress a una Pagina di Manutenzione<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/it\/blog\/manutenzione-wordpress\/\">Tutti i siti web occasionalmente richiedono manutenzione<\/a>, e a volte questa manutenzione richiede cos\u00ec tanto tempo che la visualizzazione di una pagina di manutenzione aiuta.<\/p>\n<p>Le immagini di sfondo giocano un ruolo importante quando si lavora con le <a href=\"https:\/\/kinsta.com\/it\/blog\/modalita-manutenzione-wordpress\/\">pagine di manutenzione<\/a>. La maggior parte delle pagine di manutenzione consiste in un&#8217;immagine di sfondo a tutto schermo e forse del testo o dei link con altre risorse.<\/p>\n<p>Se avete gi\u00e0 una pagina di manutenzione che non include un&#8217;immagine di sfondo, considerate i seguenti passi se volete personalizzare il modo in cui accogliete le persone sul sito quando questo \u00e8 temporaneamente chiuso per manutenzione.<\/p>\n<p>\u00c8 possibile aggiungere un&#8217;immagine di sfondo a una pagina di manutenzione con l&#8217;aiuto del <a href=\"https:\/\/wordpress.org\/plugins\/maintenance\/\">plugin Maintenance<\/a>. Installate e attivate il plugin sul vostro sito web.<\/p>\n<figure style=\"width: 1328px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Maintenance.png\" alt=\"Plugin Maintenance\" width=\"1328\" height=\"431\"><figcaption class=\"wp-caption-text\">Plugin Maintenance<\/figcaption><\/figure>\n<p>Una volta che \u00e8 attivo, trovate il pulsante <strong>Maintenance is On\/Off <\/strong>nella parte superiore della bacheca.<\/p>\n<p>Fate clic sul pulsante per andare alla pagina delle impostazioni del plugin Maintenance.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/off.png\" alt=\"Fate clic sul link 'Maintenance is off\u2019'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Fate clic sul link &#8216;Maintenance is off\u2019&#8217;<\/figcaption><\/figure>\n<p>Un altro modo per arrivare alla pagina delle impostazioni \u00e8 facendo clic sulla voce del menu <strong>Maintenance <\/strong>nel menu laterale della bacheca.<\/p>\n<figure style=\"width: 1614px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/maintenance-on-bottom.png\" alt=\"Fare clic sulla voce di menu 'Maintenance'\" width=\"1614\" height=\"909\"><figcaption class=\"wp-caption-text\">Fare clic sulla voce di menu &#8216;Maintenance&#8217;<\/figcaption><\/figure>\n<p>La pagina Settings del plugin Maintenance include una discreta collezione di opzioni da personalizzare, ma l&#8217;area principale da considerare \u00e8 il modulo <strong>General Settings. <\/strong>Qui, \u00e8 possibile scrivere un Headline e una Description, entrambi i quali servono come testo che si sovrappone allo sfondo che stiamo per inserire.<\/p>\n<p>Il titolo della pagina viene visualizzato nella scheda del browser, quindi dovreste considerare di personalizzare anche quello.<\/p>\n<p>\u00c8 possibile utilizzare il plugin Maintenance per qualsiasi cosa, dalle pagine di manutenzione alle pagine &#8220;Coming Soon&#8221;, quindi si potrebbe digitare qualcosa come &#8220;Il nostro sito \u00e8 in fase di manutenzione&#8221;, o potreste mostrare un po&#8217; di informazioni sulla vostra azienda e includere un modulo per le persone a digitare i loro indirizzi email.<\/p>\n<figure style=\"width: 1622px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/maintenance-ss.png\" alt=\"Aggiungere un titolo per la pagina di manutenzione\" width=\"1622\" height=\"940\"><figcaption class=\"wp-caption-text\">Aggiungere un titolo per la pagina di manutenzione<\/figcaption><\/figure>\n<p>Andando avanti, il plugin offre un&#8217;opzione per caricare il vostro logo, che si sovrappone anche all&#8217;immagine di sfondo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/logo-up.png\" alt=\"Pulsante 'Carica logo'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Pulsante &#8216;Carica logo&#8217;<\/figcaption><\/figure>\n<p>Fate clic sul pulsante <strong>Carica logo <\/strong>e scegliete il vostro logo per vedere la sua miniatura nella bacheca.<\/p>\n<figure style=\"width: 1618px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/logo-in.png\" alt=\"Logo per la pagina di manutenzione\" width=\"1618\" height=\"940\"><figcaption class=\"wp-caption-text\">Logo per la pagina di manutenzione<\/figcaption><\/figure>\n<p>Infine, il campo Immagine di sfondo vi chiede di fare clic su Upload Background Image.<\/p>\n<p>Caricate un&#8217;immagine dal vostro computer o passate attraverso la vostra Libreria Media per trovare uno sfondo adatto alla pagina di manutenzione.<\/p>\n<p><strong>Nota: <\/strong>le migliori immagini di sfondo per la pagina di manutenzione sono grandi, ad alta risoluzione e hanno orientamento orizzontale. Un&#8217;alternativa di sfondo &#8220;Portrait Mode&#8221; \u00e8 disponibile nelle impostazioni qui sotto.<\/p>\n<figure style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/upload-back.png\" alt=\"Fare clic sul pulsante 'Carica sfondo'\" width=\"1616\" height=\"940\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8216;Carica sfondo&#8217;<\/figcaption><\/figure>\n<p>Una volta scelto lo sfondo, vedrete un&#8217;anteprima in miniatura pi\u00f9 piccola nella bacheca.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-one.png\" alt=\"La miniatura dell'immagine di sfondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">La miniatura dell&#8217;immagine di sfondo<\/figcaption><\/figure>\n<p>Anche se un&#8217;immagine di sfondo con un orientamento orizzontale ha pi\u00f9 senso per i computer desktop e gli schermi pi\u00f9 larghi, molte persone finiscono sul vostro sito usando schermi con orientamenti verticali, come con un telefono tenuto in verticale.<\/p>\n<p>Pertanto, un&#8217;immagine di sfondo pi\u00f9 ampia non sar\u00e0 altrettanto bella. Ecco perch\u00e9 il plugin offre un&#8217;immagine di sfondo in modalit\u00e0 ritratto che serve come alternativa, che verr\u00e0 introdotta reattivamente ogni volta che un utente visita la pagina usando uno schermo orientato in verticale.<\/p>\n<p>\u00c8 importante includere un&#8217;immagine in questo campo, quindi fate sul pulsante <strong>Upload image for portrait device orientation.<\/strong><\/p>\n<figure style=\"width: 1615px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/port.png\" alt=\"Caricare un'immagine di sfondo con orientamento verticale\" width=\"1615\" height=\"912\"><figcaption class=\"wp-caption-text\">Caricare un&#8217;immagine di sfondo con orientamento verticale<\/figcaption><\/figure>\n<p>Questa volta, trovate un&#8217;immagine che sia pi\u00f9 alta che larga (modalit\u00e0 ritratto). Potete sempre ritagliare l&#8217;immagine di sfondo originale per farla diventare un ritratto, oppure avete la possibilit\u00e0 di caricare un&#8217;immagine completamente diversa per riempire lo spazio.<\/p>\n<p>Evidenziate l&#8217;immagine che volete e fate clic sul pulsante <strong>Seleziona immagine <\/strong>per inserirla nella bacheca.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/port-mode.png\" alt=\"Scegliere l'immagine di sfondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Scegliere l&#8217;immagine di sfondo<\/figcaption><\/figure>\n<p>Tutte queste impostazioni non significano nulla se non si attiva la modalit\u00e0 di manutenzione.<\/p>\n<p>Per farlo, individuate l&#8217;interruttore Maintenance On\/Off nella parte superiore della pagina delle impostazioni.<\/p>\n<figure style=\"width: 1620px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/offff.png\" alt=\"Impostare la pagina di manutenzione su 'On' o 'Off'\" width=\"1620\" height=\"940\"><figcaption class=\"wp-caption-text\">Impostare la pagina di manutenzione su &#8216;On&#8217; o &#8216;Off&#8217;<\/figcaption><\/figure>\n<p>Posizionate l&#8217;interruttore su &#8220;On&#8221;, poi selezionate il pulsante <strong>Save Changes.<\/strong><\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-theme.png\" alt=\"Abilitazione della pagina di manutenzione\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Abilitazione della pagina di manutenzione<\/figcaption><\/figure>\n<p>Andate al front-end del vostro sito web per assicurarvi che l&#8217;immagine di sfondo e la pagina di manutenzione appaiano correttamente.<\/p>\n<p>C&#8217;\u00e8 una buona probabilit\u00e0 che non sia cos\u00ec.<\/p>\n<p>Ci sono due ragioni per questo: in primo luogo, \u00e8 necessario uscire dall&#8217;account WordPress Admin per vedere il sito in modalit\u00e0 di manutenzione. In secondo luogo, potrebbe essere necessario <a href=\"https:\/\/kinsta.com\/it\/blog\/cancellare-la-cache-di-wordpress\/\">eliminare la cache del sito<\/a> per aggiornare il cambiamento del contenuto.<\/p>\n<figure style=\"width: 1270px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/nothing-show.png\" alt=\"Vedere il sito web in 'Modalit\u00e0 manutenzione'\" width=\"1270\" height=\"836\"><figcaption class=\"wp-caption-text\">Vedere il sito web in &#8216;Modalit\u00e0 manutenzione&#8217;<\/figcaption><\/figure>\n<p>Per esempio, quando usciamo dall&#8217;account Admin, la pagina di manutenzione ora appare su qualsiasi pagina.<\/p>\n<p>L&#8217;immagine di sfondo \u00e8 l\u00ec, insieme alle mie personalizzazioni come il logo e la descrizione del testo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/maintenance-page.png\" alt=\"L'immagine di sfondo della pagina di manutenzione\" width=\"1920\" height=\"1040\"><figcaption class=\"wp-caption-text\">L&#8217;immagine di sfondo della pagina di manutenzione<\/figcaption><\/figure>\n<p>Inoltre, cambiando le dimensioni delle finestre del browser in un orientamento pi\u00f9 verticale, lo sfondo della modalit\u00e0 ritratto scatta in posizione.<\/p>\n<p>Dovreste anche vedere la modalit\u00e0 verticale quando visitate il sito su un telefono o un tablet.<\/p>\n<figure style=\"width: 889px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/portrait-example.png\" alt=\"L'immagine di sfondo in modalit\u00e0 ritratto\" width=\"889\" height=\"1006\"><figcaption class=\"wp-caption-text\">L&#8217;immagine di sfondo in modalit\u00e0 ritratto<\/figcaption><\/figure>\n<p>Un altro tipo di immagine di sfondo con il plugin si chiama Preloader Image. Questo essenzialmente carica un&#8217;immagine veloce con un effetto animato prima di rivelare la pagina di manutenzione effettiva, lo sfondo e il contenuto.<\/p>\n<p>Come l&#8217;immagine di sfondo regolare, fate clic sul pulsante <strong>Upload Preloader <\/strong>per trovare un&#8217;immagine che sembra carina e aggiungetela alla bacheca.<\/p>\n<p>Di nuovo, fate sul pulsante <strong>Save Changes <\/strong>ed eliminate la cache.<\/p>\n<figure style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/preload.png\" alt=\"Fare clic sul pulsante \"Upload Preloader\"\" width=\"1616\" height=\"940\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8220;Upload Preloader&#8221;<\/figcaption><\/figure>\n<p>Per default, l&#8217;effetto <strong>Preloader Image <\/strong>gira per un momento, e poi scompare per presentare la pagina di manutenzione e l&#8217;immagine di sfondo.<\/p>\n<p>Sta a voi decidere se volete mantenere questo tipo di effetto o no.<\/p>\n<figure style=\"width: 1280px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/2021-02-03_11-55-51.gif\" alt=\"Aggiungere un effetto introduttivo all'immagine di sfondo\" width=\"1280\" height=\"720\"><figcaption class=\"wp-caption-text\">Aggiungere un effetto introduttivo all&#8217;immagine di sfondo<\/figcaption><\/figure>\n<p>Diversi altri elementi di sfondo sono disponibili in modo che possiate sperimentare nel pannello delle impostazioni del plugin Maintenance.<\/p>\n<p>Per esempio, potreste voler aggiungere un colore di sfondo invece di un&#8217;immagine di sfondo.<\/p>\n<p>Se questo \u00e8 il caso, andate al campo <strong>Colore di sfondo <\/strong>e selezionate un colore che si adatti al vostro marchio.<\/p>\n<figure style=\"width: 1617px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/back-col.png\" alt=\"Aprire il campo del colore di sfondo\" width=\"1617\" height=\"940\"><figcaption class=\"wp-caption-text\">Aprire il campo del colore di sfondo<\/figcaption><\/figure>\n<p>Il colore di sfondo non viene mostrato per la pagina di manutenzione a meno che non si disabilitino tutte le altre immagini di sfondo.<\/p>\n<p>Quindi, assicuratevi di eliminare l&#8217;immagine di sfondo.<\/p>\n<figure style=\"width: 1618px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/remove-s.png\" alt=\"Rimozione dell'immagine di sfondo\" width=\"1618\" height=\"940\"><figcaption class=\"wp-caption-text\">Rimozione dell&#8217;immagine di sfondo<\/figcaption><\/figure>\n<p>Dovete anche eliminare l&#8217;immagine di sfondo della modalit\u00e0 ritratto.<\/p>\n<figure style=\"width: 1620px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/remove-both.png\" alt=\"Impostare l'immagine di sfondo della modalit\u00e0 ritratto\" width=\"1620\" height=\"940\"><figcaption class=\"wp-caption-text\">Impostare l&#8217;immagine di sfondo della modalit\u00e0 ritratto<\/figcaption><\/figure>\n<p>Salvate le modifiche e cancellate la cache. Poi andate al front-end del vostro sito per vedere il colore di sfondo in vigore.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/back-color.png\" alt=\"Controllare il front-end del vostro sito\" width=\"1920\" height=\"1040\"><figcaption class=\"wp-caption-text\">Controllare il front-end del vostro sito<\/figcaption><\/figure>\n<p>Altre impostazioni da considerare includono elementi come il colore del carattere, la famiglia del carattere e la sfocatura dello sfondo.<\/p>\n<p>Raccomandiamo anche di pensare se \u00e8 necessario avere un login front-end o no. Questo fornisce un modo per gli utenti di accedere ai loro account e ottenere l&#8217;accesso ai profili, se necessario.<\/p>\n<p>Una volta fatto tutto, fate clic sul pulsante <strong>Save Changes.<\/strong><\/p>\n<figure style=\"width: 1366px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-setttings.png\" alt=\"Impostare il colore del carattere\" width=\"1366\" height=\"926\"><figcaption class=\"wp-caption-text\">Impostare il colore del carattere<\/figcaption><\/figure>\n<p>Il plugin Maintenance offre anche diversi temi pre-costituiti con belle immagini di sfondo e layout e testi progettati professionalmente.<\/p>\n<p>Potete trovare temi per pagine coming soon e layout di manutenzione, insieme a pagine per raccogliere indirizzi email e altre informazioni di contatto.<\/p>\n<p>\u00c8 necessario acquistare i temi per utilizzarli.<\/p>\n<figure style=\"width: 1471px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/themess.png\" alt=\"Acquisto di un tema premium\" width=\"1471\" height=\"940\"><figcaption class=\"wp-caption-text\">Acquisto di un tema premium<\/figcaption><\/figure>\n<p>A seconda del vostro budget, sono piuttosto economici e hanno un aspetto fantastico.<\/p>\n<figure style=\"width: 1775px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/example-3.png\" alt=\"Un esempio di template\" width=\"1775\" height=\"924\"><figcaption class=\"wp-caption-text\">Un esempio di template<\/figcaption><\/figure>\n<p>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&#8217;immagine di sfondo come volete.<\/p>\n<figure style=\"width: 1391px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/other-setss.png\" alt=\"Andate al modulo 'CSS personalizzato'\" width=\"1391\" height=\"940\"><figcaption class=\"wp-caption-text\">Andate al modulo &#8216;CSS personalizzato&#8217;<\/figcaption><\/figure>\n<p>Ricordate che le impostazioni della pagina di manutenzione raramente entrano in vigore a meno che non usciate dall&#8217;account admin e facciate clic sul pulsante <strong>Clear Cache.<\/strong><\/p>\n<p>Potete trovare il pulsante <strong>Clear Cache <\/strong>nell&#8217;angolo in alto a destra della bacheca quando usate Kinsta. Se usate un altro host, considerate uno dei tanti <a href=\"https:\/\/kinsta.com\/it\/blog\/cancellare-la-cache-di-wordpress\/\">plugin di caching sul mercato<\/a>.<\/p>\n<figure style=\"width: 1830px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/clear-cache-sss.png\" alt=\"Fare clic sul pulsante \"Cancella cache\"\" width=\"1830\" height=\"777\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8220;Cancella cache&#8221;<\/figcaption><\/figure>\n<p>Una volta cancellata la cache e salvate le impostazioni, dovreste vedere una bella immagine di sfondo che completa la pagina di manutenzione!<\/p>\n<figure style=\"width: 1701px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/regular-programing.png\" alt=\"Controllo della pagina di manutenzione\" width=\"1701\" height=\"888\"><figcaption class=\"wp-caption-text\">Controllo della pagina di manutenzione<\/figcaption><\/figure>\n<h3>Come Aggiungere uno Sfondo a WordPress con un Page Builder di Terze Parti<\/h3>\n<p>Il <a href=\"https:\/\/kinsta.com\/it\/blog\/page-builder-wordpress\/\">nostro articolo sui migliori costruttori di pagine<\/a> offre una lista di opzioni per scegliere un costruttore di pagine con funzioni drag-and-drop. WordPress include gi\u00e0 un page builder in Gutenberg, ma molti proprietari di siti web preferiscono altre soluzioni.<\/p>\n<p>La seguente sezione spiega come implementare uno sfondo usando alcuni popolari costruttori di pagine, tra cui Elementor, Beaver Builder e Page Builder di SiteOrigin.<\/p>\n<h4>Aggiungere uno Sfondo a WordPress con Elementor<\/h4>\n<p>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.<\/p>\n<p>Inoltre, Elementor presenta una flessibilit\u00e0 dello sfondo visivo per varie parti del vostro sito web invece di limitare gli sfondi all&#8217;intero sito web. Per esempio, \u00e8 possibile aggiungere uno sfondo dietro qualsiasi sezione dei blocchi di costruzione e mostrare sfondi diversi da pagina a pagina.<\/p>\n<p>Per iniziare, <a href=\"https:\/\/kinsta.com\/it\/blog\/page-builder-wordpress\/#elementor\">installate e attivate il plugin Elementor<\/a>.<\/p>\n<figure style=\"width: 1324px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/elementor-e.png\" alt=\"Plugin Elementor\" width=\"1324\" height=\"435\"><figcaption class=\"wp-caption-text\">Plugin Elementor<\/figcaption><\/figure>\n<p>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.<\/p>\n<p>In questo caso, andiamo alla Homepage del nostro sito di prova. Visitate la pagina di vostra scelta selezionandolo dall&#8217;elenco in <strong>Pagine &gt; Tutte le pagine. <\/strong>Potete anche fare lo stesso con <strong>Articoli<\/strong>.<\/p>\n<p>Una volta sull&#8217;editor di pagina predefinito di WordPress, fate clic sul pulsante per <strong>Edit With Elementor<\/strong>.<\/p>\n<figure style=\"width: 1889px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/edit-with.png\" alt=\"Fare clic sul plugin \"Edit With Elementor\"\" width=\"1889\" height=\"880\"><figcaption class=\"wp-caption-text\">Fare clic sul plugin &#8220;Edit With Elementor&#8221;<\/figcaption><\/figure>\n<p>Questo sposta la vista sul vostro schermo all&#8217;editor di Elementor. Qui, il lato sinistro ha un menu con moduli drag-and-drop per costruire e modificare la vostra pagina.<\/p>\n<p>La funzionalit\u00e0 di sfondo non \u00e8 disponibile in una sezione o blocco, ma piuttosto nelle <strong>Impostazioni <\/strong>primarie per quella pagina.<\/p>\n<p>Quindi, fate clic sulla piccola icona Settings (sembra un ingranaggio) nell&#8217;angolo in basso a sinistra dell&#8217;editor.<\/p>\n<figure style=\"width: 1526px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/settings-gear.png\" alt=\"Fare clic sull'icona delle impostazioni\" width=\"1526\" height=\"935\"><figcaption class=\"wp-caption-text\">Fare clic sull&#8217;icona delle impostazioni<\/figcaption><\/figure>\n<p>Vedrete una sezione per le impostazioni generali della pagina.<\/p>\n<p>Fate clic sulla scheda <strong>Style <\/strong>nella parte superiore della sezione <strong>Page Settings.<\/strong><\/p>\n<figure style=\"width: 1861px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/style-of.png\" alt=\"Andate alla scheda 'Style'\" width=\"1861\" height=\"910\"><figcaption class=\"wp-caption-text\">Andate alla scheda &#8216;Style&#8217;<\/figcaption><\/figure>\n<p>Sotto Style, individuate il campo <strong>Background Type<\/strong> e fate clic sull&#8217;icona del <strong>pennello <\/strong>per aggiungere uno sfondo standard.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/classic.png\" alt=\"Impostazione del campo 'Background Type' (Tipo di sfondo)\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Impostazione del campo &#8216;Background Type&#8217; (Tipo di sfondo)<\/figcaption><\/figure>\n<p>Poi, scegliete il tipo di sfondo che volete far apparire. Per esempio, il campo <strong>Colore <\/strong>vi permette di passare a uno sfondo in tinta unica. C&#8217;\u00e8 anche un&#8217;opzione <strong>Gradient <\/strong>nel campo <strong>Background Type <\/strong>se questo \u00e8 pi\u00f9 nel vostro stile.<\/p>\n<figure style=\"width: 1826px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-color.png\" alt=\"Impostazione del campo del colore di sfondo\" width=\"1826\" height=\"940\"><figcaption class=\"wp-caption-text\">Impostazione del campo del colore di sfondo<\/figcaption><\/figure>\n<p>Fate clic sul pulsante <strong>Choose Image<\/strong> sotto il campo Immagine per visualizzare la vostra <strong>Libreria Media <\/strong>e scegliere un&#8217;immagine di sfondo adatta a questa pagina.<\/p>\n<figure style=\"width: 1560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-image-s-s.png\" alt=\"Fare clic sul pulsante \"Choose Image\"\" width=\"1560\" height=\"857\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8220;Choose Image&#8221;<\/figcaption><\/figure>\n<p>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&#8217;immagine che funziona bene e fate clic sul pulsante <strong>Insert Media.<\/strong><\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/inserting.png\" alt=\"Fare clic sul pulsante \"Insert Media\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8220;Insert Media&#8221;<\/figcaption><\/figure>\n<p>L&#8217;immagine di sfondo selezionata appare ora nell&#8217;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.<\/p>\n<p>Elementor fornisce impostazioni di sfondo dell&#8217;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.<\/p>\n<p>Premete il pulsante <strong>Update <\/strong>per salvare tutte le modifiche alla pagina e pubblicare il nuovo sfondo del vostro sito web.<\/p>\n<figure style=\"width: 1728px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/updateing.png\" alt=\"Aggiungere un nuovo sfondo\" width=\"1728\" height=\"890\"><figcaption class=\"wp-caption-text\">Aggiungere un nuovo sfondo<\/figcaption><\/figure>\n<h5>Sfondi di Sezione con Elementor<\/h5>\n<p>Elementor offre funzionalit\u00e0 avanzate di sfondo per la maggior parte delle sezioni aggiunte alle vostre pagine.<\/p>\n<p>Tutto quello che dovete fare \u00e8 selezionare una sezione su una pagina Elementor e modificare le impostazioni di sfondo per limitare lo sfondo solo a quell&#8217;area.<\/p>\n<p>Per esempio, possiamo selezionare la sezione <strong>Text Editor <\/strong>per visualizzare le impostazioni della sezione Text.<\/p>\n<figure style=\"width: 1329px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/select-the-right-one.png\" alt=\"Scegliere la sezione di testo con Elementor\" width=\"1329\" height=\"940\"><figcaption class=\"wp-caption-text\">Scegliere la sezione di testo con Elementor<\/figcaption><\/figure>\n<p>Scegliete la scheda <strong>Avanzate <\/strong>e trovate la sezione <strong>Sfondo <\/strong>all&#8217;interno di quella scheda.<\/p>\n<figure style=\"width: 1440px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/bg-ad.png\" alt=\"La sezione 'Sfondo'\" width=\"1440\" height=\"831\"><figcaption class=\"wp-caption-text\">La sezione &#8216;Sfondo&#8217;<\/figcaption><\/figure>\n<p>Le impostazioni dello <strong>sfondo <\/strong>includono <strong>Background Type<\/strong>, <strong>Color<\/strong>, <strong>Image <\/strong>e altro, similmente alle impostazioni che abbiamo visto per le impostazioni generali dello sfondo della pagina. L&#8217;unica differenza queste impostazioni sono limitate alla sezione selezionata.<\/p>\n<p>Scegliete l&#8217;icona del <strong>Paint Brush <\/strong>per il <strong>Background Type<\/strong>, poi fate clic sul pulsante <strong>Choose Image <\/strong>sotto il campo <strong>Image.<\/strong><\/p>\n<figure style=\"width: 1440px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choosing-it.png\" alt=\"Fare clic sul pulsante 'Choose Image'\" width=\"1440\" height=\"811\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8216;Choose Image&#8217;<\/figcaption><\/figure>\n<p>Scegliete un&#8217;immagine dalla <strong>Libreria Media <\/strong>e fate clic sul pulsante <strong>Insert Media.<\/strong><\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/inset-media-3.png\" alt=\"Scegliere l\u2019immagine e fare clic sul pulsante 'Insert Media'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Scegliere l\u2019immagine e fare clic sul pulsante &#8216;Insert Media&#8217;<\/figcaption><\/figure>\n<p>Come potete vedere, l&#8217;immagine di sfondo rimane all&#8217;interno dei confini di quella sezione rimanendo per\u00f2 dietro il contenuto gi\u00e0 creato per quella sezione.<\/p>\n<p>Usate i selettori <strong>Position<\/strong>, <strong>Attachment<\/strong>, <strong>Repeat <\/strong>e <strong>Size <\/strong>per modificare il modo in cui l&#8217;immagine di sfondo viene presentata nella sezione.<\/p>\n<p>Infine, fate clic sul pulsante <strong>Update <\/strong>per salvare le modifiche.<\/p>\n<figure style=\"width: 1752px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/update-t-e.png\" alt=\"Fare clic su 'Update' per vedere i cambiamenti\" width=\"1752\" height=\"940\"><figcaption class=\"wp-caption-text\">Fare clic su &#8216;Update&#8217; per vedere i cambiamenti<\/figcaption><\/figure>\n<h4>Aggiungere un&#8217;Immagine di Sfondo con Beaver Builder<\/h4>\n<p>Il plugin Beaver Builder include una versione Lite con alcuni strumenti di base. \u00c8 uno dei costruttori di pagine pi\u00f9 popolari sul mercato, che offre molti moduli di contenuto per elementi come video, immagini, paragrafi e altro.<\/p>\n<p>Oltre a questo, potete implementare un&#8217;immagine di sfondo, un colore o un video, usando strumenti visivi e CSS per posizionare l&#8217;elemento di sfondo su tutto il vostro sito web, una pagina o una singola sezione di una pagina.<\/p>\n<p>Per prima cosa, <a href=\"https:\/\/kinsta.com\/it\/blog\/page-builder-wordpress\/#beaver-builder\">installate il plugin Beaver Builder<\/a>.<\/p>\n<figure style=\"width: 1331px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/bb-s.png\" alt=\"Plugin Beaver Builder\" width=\"1331\" height=\"435\"><figcaption class=\"wp-caption-text\">Plugin Beaver Builder<\/figcaption><\/figure>\n<p>Andate su qualsiasi pagina o articolo per modificarlo con Beaver Builder.<\/p>\n<p>\u00c8 necessario convertire le pagine create in precedenza nel formato Beaver Builder. In alternativa, avete la possibilit\u00e0 di creare una pagina da zero e scegliere di modificare la pagina in Beaver Builder.<\/p>\n<p>Per convertire una pagina corrente in Beaver Builder, aprite l&#8217;editor della pagina e fate clic sull&#8217;icona con i tre puntini per aprire il menu View nell&#8217;angolo in alto a destra.<\/p>\n<figure style=\"width: 1903px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/three-dots.png\" alt=\"Il menu delle impostazioni di pagina\" width=\"1903\" height=\"854\"><figcaption class=\"wp-caption-text\">Il menu delle impostazioni di pagina<\/figcaption><\/figure>\n<p>Scorrete verso il basso fino a trovare il link <strong>Convert to Beaver Builder.<\/strong><\/p>\n<p>Quando ci fate clic sopra, tutti i contenuti che avete sulla vostra pagina vengono elaborati e spostati in moduli Beaver Builder compatibili.<\/p>\n<figure style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/convert-to-beaver.png\" alt=\"Fare clic sul link \"Convert to Beaver Builder\"\" width=\"1616\" height=\"821\"><figcaption class=\"wp-caption-text\">Fare clic sul link &#8220;Convert to Beaver Builder&#8221;<\/figcaption><\/figure>\n<p>Per creare una pagina da zero, andate su <strong>Pagine &gt; Aggiungi nuovo.<\/strong><\/p>\n<p>Poi fate clic sul pulsante <strong>Launch Beaver Builder.<\/strong><\/p>\n<figure style=\"width: 1854px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/launch-bb.png\" alt=\"Fare clic sul pulsante 'Launch Beaver Builder' (lancia il costruttore di castori)\" width=\"1854\" height=\"884\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8216;Launch Beaver Builder&#8217;<\/figcaption><\/figure>\n<p>Il plugin <a href=\"https:\/\/kinsta.com\/it\/blog\/page-builder-wordpress\/#beaver-builder\">Beaver Builder<\/a> 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.<\/p>\n<p>Il primo modo di aggiungere uno sfondo attraverso Beaver Builder \u00e8 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.<\/p>\n<p>Una volta selezionato, trovate il pulsante <strong>Row Settings <\/strong>(l&#8217;icona \u2699).<\/p>\n<p>Fate clic su quell&#8217;icona per rivelare le impostazioni per quella riga. Potete farlo anche con sezioni e colonne e altri tipi di blocchi.<\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/row-sets.png\" alt=\"Modificare le impostazioni della riga\" width=\"1900\" height=\"813\"><figcaption class=\"wp-caption-text\">Modificare le impostazioni della riga<\/figcaption><\/figure>\n<p>Vedrete un pannello di impostazioni apparire in cima all&#8217;anteprima del vostro sito web. Fate clic sulla scheda <strong>Style<\/strong>, poi cercate la sezione Background.<\/p>\n<p>Sotto <strong>Background<\/strong>, fate clic sul menu a tendina per mostrare tutti i tipi di sfondo.<\/p>\n<figure style=\"width: 1316px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/finishing.png\" alt=\"La scheda 'Style'\" width=\"1316\" height=\"775\"><figcaption class=\"wp-caption-text\">La scheda &#8216;Style&#8217;<\/figcaption><\/figure>\n<p>Avete diversi tipi di Sfondo da considerare, uno dei quali \u00e8 appositamente per le foto (Photo). Le altre opzioni sono:<\/p>\n<ul>\n<li>Color<\/li>\n<li>Gradient<\/li>\n<li>Video<\/li>\n<li>Embedded coe<\/li>\n<\/ul>\n<figure style=\"width: 1315px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-type.png\" alt=\"Imposta il tipo di immagine di sfondo di WordPress\" width=\"1315\" height=\"742\"><figcaption class=\"wp-caption-text\">Imposta il tipo di immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>Sentitevi liberi di provare i diversi tipi di sfondo.<\/p>\n<p>Per esempio, potreste trovare che uno sfondo Gradient funziona meglio per la vostra immagine. Ogni tipo di sfondo include le proprie impostazioni. Il tipo <strong>Gradient<\/strong>, in questo caso, richiede due colori perch\u00e9 il gradiente passi da uno all&#8217;altro.<\/p>\n<figure style=\"width: 1780px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/change-gradient.png\" alt=\"Sezione 'About the company'\" width=\"1780\" height=\"837\"><figcaption class=\"wp-caption-text\">Sezione &#8216;About the company&#8217;<\/figcaption><\/figure>\n<p>Optando per lo sfondo Photo potete scegliere un elemento dalla Libreria Media o incollare un URL per l&#8217;immagine. Fate sul link <strong>Select Photo <\/strong>se usate una foto della vostra Libreria Media.<\/p>\n<figure style=\"width: 1811px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/select-photo.png\" alt=\"Fate clic sul link 'Select Photo'\" width=\"1811\" height=\"795\"><figcaption class=\"wp-caption-text\">Fate clic sul link &#8216;Select Photo&#8217;<\/figcaption><\/figure>\n<p>Trovate la vostro foto di sfondo preferita e fate clic sul pulsante <strong>Select Photo.<\/strong><\/p>\n<figure style=\"width: 1871px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/select-a-phot.png\" alt=\"Scegliere i media\" width=\"1871\" height=\"894\"><figcaption class=\"wp-caption-text\">Scegliere i media<\/figcaption><\/figure>\n<p>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 <strong>Size<\/strong>, <strong>Repeat<\/strong>, <strong>Position <\/strong>e <strong>Attachment<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/change-sets.png\" alt=\"Imposta la dimensione dell'immagine di sfondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Imposta la dimensione dell&#8217;immagine di sfondo<\/figcaption><\/figure>\n<h5>Foto di Sfondo di Beaver Builder a Pagina intera e Globale<\/h5>\n<p>Beaver Builder funziona con gli strumenti di design predefiniti di WordPress e questo vuol dire che potete approfittare delle caratteristiche integrate per gli sfondi.<\/p>\n<p>Pertanto, potete andare alla scheda<strong> Aspetto &gt; Sfondo <\/strong>per attivare uno sfondo fotografico per tutto il vostro sito web.<\/p>\n<p>In alternativa, aprite qualsiasi pagina web in Beaver Builder e fate clic sul menu a discesa <strong>Tools <\/strong>nell&#8217;angolo in alto a sinistra.<\/p>\n<p>Qui, fate clic sull&#8217;opzione <strong>Global Settings<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/global.png\" alt=\"'Global Settings' per Beaver Builder\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">&#8216;Global Settings&#8217; per Beaver Builder<\/figcaption><\/figure>\n<p>Il pannello delle impostazioni globali offre la possibilit\u00e0 di cambiare l&#8217;intero sito web, sovrascrivendo o modificando il codice integrato di WordPress. Pertanto, vorremmo inserire un blocco di codice CSS per cambiare l&#8217;immagine di sfondo dell&#8217;intero sito web (globalmente).<\/p>\n<p>Fate clic sulla scheda CSS nelle impostazioni globali (Global Settings) e incollate il seguente frammento di codice nel campo:<\/p>\n<pre><code class=\"language-html\">body {\nbackground-image: url(\"URL to Image\");\nbackground-repeat: no-repeat;\nbackground-position: center top;\nbackground-attachment: fixed;\nbackground-size: 100%;\nbackground-color: #0f1066;\n}<\/code><\/pre>\n<div>\n<p>Sostituite il testo <strong>URL to Image <\/strong>con l&#8217;URL della foto di sfondo desiderata. Potete anche cambiare cose come la funzione di ripetizione (Repeat), l\u2019allegato (Attachment) e la dimensione dello sfondo (Background size) con il codice CSS.<\/p>\n<\/div>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/css-to-bg.png\" alt=\"La scheda CSS\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">La scheda CSS<\/figcaption><\/figure>\n<p>Ha pi\u00f9 senso usare Beaver Builder per gli sfondi delle pagine personalizzate, poich\u00e9 ogni pagina ha la sua immagine come sfondo.<\/p>\n<p>Nell&#8217;editor di pagina, aprite di nuovo il menu <strong>Tools<\/strong>.<\/p>\n<p>Selezionate l&#8217;opzione<strong> Layout CSS &#038; Javascript.<\/strong><\/p>\n<figure style=\"width: 1370px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/layout.png\" alt=\"Layout CSS e pulsante JavaScript\" width=\"1370\" height=\"881\"><figcaption class=\"wp-caption-text\">Layout CSS e pulsante JavaScript<\/figcaption><\/figure>\n<p>Incollate lo stesso codice nella scheda CSS, cambiando il testo <strong>URL to Image <\/strong>con l&#8217;URL reale e regolando le impostazioni che volete:<\/p>\n<pre><code class=\"language-html\">body {\nbackground-image: url(\"URL to Image\");\nbackground-repeat: no-repeat;\nbackground-position: center top;\nbackground-attachment: fixed;\nbackground-size: 100%;\nbackground-color: #0f1066;\n}<\/code><\/pre>\n<div>\n<p>Come potete vedere, l&#8217;intero sfondo cambia con l&#8217;immagine URL che avete nel codice CSS. Tenete presente che il pannello <strong>Layout CSS \/ Javascript <\/strong>controlla solo la pagina corrente. Non vedrete lo sfondo in nessuna pagina oltre a questa.<\/p>\n<\/div>\n<div><\/div>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/only-this-page.png\" alt=\"Aggiunta di CSS personalizzati\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Aggiunta di CSS personalizzati<\/figcaption><\/figure>\n<h4>Aggiungere una Riga Semplice o uno Sfondo di Widget con Page Builder by SiteOrigin<\/h4>\n<p><a href=\"https:\/\/kinsta.com\/it\/blog\/page-builder-wordpress\/#siteorigin\">Page Builder by SiteOrigin<\/a> \u00e8 ancora un altro strumento di creazione di siti web visivi drag-and-drop. Offre capacit\u00e0 limitate per inserire sfondi per l&#8217;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.<\/p>\n<p>Per prima cosa, scaricate e attivate il plugin Page Builder by SiteOrigin.<\/p>\n<figure style=\"width: 1520px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/siteor.png\" alt=\"Plugin Page Builder di SiteOrigin\" width=\"1520\" height=\"493\"><figcaption class=\"wp-caption-text\">Plugin Page Builder by SiteOrigin<\/figcaption><\/figure>\n<p>Aprite una nuova pagina o considerate l&#8217;aggiunta di una riga SiteOrigin a una pagina corrente del vostro sito web.<\/p>\n<p>Ogni sezione di SiteOrigin vi chiede di <strong>aggiungere un widget <\/strong>o di <strong>aggiungere una riga<\/strong>. Avete anche la possibilit\u00e0 di sfogliare i <strong>Layout pre-costruiti (Pre-built Layouts)<\/strong> se preferite non iniziare il design da zero.<\/p>\n<p>La buona notizia \u00e8 che sia i widget che le righe in SiteOrigin hanno impostazioni per includere immagini di sfondo.<\/p>\n<p>Quindi, fate clic sul pulsante <strong>Add Widget <\/strong>o <strong>Add Row <\/strong>per procedere.<\/p>\n<figure style=\"width: 1896px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-row-or-widget.png\" alt=\"Aggiungere un nuovo widget o una nuova riga\" width=\"1896\" height=\"822\"><figcaption class=\"wp-caption-text\">Aggiungere un nuovo widget o una nuova riga<\/figcaption><\/figure>\n<p>In questo esempio, ci concentreremo sulla libreria <strong>Widgets<\/strong>.<\/p>\n<p>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.<\/p>\n<p>Sceglieremo il widget <strong>Products <\/strong>per questo esempio, ma potete scegliere uno dei tanti altri widget in base alle <a href=\"https:\/\/kinsta.com\/it\/blog\/migliori-pratiche-di-web-design\/\">esigenze del vostro design<\/a>. Inoltre, potete raggruppare questi widget con una riga, poi aggiungere un&#8217;immagine di sfondo a quella riga in modo che lo sfondo appaia dietro a pi\u00f9 widget.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-a-widg.png\" alt=\"Scegliere il widget 'Products'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Scegliere il widget &#8216;Products&#8217;<\/figcaption><\/figure>\n<p>Il nuovo <a href=\"https:\/\/kinsta.com\/it\/blog\/widget-wordpress\/\">widget<\/a> o riga finisce nell&#8217;editor di pagina di SiteOrigin. La maggior parte delle opzioni di SiteOrigin rimane nella bacheca di WordPress, quindi non c&#8217;\u00e8 un editor front-end come con altri costruttori di pagine.<\/p>\n<p>Per aggiungere uno sfondo a qualsiasi elemento di SiteOrigin, scorrete sull&#8217;elemento e fate clic sul link <strong>Edit<\/strong>.<\/p>\n<figure style=\"width: 1516px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/edit-the-row.png\" alt=\"Fate clic sul link 'Edit'\" width=\"1516\" height=\"808\"><figcaption class=\"wp-caption-text\">Fate clic sul link &#8216;Edit&#8217;<\/figcaption><\/figure>\n<p>Ho scelto il widget <strong>Products<\/strong> per questo esempio, ma ogni widget ha le sue impostazioni per configurare il suo aspetto sul vostro sito web.<\/p>\n<p>Gli strumenti per lo sfondo si trovano sotto il menu a tendina <strong>Design.<\/strong> Fate clic su quello per andare avanti.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/design-it.png\" alt=\"La scheda 'Design' per l'immagine di sfondo di WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">La scheda &#8216;Design&#8217; per l&#8217;immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>Trovate il campo <strong>Background Image<\/strong> e fate clic sul pulsante <strong>Seleziona immagine.<\/strong><\/p>\n<p>Avete anche la possibilit\u00e0 di incollare un <strong>URL esterno (External URL) <\/strong>per l&#8217;immagine di sfondo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-bg-image.png\" alt=\"Scegliere l'immagine di sfondo e il colore\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Scegliere l&#8217;immagine di sfondo e il colore<\/figcaption><\/figure>\n<p>La <a href=\"https:\/\/kinsta.com\/it\/blog\/libreria-media-wordpress\/\">Libreria Media<\/a> vi mostra le immagini attuali che avete caricato su WordPress. Fate clic sull&#8217;immagine che funziona meglio per questo sfondo e selezionate il pulsante <strong>Done <\/strong>per inserirla nel modulo SiteOrigin.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-it-o-o.png\" alt=\"Fare clic sul pulsante \"Done\"\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Fare clic sul pulsante &#8220;Done&#8221;<\/figcaption><\/figure>\n<p>Ora il campo Background Image presenta una versione in miniatura di quella foto.<\/p>\n<p>Scorrete le impostazioni per configurare tutto, dalla <strong>visualizzazione dell&#8217;immagine di sfondo (Background Image Display) <\/strong>al <strong>colore del font (Font Color) <\/strong>per il testo in sovrapposizione.<\/p>\n<p>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.<\/p>\n<p>Assicuratevi di fare clic sul pulsante <strong>Done <\/strong>quando avete completato le vostre impostazioni personalizzate per lo sfondo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/adding-in.png\" alt=\"Le impostazioni dell'immagine di sfondo di WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Le impostazioni dell&#8217;immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>Il widget (in questo caso, il widget Products) va nell&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/migliori-editor-di-testo\/\">editor<\/a> 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.<\/p>\n<p>Dovete fare clic sul pulsante <strong>Preview <\/strong>o <strong>Update <\/strong>e poi navigare nel front-end della pagina per vedere i risultati.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/update-or-prev.png\" alt=\"La sezione 'Products'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">La sezione &#8216;Products&#8217;<\/figcaption><\/figure>\n<p>Lo sfondo che abbiamo aggiunto ora appare vincolato dal widget <strong>Products <\/strong>di prima. Questo sfondo ha ovviamente bisogno di alcune modifiche per diventare pi\u00f9 carino, ma \u00e8 comunque un buon inizio per riempire lo spazio con un&#8217;immagine di sfondo dall&#8217;aspetto molto pi\u00f9 creativo.<\/p>\n<figure style=\"width: 1390px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/not-the-pret.png\" alt=\"Lo sfondo della sezione\" width=\"1390\" height=\"711\"><figcaption class=\"wp-caption-text\">Lo sfondo della sezione<\/figcaption><\/figure>\n<h4>Aggiungere Immagini di Sfondo Uniche con Brizy<\/h4>\n<p>L&#8217;ultimo costruttore di pagine per questa dimostrazione, Brizy, offre modelli eleganti e un&#8217;interfaccia front-end superiore per aggiungere design insoliti e personalizzazioni rapide.<\/p>\n<p>Il costruttore di pagine Brizy include un ampio set di moduli <a href=\"https:\/\/kinsta.com\/it\/blog\/page-builder-wordpress\/\">drag-and-drop<\/a> 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.<\/p>\n<p>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&#8217;aggiunta di un video in loop sullo sfondo o una mappa completa.<\/p>\n<p>Per approfittare di queste impostazioni di sfondo, <a href=\"https:\/\/wordpress.org\/plugins\/brizy\/\">installate e attivate il plugin Brizy<\/a> per iniziare.<\/p>\n<figure style=\"width: 1324px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/brizy.png\" alt=\"Il plugin Brizy page builder\" width=\"1324\" height=\"434\"><figcaption class=\"wp-caption-text\">Il plugin Brizy page builder<\/figcaption><\/figure>\n<p>Gran parte del processo di progettazione di Brizy richiede di iniziare con un <a href=\"https:\/\/kinsta.com\/it\/blog\/gerarchia-dei-template-wordpress\/\">template<\/a> vuoto. Brizy tenter\u00e0 di convertire i vostri vecchi design in moduli Brizy, ma noi troviamo che sia meglio iniziare da capo.<\/p>\n<p>Andate su una <strong>pagina <\/strong>o un <strong>articolo <\/strong>nella vostra bacheca di WordPress e iniziate a costruire la pagina con un titolo e forse qualche contenuto.<\/p>\n<p>Dovreste vedere un pulsante per <strong>Edit With Brizy<\/strong>. Fate clic su quello e verrete rediretti al costruttore di pagine completo di Brizy.<\/p>\n<figure style=\"width: 1865px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/brixy-ed.png\" alt=\"Clicca su 'Continue to edit with Brizy'\" width=\"1865\" height=\"815\"><figcaption class=\"wp-caption-text\">Fare clic su &#8216;Continue to edit with Brizy&#8217;<\/figcaption><\/figure>\n<p>Il costruttore di pagine Brizy mostra un&#8217;anteprima completa del vostro sito web con pulsanti, testo e immagini. Se la pagina \u00e8 vuota, fate clic sul pulsante <strong>Start Building Your Page.<\/strong><\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/start-building.png\" alt=\"Fate clic sull'icona + per iniziare a costruire la vostra pagina\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Clicca sull&#8217;icona + per iniziare a costruire la vostra pagina<\/figcaption><\/figure>\n<p>Cercate le schede <strong>Layouts and Blocks <\/strong>nella barra del menu superiore.<\/p>\n<p>I layout forniscono pagine web pre-costruite, piene di contenuti\u00a0e pronte a partire finch\u00e9 non si personalizza il contenuto della propria azienda. I blocchi sono pezzi pi\u00f9 piccoli di pagine web, ma sono ancora pre-costruiti e spesso pi\u00f9 facili da usare e manipolare rispetto alla creazione di un blocco in autonomia.<\/p>\n<p>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.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/blocks-and-layouts.png\" alt=\"Sezioni Layouts and Blocks\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Sezioni Layouts and Blocks<\/figcaption><\/figure>\n<p>Dopo che avete alcuni blocchi o layout sulla pagina web, tornate alla schermata dell&#8217;editor per guardare il vostro lavoro.<\/p>\n<p>Vedrete che ogni sezione del blocco include un&#8217;icona Settings in alto a destra, che di solito appare quando scorrete la sezione.<\/p>\n<p>Fate clic su questo per il blocco di vostra scelta: aggiungeremo uno sfondo a quel blocco.<\/p>\n<figure style=\"width: 1583px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/every-one.png\" alt=\"Fare clic sull'icona \"Settings\"\" width=\"1583\" height=\"815\"><figcaption class=\"wp-caption-text\">Fare clic sull&#8217;icona &#8220;Settings&#8221;<\/figcaption><\/figure>\n<p>Il pannello <strong>Block Settings <\/strong>rimane nell&#8217;angolo in alto a destra. Scorrete le <a href=\"https:\/\/kinsta.com\/it\/blog\/icon-font-in-wordpress\/\">icone<\/a> del menu per vedere cosa fanno.<\/p>\n<p>Uno di questi \u00e8 per i <strong>colori (Colors)<\/strong> e si riferisce allo sfondo colorato. Potete cambiarlo e aggiungere un gradiente se siete pi\u00f9 propensi a mantenere una vista di sfondo a tinta unita o a gradiente.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/colors-is-possible.png\" alt=\"Il pulsante 'Colors' per lo sfondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Il pulsante &#8216;Colors&#8217; per lo sfondo<\/figcaption><\/figure>\n<p>Il pulsante con l&#8217;icona a sinistra contiene le impostazioni dello <strong>sfondo.<\/strong><\/p>\n<p>Fate clic su questo pulsante per aprire gli strumenti rapidi e caricare un&#8217;immagine di sfondo in questo blocco.<\/p>\n<figure style=\"width: 1551px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/abck-gro.png\" alt=\"Pulsante immagine di sfondo di WordPress\" width=\"1551\" height=\"692\"><figcaption class=\"wp-caption-text\">Pulsante immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>Brizy offre tre elementi media per gli sfondi:<\/p>\n<ul>\n<li>Immagini<\/li>\n<li>Video<\/li>\n<li>Mappe<\/li>\n<\/ul>\n<p>Per prima cosa, provate il tipo Image per capire come funziona con il vostro layout attuale.<\/p>\n<p>Fate sull&#8217;area di <strong>Image upload <\/strong>per trovare una foto nella Libreria Media e aggiungerla allo sfondo.<\/p>\n<figure style=\"width: 1572px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/image-add.png\" alt=\"Tipo di immagine di sfondo di WordPress\" width=\"1572\" height=\"725\"><figcaption class=\"wp-caption-text\">Tipo di immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>Per questo tutorial abbiamo trovato una foto di un pannello di legno e abbiamo indicato che preferiremmo non avere un <a href=\"https:\/\/kinsta.com\/it\/blog\/tema-twenty-twenty\/#customizing-the-twenty-twenty-theme\">effetto di parallasse<\/a>.<\/p>\n<p>Questo aggiunge un effetto piacevole poich\u00e9 lo sfondo colorato serve come una sovrapposizione, ma si vede ancora la struttura del legno dietro di esso.<\/p>\n<p>Ricordate che potete sempre regolare il campo Parallax per rendere l&#8217;immagine di sfondo fissa, animata o a scorrimento.<\/p>\n<figure style=\"width: 1865px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/in-place.png\" alt=\"Immagine di sfondo senza parallasse\" width=\"1865\" height=\"940\"><figcaption class=\"wp-caption-text\">Immagine di sfondo senza parallasse<\/figcaption><\/figure>\n<p>Ed \u00e8 cos\u00ec che si inserisce un&#8217;immagine di sfondo con Brizy!<\/p>\n<p>La parte migliore di Brizy \u00e8 che potete continuare a muovervi attraverso il design e fare clic sul pulsante <strong>Settings <\/strong>di ogni sezione.<\/p>\n<p>Una sezione pi\u00f9 in basso, possiamo inserire un&#8217;altra immagine di sfondo senza spenderci molto tempo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/another-section.png\" alt=\"Aggiungere un'altra immagine di sfondo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Aggiungere un&#8217;altra immagine di sfondo<\/figcaption><\/figure>\n<p>E per dimostrare la potenza degli altri tipi di sfondo, possiamo fare clic sul tipo di sfondo <strong>Map<\/strong>, digitate un indirizzo, e guardate come una mappa di quel luogo appare proprio dietro il contenuto in primo piano.<\/p>\n<p>La <a href=\"https:\/\/kinsta.com\/it\/blog\/plugin-wordpress-mappe\/\">mappa<\/a> viene situata come sfondo completo e ha una funzione di zoom se non viene bene con le impostazioni predefinite.<\/p>\n<figure style=\"width: 1800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-map.png\" alt=\"Aggiungere una mappa come immagine di sfondo di WordPress\" width=\"1800\" height=\"797\"><figcaption class=\"wp-caption-text\">Aggiungere una mappa come immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>Infine, vi consigliamo di controllare lo strumento video di sfondo Brizy, situato nella stessa sezione dello strumento di sfondo dell&#8217;immagine. Funziona inserendo un URL video (<a href=\"https:\/\/kinsta.com\/it\/blog\/statistiche-youtube\/\">YouTube<\/a> o Vimeo), cosa che aggiunger\u00e0 un video completo proprio dietro il contenuto in primo piano. Fornisce anche un&#8217;impostazione per mettere in loop il video e scegliere quando dovrebbe iniziare mentre l&#8217;utente scorre sulla sezione.<\/p>\n<figure style=\"width: 1548px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/video-now.png\" alt=\"URL per l'immagine di sfondo di WordPress\" width=\"1548\" height=\"820\"><figcaption class=\"wp-caption-text\">URL per l&#8217;immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>La gif animata qui sotto d\u00e0 un breve esempio del video in azione, anche se probabilmente farebbe comodo un po&#8217; di editing.<\/p>\n<figure style=\"width: 1280px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/background-video.gif\" alt=\"Sfondo con video\" width=\"1280\" height=\"720\"><figcaption class=\"wp-caption-text\">Sfondo con video<\/figcaption><\/figure>\n<h2>Ridimensionamento dell&#8217;Immagine di sfondo, Sourcing e Modifiche di Base<\/h2>\n<p>Abbiamo accennato prima nell&#8217;articolo che anche se non c&#8217;\u00e8 una dimensione perfetta per un&#8217;immagine di sfondo, \u00e8 meglio iniziare con un formato piccolo di <strong>1024 x 768 <\/strong>pixel e di attenersi a un rapporto di aspetto comune come <strong>16:9<\/strong>. Il rapporto d&#8217;aspetto non \u00e8 tanto importante quanto la dimensione e la risoluzione dell&#8217;immagine, dato che potete ritagliare l&#8217;immagine o lasciare che WordPress lo faccia per voi.<\/p>\n<p>\u00c8 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.<\/p>\n<h3>Dove Trovare Immagini di Sfondo Adatte<\/h3>\n<p>Per la vostra ricerca di immagini di sfondo, guardate la nostra guida su come trovare e aggiungere <a href=\"https:\/\/kinsta.com\/blog\/wordpress-stock-photos\/\">foto stock senza lasciare WordPress<\/a>. Abbiamo anche una <a href=\"https:\/\/kinsta.com\/it\/blog\/immagini-gratuite-per-wordpress\/\">lista di fonti utili<\/a> per cercare foto stock ad alta risoluzione, molte delle quali sono gratuite.<\/p>\n<p>In generale, vi consigliamo di scattare\/creare da voi le immagini di sfondo. Se questo non \u00e8 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&#8217;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.<\/p>\n<p>Alcuni dei siti pi\u00f9 famosi per le immagini stock sono:<\/p>\n<ul>\n<li><a href=\"https:\/\/unsplash.com\/\">Unsplash<\/a> &#8211; Gratis e senza attribuzione.<\/li>\n<li><a href=\"https:\/\/visualhunt.com\/\">Visual Hunt<\/a> &#8211; Foto gratis. La maggior parte delle immagini non richiede attribuzione.<\/li>\n<li><a href=\"https:\/\/www.pexels.com\/\">Pexels<\/a> &#8211; Gratis e senza attribuzione.<\/li>\n<li><a href=\"https:\/\/pixabay.com\/\">Pixabay<\/a> &#8211; Gratis per la maggior parte delle immagini che non richiedono attribuzione.<\/li>\n<li><a href=\"https:\/\/www.istockphoto.com\/\">iStockphoto<\/a> &#8211; Un abbonamento premium abbastanza economico per immagini royalty-free.<\/li>\n<li><a href=\"https:\/\/www.shutterstock.com\/\">Shutterstock<\/a> &#8211; Immagini royalty-free per una quota di abbonamento ragionevole.<\/li>\n<\/ul>\n<h3>Come Cambiare l&#8217;Immagine di Sfondo di WordPress con i CSS Personalizzati<\/h3>\n<p>Come abbiamo imparato, \u00e8 possibile aggiungere un&#8217;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&#8217;\u00e8 anche la possibilit\u00e0 di utilizzare CSS personalizzati per stilizzare l&#8217;immagine di sfondo o aggiungerla al vostro sito.<\/p>\n<p>Non copriremo le complessit\u00e0 del CSS personalizzato, perch\u00e9 ogni immagine di sfondo e tema avr\u00e0 un processo diverso. Tuttavia, vi consigliamo di leggere la <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-css\/\">nostra guida su come modificare, aggiungere e personalizzare i CSS in WordPress<\/a>. L&#8217;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.<\/p>\n<h2>Risolvere i Problemi Comuni con un&#8217;Immagine di Sfondo di WordPress<\/h2>\n<p>Tutti i siti WordPress sono dotati della possibilit\u00e0 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).<\/p>\n<p>Incontrare un problema con lo sfondo di WordPress \u00e8 frustrante e, purtroppo, piuttosto comune. Abbiamo compilato alcuni dei problemi pi\u00f9 comuni con le immagini di sfondo qui sotto e abbiamo tracciato ogni linea d&#8217;azione.<\/p>\n<h3>Come Risolvere i 5 Problemi Pi\u00f9 Comuni con le Immagini di Sfondo in WordPress<\/h3>\n<p class=\"p1\"><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=kVmAoW9kBZg\"><\/kinsta-video><\/p>\n<h3>Il Mio Tema Non Supporta un&#8217;Immagine di Sfondo di WordPress<\/h3>\n<p>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 \u00e8 necessario, o forse \u00e8 in conflitto con il design generale del tema.<\/p>\n<p>Se vedete che il vostro tema non supporta uno sfondo personalizzato o limita le vostre capacit\u00e0 quando aggiungete uno sfondo, considerate queste soluzioni:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/it\/blog\/temi-wordpress-veloci\/\">Sostituite il tema<\/a> con uno che supporta gli sfondi personalizzati. Cercate Sfondi personalizzati negli elenchi delle caratteristiche quando acquistate o scaricate temi.<\/li>\n<li>Usate un plugin di sfondo per sovrascrivere la funzione predefinita di sfondo personalizzato che viene bloccata.<\/li>\n<\/ul>\n<p>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 \u00e8 trovare un tema che supporti gli sfondi o aggiungere un plugin che permetta di installare gli sfondi ma senza compromettere molto la funzionalit\u00e0 del tema.<\/p>\n<h3>La Mia Immagine di Sfondo di WordPress \u00c8 Troppo Scura o \u00c8 del Colore Sbagliato<\/h3>\n<p>Un&#8217;immagine di sfondo scurita potrebbe derivare da alcune delle impostazioni che si attivano insieme all&#8217;immagine di sfondo stessa. La maggior parte delle volte, ha a che fare con un filtro di sovrapposizione o uno sfondo poco colorato.<\/p>\n<p>Per la maggior parte dei casi in cui lo sfondo \u00e8 scolorito, dovete controllare il vostro tema o il plugin che controlla lo sfondo stesso.<\/p>\n<p>Cercate un&#8217;impostazione vicino al campo dello sfondo che parla di filtri o sovrapposizione. Potreste anche trovare una funzione di opacit\u00e0 che dovrebbe essere cancellata in modo che il vostro sfondo venga visualizzato correttamente.<\/p>\n<p>Se tutto il resto fallisce, il tema potrebbe avere un filtro di sfondo hardcoded <a href=\"https:\/\/kinsta.com\/it\/blog\/file-di-wordpress\/\">nei file del tema<\/a>. In questo caso, contattate chi ha sviluppato il tema per capire ci\u00f2 che \u00e8 possibile correggere nel colore di sfondo.<\/p>\n<h3>La Mia Immagine di Sfondo di WordPress Non \u00c8 Nella Giusta Posizione<\/h3>\n<p>L&#8217;immagine di sfondo che appare nella posizione sbagliata tende a disturbare il design generale del vostro sito web. Potreste scoprire che lo sfondo \u00e8 troppo a sinistra o a destra, o forse quello che dovrebbe essere il centro dello sfondo non appare affatto sullo schermo.<\/p>\n<p>Per fortuna, per spostarsi sullo sfondo bastano pochi clic.<\/p>\n<p>Andate su <strong>Aspetto &gt; Sfondo <\/strong>nella bacheca di WordPress. Trovate l&#8217;immagine che avete attualmente caricato come sfondo e cercate il campo <strong>Posizione.<\/strong> 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.<\/p>\n<p>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.<\/p>\n<h3>La Mia Immagine di Sfondo di WordPress Si Ripete Pi\u00f9 e Pi\u00f9 Volte<\/h3>\n<p>Le texture e gli sfondi a tinta unica spesso hanno un aspetto migliore se ripetuti, visto che nascondono le interruzioni dell&#8217;immagine. Molte immagini si vedono proprio male quando ripetute come sfondo, specialmente quelle con molti dettagli e vari gradi di colore.<\/p>\n<p>Un layout di immagine di sfondo ripetuto \u00e8 utile se la vostra immagine originale non \u00e8 abbastanza grande da coprire l&#8217;intero sfondo senza sembrare allungata. Pertanto, WordPress a volte usa un layout ripetuto per mantenere la risoluzione dell&#8217;immagine.<\/p>\n<p>La soluzione principale a questo problema si trova nella sezione Sfondo da <strong>Aspetto &gt; Sfondo <\/strong> in WordPress. Con una foto caricata come sfondo, provate i preset come <strong>Fill Screen<\/strong>, <strong>Fit To Screen<\/strong>, o <strong>Custom<\/strong>, invece dell&#8217;opzione <strong>Repeat <\/strong>.<\/p>\n<p>Tuttavia, potreste scoprire che cercare di ottenere un&#8217;immagine pi\u00f9 piccola per coprire l&#8217;intera schermata di sfondo genera <a href=\"https:\/\/kinsta.com\/it\/blog\/hotlinking\/\">risultati sgradevoli<\/a>. In questo caso, la soluzione migliore \u00e8 sostituire completamente l&#8217;immagine di sfondo e cercarne una grande, ad alta risoluzione e pronta per essere pubblicata sul web.<\/p>\n<h3>La Mia Immagine di Sfondo di WordPress \u00c8 Allungata<\/h3>\n<p>Un&#8217;immagine di sfondo allungata significa che le vostre impostazioni di sfondo personalizzate tentano di prendere un&#8217;immagine pi\u00f9 piccola e coprire l&#8217;intero schermo con l&#8217;immagine.<\/p>\n<p>Questo pu\u00f2 accadere anche con <a href=\"https:\/\/kinsta.com\/it\/blog\/strategie-di-marketing-facebook\/#add-highquality-images\">immagini pi\u00f9 grandi e ad alta risoluzione<\/a> se non corrispondono al rapporto d&#8217;aspetto richiesto. Per le immagini di sfondo allungate, pensate al file di origine. Scegliere un&#8217;immagine diversa e pi\u00f9 adatta \u00e8 l&#8217;opzione migliore.<\/p>\n<p>Un altro problema \u00e8 che potreste avere le impostazioni dello sfondo mal configurate. Verificate cose come la posizione dell&#8217;immagine di sfondo o l&#8217;effetto allungato che pu\u00f2 emergere con la modalit\u00e0 <strong>Fill Screen<\/strong>. Potrebbe essere necessario attenersi solo alle dimensioni originali o aggiungere una funzione <strong>Repeat <\/strong>per far funzionare il tutto.<\/p>\n<h3>Altri Suggerimenti per la Risoluzione dei Problemi dello Sfondo<\/h3>\n<ul>\n<li>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 \u00e8 contattare chi ha sviluppato il tema o installarne uno nuovo per vedere se questo risolve il problema.<\/li>\n<li>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&#8217;origine dell&#8217;immagine di sfondo. Potrebbe essere necessario attenersi alle impostazioni di sfondo del tema invece di usare CSS personalizzati.<\/li>\n<li>Un tema pu\u00f2 essere venduto con uno sfondo personalizzato gi\u00e0 attivato. Di solito, tutto quello che dovete fare \u00e8 sostituire l&#8217;immagine di sfondo con una nuova. A volte, \u00e8 necessario <a href=\"https:\/\/kinsta.com\/it\/blog\/file-di-wordpress\/\">attingere ai file del tema<\/a> o usare <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-css\/\">CSS personalizzati<\/a> per sovrascrivere le impostazioni.<\/li>\n<\/ul>\n<h2>I Migliori Plugin per Immagini di Sfondo per WordPress<\/h2>\n<p>Se volete avere ulteriori capacit\u00e0 di editing per un&#8217;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:<\/p>\n<h3>Simple Full Screen Background Image<\/h3>\n<figure style=\"width: 1324px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Simple-Full-Screen-Background-Image.png\" alt=\"Simple Full Screen Background Image\" width=\"1324\" height=\"433\"><figcaption class=\"wp-caption-text\">Simple Full Screen Background Image<\/figcaption><\/figure>\n<p>Il plugin <a href=\"https:\/\/wordpress.org\/plugins\/simple-full-screen-background-image\/\">Simple Full Screen Background Image<\/a> non \u00e8 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.<\/p>\n<p>Nel complesso, questo plugin funziona meglio per coloro che hanno un tema che blocca la possibilit\u00e0 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 <a href=\"https:\/\/kinsta.com\/it\/blog\/amministrazione-wordpress\/\">bacheca di WordPress<\/a> per caricare istantaneamente un&#8217;immagine dal vostro computer.<\/p>\n<p>Non c&#8217;\u00e8 altro da dire!<\/p>\n<p>Il plugin ha anche una versione Premium che offre una scalatura migliorata, supporto per un numero illimitato di sfondi, effetti unici, e molto altro.<\/p>\n<h3>Advanced WordPress Backgrounds<\/h3>\n<figure style=\"width: 1328px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Advanced-WordPress-Backgrounds.png\" alt=\"AWB - Advanced WordPress Backgrounds\" width=\"1328\" height=\"430\"><figcaption class=\"wp-caption-text\">AWB &#8211; Advanced WordPress Backgrounds<\/figcaption><\/figure>\n<p>Il plugin <a href=\"https:\/\/wordpress.org\/plugins\/advanced-backgrounds\/\">Advanced WordPress Backgrounds<\/a> ha un approccio diverso agli sfondi di WordPress, perch\u00e9 vi permette di approfittare di effetti unici che ravvivano il vostro sfondo. Un esempio \u00e8 lo sfondo in parallasse, che pu\u00f2 muoversi lentamente mentre l&#8217;utente scorre il vostro sito web.<\/p>\n<p>Il plugin offre anche il supporto per i video. Gli sfondi video sono estratti da luoghi come YouTube e Vimeo, ma potete anche <a href=\"https:\/\/kinsta.com\/it\/blog\/hosting-video\/\">ospitarli autonomamente<\/a>.<\/p>\n<p>\u00c8 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\u00e0 e opzioni di velocit\u00e0 personalizzate.<\/p>\n<p>AWB supporta Gutenberg e pu\u00f2 andare insieme all&#8217;editor standard di WordPress e a molti altri costruttori di pagine visuali. Infine, \u00e8 possibile usare le sue opzioni CSS personalizzate per aggiungere ancora pi\u00f9 stile ai vostri sfondi.<\/p>\n<h3>Perfect Images + Retina<\/h3>\n<figure style=\"width: 1323px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Perfect-Images-Retina.png\" alt=\"Perfect Images + Retina\" width=\"1323\" height=\"431\"><figcaption class=\"wp-caption-text\">Perfect Images + Retinaa<\/figcaption><\/figure>\n<p>Il plugin <a href=\"https:\/\/wordpress.org\/plugins\/wp-retina-2x\/\">Perfect Images + Retina<\/a> \u00e8 utile come soluzione due in uno. Permette di gestire la dimensione e l&#8217;aspetto dell&#8217;immagine di sfondo di WordPress, mentre <a href=\"https:\/\/kinsta.com\/it\/blog\/rigenerare-le-miniature\/\">rigenera le miniature<\/a> e sostituisce le immagini. La gestione delle immagini \u00e8 davvero impressionante, ed \u00e8 particolarmente cruciale per gli sfondi ad alta risoluzione.<\/p>\n<p>Il plugin fornisce anche una funzione di sfondo con la versione premium. Genera un equivalente retina per l&#8217;immagine di sfondo in modo che le immagini appaiano senza problemi anche su display ad alta risoluzione.<\/p>\n<h3>Maintenance<\/h3>\n<figure style=\"width: 1325px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Maintenance-s-s.png\" alt=\"Plugin Maintenance per l\u2019immagine di sfondo di WordPress\" width=\"1325\" height=\"434\"><figcaption class=\"wp-caption-text\">Plugin Maintenance per l\u2019immagine di sfondo di WordPress<\/figcaption><\/figure>\n<p>Maintenance \u00e8 un plugin semplice e facile da usare per progettare pagine di manutenzione e coming soon. Il plugin <a href=\"https:\/\/wordpress.org\/plugins\/maintenance\/\">Maintenance<\/a> ha sia la versione gratuita che quella premium, ma quella gratuita \u00e8 sufficiente per attivare una pagina di manutenzione e aggiungere un&#8217;immagine di sfondo con testo e campi sovrapposti.<\/p>\n<p>Potete anche caricare il vostro logo, personalizzare cose come <a href=\"https:\/\/kinsta.com\/it\/blog\/font-wordpress\/\">font<\/a> 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.<\/p>\n\n<h2>Riepilogo<\/h2>\n<p>Un&#8217;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\u00e0 integrata nel <a href=\"https:\/\/kinsta.com\/it\/docs\/supporto\/ambito-del-supporto\/ambito-del-supporto-wordpress-gestito\/#what-is-wordpress-core\">core di WordPress<\/a>, quindi \u00e8 facile scambiare gli sfondi per determinati eventi o festivit\u00e0. Potete anche rimanere con lo stesso sfondo per tutta la vita.<\/p>\n<p>Oltre allo sfondo standard di WordPress, \u00e8 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\u00e0 sono infinite.<\/p>\n<p>Ora \u00e8 il momento di aggiungere quello sfondo che avete sempre desiderato al vostro sito WordPress.<\/p>\n<p><em>Ci siamo persi qualcosa? Lasciate un commento se avete problemi ad aggiungere o gestire le immagini di sfondo di WordPress.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le immagini di sfondo di WordPress sono disponibili in tutte le forme. Potete caricare un&#8217;immagine di sfondo per tutto il vostro sito web o solo per &#8230;<\/p>\n","protected":false},"author":117,"featured_media":43631,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[67,6753],"topic":[25878,25950,25982],"class_list":["post-43626","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webdev","tag-wptips","topic-design-sito-wordpress","topic-ottimizzazione-immagini","topic-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Immagini di Sfondo di WordPress: Come Aggiungere, Modificare e Personalizzare il Tema<\/title>\n<meta name=\"description\" content=\"Aggiungere un&#039;immagine di sfondo in WordPress non \u00e8 difficile. Scopri come attivarle, modificarle e personalizzarle in questa guida approfondita.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Immagini di Sfondo di WordPress: Come Aggiungere, Modificare e Personalizzare il Tema\" \/>\n<meta property=\"og:description\" content=\"Aggiungere un&#039;immagine di sfondo in WordPress non \u00e8 difficile. Scopri come attivarle, modificarle e personalizzarle in questa guida approfondita.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-19T10:53:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-13T15:51:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/03\/wordpress-immagini-sfondo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aggiungere un&#039;immagine di sfondo in WordPress non \u00e8 difficile. Scopri come attivarle, modificarle e personalizzarle in questa guida approfondita.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/03\/wordpress-immagini-sfondo.png\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"116 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Immagini di Sfondo di WordPress: Come Aggiungere, Modificare e Personalizzare il Tema\",\"datePublished\":\"2021-03-19T10:53:39+00:00\",\"dateModified\":\"2023-03-13T15:51:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/\"},\"wordCount\":18248,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/03\/wordpress-immagini-sfondo.png\",\"keywords\":[\"webdev\",\"wptips\"],\"articleSection\":[\"I Migliori Tutorial su WordPress\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/\",\"name\":\"Immagini di Sfondo di WordPress: Come Aggiungere, Modificare e Personalizzare il Tema\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/03\/wordpress-immagini-sfondo.png\",\"datePublished\":\"2021-03-19T10:53:39+00:00\",\"dateModified\":\"2023-03-13T15:51:49+00:00\",\"description\":\"Aggiungere un'immagine di sfondo in WordPress non \u00e8 difficile. Scopri come attivarle, modificarle e personalizzarle in questa guida approfondita.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/03\/wordpress-immagini-sfondo.png\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/03\/wordpress-immagini-sfondo.png\",\"width\":1460,\"height\":730,\"caption\":\"Immagini di sfondo di WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design del Sito WordPress\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/design-sito-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Immagini di Sfondo di WordPress: Come Aggiungere, Modificare e Personalizzare il Tema\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Immagini di Sfondo di WordPress: Come Aggiungere, Modificare e Personalizzare il Tema","description":"Aggiungere un'immagine di sfondo in WordPress non \u00e8 difficile. Scopri come attivarle, modificarle e personalizzarle in questa guida approfondita.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/","og_locale":"it_IT","og_type":"article","og_title":"Immagini di Sfondo di WordPress: Come Aggiungere, Modificare e Personalizzare il Tema","og_description":"Aggiungere un'immagine di sfondo in WordPress non \u00e8 difficile. Scopri come attivarle, modificarle e personalizzarle in questa guida approfondita.","og_url":"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2021-03-19T10:53:39+00:00","article_modified_time":"2023-03-13T15:51:49+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/03\/wordpress-immagini-sfondo.png","type":"image\/png"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Aggiungere un'immagine di sfondo in WordPress non \u00e8 difficile. Scopri come attivarle, modificarle e personalizzarle in questa guida approfondita.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/03\/wordpress-immagini-sfondo.png","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Salman Ravoof","Tempo di lettura stimato":"116 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Immagini di Sfondo di WordPress: Come Aggiungere, Modificare e Personalizzare il Tema","datePublished":"2021-03-19T10:53:39+00:00","dateModified":"2023-03-13T15:51:49+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/"},"wordCount":18248,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/03\/wordpress-immagini-sfondo.png","keywords":["webdev","wptips"],"articleSection":["I Migliori Tutorial su WordPress"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/","url":"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/","name":"Immagini di Sfondo di WordPress: Come Aggiungere, Modificare e Personalizzare il Tema","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/03\/wordpress-immagini-sfondo.png","datePublished":"2021-03-19T10:53:39+00:00","dateModified":"2023-03-13T15:51:49+00:00","description":"Aggiungere un'immagine di sfondo in WordPress non \u00e8 difficile. Scopri come attivarle, modificarle e personalizzarle in questa guida approfondita.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/03\/wordpress-immagini-sfondo.png","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/03\/wordpress-immagini-sfondo.png","width":1460,"height":730,"caption":"Immagini di sfondo di WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/immagini-di-sfondo-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Design del Sito WordPress","item":"https:\/\/kinsta.com\/it\/argomenti\/design-sito-wordpress\/"},{"@type":"ListItem","position":3,"name":"Immagini di Sfondo di WordPress: Come Aggiungere, Modificare e Personalizzare il Tema"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/it\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/43626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=43626"}],"version-history":[{"count":16,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/43626\/revisions"}],"predecessor-version":[{"id":66819,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/43626\/revisions\/66819"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/43626\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/43626\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/43626\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/43626\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/43626\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/43626\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/43626\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/43626\/translations\/jp"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/43626\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/43631"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=43626"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=43626"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=43626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}