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.
Landing Pages

Utilizzare le immagini nei contenuti di HubSpot

Ultimo aggiornamento: settembre 13, 2022

Si applica a:

Marketing Hub Professional, Enterprise
CMS Hub Professional, Enterprise
Legacy Marketing Hub Basic

È 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, naviga su Marketing > Sito web > Pagine del sito web.
    • Pagine di destinazione: Nel tuo account HubSpot, naviga su Marketing > Landing page.
    • Blog: Nel tuo account HubSpot, naviga su Marketing > Sito web > Blog.
    • Base di conoscenza: Nel tuo account HubSpot, naviga su Service > Knowledge Base.
    • Email: Nel tuo account HubSpot, naviga su 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 sull'icona insertImage iciimage nella barra degli strumenti del testo ricco.
    • Per aggiungere un'immagine a un modulo immagine, fate clic sul modulo immagine e poi 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 Progetta con 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. Quindi fare 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 rich text

  • Navigare nel contenuto:

    • Pagine del sito web: Nel tuo account HubSpot, naviga su Marketing > Sito web > Pagine del sito web.
    • Pagine di destinazione: Nel tuo account HubSpot, naviga su Marketing > Landing page.
    • Blog: Nel tuo account HubSpot, naviga su Marketing > Sito web > Blog.
    • Base di conoscenza: Nel tuo account HubSpot, naviga su Service > Knowledge Base.
    • Email: Nel tuo account HubSpot, naviga su 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 in linea.
    • Per regolare le dimensioni dell'immagine, fare clic sullefrecce di larghezza e altezza o inserire un valore in pixel.
    • Per regolare il padding attorno all'immagine, fare clic sul menu a discesa Spaziatura , quindi immettere i valori in pixel attorno ai bordi dell'icona dell'immagine.
  • Per rimuovere un'immagine da un modulo di testo ricco, fare clic sull'immagine e poi sull'icona del cestino.
  • Per sostituire un'immagine in un modulo di testo ricco, fare clic sull'immagine, quindi sull'icona sostituisci 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 permodificarla:
    • 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 link. Per saperne di più sui diversi tipi di link.
    • Nel campo del testo Alt , inserire un testo che descriva ai motori di ricerca e agli screen reader il contenuto dell'immagine. Questo migliorerà l' accessibilità e la SEO del vostro 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 nonnonaggiungere il testo del titolo. Il testo alt influisce sul posizionamento nei motori di ricerca e sull'accessibilità, mentre il testo del titolo appare quando il 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 immagini 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.
      • Impaziente: l'immagine viene caricata non appena la pagina viene caricata.
      • Browser default: il comportamento di caricamento dell'immagine è determinato dalle impostazioni del browser del visitatore.
    • Per personalizzare il tipo di link all'immagine, nella sezione Tipo di link , 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

  • In alto a destra dell'editor di contenuti, fare clic su Aggiorna o Pubblica per rendere effettive le modifiche.

Modificare un'immagine in un modulo immagine

  • Passare al contenuto:

    • Pagine del sito web: Nel tuo account HubSpot, naviga su Marketing > Sito web > Pagine del sito web.
    • Pagine di destinazione: Nel tuo account HubSpot, naviga su Marketing > Landing page.
    • Blog: Nel tuo account HubSpot, naviga su Marketing > Sito web > Blog.
    • Email: Nel tuo account HubSpot, naviga su 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 del testo Alt , inserire un testo che descriva ai motori di ricerca e agli screen reader il contenuto dell'immagine. Questo migliorerà l' accessibilità e la SEO del vostro sito. Per saperne di più sull'accessibilità dei siti web, consultare la nostra documentazione per gli sviluppatori .

Nota bene: l'aggiunta del testo alt a un'immagine nonnonaggiungere 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-or-remove-image-in-image-module
  • Imposta le dimensioni dell'immagine. È possibile impostare le dimensioni automaticamente o impostando un'altezza e una larghezza personalizzate:
    • Adattamento automatico: 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.
  • Impostare una dimensione massima:
    • Dimensione originale dell'immagine: l'immagine non verrà mai visualizzata più grande della sua dimensione originale.
    • Personalizzata: l'immagine non verrà mai visualizzata più grande di una larghezza e un'altezza specifiche impostate nei campi Larghezza e Altezza.
  • Per impostare il comportamento di caricamento delle immagini, fare clic sul menu a discesa Caricamento immagine e selezionare un'opzione:
    • Pigro: l'immagine verrà 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.
  • 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-size-link-and-loading-in-an-image-module
  • In alto a destra dell'editor di contenuti, fare clic su Aggiorna o Pubblica per rendere effettive le modifiche.
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.