Le email di marketing hanno un aspetto diverso in Outlook

Se stai usando l'editor di email classico aggiornato per redigere le tue email di marketing, potresti notare delle discrepanze nel modo in cui la tua email viene visualizzata in Outlook, a causa del supporto limitato di Outlook per i CSS.

Se noti che il posizionamento o la spaziatura dell'email sembrano sbagliati in Outlook, segui la procedura di risoluzione dei problemi qui sotto.

Impara di più sul design delle email nella HubSpot Designers Community.

Nota bene: il supporto HubSpot non può supportare modelli di email codificati in modo personalizzato. Se stai usando un template codificato personalizzato, contatta il fornitore che ha creato il template. Puoi anche connetterti con altri utenti e designer HubSpot sulla Community.

Spaziatura

Ci sono due metodi per regolare la spaziatura intorno alle immagini in Outlook: usando hspace o vspace, e usando le tabelle.

Usare hspace e vspace

L'attributo HTML vspace definisce lo spazio verticale e aggiungerà una spaziatura uguale alla parte superiore e inferiore della tua immagine. L'attributo hspace definisce lo spazio orizzontale e aggiungerà una spaziatura uguale alla destra e alla sinistra della tua immagine.

• Nel tuo account HubSpot, vai a Marketing > E-mail.

• Passa il mouse sul nome dell'email, poi clicca su Edit.

• Clicca nel modulo del contenuto, poi clicca su Advanced > Source code.

• Alla fine del codice dell'immagine, aggiungete uno o entrambi i seguenti codici: hspace="10" vspace="10", sostituendo 10 con la quantità di spaziatura desiderata.

Usare le tabelle

Puoi usare una tabella a 3 colonne per contenere uniformemente la tua immagine, la spaziatura e il testo:

• Nel tuo account HubSpot, vai a Marketing > E-mail.

• Passa il mouse sul nome dell'email, poi clicca su Edit.

• Nella barra degli strumenti del rich text editor, clicca su Inserisci > Tabella. Crea una tabella 3x1.
  
  

• Nella barra degli strumenti del rich text editor, clicca su Advanced > Source code.

• Specifica una larghezza nella cella vuota, come <td width="10">, per la quantità di spazio che vorresti tra l'immagine e il testo.

• Specifica una famiglia di caratteri, la dimensione del carattere, il colore del carattere e l'altezza della linea come "font-family: sans-serif; font-size:15px; line-height: 1.5em; color: #000000" poiché Outlook aggiungerà il proprio stile se non specificato.

Risolvi i problemi relativi alle linee orizzontali inaspettate che appaiono nelle tue email

A causa di un bug noto in alcune versioni di Outlook, una linea orizzontale può apparire tra le sezioni nella tua email. Mentre non c'è un modo coerente per risolvere il problema, puoi provare i seguenti passi per la risoluzione dei problemi:

• Imposta il colore di sfondo della tua email allo stesso modo del colore del corpo.
• Aggiorna la dimensione del carattere e l'altezza delle linee del tuo contenuto in modo che siano numeri pari.
• Includi i seguenti stili CSS nella sezione head del tuo modello di email:

ms-text-size-adjust: none; mso-line-height-rule: exactly;