Utilizzare le immagini nei contenuti HubSpot

È 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 drag-and-drop non possono contenere immagini.

Aggiungi immagini

• Navigare verso il proprio contenuto:

  • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
  • Landing Page: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
  • Blog: Nel tuo account HubSpot, passa a Contenuti > Blog.
  • Knowledge Base: Nel tuo account HubSpot, passa a Contenuti > Knowledge Base.
  • Email: Nel tuo account HubSpot, passa a Marketing > E-mail di marketing.
• Fare clic sul nome del contenuto.

Nota bene: solo i fileimmagine .png, .ico, .bmp, .jpg e .gifpossono 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 nella 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 progettazione di Canva, fare clic su Strumenti di progettazione con Canva. Quindi fare clic sull'immagine per inserirla.
• Prima di inserire un'immagine, è possibile ottimizzarla per il tempo di caricamento o la risoluzione. Nel pannello di destra, passare il mouse sull'immagine e fare clic su Dettagli.
• 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.
    

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.

Modifica di un'immagine in un modulo di testo ricco

• Navigare verso il proprio contenuto:

  • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
  • Landing Page: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
  • Blog: Nel tuo account HubSpot, passa a Contenuti > Blog.
  • Knowledge Base: Nel tuo account HubSpot, passa a Contenuti > Knowledge Base.
  • Email: Nel tuo account HubSpot, passa a Marketing > E-mail di marketing.
• Fare clic sul nome del contenuto.
• 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 sull'icona del cestino delete .

• Per sostituire un'immagine in un modulo di testo ricco, fare clic sull'immagine, quindi fare clic sull'icona replace repl e aggiungere una nuova immagine.

• Per collegare l'immagine, aggiungere il 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 nella domanda 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 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 gli sviluppatori.

Attenzione: l 'aggiunta di testo alt a un'immagine non comporta l'aggiunta del testo del titolo. Il testo alternativo 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 delle immagini e personalizzare il tipo di collegamento alle immagini 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 verranno 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 una o più attribuzioni:
    
    • Regular: 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 conduce a un contenuto generato dall'utente, come un commento di un blog o una discussione in un forum.
• Fare clic su Applica per applicare le modifiche all'immagine.

• 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

• Navigare verso il proprio contenuto:

  • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
  • Landing Page: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
  • Blog: Nel tuo account HubSpot, passa a Contenuti > Blog.
  • Email: Nel tuo account HubSpot, passa a Marketing > E-mail di marketing.
• Fare clic sul nome del contenuto.
• 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 vostro sito. Per saperne di più sull'accessibilità dei siti web, consultare la nostra documentazione per gli sviluppatori.

Attenzione: l 'aggiunta di testo alt a un'immagine non comporta l'aggiunta del testo del titolo. Il testo alternativo 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 le dimensioni dell'immagine su dispositivi diversi, fare clic sul menu a discesa Dimensioni e selezionare un' opzione:
  
  • Adatta automaticamente: le dimensioni dell'immagine si adattano 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 delle immagini, 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 verranno 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.
• Per rendere effettive le modifiche, fare clic su Pubblica o Aggiorna in alto a destra