Salta al contenuto
Nota bene: la traduzione in italiano di questo articolo è fornita solo per comodità. La traduzione viene creata automaticamente tramite un software di traduzione e potrebbe non essere stata revisionata. Pertanto, la versione inglese di questo articolo deve essere considerata come la versione di governo contenente le informazioni più recenti. È possibile accedervi qui.

Utilizzare le immagini nei contenuti di HubSpot

Ultimo aggiornamento: ottobre 30, 2023

Disponibile con uno qualsiasi dei seguenti abbonamenti, tranne dove indicato:

Tutti i prodotti e i piani

È possibile aggiungere immagini a moduli di testo ricco o a moduli di immagini nei contenuti di HubSpot. I moduli rich text supportano più tipi di contenuto (immagini, testo, CTA, ecc.), mentre ogni modulo immagine può contenere una sola immagine.

Nota bene: i moduli di testo e i moduli di testo ricco personalizzati nell'editor di email drag and drop non possono contenere immagini.

Aggiungere immagini

  • Navigate nel vostro contenuto:

    • Pagine del sito web: Nel tuo account HubSpot, vai a Marketing > Sito web > Pagine del sito web.
    • Pagine di destinazione: Nel tuo account HubSpot, vai a Marketing > Landing page.
    • Blog: Nel tuo account HubSpot, vai a Marketing > Sito web > Blog.
    • Base di conoscenza: Nel tuo account HubSpot, vai a Servizio > Knowledge Base.
    • Email: Nel tuo account HubSpot, vai a Marketing > E-mail.
  • Passare il mouse sul contenuto e fare clic su Modifica.

Nota bene: solo i file immagine.png,.ico,.bmp,.jpg e.gif possono essere aggiunti alle e-mail di marketing.


  • Inserire un'immagine:
    • Per aggiungere un'immagine a un modulo di testo ricco, fare clic sul modulo di testo ricco, quindi fare clic sull'icona insertImage ici sulla barra degli strumenti del testo ricco.
    • Per aggiungere un'immagine a un modulo immagine, fare clic sul modulo immagine, quindi fare clic su Sostituisci nell'editor della barra laterale sopra l'immagine segnaposto.
  • Selezionare un'immagine:
    • Per inserire un'immagine esistente, fare clic sull'immagine nel pannello di destra.
    • Per caricare una nuova immagine dal computer o tramite un file URL, fare clic su Aggiungi immagine nel pannello di destra. Per creare una nuova immagine con gli strumenti di modifica di Canva, fare clic su Design with Canva. Quindi fare clic sull'immagine per inserirla.

Prima di inserire un'immagine, è possibile ottimizzarla per il tempo di caricamento o la risoluzione facendo clic su Dettagli dell'immagine nel pannello di destra. Fare quindi clic sulmenu a discesa Ottimizzazione immagine e selezionare un'opzione di ottimizzazione:

    • Alta: l'immagine verrà caricata a una risoluzione più alta, ma con un tempo di caricamento maggiore.
    • Predefinita: l'immagine verrà ottimizzata sia per la risoluzione che per il tempo di caricamento.
    • Bassa: l'immagine verrà caricata a una risoluzione inferiore, ma con un tempo di caricamento ridotto. Per saperne di più sull'ottimizzazione delle pagine per il tempo di caricamento , consultare la nostra documentazione per sviluppatori.
set-image-optimization-for-rich-text-content

Modifica delle immagini

Una volta aggiunta un'immagine al contenuto, è possibile modificarne le dimensioni, aggiungere un testo alt, aggiungere un link o impostare il comportamento di caricamento.

Modificare un'immagine in un modulo di testo ricco

  • Navigate nel vostro contenuto:

    • Pagine del sito web: Nel tuo account HubSpot, vai a Marketing > Sito web > Pagine del sito web.
    • Pagine di destinazione: Nel tuo account HubSpot, vai a Marketing > Landing page.
    • Blog: Nel tuo account HubSpot, vai a Marketing > Sito web > Blog.
    • Base di conoscenza: Nel tuo account HubSpot, vai a Servizio > Knowledge Base.
    • Email: Nel tuo account HubSpot, vai a Marketing > E-mail.
  • Passare il mouse sul contenuto e fare clic su Modifica.
  • Nell'editor dei contenuti, fare clic sull'immagine per visualizzare la barra degli strumenti di modifica delle immagini.
  • Modificare l'immagine:
    • Per regolare il modo in cui il testo si avvolge intorno all'immagine, fare clic sulle icone di allineamento inline.
    • Per regolare le dimensioni dell'immagine, fare clic sulle frecce di larghezza e altezza o inserire un valore in pixel.
    • Per regolare il padding intorno all'immagine, fare clic sul menu a discesa Spaziatura e inserire i valori in pixel intorno ai bordi dell'icona dell'immagine.
  • Per rimuovere un'immagine da un modulo di testo ricco, fare clic sull'immagine, quindi fare clic sull'icona del cestino delete .
  • Per sostituire un'immagine in un modulo di testo ricco, fare clic sull'immagine, quindi sull'icona replace replreplace e aggiungere una nuova immagine.
edit-image-in-rich-text-module
  • Per collegare l'immagine, aggiungere un testo alt o impostare il comportamento di caricamento, fare clic sull'immagine, quindi fare clic sull'icona della matita edit:
    • Per aggiungere un collegamento all'immagine, fare clic sulmenu a discesa Collegamento a nellacasella a comparsa e selezionare una categoria di collegamento. Nel campo sottostante, inserire la destinazione del collegamento. Per saperne di più sui diversi tipi di link.
    • Nel campo Testo alt , inserire il testo per descrivere ai motori di ricerca e agli screen reader il contenuto dell'immagine. È possibile aggiungere il testo alt alle immagini anche nello strumento file. L'aggiunta del testo alt migliorerà l' accessibilità e la SEO del vostro sito. Per saperne di più sull'accessibilità dei siti web, consultate la nostra documentazione per sviluppatori.

Nota bene: l'aggiunta del testo alt a un'immagine non aggiunge il testo del titolo. Il testo alt influisce sul posizionamento nei motori di ricerca e sull'accessibilità, mentre il testo del titolo appare quando un visitatore passa il mouse sull'immagine.

  • Per impostare il comportamento di caricamento dell'immagine e personalizzare il tipo di collegamento dell'immagine per i motori di ricerca, fare clic su Avanzate.
    • Per impostare il comportamento di caricamento delle immagini, fare clic sul menu a discesa Caricamento immagine e selezionare un'opzione:
      • Pigro: l'immagine viene caricata solo quando il visitatore raggiunge quella parte della pagina. Questo riduce il tempo di caricamento della pagina e migliora la SEO. Per impostazione predefinita, le immagini vengono caricate con questa impostazione.
      • Browser default: il comportamento di caricamento dell'immagine è determinato dalle impostazioni del browser del visitatore.
      • Impaziente: l'immagine viene caricata non appena la pagina viene caricata.
    • Per personalizzare il tipo di collegamento all'immagine, nella sezione Tipo di collegamento , selezionare uno o più attributi:
      • Regolare: questo link non è sponsorizzato.
      • No follow: questo link non è associato al vostro sito web.
      • Sponsorizzato: questo link è un link sponsorizzato o un annuncio.
      • Contenuto generato dall'utente: questo link porta a un contenuto generato dall'utente, come un commento su un blog o una discussione su un forum.
  • Fare clic su Applica per applicare le modifiche all'immagine.

add-link-and-alt-text-to-rich-text-image

  • Per rendere effettive le modifiche, fare clic su Pubblica o Aggiorna in alto a destra, quindi su Pubblica o Aggiorna nella finestra di dialogo.

Modificare un'immagine in un modulo immagine

  • Passare al contenuto:

    • Pagine del sito web: Nel tuo account HubSpot, vai a Marketing > Sito web > Pagine del sito web.
    • Pagine di destinazione: Nel tuo account HubSpot, vai a Marketing > Landing page.
    • Blog: Nel tuo account HubSpot, vai a Marketing > Sito web > Blog.
    • Email: Nel tuo account HubSpot, vai a Marketing > E-mail.
  • Passare il mouse sul contenuto e fare clic su Modifica.
  • Nell'editor dei contenuti, fare clic sul modulo delle immagini.
  • Per rimuovere l'immagine corrente, fare clic su Rimuovi nella sezione Immagine dell'editor della barra laterale. Questa operazione rimuoverà l'immagine corrente dal modulo immagine, ma non rimuoverà il modulo dalla pagina.
  • Per sostituire l'immagine corrente, fare clic su Sostituisci nella sezione Immagine dell'editor della barra laterale, quindi aggiungere una nuova immagine.
  • Nel campo Testo alt , inserire il testo per descrivere ai motori di ricerca e agli screen reader il contenuto dell'immagine. È possibile aggiungere il testo alt alle immagini anche nello strumento file. L'aggiunta del testo alt migliorerà l' accessibilità e la SEO del sito. Per saperne di più sull'accessibilità dei siti web, consultare la nostra documentazione per sviluppatori.

Nota bene: l'aggiunta del testo alt a un'immagine non aggiunge il testo del titolo. Il testo alt influisce sul posizionamento nei motori di ricerca e sull'accessibilità, mentre il testo del titolo appare quando un visitatore passa il mouse sull'immagine.

replace-image
  • Per impostare le dimensioni dell'immagine su diversi dispositivi, fare clic sul menu a discesa Dimensioni e selezionare un' opzione:
    • Adatta automaticamente: l'immagine si ridimensiona per adattarsi al dispositivo su cui viene visualizzata.
    • Altezza e larghezza esatte: l'immagine verrà visualizzata con le stesse dimensioni su tutti i dispositivi.
  • Per impostare un limite alle dimensioni dell'immagine, fare clic sul menu a discesa Dimensione massima e selezionare un'opzione :
    • Dimensione originale dell'immagine: l'immagine non verrà mai visualizzata più grande della sua dimensione originale.
    • Personalizzata: l'immagine non apparirà mai più grande di una larghezza e un'altezza specifiche impostate nei campi Larghezza e Altezza.
  • Per impostare il comportamento di caricamento dell'immagine, fare clic sul menu a discesa Caricamento immagine e selezionare un'opzione:
    • Browser default: il comportamento di caricamento dell'immagine è determinato dalle impostazioni del browser del visitatore.
    • Pigro: l'immagine viene caricata solo quando il visitatore raggiunge quella parte della pagina. Questo riduce il tempo di caricamento della pagina e migliora la SEO. Per impostazione predefinita, le immagini vengono caricate con questa impostazione.
    • Impaziente: l'immagine viene caricata il prima possibile.
  • Per aggiungere un link all'immagine, inserire un URL di destinazione nel campo Link (opzionale). Selezionare la casella di controllo Apri link in una nuova scheda per indirizzare il visitatore all'URL di destinazione in una nuova scheda del browser.
set-image-size-and-loading-options
  • Per rendere effettive le modifiche, fare clic su Pubblica o Aggiorna in alto a destra.

L'articolo è stato utile?
Questo modulo viene utilizzato solo per il feedback della documentazione. Scopri come ottenere assistenza con HubSpot.