Salta al contenuto
Nota bene: la traduzione in olandese 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 nel contenuto di HubSpot

Ultimo aggiornamento: agosto 30, 2021

Si applica a:

Marketing Hub Professional, Enterprisee
CMS Hub Professional, Enterprisee
Legacy Marketing Hub Basic

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

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

Aggiungere immagini

  • Naviga al tuo 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.
    • Knowledge Base: Nel tuo account HubSpot, naviga su Servizi > Knowledge Base.
    • Email: Nel tuo account HubSpot, naviga su Marketing > E-mail.
  • Passa sopra il tuo contenuto e clicca su Modifica.

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


  • Inserisci un'immagine:
    • Per aggiungere un'immagine a un modulo rich text, clicca sul modulo rich text, poi clicca sull'icona insertImage iciimagesulla barra degli strumenti rich text.
    • Per aggiungere un'immagine a un modulo immagine, clicca sulmodulo immagine, poi clicca su Replacenell'editor della barra laterale sopra l'immagine segnaposto.
  • Seleziona un'immagine:
    • Per inserire un'immagine esistente, clicca sull'immagine nel pannello di destra.
    • Per caricare una nuova immagine dal tuo computer o tramite l'URL del file, clicca su Add image nel pannello di destra. Per creare una nuova immagine con Strumenti di modifica di Canvaclicca su Progetta con Canva. Poi clicca sull'immagine per inserirla.

Prima di inserire un'immagine, puoi ottimizzare l'immagine per il tempo di caricamento o la risoluzione cliccando su Dettagli sull'immagine nel pannello di destra. Poi clicca sulmenu a tendina Ottimizzazione dell'immaginee seleziona un'opzione di ottimizzazione:

    • Alta: l'immagine verrà caricata ad una risoluzione più alta, ma con un tempo di caricamento maggiore.
    • Default: l'immagine sarà 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 inferiore. Scopri di più sull'ottimizzazione delle pagine per il tempo di caricamento nella nostra documentazione per gli sviluppatori.
set-image-optimization-for-rich-text-content

Modifica le immagini

Una volta che hai aggiunto un'immagine al tuo contenuto, puoi modificarne le dimensioni, aggiungere un testo alt, aggiungere un link o impostare il suo comportamento di caricamento.

Modifica un'immagine in un modulo rich text

  • Naviga al tuo contenuto:

    • Website Pages: 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.
    • Knowledge Base: Nel tuo account HubSpot, naviga su Servizi > Knowledge Base.
    • Email: Nel tuo account HubSpot, naviga su Marketing > E-mail.
  • Passare il mouse sul contenuto e fare clic su Modifica.
  • Nell'editor del contenuto, fai clic sull'immagine per visualizzare la barra degli strumenti di modifica dell'immagine.
  • Modifica l'immagine:
    • Per regolare il modo in cui il testo si avvolge intorno all'immagine, fai clic sulle icone di allineamento in linea.
    • Per regolare ledimensioni dell'immagine,fai clic sullefrecce dilarghezzae altezza o inserisci un valore in pixel.
    • Per regolare il padding intorno all'immagine, fai clic sul menu a discesa Spacing , quindi inserisci valori in pixel intorno ai bordi dell'icona dell'immagine.
  • Per rimuovere un'immagine da un modulo rich text, fai clic sull'immagine e poi sull'iconadel cestino.
  • Per sostituire un'immagine in un modulo rich text, clicca sull'immagine, poi clicca sull'iconareplace replreplacee aggiungi una nuova immagine.
edit-image-in-rich-text-module
  • Per collegare l'immagine, aggiungere il testo alt, o impostare il comportamento di caricamento, fai clic sull'immagine, quindi fai clic sull'icona della matita modifica:
    • Per aggiungere un collegamento all'immagine, clicca sulmenu a discesa Link tonella casella a comparsa e seleziona una categoria di collegamento .Nel campo sottostante, inserisci ladestinazione del collegamento. Per saperne di più sui diversi tipi di link.
    • Nel campo Alt text , inserisciil testo per descrivere ai motori di ricerca e agli screen reader cos'è l'immagine. Questo migliorerà l'accessibilità e il SEO del tuo sito. Scopri di più sull'accessibilità dei siti web nella nostradocumentazione per gli sviluppatori.

Nota bene: l'aggiunta di un testo alt a un'immagine nonnonaggiunge 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 sopra l'immagine.

  • Per impostare il comportamento di caricamento dell'immagine e personalizzare il tipo di collegamento dell'immagine per i motori di ricerca, clicca su Avanzato.
    • Per impostare il comportamento del caricamento delle immagini, clicca sul menu a discesa Caricamento immaginie seleziona un'opzione:
      • Lazy:l'immagine viene caricata solo quando il visitatore raggiunge quella parte della pagina. Questo diminuisce il tempo di caricamento della pagina e migliora il SEO. Per impostazione predefinita, le immagini verranno caricate con questa impostazione.
      • Eager:l'immagine verrà caricata non appena la pagina verrà caricata.
      • Browser default:il comportamento di caricamento dell'immagine è determinato dalle impostazioni del browser del visitatore.
    • Per personalizzare il tipo di link dell'immagine, nella sezione Tipo di link, seleziona uno o piùattributi:
      • Regolare:questo link non è sponsorizzato.
      • No follow:questo link non è associato al tuo 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 sul blog o una discussione sul forum.
  • Clicca suApplica per applicare le tue modifiche all'immagine.

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

  • In alto a destra dell'editor di contenuti, clicca suUpdateoPublish per rendere attive le tue modifiche.

Modifica un'immagine in un modulo immagine

  • Naviga al tuo contenuto:

    • Website Pages: 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.
  • Passa sopra il tuo contenuto e clicca su Edit.
  • Nell'editor del contenuto, fai clic sul modulo dell'immagine.
  • Per rimuovere l'immagine corrente, clicca su Remove nella sezione Image dell'editor della barra laterale. Questo rimuoverà l'immagine corrente dal modulo immagine, ma non rimuoverà il modulo dalla pagina.
  • Per sostituire l'immagine corrente, fai clic suReplace nella sezione Image dell'editor della barra laterale, quindi aggiungi una nuova immagine.
  • Nel campo Alt text , inseriscidel testo per descrivere ai motori di ricerca e agli screen reader cos'è l'immagine. Questo migliorerà l'accessibilità e il SEO del tuo sito. Scopri di più sull'accessibilità dei siti web nella nostradocumentazione per gli sviluppatori.

Nota bene: l'aggiunta di un testo alt a un'immagine nonnonaggiunge 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 sopra l'immagine.

replace-or-remove-image-in-image-module
  • Imposta la dimensione dell'immagine. Puoi impostare le dimensioni automaticamente o impostando un'altezza e una larghezza personalizzate:
    • 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.
  • Imposta una dimensione massima:
    • Dimensione originale dell'immagine: l'immagine non apparirà mai più grande della sua dimensione originale.
    • Personalizzata: l'immagine non apparirà mai più grande di una specifica larghezza e altezza impostate nei campilarghezzaealtezza.
  • Per impostare il comportamento del caricamento dell'immagine, clicca sul menu a discesa Caricamento immaginee seleziona un'opzione:
    • Lazy:l'immagine verrà caricata solo quando il visitatore raggiunge quella parte della pagina. Questo diminuisce il tempo di caricamento della pagina e migliora il SEO. Per impostazione predefinita, le immagini verranno 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, inserisci unURL di destinazionenel campoLink (opzionale). Seleziona la casella di controllo Apri link in una nuova schedaper 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, clicca suUpdateoPublish per rendere attive le tue modifiche.