Quando abbiamo lanciato WPBeginner, abbiamo capito rapidamente quanto la barra laterale potesse essere preziosa per connetterci con i nostri visitatori.
Abbiamo iniziato a usare immagini nella nostra barra laterale per renderla più accattivante visivamente, e i risultati sono stati impressionanti.
Le immagini ci hanno aiutato a promuovere i nostri corsi gratuiti, evidenziare offerte con coupon, mostrare articoli popolari e guidare i lettori verso diversi tipi di articoli e toolkit.
Con pochi tocchi visivi, la barra laterale è diventata una delle parti più efficaci del nostro sito per generare coinvolgimento e clic.
In questa guida, ti mostreremo come aggiungere facilmente immagini ai widget della barra laterale sul tuo sito WordPress, indipendentemente dal tema che stai utilizzando o dalla tua esperienza tecnica.
💡Risposta rapida: Come aggiungere un'immagine alla barra laterale di WordPress
Per la maggior parte degli utenti, il modo più veloce per aggiungere un'immagine alla barra laterale è utilizzare il blocco predefinito di WordPress:
- Vai su Aspetto » Widget nella tua dashboard.
- Individua la tua area della barra laterale e fai clic sul pulsante Aggiungi blocco (+).
- Cerca e seleziona il blocco Immagine.
- Carica la tua foto e fai clic su Aggiorna per salvare le modifiche.
Perché aggiungere immagini alla barra laterale di WordPress?
Aggiungere immagini alla barra laterale di WordPress può migliorare significativamente l'attrattiva visiva e la funzionalità del tuo sito web.
Le immagini catturano l'attenzione più velocemente del testo semplice. Questo ti aiuta a evidenziare guide, promozioni o risorse importanti in modo efficace.
Una barra laterale ben progettata migliora anche l'esperienza utente. Ciò può comportare visite più lunghe al sito e una riduzione dei tassi di rimbalzo.
Detto questo, diamo un'occhiata a come aggiungere facilmente immagini alla barra laterale del tuo sito WordPress.
Fai semplicemente clic sui collegamenti sottostanti per passare alla sezione preferita:
- Opzione 1: Utilizzo del blocco widget immagine di WordPress
- Opzione 2: Utilizzo del plugin widget immagine
- Opzione 3: Utilizzo del widget galleria immagini
- Opzione 4: Aggiunta di immagini nell'area widget classica
- Opzione 5: Utilizzo del blocco widget HTML personalizzato
- Domande frequenti su immagini e barre laterali in WordPress
Opzione 1: Utilizzo del blocco widget immagine di WordPress
Nota: Questo tutorial si applica ai temi classici che utilizzano la schermata standard Aspetto » Widget. Se stai utilizzando un tema a blocchi (come Twenty Twenty-Four), devi andare su Aspetto » Editor per modificare la tua barra laterale.
Puoi utilizzare il blocco Immagine predefinito per aggiungere foto alla barra laterale del tuo sito.
L'area widget ora utilizza lo stesso editor basato su blocchi che si trova nei post e nelle pagine. Puoi utilizzare i blocchi per aggiungere facilmente moduli, post correlati, immagini e altri elementi.
Per iniziare, dovrai visitare la pagina Aspetto » Widget dalla tua dashboard di WordPress. Dopodiché, fai semplicemente clic sul pulsante '+' e aggiungi un blocco immagine.
Successivamente, puoi aggiungere un'immagine nel blocco widget in 3 modi.
Ad esempio, puoi caricare un'immagine, scegliere un'immagine esistente dalla tua libreria multimediale di WordPress o inserire l'immagine da un URL.
Nelle impostazioni del blocco, vedrai opzioni per modificare lo stile e le dimensioni dell'immagine.
Dovresti anche aggiungere qui il testo Alt. Questo aiuta gli screen reader a comprendere l'immagine e migliora il tuo posizionamento SEO.
Al termine, non dimenticare di fare clic sul pulsante 'Aggiorna'.
Successivamente, puoi visitare il tuo sito web e vedere l'immagine nella barra laterale.
🔎 Vuoi rendere le tue immagini più interattive? Prova ad aggiungere hotspot alle tue immagini per evidenziare caratteristiche specifiche dei tuoi elementi visivi!
Opzione 2: Utilizzo del plugin widget immagine
Un altro modo per aggiungere immagini è utilizzare un plugin.
Potresti preferire questo metodo se desideri una specifica interfaccia legacy o se non ti senti a tuo agio con l'editor di blocchi predefinito.
Innanzitutto, è necessario installare e attivare il plugin Image Widget. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.
Dopo l'attivazione, vai semplicemente alla pagina Aspetto » Widget e aggiungi il blocco ‘Image Widget’.
Successivamente, fai clic sul pulsante ‘Seleziona immagine’ per caricare un'immagine o selezionarne una dalla libreria multimediale.
Dopodiché, devi fare clic sul pulsante ‘Inserisci nel widget’ e vedrai l'anteprima dell'immagine nelle impostazioni del widget.
Puoi aggiungere un titolo o testo alternativo, nonché un link e una didascalia per l'immagine.
Puoi anche scegliere una dimensione dell'immagine dall'elenco delle opzioni disponibili, modificare l'allineamento e altro ancora.
Una volta soddisfatto, fai semplicemente clic sul pulsante Aggiorna per salvare il widget immagine. Tutto qui. Ora puoi andare sul tuo sito web e vedere l'immagine visualizzata nella tua barra laterale.
Opzione 3: Utilizzo del widget galleria immagini
Se desideri visualizzare più immagini, puoi utilizzare il widget Galleria invece del widget Immagine.
Ancora una volta, vai alla pagina Aspetto » Widget e fai clic sull'opzione ‘Galleria’.
Da qui, puoi personalizzare le immagini nella tua galleria. Ad esempio, puoi arrotondare gli angoli delle immagini.
Una volta che sei soddisfatto di come appare la galleria, fai semplicemente clic su ‘Aggiorna’.
Se desideri maggiori opzioni di personalizzazione, ti consigliamo di utilizzare un plugin per gallerie di immagini come Envira Gallery.
Offre reattività mobile, funzionalità lightbox e velocità ottimizzata che mancano al widget predefinito. Puoi anche aggiungere una filigrana alle tue immagini per proteggere il tuo lavoro.
Per ulteriori informazioni, consulta la nostra guida su come creare una galleria di immagini reattiva in WordPress.
Una volta installato il plugin e configurate alcune gallerie, vedrai il widget ‘Envira Gallery’ nel tuo editor di widget basato su blocchi.
Tutto quello che devi fare dopo è scegliere la galleria che vuoi visualizzare.
Fai clic sul menu a discesa per farlo.
Una volta fatto, puoi personalizzare ulteriormente la galleria. Ad esempio, puoi cambiare il layout delle colonne e abilitare la modalità lightbox quando si fa clic su un'immagine.
Quando sei soddisfatto, fai clic su ‘Aggiorna’.
Opzione 4: Aggiunta di immagini nell'area widget classica
Se stai utilizzando una versione precedente di WordPress o hai disabilitato i blocchi dei widget, puoi anche aggiungere facilmente un'immagine alla barra laterale.
Vai semplicemente alla pagina Aspetto » Widget dal tuo pannello di amministrazione di WordPress e aggiungi il widget ‘Immagine’ alla tua barra laterale. Se non hai mai usato i widget prima, consulta la nostra guida su come aggiungere e usare i widget in WordPress.
Il widget si espanderà e potrai vedere le sue impostazioni.
La prima opzione è aggiungere un titolo al widget immagine. Dopodiché, fai clic sul pulsante ‘Aggiungi immagine’ per continuare.
Questo aprirà l'uploader multimediale di WordPress, dove puoi fare clic sul pulsante carica file per caricare la tua immagine o selezionare un'immagine che hai precedentemente caricato.
Dopo aver caricato l'immagine, vedrai le impostazioni dell'immagine nella colonna di destra. Da qui, puoi fornire un titolo o testo alternativo per l'immagine, aggiungere una descrizione, selezionare una dimensione o persino aggiungere un link.
Una volta terminato, puoi fare clic sul pulsante 'Aggiungi al widget' per salvare le modifiche. Ora vedrai un'anteprima dell'immagine all'interno dell'area delle impostazioni del widget.
Non dimenticare di fare clic sul pulsante 'Salva' per salvare il tuo widget immagine.
Ora puoi visitare il tuo sito web per vedere l'immagine visualizzata nella barra laterale del tuo blog WordPress.
Opzione 5: Utilizzo del blocco widget HTML personalizzato
In alcuni casi, potrebbe essere necessario aggiungere classi di tracciamento specifiche o attributi avanzati che il blocco Immagine standard non supporta. In tal caso, dovrai aggiungere manualmente un'immagine alla barra laterale del tuo blog.
Innanzitutto, carica l'immagine sul tuo sito WordPress tramite Media » Aggiungi nuovo.
Dopo aver caricato l'immagine, è necessario fare clic sul collegamento Modifica accanto all'immagine.
WordPress ti porterà ora alla pagina 'Modifica media', dove vedrai l'URL del file immagine sul lato destro dello schermo.
Devi copiare questo URL e incollarlo in un editor di testo come Blocco note.
Successivamente, devi andare alla schermata Aspetto » Widget dalla tua bacheca di WordPress.
Dopodiché, puoi aggiungere il blocco widget 'HTML personalizzato' alla tua barra laterale dove desideri visualizzare l'immagine.
Nell'area della casella di testo del widget, devi aggiungere la tua immagine usando questo codice:
<img src="Paste The File URL Here" alt="Strawberries" />
Il tag img viene utilizzato in HTML per visualizzare le immagini. Richiede due attributi. Il primo è src, che definisce la posizione del file immagine. Qui incollerai l'URL che hai copiato in precedenza.
Il secondo è alt, che viene utilizzato per fornire un testo alternativo per l'immagine. Il tuo tag immagine finale sarà simile a questo:
<img src="https://www.example.com/wp-content/uploads/2014/09/strawberries.jpg" alt="Strawberries" />Devi fare clic sul pulsante 'Aggiorna' per memorizzare le impostazioni del widget e quindi visualizzare in anteprima il tuo sito web.
Domande frequenti su immagini e barre laterali in WordPress
Ecco alcune domande che i nostri lettori hanno frequentemente posto sull'aggiunta di immagini e sulla personalizzazione delle loro barre laterali in WordPress:
Come aggiungo immagini una accanto all'altra in WordPress?
Puoi aggiungere immagini una accanto all'altra utilizzando il blocco Galleria predefinito. Aggiungi semplicemente il blocco al tuo contenuto, seleziona più foto dalla tua libreria multimediale e WordPress le disporrà automaticamente in una griglia una accanto all'altra.
Per ulteriori informazioni, consulta il nostro tutorial su come mettere facilmente immagini una accanto all'altra in WordPress.
Come modifico i widget della barra laterale in WordPress?
Per modificare i widget della barra laterale, naviga su Aspetto » Widget nella tua bacheca di WordPress. Da lì, puoi fare clic su qualsiasi blocco esistente per modificarne le impostazioni, spostarlo o eliminarlo completamente utilizzando l'editor visivo.
Come aggiungo un'immagine alla barra dei menu in WordPress?
Il modo più semplice per aggiungere immagini al tuo menu è utilizzare un plugin come Menu Image. Una volta installato, vai su Aspetto » Menu, dove vedrai un nuovo pulsante per caricare un'icona o una foto per ogni elemento del menu.
Per iniziare, puoi consultare la nostra guida su come aggiungere icone immagine al menu di navigazione di WordPress.
Come progettare una barra laterale in WordPress?
Puoi progettare una barra laterale personalizzata utilizzando un page builder drag-and-drop come SeedProd per creare layout senza codice. In alternativa, puoi utilizzare l'editor a blocchi in Aspetto » Widget per raggruppare blocchi, aggiungere colori di sfondo e stilizzare visivamente le intestazioni.
È possibile personalizzare un widget?
Sì, la maggior parte dei widget moderni di WordPress sono blocchi completamente personalizzabili. Fai semplicemente clic sul widget nell'editor e utilizza il pannello delle impostazioni a destra per regolare colori, tipografia, allineamento e opzioni di visibilità.
Speriamo che questo articolo ti abbia aiutato ad aggiungere un'immagine al widget della barra laterale di WordPress. Potresti anche voler consultare le nostre scelte degli esperti dei migliori page builder drag-and-drop in WordPress e come cambiare il lato della barra laterale in WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Holly
Ciao,
Ho appena inviato una domanda sulla mia immagine che appare solo nella home page e non in altre pagine del sito. Ho risolto il mio problema e volevo condividere la soluzione nel caso potesse aiutare qualcun altro. Stavo cercando di usare il widget HTML personalizzato per MOSTRARE un paio di immagini nella mia barra laterale dei contenuti e quando ho configurato specificamente l'aggiunta delle pagine in cui volevo mostrarle (lasciando "Corrispondi a tutto" DESELEZIONATO), le immagini sono apparse solo nella Home page.
The solution was to reverse it and tell the widget to HIDE if the page was 404 (or whatever you want). Now the images show up on the sidebar of all my pages.
Grazie,
Holly
Supporto WPBeginner
Thanks for sharing your resolution
Amministratore
Holly
Ciao,
Ho fatto funzionare il widget HTML personalizzato nella home page, ma le immagini non appaiono nelle altre pagine statiche. Ho configurato le impostazioni su "Mostra se" le mie pagine desiderate sono selezionate, ma l'immagine appare solo nella home page. Ho provato a eliminare e riaggiungere il widget e a rimuovere e riaggiungere le pagine. Qualche idea?
Grazie!
Holly
Supporto WPBeginner
Depending on your theme, the widget area you are placing it at may only display on your home page. You would want to check with the theme’s support for where those widgets should show
Amministratore
Alice
Ciao, sto cercando di aggiungere l'immagine e farla apparire nell'angolo in alto a sinistra del post. Quando la aggiungo e visualizzo l'anteprima, tutto è presente, ma quando pubblico non c'è. Qualche idea?
Supporto WPBeginner
Potresti voler provare a svuotare la cache per assicurarti che non sia causata da essa: https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/
Inoltre, se controlli con il supporto del tuo tema, potrebbe esserci un'impostazione specifica del tema che deve essere modificata
Amministratore
Kathy Turner
Ho aggiunto un'immagine nel mio footer e su Chrome su un desktop appare e poi scompare immediatamente. Ho ridotto le dimensioni, ho provato ad aggiungerla come immagine in html ma niente risolve il problema. Su Chrome sul mio cellulare va bene. Non ho adblock sul mio desktop. Il problema si verifica anche con Firefox, ma Microsoft Edge funziona tutto bene. Qualche idea?
harika
ciao ho creato un blog in wordpress ma la lingua del contenuto dei post è telugu. come posso cambiare lo stile del font del post in telugu?
Micky
Ciao,
Ho provato entrambi i metodi elencati in questo video, e ancora l'immagine della barra laterale non viene visualizzata affatto.
Avete qualche idea su come potrei risolvere questo problema?
Grazie!
Doma
Grazie, è stato rapido e diretto... molto utile.
MS Rahman
Voglio mostrare un'immagine predefinita quando non c'è nulla nel widget. Come posso fare?
Grazie
Krishna
C'è un modo per impostare l'immagine in modo che venga visualizzata solo sulla pagina iniziale?
Sara william
Grazie. Ci sto provando da tempo per caricare la mia foto profilo e ora posso farlo facilmente.
Anette
Grazie per averlo spiegato in passaggi semplici!
Rebecca Claxton
Grazie per essere sempre in cima alle ricerche casuali che faccio per cose di WordPress – e grazie per le informazioni utili adatte alle persone comuni che usano WP!
Supporto WPBeginner
Ciao Rebecca,
We are glad you find WPBeginner helpful
Don’t forget to join us on Twitter for more WordPress tips and tutorials.
Amministratore
Karthik Marripoodi
Grazie per aver scritto su questo in dettaglio. Voglio mettere i miei annunci nella sezione widget. Questo metodo si adatterà perfettamente alle mie esigenze. Ma ho solo un problema. Come aggiungere un'immagine diversa per ogni post del blog. C'è un modo per farlo?
Minhaz
ottimo post, adoro wpbeginner
Mark
Credo che il video dicesse "Alt tag". Quella non sarebbe la terminologia corretta – sarebbe l'Attributo Alt del tag.
Victoria
Adoro questo tutorial, tuttavia sono scettico nel scaricare il widget immagine perché dice che non è stato testato con la mia versione di Wordpress. Ci saranno aggiornamenti in arrivo o come viene testato con la mia versione di Wordpress?
Supporto WPBeginner
Ciao Victoria,
Ti preghiamo di consultare il nostro articolo su dovresti installare plugin non testati con la tua versione di WordPress.
Amministratore
melessa
Ciao, spero di non essermelo perso da qualche parte nei commenti, ma come si inserisce un'immagine circolare o ovale invece che quadrata per la sezione "chi sono" nella barra laterale? Sto usando Divi di Elegant Themes.
Supporto WPBeginner
Consulta la nostra guida su come aggiungere immagini gravatar rotonde in WordPress. L'articolo parla di gravatar ma puoi usare il CSS con qualsiasi immagine.
Amministratore
Rod
Ciao,
Hai idea del perché i punti elenco non vengano visualizzati nei widget della barra laterale nonostante abbia rimosso "list-style-type: none" dal file CSS e l'abbia sostituito con il seguente codice e ancora non funziona:
.widget ul li { list-style: circle }
Sam
Come posso rendere l'immagine un link cliccabile.
Grazie
David
wow! perfetto. Il testo visivo richiede troppo lavoro per una semplice immagine. Stavo cercando un plugin che facesse esattamente questo. grazie mille
Molly
Grazie, è esattamente quello di cui avevo bisogno, e l'hai reso così facile!
Supporto WPBeginner
Ciao Molly,
Glad you found it useful
You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
Amministratore
Sandra Wiese
Grazie mille – funziona perfettamente!
Supporto WPBeginner
Ciao Sandra,
We are glad you found it useful
You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
Amministratore
Jana
Ciao,
Ho un paio di domande. Innanzitutto, per qualche motivo ho difficoltà a installare il plugin Widget Image. Ho già installato plugin in passato, ma questo non riesco a farlo. Certo, sono un principiante e li ho aggiunti quasi un anno fa, quindi forse ho dimenticato qualcosa. Puoi darmi qualche consiglio?
Inoltre, che tu ci creda o no, sono riuscito a mettere un'immagine sul mio widget usando il codice HTML! (Sorpreso che potessi codificare, ma l'hai reso molto facile e comprensibile) L'unico problema che ho è che è a grandezza naturale e spero di avere delle miniature. Esiste un codice per questo? In tal caso, non ho bisogno di installare il plugin.
Grazie!
Supporto WPBeginner
Puoi creare un'immagine più piccola sul tuo computer usando qualsiasi strumento di editing di immagini e poi caricare quell'immagine.
Amministratore
James McAllister
Ho letto questo per cercare di aggiornare l'immagine che ho su un widget sul mio blog.
Siete sullo stesso pianeta del resto di noi? Date un'occhiata a quello che avete scritto – bisognerebbe essere un avvocato di Philadelphia incrociato con Steve Jobs per capire le istruzioni.
Comunque – torniamo a cercare di cambiare l'immagine, sono sicuro che il trucco è da qualche parte.
Marvis
Grazie mille per queste informazioni. Ma ho davvero bisogno di sapere come visualizzare gli annunci di Google nei miei post e anche nella barra laterale. Ho già un account AdSense approvato e ho generato il codice dell'annuncio. Ma il passo successivo da compiere è quello che non capisco. Ho bisogno di aiuto per favore.
Supporto WPBeginner
Dai un'occhiata alla nostra guida su come gestire gli annunci in WordPress con Adsanity.
Amministratore
Abbie
O ho trascurato molte cose di cui hai parlato o il sito è cambiato. Vedo un'opzione per un widget immagine che dici non esistere. Non vedo alcuna libreria multimediale o galleria in cui posso caricare un file immagine.
Quindi, dove carico il file in modo da poter ottenere un URL da inserire nel posto necessario sul modulo per configurare il widget immagine?
Paul
Carica nella tua libreria multimediale
Nikki
Grazie, è stato molto utile. il video avrebbe potuto essere un po' più lento
Luke
Grazie per l'aiuto! Sicuramente è più facile ottenere il plugin per il widget immagine.
manmohan
Mi è molto utile... grazie per questo post.
Ma ho una domanda
Erica
Ciao. So come inserire le immagini nella barra laterale, ma occupano troppo spazio, quindi sto cercando di creare una galleria cliccabile qui. Ottengo la piccola casella cliccabile, ma non vengono visualizzate immagini. Sono anche riuscito a fare una presentazione automatica, ma è molto distraente, quindi non la voglio. Voglio solo la galleria fotografica in cui si clicca per passare all'immagine successiva, ma non trovo nulla su come risolvere questo problema qui.
Supporto WPBeginner
Dai un'occhiata alla nostra guida come creare facilmente gallerie di immagini WordPress responsive con Envira.
Amministratore
Giulia
Ciao,
Sto riscontrando un problema nell'aggiunta di widget immagine. Quando provo ad aggiungerne uno nuovo (dopo averne anche eliminato uno) le modifiche non vengono salvate, la pagina smette di caricarsi e quando provo ad accedere al sito (amministratore e normale) dice che non è possibile connettersi al server – quindi in pratica il mio sito è inattivo. Ho riavviato il mio computer e installato gli aggiornamenti e questo ha risolto il problema la prima volta, ma quando ho provato ad aggiungere di nuovo il widget è successa la stessa cosa, tranne che il riavvio non sembra più aiutare!
Aiuto per favore! Lo apprezzerei molto!
Grazie in anticipo!
Gregor Egan
Ciao, grazie per questo, funziona benissimo. Ho una domanda; non voglio che la stessa immagine appaia su ogni pagina, quindi come faccio a limitarla a una pagina particolare in modo da poter utilizzare un'immagine diversa nelle pagine successive.
Cordiali saluti,
Gregor
Staff di WPBeginner
Grazie Lee, ci stiamo lavorando.
Lee
Thank you, the video is helpful but you zip through the dialogue so fast I had to hit pause, rewind pause, pause, repeat….many times. Please realize some of us are ABSOLUTE newbies on WordPress. Thanks for the great material…but slower would be more helpful.
Sheryl Anderson
Ho l'immagine nel widget – quello che voglio sapere è come puntare quel widget a un modulo di opt-in – come si aggiunge quel codice
Sultan Ayyaz
L'idea del widget immagine è davvero nuova e molto utile per aggiungere immagini in WordPress. Articolo molto utile.
Fiona
Volevo imparare a fare questo. Tempismo perfetto. Grazie!
chzumbrunnen
Un altro bel modo è usare il widget di testo ma con l'Editor TinyMCE (come viene usato per i post). C'è un plugin per questo (in realtà ce ne sono più di uno): https://wordpress.org/plugins/black-studio-tinymce-widget/