Le e-mail di marketing personalizzate tramite codice vengono visualizzate in modo diverso in Outlook

Se hai creato un'e-mail di marketing personalizzata con codice, potresti notare alcune discrepanze nella visualizzazione dell'e-mail in Outlook, come ad esempio problemi di posizionamento o di spaziatura. Questi problemi di spaziatura possono talvolta essere risolti specificando gli attributi hspace e vspace oppure utilizzando le tabelle.

Risolvere i problemi di spaziatura

Esistono due metodi per regolare la spaziatura attorno alle immagini in Outlook: utilizzando hspace o vspace e utilizzando le tabelle.

Utilizzo di hspace e vspace

L'attributo HTML vspace definisce lo spazio verticale e aggiunge una spaziatura uguale sopra e sotto l'immagine. L'attributo hspace definisce lo spazio orizzontale e aggiunge una spaziatura uguale a destra e a sinistra dell'immagine.

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > E-mail. Se Altro non compare nel tuo account, vai direttamente a Marketing > E-mail.
2. Fai clic sul nome dell’e-mail in bozza utilizzando un modello personalizzato.
3. Nell’editor delle e-mail, clicca sul modulo che desideri modificare.
4. Nella barra degli strumenti di testo formattato, clicca sul menu a tendina "Avanzate " e seleziona " Codice sorgente".
5. Nella finestra di dialogo, aggiungi hspace="10" vspace="10" alla fine del codice dell'immagine. Sostituisci 10 con la spaziatura desiderata.

Utilizza le tabelle

È possibile utilizzare una tabella a 3 colonne per distribuire in modo uniforme l'immagine, la spaziatura e il testo.

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > E-mail. Se Altro non compare nel tuo account, vai direttamente a Marketing > E-mail.
2. Fai clic sul nome dell'e-mail in bozza che utilizza un modello personalizzato.
3. Nell'editor delle email, clicca sul modulo che desideri modificare.
4. Nella barra degli strumenti di formattazione, clicca sul menu a tendina "Inserisci" e seleziona "Tabella", quindi crea una tabella 3x1.

5. Nella barra degli strumenti dell’editor di testo formattato, fare clic sulmenu a discesa "Avanzate "e selezionare " Codice sorgente".

6. Nella finestra di dialogo, aggiungi una larghezza per la cella vuota, ad esempio <td width="10">, per impostare lo spazio tra l'immagine e il testo.
7. Imposta il tipo di carattere, la dimensione e il colore, nonché l’altezza della riga, poiché Outlook applicherà il proprio stile se non specificato.

Risoluzione dei problemi relativi alle linee orizzontali impreviste

• Imposta il colore di sfondo dell'e-mail in modo che sia uguale a quello del corpo del testo.
• Imposta la dimensione del carattere e l’altezza della riga del contenuto su valori pari.
• Aggiungi i seguenti stili CSS nella sezione <head> del tuo modello di email: