Hvis du bruker det oppdaterte klassiske e-postredigeringsprogrammet til å lage utkast til markedsførings-e-poster, kan det hende du oppdager avvik i måten e-posten gjengis på i Outlook, på grunn av Outlooks begrensede støtte for CSS.
Hvis du oppdager at plasseringen eller avstanden i e-posten ser feil ut i Outlook, kan du følge feilsøkingstrinnene nedenfor.
Lær mer om e-postdesign i HubSpot Designers Community.
Merk: HubSpot Support kan ikke støtte egendefinerte kodede e-postmaler. Hvis du bruker en egendefinert kodet mal, må du kontakte leverandøren som har laget malen. Du kan også komme i kontakt med andre HubSpot-brukere og -designere i fellesskapet.
Det finnes to metoder for å justere avstanden rundt bilder i Outlook: ved hjelp av hspace eller vspace, og ved hjelp av tabeller.
HTML-attributtet vspace definerer vertikal avstand og legger til lik avstand øverst og nederst i bildet. Attributtet hspace definerer horisontal avstand og legger til lik avstand til høyre og venstre i bildet.
Hold musepekeren over navnet på e-posten, og klikk deretter på Rediger.
Klikk på innholdsmodulen,
Du kan bruke en tabell med tre kolonner til å fordele bilde, mellomrom og tekst jevnt:
Hold markøren over navnet på e-posten, og klikk deretter på Rediger.
Klikk på Sett inn > Tabell på verktøylinjen i redigeringsverktøyet for rik tekst. Opprett en 3x1-tabell.
Klikk på Mer på verktøylinjen i redigeringsverktøyet for rik tekst, og klikk deretter på kildekodeikonet .
Angi en bredde i den tomme cellen, for eksempel <td width="10">, for hvor stor avstand du vil ha mellom bildet og teksten.
Angi skriftfamilie, skriftstørrelse, skriftfarge og linjehøyde, for eksempel style="font-family: sans-serif; font-size:15px; line-height: 1.5em; color: #000000" ettersom Outlook vil legge til sin egen styling når den ikke er spesifisert.
På grunn av en kjent feil i enkelte versjoner av Outlook kan det oppstå en horisontal linje mellom seksjonene i e-posten. Selv om det ikke finnes en konsekvent måte å løse problemet på, kan du prøve følgende feilsøkingstrinn:
ms-text-size-adjust: none; mso-line-height-rule: exactly;