SOS WP
  • Blog
  • Risorse
  • Chi siamo
  • Corsi
  • Servizi
    • Creazione Siti Web & Supporto WP
    • Consulenze Professionali
    • Formazione via Skype
    • Richiedi Subito un Preventivo
  • Assistenza WordPress
  • Menu

Apri l'indice dei contenuti

  • Aggiungere immagini personalizzate nella sidebar con Image Widget
  • Aggiungere immagini alla sidebar manualmente
    • Imposta le dimensioni dell’immagine
    • Aggiungi un link all’immagine
    • Centra l’immagine

Categorie:

  • Ispirazione
  • Usare WordPress
  • Dominio e Hosting
  • Creare blog
  • Creare siti web
  • eCommerce
  • Temi
  • Plugin
  • SEO
  • Tutte

  • Creare siti multlingua
  • Copywriting
  • Dove trovare immagini
  • Email marketing
  • Guadagnare online
  • Varie

CATEGORIE

  • Ispirazione
  • Usare WordPress
  • Dominio e Hosting
  • Creare blog
  • Creare siti web
  • eCommerce
  • Temi
  • Plugin
  • SEO
  • Creare siti mulitlingua
  • Copywriting
  • Dove trovare immagini
  • Email marketing
  • Guadagnare online
  • Varie

Comincia qui per avere la soluzione al tuo problema

Background Icons
Come aggiungere immagini personalizzate alla sidebar
Sei qui:
  • Home /
  • Blog /
  • Come usare WordPress

Come aggiungere immagini personalizzate alla sidebar

Andrea Di Rocco 02 Marzo 2017
25

Apri l'indice dei contenuti

  • Aggiungere immagini personalizzate nella sidebar con Image Widget
  • Aggiungere immagini alla sidebar manualmente
    • Imposta le dimensioni dell’immagine
    • Aggiungi un link all’immagine
    • Centra l’immagine

Quante volte mi è stato chiesto come aggiungere immagini personalizzate nella sidebar? Tantissime!

Se ti stai chiedendo in questo momento come farlo, hai lo stesso dubbio della maggior parte degli utenti WordPress (e in questa guida troverai la soluzione che cerchi).

Il problema di fondo è che non esiste un widget nativo per aggiungere immagini personalizzate alla sidebar. C’è quello per aggiungere blocchi di testo, ma non uno specifico per le immagini.

Aggiungere foto e grafiche in quest’area del sito è senza dubbio molto utile. Per esempio, potresti inserire un banner, la tua foto, i loghi dei siti con cui collabori, eccetera.

Oggi ti spiegherò come aggiungere immagini personalizzate nella sidebar del tuo sito, sia con un metodo che prevede l’uso di plugin che manualmente (se hai a disposizione qualche minuto in più ti consiglio di approfondire questo secondo metodo che è comunque molto semplice).

Aggiungere immagini personalizzate nella sidebar con Image Widget

Questo plugin è molto utile per creare widget contenenti foto, loghi o altre grafiche.

Installato Image Widget, quando navighi in Aspetto > Widget trovi un nuovo widget chiamato “Image Widget”.

Questo widget è estremamente semplice da usare. Basta selezionare l’immagine dalla libreria media o caricarne una nuova. Poi, appariranno i campi da compilare:

  • Titolo: il titolo dell’immagine:
  • Testo alternativo: l’attributo alt;
  • Related: l’attributo rel del link;
  • Didascalia: che apparirà al di sotto dell’immagine;
  • Link: qui inserisci un URL, se vuoi che ci sia un collegamento ipertestuale;
  • Link title: l’attributo title del link;
  • ID del link: l’attributo ID se hai bisogno di identificarlo.

Infine, puoi decidere se aprire il link nella stessa finestra o in una nuova, e stabilire le dimensioni e l’allineamento dell’immagine.

Quando salvi le impostazioni del widget l’immagine è automaticamente visibile nella sidebar.

Attenzione! Aggiungere immagini personalizzate alla sidebar con i widget è veramente molto semplice. Se però vuoi aggiungere solo una o due immagini e prevedi di non aggiornarle per un periodo di tempo abbastanza lungo, ti consiglio di usare la soluzione senza plugin descritta nei paragrafi che seguono.

Il motivo è semplice: è sempre meglio cercare di limitare il numero di plugin installati sul tuo sito. Ogni strumento va infatti ad appesantire leggermente il server ed aumenta anche la possibilità che ci siano eventuali problemi di compatibilità con gli aggiornamenti futuri.

Riassumendo, ti suggerisco di usare i plugin solo se vuoi inserire numerose immagini e/o aggiornarle frequentemente.

Aggiungere immagini alla sidebar manualmente

Esiste un metodo per aggiungere immagini personalizzate alla sidebar senza installare plugin che è altrettanto semplice. Ti basta solo familiarizzarti con alcuni brevi codici HTML.

Per prima cosa, carica l’immagine che vuoi usare all’interno della Libreria Media. Se riscontri dei problemi, potrai risolvere l’errore HTTP durante il caricamento di immagini in maniera molto semplice. Fatto questo, trova l’immagine all’interno della Libreria e clicca Modifica.

Nella schermata che si apre, sulla destra trovi un campo chiamato “URL del file”. Questo link è effettivamente la posizione del file all’interno del server; prendine nota perché ci servirà.

Ora naviga in Aspetto > Widget. Qui aggiungi alla sidebar un widget di testo (questo tipo di widget è presente per default su tutti i siti WordPress).

All’interno del widget, incolla questo codice, modificandolo in modo che vi sia all’interno l’url della tua immagine.

<img src="INCOLLA QUI L’URL DELL’IMMAGINE CHE HAI COPIATO PRECEDENTEMENTE">

Quando salvi il widget, l’immagine è immediatamente visibile nella sidebar.

Sempre usando codici HTML puoi personalizzare l’immagine ulteriormente:

Imposta le dimensioni dell’immagine

Se vuoi ridimensionare il file, puoi impostarne altezza e larghezza inserendo prima del > di chiusura: width=”125″ height=”125″ (questo è un esempio dove 125 è la misura in pixel).

Quindi, il risultato finale è:

<img src="INCOLLA QUI L’URL DELL’IMMAGINE CHE HAI COPIATO PRECEDENTEMENTE" width="125" height="125">

In questo caso l’immagine sarebbe ridimensionata in modo da misurare 125 pixel sia di larghezza che di altezza.

Vuoi capire meglio il funzionamento dei codici HTML?

Leggi la guida!

Aggiungi un link all’immagine

Un altro accorgimento che puoi adottare per personalizzare le tue immagini consiste nel renderle cliccabili con un link a tua scelta. Per farlo, ti basta aggiungere il codice

<a href=”INSERISCI QUI IL LINK DELLA PAGINA DI DESTINAZIONE”> prima del codice contenente l’URL del file media e </a> alla fine.

Questo è il risultato finale:

<a href="INSERISCI QUI IL LINK DELLA PAGINA DI DESTINAZIONE"><img src="INCOLLA QUI L'URL DELL'IMMAGINE" width="125" height="125"></a>

Se vuoi fare un passo extra e far sì che quando l’utente clicca l’immagine il link si apra su una nuova scheda, aggiungi target=”_blank” rel=”noopener noreferrer” dopo il link di destinazione. In questo modo:

<a href="INSERISCI QUI IL LINK DELLA PAGINA DI DESTINAZIONE"  target="_blank" rel="noopener noreferrer"><img src="INCOLLA QUI L'URL DELL'IMMAGINE" width="125" height="125"></a>

Centra l’immagine

Se la tua immagine non è della stessa larghezza della sidebar, nella maggior parte dei casi è utile centrarla per renderla visivamente più piacevole.

Per farlo, ti basta aggiungere il codice <div style=”text-align: center”> prima dei codici relativi al link esterno ed al file media, e </div> alla fine. Questo è il risultato finale:

<div style="text-align: center"><a href="INSERISCI QUI IL LINK DELLA PAGINA DI DESTINAZIONE"  target="_blank" rel="noopener noreferrer"><img src="INCOLLA QUI L’URL DELL’IMMAGINE CHE HAI COPIATO PRECEDENTEMENTE" width="125" height="125" ></a></div>

Se non vuoi rendere la tua immagine cliccabile, ma comunque centrata, puoi usare lo stesso codice omettendo quello relativo al link esterno. L’importante è che il tag di apertura e quello di chiusura circondino il codice usato per inserire l’immagine. In questo modo:

<div style="text-align: center"><img src="INCOLLA QUI L’URL DELL’IMMAGINE CHE HAI COPIATO PRECEDENTEMENTE" width="125" height="125" ></div>

Quando inizi a riconoscere la struttura di questi codici, personalizzarli diventa molto semplice.

Ti consiglio di prenderne nota ed iniziare a sperimentare; vedrai che dopo un po’ di pratica non avrai bisogno del plugin!

Hosting WordPress

Conclusione

Nella guida di oggi abbiamo visto due metodi per aggiungere immagini personalizzate alla sidebar: uno che prevede l’utilizzo di plugin ed uno manuale.

Come ho già scritto nel post, ti consiglio di fare pratica con il metodo manuale, così da non aver bisogno del plugin ed evitare di aggiungere strumenti non necessari al tuo sito.

Come al solito, ora ti invito a lasciare tutti i tuoi commenti e domande qui sotto. Questo è un argomento di interesse per molti utenti, quindi, non essere timido e per qualunque dubbio lascia pure un messaggio, ti risponderemo al più presto!

Tags: design-sitoImmaginiMigliori PluginSidebarWidget
Lascia un Commento

Andrea Di Rocco

Fondatore di SOS WP, Autore

First Badge Item Second Badge Item Third Badge Item
La mia passione per WordPress mi ha portato negli ultimi 10 anni a voler aiutare sempre più persone a creare blog e siti web in WordPress in completa autonomia. Spero che troverai utili le oltre 650 guide su WordPress e sulla SEO che ho pubblicato su questo blog e se ne hai voglia ti invito a leggere la mia storia cliccando sul pulsante qui sotto.
Leggi la mia storia
Corso WordPress di SOS WP
Ti potrebbe interessare:
Come creare una landing page
Come creare landing page12 September 2018
Come aggiungere codice dentro il tag head
Come aggiungere codice dentro il tag head su WordPress06 July 2017
Guida a NextGEN Gallery
La guida in italiano a NextGEN Gallery per creare gallerie di immagini su WordPress07 March 2018
Come modificare il font del tuo sito WordPress
Come modificare il font del tuo sito WordPress13 August 2018
Personalizzare lo stile dei widget con il plugin Widget CSS Classes
Personalizzare lo stile dei widget con il plugin Widget CSS Classes18 March 2021
Come personalizzare la pagina login di WordPress
Come personalizzare la pagina login di WordPress15 December 2020
25 commenti

Lascia un commento
  1. roberta
    roberta dice:
    1 Ottobre 2020 alle 10:40 am

    non ho capito niente. voglio capire x fare mettere delle foto, meglio loghi su sidecar, ma dalla tua spiegazione manuale non si capisce i passaggi che devo fare

    grazie

    Rispondi
    • SOS WP Team
      SOS WP Team dice:
      1 Ottobre 2020 alle 11:48 am

      Ciao Roberta, puoi aggiungere delle immagini sulla sidebar seguendo i passaggi suggeriti nella guida. Certamente puoi inserire dei loghi! Cosa non capisci nello specifico?

      Rispondi
  2. Federico
    Federico dice:
    3 Marzo 2020 alle 12:35 pm

    Ciao Andrea, vorrei modificare la mia colonna di sinistra in modo che il banner segua la pagina dalla metà in poi come su questo sito che ho visto https://www.annuncitoday.it/immobili per caso esistono dei plugin ? grazie mille!

    Rispondi
    • SOS WP Team
      SOS WP Team dice:
      10 Marzo 2020 alle 10:23 am

      Ciao Federico, prima di tutto dai un’occhiata alle impostazioni del tuo tema, perché alcuni possono avere questo tipo di sidebar già nelle loro opzioni. Se non c’è, puoi provare ad usare questo comodo plugin: https://wordpress.org/plugins/mystickysidebar/. Un saluto!

      Rispondi
  3. Alberto
    Alberto dice:
    11 Ottobre 2018 alle 11:37 am

    Ciao,

    sto cercando un plugin o un codice che mette la parola “New” obliqua sull’anteprima delle nuove immagini.

    Rispondi
    • Team
      Team dice:
      11 Ottobre 2018 alle 3:04 pm

      Ciao, non conosciamo un plugin che faccia questo. Stai usando già un plugin per le immagini sul tuo sito web?

      Rispondi
      • Alberto
        Alberto dice:
        11 Ottobre 2018 alle 3:46 pm

        Si qualche plugin lo sto usando, ma se avevo un codice da mettere nel child era meglio.

        Rispondi
  4. Andrea Cusati
    Andrea Cusati dice:
    31 Gennaio 2018 alle 7:01 am

    Ciao Chiara.
    Grazie dell’articolo.

    Vorrei ridurre la distanza dal bordo superiore e di sinistra per il logo a piè pagina, c’è un codice html per questo da inserire nell’immagine?

    Rispondi
    • Team
      Team dice:
      31 Gennaio 2018 alle 10:04 am

      Ciao Andrea, serve una modifica al padding, quindi al CSS (foglio di stile del tema). Ti consigliamo in merito la lettura di questa guida dedicata https://sos-wp.it/guida-css/.

      Rispondi
  5. sonia
    sonia dice:
    21 Maggio 2017 alle 7:47 pm

    Ciao, io ho un problema con Fixed Widget: non riesco a farlo funzionare correttamente con il tema Enfold, il che è strano, dato che se non sbaglio è lo stesso che utilizzate voi. Esiste altro plugin con la stessa funzione?
    Oppure c’è una procedura particolare da seguire? Grazie

    Rispondi
    • Team
      Team dice:
      21 Maggio 2017 alle 9:02 pm

      Ciao Sonia, hai provato questo plugin https://it.wordpress.org/plugins/fixed-widget-area/?

      Rispondi
      • sonia
        sonia dice:
        22 Maggio 2017 alle 9:52 am

        Ciao Andrea, io avrei bisogno di fissare la sidebar quando il visitatore scorre in basso l’articolo. Il plugin che mi hai segnalato non sembra risolvere questa esigenza ma probabilmente mi ero spiegata male io.
        Quale puoi consigliarmi? Grazie

        Rispondi
        • Team
          Team dice:
          22 Maggio 2017 alle 10:05 am

          Ciao Sonia, prova a usare di nuovo il plugin indicato in questa guida: https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/. Disattiva gli altri plugin, e vedi se funziona a dovere. Facci sapere, un saluto!

          Rispondi
          • sonia
            sonia dice:
            22 Maggio 2017 alle 10:41 am

            Ciao Andrea, grazie.
            Ho provato a reinstallarlo. In effetti ho notato che in alcune pagine funziona, in altre no. Non ho idea però quale possa essere la ragione.

          • Team
            Team dice:
            22 Maggio 2017 alle 1:09 pm

            Hai disattivato gli altri plugin?

  6. Mara
    Mara dice:
    4 Maggio 2017 alle 9:48 pm

    Buongiorno Chiara, grazie per l’articolo, io sto cercando di capire come inserire nel sito un’immagine tridimensionale e in piccolo di un libro, puoi aiutarmi? Grazie.

    Rispondi
    • Team
      Team dice:
      5 Maggio 2017 alle 1:59 pm

      Ciao Mara, hai già provato a seguire la guida? Un saluto!

      Rispondi
  7. Raffaela
    Raffaela dice:
    11 Marzo 2017 alle 11:29 am

    Salve, molto interessante e davvero ben spiegato. Grazie mille, in realtà il plugin immagini che sto usando non viene aggiornato da un po’, pertanto questa guida mi è utilissimo, essendo alle prime armi. Vorrei chiederti anche un aiuto per inserire il testo alternativo e Attributo title dell’immagine. Ti ringrazio in anticipo per la disponibilità.

    Rispondi
    • Team
      Team dice:
      11 Marzo 2017 alle 12:10 pm

      Ciao Raffaella, se mastichi un po’ di inglese, consiglio questa guida per Alt e testo alternativo alle immagini: https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/. Fammi sapere se ti è utile, un saluto!

      Rispondi
  8. Agnieszka
    Agnieszka dice:
    21 Novembre 2016 alle 4:25 pm

    Aggiungo che per creare un’immagine personalizzata, anche con la scritta per invitare le persone a fare qualcosa (per esempio a iscriversi alla newsletter) si possono utilizzare i programmi grafici on line come Canva :-). L’effetto visivo è molto piacevole.

    Rispondi
    • Team
      Team dice:
      21 Novembre 2016 alle 4:32 pm

      Concordiamo 😉

      Rispondi
  9. marta
    marta dice:
    7 Ottobre 2016 alle 12:01 am

    buonasera Chiara, ho trovato molto utile la tua spiegazione, ma ho un problema. ho utilizzato il metodo manuale ed ho inserito più di un’immagine nella sidebar seguendo le tue indicazioni. fino a due immagini, non ci sono problemi, quando inserisco la terza immagine e provo a ricaricare la pagina, il corpo centrale diventa tutto nero e sparisce anche la side bar… il codice html è corretto perchè ho provato a caricare solo quell’immagine e funziona…ma se la metto di seguito alle altre due mi da questo problema…cosa mi consigli?

    Rispondi
  10. Goffredo
    Goffredo dice:
    19 Agosto 2016 alle 12:52 pm

    Grazie Chiara, spiegazione molto chiara , ne ho fatto uso e funziona perfettamente.

    Rispondi
  11. Oriano
    Oriano dice:
    17 Dicembre 2015 alle 3:50 pm

    Grazie Chiara, molto utile e ben spiegato, ne ho fatto tesoro

    Rispondi
    • Chiara Buzzi
      Chiara Buzzi dice:
      21 Dicembre 2015 alle 10:59 am

      Ciao Oriano! Graaie a te per il commento; continua a seguirci e se hai domande non esitare a scriverci. Chiara

      Rispondi

Domande? Lascia un commento!

Il team di SOS WP risponde tutti i giorni. Unisciti anche tu alla conversazione…

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Andrea Di Rocco - Autore di SOS WP

Benvenuto!

Sono Andrea Di Rocco, autore di SOS WP, il blog italiano su WordPress che contiene oltre 650 guide su come creare blog e come creare siti web che generano traffico, contatti e vendite! Oltre al blog, forniamo:

Assistenza WordPressAssistenza WordPress

Creazione siti webCreazione siti web

Corso WordPressCorso WordPress

Servizi

  • Creazione blog professionali
  • Realizzazione siti web
  • Messa a norma GDPR
  • Consulenza SEO
  • Formazione WordPress
  • Chiedi un preventivo

LINK RAPIDI

  • Scopri TUTTO SEO™
  • Entra in Area Corsi
  • Gruppi Facebook
  • Testimonianze
  • Contattaci
  • Lavora con noi

Vuoi creare un blog? Non sai come muoverti nel mondo di WordPress? Desideri essere primo su Google con il tuo sito web?

Richiedi Preventivo

  • Safe Payment IconPagamenti sicuri con:
    Maestro IconVisa IconMastercard IconPaypal Icon e altri…
  • Support IconSupporto continuo dal Lunedì al Venerdì 08:30 – 18:30
SOS WP
  • Chi Siamo
  • Chi è Andrea Di Rocco
  • TUTTO SEO™
  • TrustPilot
  • Privacy e Cookie Policy
  • Facebook
  • Youtube
  • Linkedin
 

© Copyright 2012-2021 | SOS WP™ Metro Effort Limited. Tutti i diritti sono riservati.

 
Scorrere verso l’alto
SOS WP utilizza i cookie per migliorare la tua esperienza: ACCETTOImpostazioni
Privacy & Cookies Policy

Panoramica sulla privacy

Quando si visita qualsiasi sito web, questo può memorizzare o recuperare informazioni sul tuo browser, in gran parte sotto forma di cookie. Queste informazioni potrebbero essere su di te, le tue preferenze o il tuo dispositivo e sono utilizzate in gran parte per far funzionare il sito come te lo aspetteresti. Le informazioni di solito non ti identificano direttamente, ma possono fornire un'esperienza web più personalizzata. Poiché rispettiamo il tuo diritto alla privacy, puoi scegliere di non consentire alcuni tipi di cookie. Clicca sulle intestazioni delle diverse categorie per scoprire di più e modificare le impostazioni predefinite. Tuttavia, il bloccaggio di alcuni tipi di cookie può avere impatto sulla tua esperienza del sito e dei servizi che siamo in grado di offrire.
Maggiori informazioni
Cookie di terze parti
Salva e accetta