อีเมลการตลาดแบบกำหนดเองที่มีรหัสดูแตกต่างกันใน Outlook

หากคุณสร้างอีเมลการตลาดที่มีรหัสแบบกำหนดเองคุณอาจสังเกตเห็นความแตกต่างในลักษณะที่อีเมลของคุณแสดงใน Outlook เช่นปัญหาการวางตำแหน่งหรือระยะห่าง คุณสามารถทำตามขั้นตอนการแก้ไขปัญหาในส่วนด้านล่างเพื่อช่วย

หากคุณสังเกตเห็นว่าการวางตำแหน่งอีเมลหรือระยะห่างดูผิดปกติใน Outlook ให้ทำตามขั้นตอนการแก้ไขปัญหาด้านล่าง

ดูข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบอีเมลในชุมชนนักออกแบบ HubSpot 

ระยะห่าง

มีสองวิธีในการปรับระยะห่างรอบภาพใน Outlook: การใช้ hspace หรือ vspace และการใช้ตาราง

การใช้ hspace และ vspace

แอตทริบิวต์ HTML vspace กำหนดพื้นที่แนวตั้งและจะเพิ่มระยะห่างเท่ากันที่ด้านบนและด้านล่างของภาพของคุณ แอตทริบิวต์ hspace กำหนดพื้นที่แนวนอนและจะเพิ่มระยะห่างเท่ากันทางด้านขวาและซ้ายของภาพของคุณ

• ในบัญชี HubSpot ของคุณ ไปที่การตลาด > อีเมล

• วางเมาส์เหนือชื่ออีเมลพร้อมเทมเพลตที่กำหนดเองแล้วคลิก แก้ไข

• คลิกที่โมดูลเนื้อหา

• ในตอนท้ายของรหัสภาพให้เพิ่มรหัสต่อไปนี้อย่างใดอย่างหนึ่งหรือทั้งสองอย่าง: hspace hspace="10" vspace="10" แทนที่ 10 ด้วยระยะห่างที่ต้องการ

การใช้ตาราง

คุณสามารถใช้ตาราง 3 คอลัมน์เพื่อใส่รูปภาพระยะห่างและข้อความของคุณให้เท่ากันได้:

• ในบัญชี HubSpot ของคุณ ไปที่การตลาด > อีเมล

• เลื่อนเมาส์ไปที่ชื่ออีเมลพร้อมเทมเพลตที่กำหนดเองแล้วคลิก แก้ไข

• ในแถบเครื่องมือแก้ไขข้อความแบบสมบูรณ์ให้คลิกสิ่งที่ใส่เข้าไป > ตาราง สร้างตาราง 3x1
  
  

  

• ในแถบเครื่องมือแก้ไขข้อความแบบสมบูรณ์ให้คลิกขั้นสูงจากนั้นเลือกซอร์สโค้ด

• ระบุความกว้างในเซลล์ว่างเช่น สำหรับระยะห่างที่คุณต้องการระหว่างภาพและข้อความ

• ระบุตระกูลฟอนต์ขนาดฟอนต์สีฟอนต์และความสูงของบรรทัดเช่น style="font-family: sans-serif; font-size:15px; line-height: 1.5em; color: #000000" #000000" เนื่องจาก Outlook จะเพิ่มสไตล์ของตัวเองเมื่อไม่ได้ระบุ

แก้ปัญหาเส้นแนวนอนที่ไม่คาดคิดที่ปรากฏในอีเมลของคุณ

เนื่องจากข้อผิดพลาดที่ทราบใน Outlook บางเวอร์ชันเส้นแนวนอนอาจปรากฏระหว่างส่วนในอีเมลของคุณ แม้ว่าจะไม่มีวิธีแก้ไขปัญหาที่สม่ำเสมอแต่ก็ลองทำตามขั้นตอนการแก้ไขปัญหาต่อไปนี้ได้:

• ตั้งค่าสีพื้นหลังของอีเมลของคุณให้เหมือนกับสีของเนื้อหา
• อัพเดทขนาดตัวอักษรและความสูงบรรทัดของเนื้อหาให้เป็นตัวเลขคู่
• รวมสไตล์ CSS ต่อไปนี้ในส่วนหัวของเทมเพลตอีเมลของคุณ:

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