Email

Marketingmails zien er anders uit in Outlook

Laatst bijgewerkt: oktober 19, 2020

Geldt voor:

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

HubSpote-mailsjablonen en e-mails die zijn gemaakt met de 'drag and drop' -editor zijn ontworpen om consistent en responsief te zijn voor veelgebruikte e-mailclients. U kunt ook een voorvertoning van uw e-mailprogramma's bekijken. Aangezien Outlook beperkte ondersteuning biedt voor CSS, kunt u afwijkingen zien in de manier waarop uw e-mail in Outlook wordt weergegeven. Als u merkt dat de e-mailpositionering of -afstand in Outlook verkeerd lijkt, zijn er stappen die u kunt nemen om dit te verhelpen.

Let op: HubSpot Support kan geen aangepaste gecodeerde e-mailsjablonen ondersteunen. Als u een aangepaste gecodeerde sjabloon gebruikt, volg dan de procedure met de provider die de sjabloon heeft gemaakt. U kunt ook verbinding maken met andere HubSpot gebruikers en ontwerpers op de Community.

Afbeeldingen centreren

Als u de afbeelding niet centreert in Outlook, kunt u de HTML in de modulebroncode aanpassen.

  • Navigeer in uw HubSpot-account naar Marketing > E-mail.
  • Klik op de naam van de e-mail.
  • In de rich text module met uw afbeelding, klik op debroncode-icooncode.
  • Zoek de code voor de afbeelding die u probeert te centreren en die begint met <img>.
  • Voeg <center> </center> of <p stijl= " tekst uitlijnen: centreren;"> </p> tags rond de <img> code. Bijvoorbeeld:
<center><img src="http://www.hubspot.com/test.jpg"></center>

<p stijl="tekst uitlijnen: centreren;"><img src="http://www.hubspot.com/test.jpg"></p>

Afstand

Er zijn twee methoden om de afstand tussen afbeeldingen in Outlook aan te passen: met behulp van hspace of vspace, en met behulp van tabellen.

Gebruik van hspace en vspace

Het HTML-attribuut vspace definieert de verticale ruimte en voegt een gelijke afstand toe aan de boven- en onderkant van uw afbeelding. Het hspace-attribuut definieert horizontale ruimte en voegt gelijke afstand toe aan de rechter- en linkerzijde van uw afbeelding.

  • Navigeer in uw HubSpot-account naar Marketing > E-mail.
  • Klik op de naam van de e-mail.

  • Klik in de inhoudsmodule en klik vervolgens op debroncode-icooncode.

  • Voeg aan het einde van de afbeeldingscode een of beide van de volgende codes toe: hspace="10" vspace="10", waarbij u 10 vervangt door de gewenste afstand.

source-code-hspace-vspace

Gebruik van tabellen

Maak een 3-kolomstabel met daarin uw afbeelding, spatiëring en tekst.

  • Navigeer in uw HubSpot-account naar Marketing > E-mail.
  • Klik op de naam van de e-mail.

  • Klik in de rijke tekstverwerker op Tabel > Tabel invoegen. Maak een 3x1 tabel.

    create-table

  • Klik op deicooncode van de broncode.

  • Geef een breedte op in de lege cel, zoals <td breedte="10">, voor de gewenste afstand tussen de afbeelding en de tekst.

  • Geef een lettertypefamilie, lettergrootte, letterkleur en regelhoogte op, zoals stijl="lettertype-familie: sans-serif; lettergrootte: 15px; regelhoogte: 1.5em; kleur: #000000" als Outlook zal zijn eigen styling toevoegen wanneer niet gespecificeerd.

table-styling

Meer informatie over e-mailontwerp op onze Designers Community.