การตั้งค่าเครื่องมือแก้ไขอีเมลแบบลากแล้ววางของ Stripo

Published: 22 ตุลาคม 2567 · Last updated: 21 กรกฎาคม 2569 · By Marcus Biel

คอลัมน์ การตั้งค่าอีเมล อยู่ทางด้านขวาของเครื่องมือแก้ไขอีเมล Maildroppa โดยมีเครื่องมือช่วยจัดโครงสร้างและปรับแต่งเนื้อหา รวมถึงรูปลักษณ์ของอีเมล คอลัมน์นี้แบ่งออกเป็น 2 แท็บ ได้แก่ เนื้อหา และ ลักษณะที่ปรากฏ

แท็บเนื้อหา

แท็บ เนื้อหา เป็นพื้นที่สำหรับออกแบบและจัดระเบียบเนื้อหาอีเมล โดยมี 2 ส่วนหลัก ได้แก่ โครงสร้าง และ บล็อก

1. โครงสร้าง

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

• คอลัมน์เดียว
• สองคอลัมน์
• หลายคอลัมน์

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

• ลากแล้ววาง: เพียงลากโครงสร้างจากส่วนนี้แล้ววางลงในพื้นที่ออกแบบอีเมลเพื่อเริ่มเพิ่มเนื้อหา
• การปรับแต่ง: เมื่อเพิ่มโครงสร้างแล้ว คุณสามารถใส่บล็อกเนื้อหาต่าง ๆ เช่น รูปภาพ ข้อความ หรือปุ่ม

2. บล็อก

บล็อกคือองค์ประกอบเนื้อหาที่คุณวางไว้ภายในโครงสร้างเพื่อสร้างอีเมล

ประเภทบล็อกที่มีให้ใช้งาน ได้แก่:

• รูปภาพ: อัปโหลดรูปภาพ (PNG, JPG, GIF) และปรับแต่งรูปลักษณ์ได้
• ข้อความ: เพิ่มและจัดรูปแบบข้อความเพื่อสื่อสารเนื้อหาของคุณ
• ปุ่ม: เพิ่มปุ่มที่คลิกได้ พร้อมปรับแต่งข้อความ ลิงก์ และสไตล์
• ตัวเว้นระยะ: แทรกพื้นที่ว่างเพื่อปรับเลย์เอาต์ระหว่างบล็อกอื่น ๆ
• วิดีโอ: ฝังเนื้อหาวิดีโอจากแพลตฟอร์มต่าง ๆ เช่น YouTube, Vimeo และอื่น ๆ
• HTML: เพิ่มโค้ด HTML และ CSS แบบกำหนดเองเพื่อปรับแต่งเนื้อหาอีเมลขั้นสูง

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

คำอธิบายโดยละเอียดเกี่ยวกับบล็อกเนื้อหา

บล็อกรูปภาพ

บล็อกรูปภาพในเครื่องมือแก้ไขอีเมลแบบลากแล้ววางของ Stripo ช่วยให้คุณเพิ่มและปรับแต่งรูปภาพในแคมเปญอีเมลได้

การเพิ่มบล็อกรูปภาพ

คุณสามารถเพิ่มบล็อกรูปภาพลงในอีเมลได้ 2 วิธี:

ตัวเลือกที่ 1

เลื่อนเมาส์ไปเหนือพื้นที่ "วางเนื้อหาที่นี่" ในโครงสร้าง จากนั้นคลิกไอคอนรูปภาพ โครงสร้างที่เลือกจะเปลี่ยนเป็นบล็อกรูปภาพทันที

ตัวเลือกที่ 2

ไปที่ส่วน บล็อก ภายใต้ แท็บเนื้อหา ลากบล็อกรูปภาพไปยังโครงสร้างที่ต้องการในเลย์เอาต์อีเมล วิธีนี้ช่วยให้คุณควบคุมตำแหน่งที่จะวางรูปภาพได้มากขึ้น

การอัปโหลดรูปภาพ

เมื่อเพิ่มบล็อกรูปภาพแล้ว คุณสามารถอัปโหลดรูปภาพได้ 2 วิธี:

ลากแล้ววาง

คุณสามารถลากไฟล์รูปภาพ (PNG, JPG, GIF) จากคอมพิวเตอร์ของคุณแล้ววางลงในกล่องอัปโหลดที่ปรากฏอยู่ภายในบล็อกรูปภาพได้โดยตรง

อัปโหลดจากคอมพิวเตอร์

หรือคลิกไอคอนคลาวด์ในบล็อกรูปภาพเพื่อเปิดเบราว์เซอร์ไฟล์ แล้วเลือกรูปภาพจากคอมพิวเตอร์ (ขนาดไม่เกิน 2MB) เมื่อเลือกแล้ว รูปภาพจะปรากฏทั้งในบล็อกและในแท็บเนื้อหาทางด้านขวา

การเปลี่ยนรูปภาพ

หากต้องการแทนที่รูปภาพ ให้ใช้ตัวเลือก เปลี่ยนรูปภาพ ในแท็บเนื้อหา คลิกไอคอนวงกลม เปลี่ยนรูปภาพ เพื่ออัปโหลดรูปภาพใหม่หรือลิงก์ไปยังรูปภาพจาก URL ภายนอก

การแก้ไขรูปภาพ

หลังจากอัปโหลดรูปภาพแล้ว คุณอาจต้องการแก้ไขเพิ่มเติมโดยตรงภายในแพลตฟอร์ม เครื่องมือแก้ไขรูปภาพ ในตัวของ Stripo ช่วยให้คุณปรับปรุงและปรับแต่งรูปภาพได้โดยไม่ต้องออกจากเครื่องมือแก้ไขอีเมล

การเปิดเครื่องมือแก้ไขรูปภาพ

1. เมื่ออัปโหลดรูปภาพแล้ว ให้คลิกปุ่ม แก้ไขรูปภาพ เพื่อเปิดอินเทอร์เฟซเครื่องมือแก้ไขรูปภาพ
2. เครื่องมือนี้มีเครื่องมือหลากหลายรายการแสดงอยู่ในแถบเมนูด้านบน

เครื่องมือแก้ไขรูปภาพที่มีให้ใช้

• ฟิลเตอร์ ใช้ฟิลเตอร์ต่าง ๆ ได้ด้วยการคลิกเพียงครั้งเดียว เช่น:

  • ระดับสีเทา
  • ขาวดำ
  • เพิ่มความคมชัด
  • กลับสี
  • ซีเปีย
  • ความสว่าง
  • สี

• ปรับขนาด ปรับขนาดของรูปภาพ คุณสามารถ:

  • กำหนดความกว้างและความสูงที่ต้องการ
  • รักษาสัดส่วนภาพ

• ครอบตัด เลือกส่วนของรูปภาพที่ต้องการเก็บไว้และลบส่วนที่ไม่ต้องการ

• แปลงรูปภาพ หมุนหรือพลิกรูปภาพ:

  • แนวนอน
  • แนวตั้ง

• วาด ใช้เครื่องมือวาดเพื่อเพิ่มองค์ประกอบแบบวาดด้วยมือ เช่น เส้นหรือรูปร่างแบบกำหนดเองบนรูปภาพ

• ข้อความ เพิ่มข้อความลงบนรูปภาพโดยตรง ปรับแต่งได้ทั้ง:

  • แบบอักษร
  • ขนาด
  • สี
  • การจัดแนว

• รูปร่างและสติกเกอร์ เพิ่มความโดดเด่นให้รูปภาพด้วยการวางซ้อน:

  • รูปร่างที่สร้างไว้ล่วงหน้า
  • สติกเกอร์สนุก ๆ

• กรอบ เลือกกรอบจากตัวเลือกต่าง ๆ เพื่อเพิ่มขอบที่มีสไตล์ให้รูปภาพ

• มุม ปรับรูปแบบมุมเพื่อให้ดูเรียบร้อยยิ่งขึ้น

• พื้นหลัง ลบหรือเปลี่ยนพื้นหลังของรูปภาพเพื่อให้มีรูปลักษณ์ที่สะอาดตายิ่งขึ้น

การบันทึกการแก้ไข

เมื่อแก้ไขตามต้องการแล้ว ให้คลิกปุ่ม บันทึก ที่มุมซ้ายบนของเครื่องมือแก้ไข รูปภาพที่แก้ไขแล้วจะแทนที่รูปภาพต้นฉบับในเลย์เอาต์อีเมลโดยอัตโนมัติ

การตั้งค่ารูปภาพ

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

ลิงก์

เพิ่มลิงก์ให้รูปภาพ คุณสามารถเลือกประเภทลิงก์ต่าง ๆ ได้ เช่น:

• เว็บไซต์ (HTTP, HTTPS)
• อีเมล (mailto:)
• ไฟล์ (ftp)
• การแชร์บนโซเชียล (Facebook, X (เดิมคือ Twitter), LinkedIn, Pinterest)

คุณจะพบตัวเลือกเหล่านี้ในเมนูแบบดรอปดาวน์การตั้งค่าลิงก์

ข้อความสำรอง

เพิ่มข้อความสำรองที่จะแสดงหากโหลดรูปภาพไม่สำเร็จ ข้อความนี้ยังมีประโยชน์ด้านการเข้าถึง โดยช่วยให้โปรแกรมอ่านหน้าจอบรรยายรูปภาพแก่ผู้รับที่มีความบกพร่องทางการมองเห็น

การจัดแนว

เลือกวิธีจัดแนวรูปภาพภายในคอนเทนเนอร์ คุณสามารถจัดชิด ซ้าย, กลาง หรือ ขวา

ขนาด

ปรับความกว้างและความสูงของรูปภาพด้วยตนเองโดยใช้ปุ่มบวก/ลบ หรือพิมพ์ขนาดที่ต้องการ

คุณยังสามารถเปิดใช้ตัวเลือก "ปรับตามความกว้าง" เพื่อให้รูปภาพพอดีกับความกว้างเต็มของคอนเทนเนอร์โดยอัตโนมัติ

รูปภาพแบบตอบสนอง

เปิดใช้ตัวเลือก "รูปภาพแบบตอบสนอง" เพื่อให้แน่ใจว่ารูปภาพจะปรับตามขนาดหน้าจอที่แตกต่างกัน โดยเฉพาะบนอุปกรณ์เคลื่อนที่

ระยะห่างภายใน

ปรับระยะห่างรอบรูปภาพเพื่อควบคุมพื้นที่ระหว่างรูปภาพกับเนื้อหาโดยรอบ คุณสามารถใช้ระยะห่างเท่ากันทุกด้าน หรือปรับแต่ละด้าน (บน, ล่าง, ซ้าย, ขวา) ได้

ลิงก์แองเคอร์

คุณสามารถกำหนดลิงก์แองเคอร์ให้รูปภาพ เพื่อให้ผู้รับข้ามไปยังส่วนที่ต้องการภายในอีเมลฉบับเดียวกันเมื่อคลิกรูปภาพ อย่างไรก็ตาม โปรดทราบว่าลิงก์แองเคอร์อาจไม่ทำงานในโปรแกรมรับส่งอีเมลบางประเภท เช่น Gmail และ Apple Mail

บล็อกข้อความ

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

แถบเครื่องมือข้อความ

เมื่อคลิกภายในบล็อกข้อความ แถบเครื่องมือข้อความ จะปรากฏเหนือพื้นที่เนื้อหา เพื่อให้เข้าถึงตัวเลือกการจัดรูปแบบข้อความที่ใช้บ่อยได้อย่างรวดเร็ว ฟีเจอร์ที่มีในแถบเครื่องมือ ได้แก่:

1. รูปแบบย่อหน้า

กำหนดสไตล์ย่อหน้าโดยเลือกจากตัวเลือกต่าง ๆ เช่น ปกติ สำหรับข้อความทั่วไป หรือระดับหัวข้อต่าง ๆ (หัวข้อ 1 ถึง หัวข้อ 6) เพื่อสร้างลำดับชั้นที่มีโครงสร้างในอีเมล ช่วยให้เนื้อหาอ่านง่ายและเป็นระเบียบมากขึ้น

2. ชุดแบบอักษร

แบบอักษรเริ่มต้นคือ Arial แต่คุณสามารถเลือกแบบอักษรได้หลากหลาย รวมถึงตัวเลือกทั่วไปอย่าง Georgia, Helvetica และ Courier New นอกจากนี้ยังมีฟังก์ชันค้นหาเพื่อค้นหาแบบอักษรที่ต้องการได้อย่างรวดเร็ว

3. ขนาดแบบอักษร

ปรับขนาดแบบอักษรได้ตั้งแต่ 8pt ถึง 72pt โดยค่าเริ่มต้นคือ 14pt ซึ่งเหมาะกับข้อความเนื้อหาอีเมลส่วนใหญ่ ใช้เมนูดรอปดาวน์เพื่อตั้งค่าขนาดแบบอักษรที่ต้องการอย่างรวดเร็ว

4. การจัดรูปแบบข้อความ

จัดรูปแบบข้อความด้วยตัวเลือกต่อไปนี้:

• ตัวหนา (B): เน้นข้อความด้วยการทำให้เป็นตัวหนา
• ตัวเอียง (I): ทำข้อความเป็นตัวเอียงเพื่อให้มีรูปลักษณ์ที่มีสไตล์มากขึ้น
• ขีดเส้นใต้ (U): ขีดเส้นใต้ข้อความ ซึ่งมักใช้กับไฮเปอร์ลิงก์
• ขีดฆ่า (S): ขีดเส้นผ่านข้อความ เหมาะสำหรับการแก้ไขหรือเนื้อหาที่ลบออก

5. การจัดรูปแบบข้อความขั้นสูง (เมนูจุดสามจุด)

คลิกจุดสามจุดในแถบเครื่องมือเพื่อแสดงตัวเลือกเพิ่มเติม:

• ตัวห้อย: วางข้อความต่ำกว่าเส้นฐาน (มีประโยชน์สำหรับเชิงอรรถหรือสูตรเคมี)
• ตัวยก: วางข้อความเหนือเส้นฐาน (มักใช้กับเลขยกกำลังหรือตัวเลขลำดับ)
• ล้างการจัดรูปแบบ: ลบการจัดรูปแบบที่ใช้ทั้งหมดและคืนข้อความเป็นสไตล์เริ่มต้น

6. สีข้อความและพื้นหลัง

• สีข้อความ: คลิกปุ่มสีข้อความเพื่อเลือกจากจานสี หรือป้อนโค้ด hex เพื่อควบคุมสีข้อความอย่างแม่นยำ
• สีพื้นหลัง: เลือกสีพื้นหลัง (ไฮไลต์) ให้ข้อความ

7. การจัดแนวข้อความ

จัดแนวข้อความภายในบล็อก:

• จัดชิดซ้าย: จัดข้อความชิดซ้าย
• กึ่งกลาง: จัดข้อความไว้ตรงกลาง
• จัดชิดขวา: จัดข้อความชิดขวา
• ชิดขอบทั้งสองด้าน: กระจายข้อความให้เต็มความกว้างของบล็อกอย่างสม่ำเสมอ

8. รายการ

สร้างรายการแบบมีลำดับ (ตัวเลข) และไม่มีลำดับ (จุดนำหน้า):

• แทรก/ลบรายการแบบจุดนำหน้า: เพิ่มหรือลบจุดนำหน้า
• แทรก/ลบรายการแบบตัวเลข: เพิ่มหรือลบรายการแบบมีตัวเลข

9. การตัดบรรทัด

เปิดหรือปิดการตัดบรรทัดภายในบล็อกข้อความ เมื่อเปิดใช้งาน บรรทัดข้อความยาวจะย้ายไปยังบรรทัดถัดไปโดยอัตโนมัติ

10. การเยื้อง

ปรับการเยื้องของข้อความ:
- **เพิ่มการเยื้อง**: เลื่อนข้อความออกจากขอบมากขึ้น เหมาะสำหรับหัวข้อย่อยหรือคำพูดอ้างอิง
- **ลดการเยื้อง**: ลดการเยื้องเพื่อเลื่อนข้อความเข้าใกล้ขอบซ้ายมากขึ้น
![การเยื้องข้อความ](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. แทรกไฮเปอร์ลิงก์

เรียนรู้วิธีเพิ่ม แก้ไข และจัดการไฮเปอร์ลิงก์ในเนื้อหาอีเมล

ขั้นตอนการเพิ่มหรือแก้ไขลิงก์

a) ไฮไลต์ข้อความ

เลือกข้อความที่ต้องการเปลี่ยนเป็นไฮเปอร์ลิงก์

b) คลิกไอคอนลิงก์

ใน แถบเครื่องมือข้อความ ให้คลิก ไอคอนลิงก์

c) แก้ไขลิงก์ในแผงการตั้งค่า

แผงการตั้งค่าด้านขวา จะปรากฏขึ้นพร้อมตัวเลือกลิงก์:

• ช่องลิงก์: ป้อน URL หรือเลือกจากตัวเลือกที่กำหนดไว้ล่วงหน้า
• แท็ก: เพิ่มแท็กเพื่อระบุผู้สมัครรับข้อมูลหรือเรียกใช้ระบบอัตโนมัติ

การแก้ไขลิงก์หลังส่งอีเมล

ไม่มีอะไรแย่ไปกว่าการส่งแคมเปญใหม่ไปยัง ผู้สมัครรับข้อมูล 2,365 ราย แล้วพบว่าลิงก์หนึ่งเสียเพราะพิมพ์ผิดเพียงเล็กน้อย ยอดขาย Black Friday หายไปเลย!

โชคดีที่เราเปิดให้คุณแก้ไขลิงก์ที่เสียได้ แม้ว่าอีเมลจะถูกส่งไปยังผู้สมัครรับข้อมูลแล้วก็ตาม

a) ดูแคมเปญ

ค้นหาแคมเปญที่ส่งแล้วในหน้าภาพรวม คลิก จุดสามจุด แล้วเลือก ดูแคมเปญ

b) แก้ไขลิงก์หรือแท็ก

เลื่อนลงไปยัง รายการลิงก์ ในรายละเอียดแคมเปญเพื่อ:

• อัปเดตปลายทางลิงก์: แก้ไข URL ที่ไม่ถูกต้อง
• จัดการแท็ก: เพิ่มหรือลบแท็กสำหรับระบบอัตโนมัติ

หมายเหตุ: ตรวจสอบให้แน่ใจว่าเปิดใช้ การติดตามการคลิก ในการตั้งค่าแคมเปญ เพื่อใช้ฟีเจอร์กำหนดเป้าหมายลิงก์ใหม่

การปรับแต่งรูปลักษณ์ของลิงก์

ใน แผงการตั้งค่าด้านขวา คุณสามารถปรับรูปลักษณ์ของลิงก์ได้:

• สีลิงก์: เลือกสีหรือป้อนโค้ด hex

• ขีดเส้นใต้ลิงก์: เปิดหรือปิดเส้นใต้เพื่อให้ดูสะอาดตายิ่งขึ้น

12. แท็กปรับเฉพาะบุคคล

ใช้ แท็กปรับเฉพาะบุคคล เพื่อเพิ่มเนื้อหาแบบไดนามิก เช่น ชื่อจริงของผู้รับหรือฟิลด์แบบกำหนดเองอื่น ๆ

• เข้าถึงเมนูดรอปดาวน์ แท็กปรับเฉพาะบุคคล ในแถบเครื่องมือเพื่อเลือกฟิลด์ทั่วไป เช่น ชื่อจริง, อีเมล หรือ ประเทศ หรือกำหนดฟิลด์แบบกำหนดเองเพื่อปรับอีเมลให้เหมาะกับผู้รับแต่ละราย

13. อีโมจิ

เพิ่มความน่าสนใจให้ข้อความด้วยอีโมจิ

• คลิก ไอคอนอีโมจิ ในแถบเครื่องมือเพื่อเปิดรายการอีโมจิที่จัดหมวดหมู่ไว้และค้นหาได้ง่าย
• หมายเหตุด้านความเข้ากันได้: ทดสอบอีเมลในโปรแกรมรับส่งบางประเภท เช่น Outlook เนื่องจากบางโปรแกรมอาจแสดงอีโมจิได้ไม่ถูกต้อง

14. ตารางและอักขระพิเศษ

ที่ส่วนท้ายของแถบเครื่องมือ ให้คลิก จุดสามจุด เพื่อแสดงตัวเลือกขั้นสูงเพิ่มเติม

การแทรกตาราง

สร้างและปรับแต่งตารางเพื่อปรับปรุงเลย์เอาต์อีเมล

• กำหนดแถว คอลัมน์ ระยะห่างระหว่างเซลล์ ระยะห่างภายใน และขนาดเส้นขอบได้ตามต้องการ

แทรกอักขระพิเศษ

เพิ่มสัญลักษณ์ อักขระที่มีเครื่องหมายกำกับ และอักขระที่ไม่ใช่มาตรฐานอื่น ๆ ให้ข้อความของคุณ

• เข้าถึงตัวเลือก อักขระพิเศษ เพื่อเลือกดูอักขระได้หลากหลาย

การตั้งค่าบล็อกข้อความเพิ่มเติม (แผงด้านขวา)

แผงด้านขวามีการควบคุมรูปลักษณ์และการทำงานของบล็อกข้อความอย่างละเอียด การตั้งค่าที่มี ได้แก่:

1. สีข้อความ

กำหนดสีข้อความโดยใช้ตัวเลือกสีหรือป้อนโค้ด hex

2. สีพื้นหลัง

กำหนดสีพื้นหลังแบบกำหนดเองให้บล็อกข้อความ โดยค่าเริ่มต้น พื้นหลังจะโปร่งใส

3. การตั้งค่าเฉพาะลิงก์

เมื่อบล็อกข้อความมีลิงก์ ตัวเลือกเพิ่มเติมจะปรากฏในการตั้งค่า:

• สีลิงก์: ปรับสีลิงก์โดยใช้ตัวเลือกสีหรือโค้ด hex

• ขีดเส้นใต้ลิงก์: เปิดหรือปิดตัวเลือกขีดเส้นใต้สำหรับลิงก์ภายในบล็อกข้อความ

• การแก้ไขลิงก์: เลือกลิงก์ในพื้นที่เนื้อหาเพื่อแก้ไข URL ในแผงการตั้งค่า คุณยังสามารถกำหนดหรืออัปเดตแท็กให้ลิงก์ได้โดยใช้เมนูดรอปดาวน์ชื่อ "แท็ก"

4. การจัดแนว

จัดแนวบล็อกข้อความภายในคอนเทนเนอร์: ซ้าย, กลาง หรือ ขวา

5. ความสูงคงที่

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

6. ระยะห่างระหว่างบรรทัด

ควบคุมพื้นที่ระหว่างบรรทัดข้อความ เลือกได้จาก แคบ, ปกติ หรือ กว้าง

7. ระยะห่างภายใน

ปรับพื้นที่รอบบล็อกข้อความ ใช้ระยะห่างเท่ากันทุกด้านหรือปรับแต่ละด้าน: บน, ล่าง, ซ้าย และ ขวา

8. ลิงก์แองเคอร์

สร้างลิงก์แองเคอร์เพื่อให้ผู้อ่านข้ามไปยังส่วนที่ต้องการของอีเมล โปรดทราบว่าโปรแกรมรับส่งอีเมลบางประเภทไม่รองรับลิงก์แองเคอร์

บล็อกปุ่ม

บล็อกปุ่มช่วยให้คุณเพิ่มปุ่มที่คลิกได้ลงในอีเมล พร้อมการตั้งค่าที่ปรับแต่งได้ทั้งด้านการทำงานและสไตล์

การตั้งค่าลิงก์

ตัวเลือก ลิงก์ กำหนดการทำงานที่จะเกิดขึ้นเมื่อผู้รับคลิกปุ่ม

ประเภทลิงก์ที่มีให้ใช้

• ลิงก์เว็บไซต์ทั่วไป (HTTP หรือ HTTPS): นำผู้ใช้ไปยังหน้าเว็บ
• ลิงก์อีเมล: เปิดโปรแกรมอีเมลของผู้ใช้เพื่อเขียนอีเมลใหม่
• ลิงก์ไฟล์ (FTP, FTPS): ลิงก์ไปยังไฟล์บนเซิร์ฟเวอร์ FTP
• Skype: เริ่มการโทรหรือแชตผ่าน Skype
• โทรศัพท์ (tel): เริ่มการโทรบนอุปกรณ์ที่รองรับ
• SMS: เปิดแอปส่งข้อความพร้อมหมายเลขผู้รับที่กรอกไว้ล่วงหน้า
• Viber: เปิดแอป Viber เพื่อส่งข้อความหรือโทร
• ประเภทโปรโตคอลอื่น: ระบุโปรโตคอลแบบกำหนดเองที่ไม่มีอยู่ในรายการด้านบน

ตัวเลือกการแชร์บนโซเชียล

คุณยังสามารถตั้งค่าปุ่มสำหรับการแชร์บนโซเชียลหรือทางอีเมลได้:

• Facebook
• X (เดิมคือ Twitter)
• LinkedIn
• Pinterest
• การแชร์ทางอีเมล

ช่อง URL

ถัดจากประเภทลิงก์คือ ช่อง URL (โดยทั่วไปจะเริ่มต้นด้วย https://) ซึ่งช่วยให้คุณป้อนที่อยู่เฉพาะที่สอดคล้องกับประเภทลิงก์

ป้ายกำกับปุ่ม

ปรับแต่งป้ายกำกับปุ่มให้สื่อถึงคำกระตุ้นการตัดสินใจของคุณ ป้ายกำกับเริ่มต้นคือ "ปุ่ม" แต่คุณสามารถเปลี่ยนเป็นตัวเลือกอย่าง "เรียนรู้เพิ่มเติม", "สมัครเลย" หรือ "ช้อปเลย"

สไตล์ข้อความ

การตั้งค่า สไตล์ข้อความ ช่วยให้คุณปรับรูปลักษณ์ของข้อความบนปุ่ม

การเลือกแบบอักษร

เลือกจากแบบอักษรมาตรฐานที่หลากหลาย ได้แก่:

• Arial
• Comic Sans MS
• Courier New
• Georgia
• Helvetica
• Lucida Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

สำหรับแบบอักษรที่ไม่ใช่มาตรฐาน ยังมีตัวเลือกเพิ่มเติม ได้แก่:

• Arvo
• Lato
• Lora
• Merriweather
• Merriweather Sans
• Noticia Text
• Open Sans
• Playfair Display
• Roboto
• Source Sans Pro

ที่ด้านบนของรายการแบบอักษรมี ช่องค้นหา ช่วยให้คุณค้นหาแบบอักษรที่ต้องการได้อย่างรวดเร็ว

ขนาดและการจัดรูปแบบแบบอักษร

• ขนาดแบบอักษร: เลือกได้ตั้งแต่ 8 ถึง 72 ตามความโดดเด่นที่ต้องการให้ข้อความบนปุ่มมี
• การจัดรูปแบบข้อความ: ใช้รูปแบบ ตัวหนา หรือ ตัวเอียง ผ่านไอคอน "B" หรือ "I" เพื่อเน้นข้อความบนปุ่ม

การตั้งค่าสี

ปรับแต่งรูปลักษณ์ของปุ่มด้วยการตั้งค่าสี

1. สีปุ่ม: เปลี่ยนสีพื้นหลังของปุ่ม ค่าเริ่มต้นคือสีเขียว (#31cb4b) ใช้ช่องโค้ด hex หรือตัวเลือกสีเพื่อเลือกสีใหม่

2. สีข้อความ: กำหนดสีข้อความของปุ่ม ค่าเริ่มต้นคือสีขาว (#ffffff) เลือกสีที่ตัดกับพื้นหลังของปุ่มได้ดีเพื่อให้อ่านง่าย

3. สีพื้นหลัง: ปรับพื้นหลังของคอนเทนเนอร์ปุ่ม โดยค่าเริ่มต้นจะโปร่งใส แต่คุณสามารถเปลี่ยนสีเพื่อให้ปุ่มโดดเด่นบนพื้นหลังอีเมล

รัศมีขอบ

ควบคุมความโค้งมนของมุมปุ่มด้วยการตั้งค่า รัศมีขอบ

• ค่าเริ่มต้น: 30 (มุมโค้งมนปานกลาง)
• ช่วงค่า: 0 (มุมเหลี่ยม) ถึง 100 (ปุ่มทรงแคปซูล)

หมายเหตุ: เพื่อให้มุมโค้งมนแสดงผลอย่างถูกต้องใน Microsoft Outlook ให้เปิดใช้ตัวเลือก "รองรับ Outlook" ในแท็บ ลักษณะที่ปรากฏ

การจัดแนว

กำหนดตำแหน่งปุ่มภายในพื้นที่เนื้อหาโดยใช้การตั้งค่า การจัดแนว

• ตัวเลือก: ซ้าย, กลาง, ขวา
• การใช้งานทั่วไป: จัดกึ่งกลางเพื่อเน้นปุ่ม หรือจัดชิดซ้าย/ขวาเพื่อให้สอดคล้องกับการออกแบบ

ความสูงคงที่

เปิดใช้ตัวเลือก ความสูงคงที่ เพื่อรักษาขนาดปุ่มให้สม่ำเสมอ

1. ค่าเริ่มต้น: ปิดใช้งาน
2. ความสูงขั้นต่ำ: 44 พิกเซล
3. การจัดแนวเนื้อหาในแนวตั้ง: เมื่อเปิดใช้ความสูงคงที่ ให้จัดเนื้อหาของปุ่มไว้ที่ บน, กลาง หรือ ล่าง เพื่อกำหนดตำแหน่งอย่างแม่นยำ

ปุ่มพร้อมไอคอน

ตัวเลือก ปุ่มพร้อมไอคอน ช่วยให้คุณใส่ไอคอนข้างข้อความบนปุ่ม เพิ่มความน่าสนใจและช่วยเน้นคำกระตุ้นการตัดสินใจ ฟีเจอร์นี้ ปิดใช้งานตามค่าเริ่มต้น

• รูปแบบที่รองรับ: อัปโหลดไอคอนในรูปแบบ PNG, JPG หรือ GIF โดยมีขนาดไฟล์สูงสุด 2 MB
• ตำแหน่งไอคอน: เลือกให้ไอคอนแสดงทางด้าน ซ้าย หรือ ขวา ของข้อความบนปุ่ม

หมายเหตุ: ไอคอนจะ ไม่แสดง ใน Microsoft Outlook บน Windows บางเวอร์ชัน ได้แก่:

• Outlook 2002, 2007, 2010, 2013, 2016 และ 2019 ข้อจำกัดนี้เกิดจากวิธีที่โปรแกรมรับส่งอีเมลเหล่านี้แสดงผลอีเมล HTML โปรดคำนึงถึงเรื่องนี้หากผู้ชมส่วนใหญ่ใช้โปรแกรมเหล่านี้

การตั้งค่าเส้นขอบ

ปรับแต่งเส้นขอบของปุ่มเพื่อเพิ่มสไตล์และความโดดเด่น

• ความกว้างเส้นขอบ: กำหนดความกว้างของแต่ละด้าน (ซ้าย ขวา บน และล่าง) แยกกันได้สูงสุด 40 พิกเซล
• สไตล์เส้นขอบ: เลือกจากแบบ ทึบ, เส้นประ หรือ จุด
• สีเส้นขอบ: ใช้ตัวเลือกสีหรือป้อนโค้ด hex เพื่อให้สีเส้นขอบเข้ากับแบรนด์หรือโทนการออกแบบ

ระยะห่างภายในปุ่ม

ปรับพื้นที่ภายในปุ่มระหว่างเนื้อหา (ข้อความและไอคอน) กับเส้นขอบปุ่ม

• ตัวเลือกการปรับแต่ง: กำหนดค่าระยะห่างสำหรับด้าน ซ้าย, ขวา, บน และ ล่าง ได้สูงสุด 99 พิกเซล
• ผลกระทบ: ระยะห่างภายในมีผลต่อขนาดโดยรวมของปุ่มและตำแหน่งของเนื้อหาภายในปุ่ม

ระยะห่างภายนอก

ควบคุมพื้นที่ภายนอกปุ่มเพื่อปรับตำแหน่งเมื่อเทียบกับองค์ประกอบอื่น ๆ ในเลย์เอาต์อีเมล

• ตัวเลือกการปรับแต่ง: กำหนดค่าระยะห่างภายนอกสำหรับด้าน ซ้าย, ขวา, บน และ ล่าง ได้สูงสุด 40 พิกเซล
• กรณีการใช้งาน: ช่วยให้ปุ่มไม่อยู่ใกล้เนื้อหาอื่นหรือขอบอีเมลมากเกินไป

เพิ่มลิงก์แองเคอร์

ใช้ลิงก์แองเคอร์เพื่อนำผู้อ่านไปยังส่วนที่ต้องการภายในอีเมลฉบับเดียวกัน ช่วยให้เลื่อนดูจดหมายข่าวที่มีเนื้อหายาวได้อย่างรวดเร็ว

• ชื่อแองเคอร์: กำหนดจุดเป้าหมายภายในอีเมลและเชื่อมโยงปุ่มไปยังแองเคอร์นี้ เมื่อคลิก อีเมลจะเลื่อนไปยังส่วนที่ระบุ ช่วยให้ผู้ใช้ไปยังส่วนต่าง ๆ ได้สะดวกขึ้น

สำคัญ: โปรแกรมรับส่งอีเมลบางประเภทไม่รองรับลิงก์แองเคอร์ ได้แก่:

• แอป Gmail บน iOS
• Apple Mail บน iOS
• แอป Outlook สำหรับ Android
• แอป Outlook สำหรับ macOS
• อีเมล AMP

ทดสอบอีเมลอย่างละเอียดเพื่อให้แน่ใจว่าทำงานได้ในโปรแกรมรับส่งอีเมลต่าง ๆ และพิจารณาว่าฟีเจอร์นี้เหมาะกับผู้ชมของคุณหรือไม่

บล็อกตัวเว้นระยะ

บล็อกตัวเว้นระยะ ช่วยให้คุณเพิ่มพื้นที่ที่ปรับขนาดได้ภายในเนื้อหาอีเมล พร้อมควบคุมขนาด การจัดแนว รูปลักษณ์ และระยะห่างภายใน ด้านล่างนี้คือรายละเอียดเกี่ยวกับตัวเว้นระยะ 2 ประเภท: ตัวเว้นระยะปกติ และ ตัวเว้นระยะแบบไดนามิก

1. ตัวเว้นระยะปกติ

ตัวเว้นระยะปกติ เป็นองค์ประกอบเส้นที่ช่วยแบ่งส่วนต่าง ๆ ในอีเมลด้วยภาพ

การตั้งค่าหลัก

1. ความหนาและสไตล์ของเส้น ปรับแต่งความหนา สไตล์ และสีของเส้น:

   • ความหนา: ปรับโดยใช้ปุ่ม + และ - (เริ่มต้นที่ 1)
   • สไตล์: เลือกแบบ ทึบ, เส้นประ หรือ จุด
   • สี: กำหนดสีแบบกำหนดเองโดยใช้โค้ด hex หรือตัวเลือกสี (ค่าเริ่มต้น: #cccccc)

2. ความกว้าง กำหนดว่าเส้นตัวเว้นระยะจะกินพื้นที่เนื้อหามากเพียงใด ปรับความกว้างเป็นพิกเซลโดยใช้ปุ่ม + และ -

3. การจัดแนว จัดเส้นชิด ซ้าย, กลาง หรือ ขวา ให้เข้ากับเลย์เอาต์

4. ระยะห่างภายใน ควบคุมพื้นที่ภายในรอบตัวเว้นระยะ:

   • ค่าเริ่มต้น: ตั้งระยะห่างภายในเป็น 20 ทุกด้าน
   • ใช้สวิตช์ เพิ่มเติม เพื่อกำหนดระยะห่างภายในแต่ละด้าน:
     • บน
     • ขวา
     • ล่าง
     • ซ้าย

กรณีการใช้งาน

ตัวเว้นระยะปกติ เหมาะสำหรับสร้างเส้นแบ่งส่วนต่าง ๆ ในอีเมลให้ดูสะอาดตา ช่วยให้เลย์เอาต์เป็นระเบียบและดูเป็นมืออาชีพ

2. ตัวเว้นระยะแบบไดนามิก

ตัวเว้นระยะแบบไดนามิก คือบล็อกพื้นที่ว่างที่มองไม่เห็น ซึ่งออกแบบมาเพื่อเพิ่มพื้นที่หายใจให้เลย์เอาต์อีเมล

ฟีเจอร์หลัก

1. การปรับความสูง ปรับความสูงได้โดยตรงภายในพื้นที่เนื้อหา หรือผ่านแผงควบคุมโดยใช้ปุ่ม + และ - ความสูงจะกำหนดปริมาณพื้นที่แนวตั้งที่เพิ่มระหว่างส่วนต่าง ๆ

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

3. การทำงานแบบตอบสนอง ตัวเลือก ตัวเว้นระยะแบบตอบสนอง ช่วยให้ตัวเว้นระยะปรับตามขนาดหน้าจอที่แตกต่างกันแบบไดนามิก เพื่อให้เลย์เอาต์เหมาะสมบนอุปกรณ์ต่าง ๆ ฟีเจอร์นี้ เปิดใช้งานตามค่าเริ่มต้น

ความแตกต่างหลักระหว่างตัวเว้นระยะปกติและตัวเว้นระยะแบบไดนามิก

• ตัวเว้นระยะแบบไดนามิก: เพิ่มพื้นที่ว่างโดยไม่มีเส้นที่มองเห็นได้
• ตัวเว้นระยะปกติ: มีการตั้งค่าเฉพาะสำหรับเส้น เช่น:
  • ความกว้าง ของเส้น
  • การจัดแนว
  • สไตล์ ของเส้น
  • ระยะห่างภายใน

ตัวเว้นระยะแบบไดนามิก ไม่รองรับฟีเจอร์เหล่านี้ และออกแบบมาเพื่อแบ่งส่วนโดยไม่มีองค์ประกอบทางภาพเท่านั้น

3. เพิ่มลิงก์แองเคอร์

สามารถใช้ลิงก์แองเคอร์กับตัวเว้นระยะทั้งสองประเภท เพื่อให้ผู้ใช้ไปยังตำแหน่งของตัวเว้นระยะจากส่วนอื่นของอีเมลได้โดยตรง ฟีเจอร์นี้มีประโยชน์เป็นพิเศษสำหรับสร้างการนำทางภายในอีเมลที่มีเนื้อหายาว

หมายเหตุ: โปรแกรมรับส่งอีเมลบางประเภทไม่รองรับลิงก์แองเคอร์ ได้แก่:

• Microsoft Outlook
• Gmail (บนอุปกรณ์เคลื่อนที่)

บล็อกวิดีโอ

บล็อกวิดีโอ ช่วยให้คุณฝังวิดีโอลงในอีเมลและปรับแต่งรูปลักษณ์กับการทำงานได้ รองรับลิงก์วิดีโอจากแพลตฟอร์มต่าง ๆ เช่น YouTube และ Vimeo ทำให้มีความยืดหยุ่นและควบคุมวิธีนำเสนอวิดีโอได้

1. ลิงก์ไปยังวิดีโอ

เพิ่ม URL วิดีโอในช่อง ลิงก์ไปยังวิดีโอ แพลตฟอร์มที่รองรับ ได้แก่ YouTube, Vimeo และบริการอื่น ๆ ที่สามารถฝังได้

• การทำงานอัตโนมัติ: เมื่อเพิ่ม URL ที่ถูกต้อง:

  • ระบบจะสร้าง ภาพตัวอย่าง โดยใช้ภาพขนาดย่อของวิดีโอจากแพลตฟอร์มโดยอัตโนมัติ
  • ช่อง ข้อความสำรอง จะกรอกชื่อหรือคำอธิบายวิดีโอโดยอัตโนมัติ (หากมี)

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

2. ข้อความสำรอง

ช่อง ข้อความสำรอง ช่วยด้านการเข้าถึงด้วยการแสดงคำอธิบายวิดีโอหากโหลดวิดีโอไม่สำเร็จ

• กรอกโดยอัตโนมัติเมื่อเพิ่ม URL วิดีโอที่รองรับ
• ปรับแต่งให้เหมาะกับความต้องการด้านเนื้อหาได้

3. ภาพขนาดย่อแบบกำหนดเอง

อัปโหลดรูปภาพแบบกำหนดเองเพื่อแทนที่ภาพตัวอย่างวิดีโอเริ่มต้น

• วิธีเปิดใช้: เปิดสวิตช์ตัวเลือก ภาพขนาดย่อแบบกำหนดเอง
• รูปแบบที่รองรับ: PNG, JPG หรือ GIF
• ควรใช้เมื่อใด: แทนที่ภาพขนาดย่อที่สร้างขึ้นเมื่อไม่สอดคล้องกับการออกแบบอีเมล

4. ปุ่มเล่น

ปรับแต่ง ปุ่มเล่น ที่วางซ้อนบนภาพขนาดย่อวิดีโอ

• ตัวเลือกที่มีให้ใช้:
  • เลือกจากสไตล์ปุ่มเล่นของ YouTube, Vimeo หรือรูปแบบอื่น ๆ
  • เลือก “ไม่มี” เพื่อซ่อนปุ่มเล่นทั้งหมด

5. ขนาด

ปรับขนาดวิดีโอให้เหมาะกับการออกแบบอีเมล

• ความกว้างและความสูง: ใช้ปุ่ม + และ - หรือป้อนค่าเองเพื่อควบคุมขนาด
• การออกแบบแบบตอบสนอง: ตรวจสอบให้วิดีโอพอดีกับอุปกรณ์ต่าง ๆ ได้อย่างราบรื่น

6. ปรับตามความกว้าง

เปิดสวิตช์ ปรับตามความกว้าง เพื่อให้วิดีโอพอดีกับความกว้างของคอนเทนเนอร์โดยอัตโนมัติ ช่วยให้วิดีโอคงการออกแบบแบบตอบสนองบนอุปกรณ์ต่าง ๆ

7. รูปภาพแบบตอบสนอง

สวิตช์ รูปภาพแบบตอบสนอง ช่วยให้ภาพขนาดย่อวิดีโอปรับให้พอดีกับความกว้างหน้าจอบนอุปกรณ์เคลื่อนที่

• หมายเหตุ: การตอบสนองขึ้นอยู่กับการรองรับของอุปกรณ์และโปรแกรมรับส่งอีเมล

8. การจัดแนว

ใช้การตั้งค่า การจัดแนว เพื่อควบคุมตำแหน่งแนวนอนของวิดีโอในบล็อก:

• ซ้าย: จัดวิดีโอชิดซ้าย
• กลาง: จัดวิดีโอไว้ตรงกลาง
• ขวา: จัดวิดีโอชิดขวา

9. ตัวเลือกเฉพาะอุปกรณ์เคลื่อนที่

ปรับแต่งการทำงานและรูปลักษณ์ของวิดีโอบนอุปกรณ์เคลื่อนที่:

1. ซ่อนองค์ประกอบบนมือถือ ซ่อนบล็อกวิดีโอบนอุปกรณ์เคลื่อนที่หากจำเป็น

   • หมายเหตุ: ฟีเจอร์นี้อาศัยการรองรับ media query และอาจไม่ทำงานในโปรแกรมรับส่งอีเมลทุกประเภท

2. ระยะห่างภายในบนมือถือ ปรับระยะห่างรอบวิดีโอสำหรับการแสดงผลบนมือถือ

   • ใช้สวิตช์ เพิ่มเติม เพื่อกำหนดค่าระยะห่างแต่ละด้าน:
     • บน
     • ขวา
     • ล่าง
     • ซ้าย

10. รวมใน AMPHTML หรือ HTML

เลือกว่าบล็อกวิดีโอจะปรากฏในอีเมลเวอร์ชันใด:

• ทั้ง AMPHTML และ HTML
• เฉพาะ AMPHTML
• เฉพาะ HTML

ตัวเลือกนี้ช่วยให้แน่ใจว่าวิดีโอจะถูกใส่ไว้อย่างเหมาะสมตามเวอร์ชันอีเมลที่ส่ง

บล็อก HTML

บล็อก HTML ช่วยให้คุณแทรกโค้ด HTML และ CSS แบบกำหนดเองลงในอีเมล เพิ่มความยืดหยุ่นสำหรับการปรับแต่งขั้นสูงพร้อมคำนึงถึงความเข้ากันได้กับโปรแกรมรับส่งอีเมล ไม่ว่าจะเพิ่มองค์ประกอบ HTML เพียงรายการเดียวหรือออกแบบอีเมลทั้งฉบับ บล็อกนี้คือเครื่องมือสำหรับสร้างการออกแบบที่ตรงตามความต้องการ

1. อินเทอร์เฟซเครื่องมือแก้ไขโค้ด

เมื่อเลือก บล็อก HTML หน้าต่างเครื่องมือแก้ไขโค้ดสีดำจะปรากฏในแผงเนื้อหา เครื่องมือนี้ช่วยให้คุณเขียน วาง หรือแก้ไขโค้ดแบบกำหนดเอง โดยมี 2 ส่วน:

• ส่วน HTML: เพิ่มหรือแก้ไขโครงสร้าง HTML สำหรับอีเมล
• ส่วน CSS: เปิดเครื่องมือแก้ไข CSS แยกต่างหากเพื่อจัดรูปแบบเนื้อหา

2. การปรับขนาดแบบอักษร

ปรับขนาดแบบอักษรของโค้ดในเครื่องมือแก้ไขเพื่อให้อ่านง่ายขึ้น:

• ใช้ปุ่ม A+ เพื่อเพิ่มขนาดแบบอักษร
• ใช้ปุ่ม A- เพื่อลดขนาดแบบอักษร

3. การปรับขนาดหน้าต่างเครื่องมือแก้ไข

ปรับขนาดหน้าต่างเครื่องมือแก้ไขโค้ดให้เหมาะกับลักษณะการทำงานของคุณ:

• วิธีปรับ:
  • เลื่อนเมาส์ไปเหนือ จุดสามจุด ที่ด้านบนกึ่งกลางของหน้าต่างเครื่องมือแก้ไข
  • ลาก ตัวควบคุมแถบเลื่อน ขึ้นหรือลงเพื่อเพิ่มหรือลดขนาดเครื่องมือแก้ไข

ฟีเจอร์นี้มีประโยชน์เป็นพิเศษสำหรับจัดการบล็อกโค้ดขนาดใหญ่หรือมีรายละเอียดมาก

4. เครื่องมือแก้ไข CSS

เครื่องมือแก้ไข CSS ช่วยให้คุณจัดการสไตล์สำหรับเนื้อหา HTML และเข้าถึงได้ผ่านปุ่มที่มุมขวาบนของเครื่องมือแก้ไขโค้ด

ข้อควรพิจารณาที่สำคัญ:

• การรองรับจำกัด: โปรแกรมรับส่งอีเมลจำนวนมากไม่รองรับฟีเจอร์ CSS ขั้นสูง เช่น Flexbox, Grid หรือ media queries
• ใช้พื้นฐาน: ใช้ CSS แบบอินไลน์พื้นฐาน เพื่อความเข้ากันได้สูงสุด
• สไตล์ที่กำหนดค่าไว้ล่วงหน้า: หลีกเลี่ยงการลบสไตล์ที่กำหนดค่าไว้ล่วงหน้า เนื่องจากช่วยให้แสดงผลได้ถูกต้องในโปรแกรมรับส่งอีเมลหลัก ๆ

5. ความเข้ากันได้กับโปรแกรมรับส่งอีเมล

HTML ของอีเมลต้องใส่ใจเป็นพิเศษ เนื่องจากโปรแกรมรับส่งอีเมลจำนวนมากใช้เอนจินแสดงผลที่ล้าสมัย

แนวทางสำคัญ:

• ใช้เลย์เอาต์แบบ ตาราง แทนเลย์เอาต์ที่ใช้ <div> เพื่อให้รองรับได้ดียิ่งขึ้น
• หลีกเลี่ยงฟีเจอร์ CSS ขั้นสูง เช่น แอนิเมชัน, Flexbox หรือ Grid
• คาดหวังว่าการทำงานของ media query และคุณสมบัติ CSS เล็ก ๆ บางรายการอาจไม่สอดคล้องกัน
• การทดสอบ: ทดสอบอีเมลในโปรแกรมรับส่งหลายประเภทเสมอ (เช่น Gmail, Outlook, Apple Mail) เพื่อให้แน่ใจว่าแสดงผลได้ถูกต้อง

6. ระยะห่างภายใน

การตั้งค่า ระยะห่างภายใน ปรับพื้นที่รอบเนื้อหา HTML:

• ระยะห่างภายในเริ่มต้น: ตั้งเป็น 0 โดยค่าเริ่มต้น
• ระยะห่างภายในแบบกำหนดเอง: เปิดสวิตช์ เพิ่มเติม เพื่อปรับระยะห่างแต่ละด้าน:
  • บน
  • ขวา
  • ล่าง
  • ซ้าย

ฟีเจอร์นี้เหมาะสำหรับจัดแนวเนื้อหา HTML ภายในเลย์เอาต์อีเมล

7. เพิ่มลิงก์แองเคอร์

ฟีเจอร์ เพิ่มลิงก์แองเคอร์ ช่วยให้คุณสร้างลิงก์ที่คลิกได้ในส่วนอื่นของอีเมลเพื่อนำทางไปยังบล็อก HTML

วิธีใช้:

• เปิดสวิตช์ตัวเลือกและป้อน ชื่อแองเคอร์ ในช่อง

ข้อจำกัด:

• โปรแกรมรับส่งอีเมลบางประเภทไม่รองรับลิงก์แองเคอร์ เช่น:
  • แอป Gmail บน iOS
  • Apple Mail บน iOS
  • แอป Outlook (Android และ macOS)
  • อีเมล AMP

8. การเขียน HTML แบบกำหนดเอง

เครื่องมือแก้ไข HTML ออกแบบมาสำหรับเขียนหรือวางโครงสร้าง HTML แบบกำหนดเองของอีเมล

แนวทางปฏิบัติที่ดีที่สุด:

• ใช้ HTML ที่เรียบง่ายและรองรับอย่างแพร่หลาย
• หลีกเลี่ยงเลย์เอาต์หรือฟีเจอร์ที่ซับซ้อน เช่น องค์ประกอบ <div>
• ใช้การออกแบบแบบตารางเพื่อให้เข้ากันได้ดียิ่งขึ้น

9. เคล็ดลับสู่ความสำเร็จ

1. เริ่มจากเล็ก ๆ: ใช้บล็อก HTML กับส่วนเฉพาะหากคุณยังใหม่กับการพัฒนาอีเมล
2. ตรวจสอบโค้ด: ตรวจสอบให้แน่ใจว่า HTML สอดคล้องกับข้อกำหนดของโปรแกรมรับส่งอีเมล
3. ทดสอบอย่างละเอียด: ใช้เครื่องมือเพื่อดูตัวอย่างและทดสอบอีเมลในโปรแกรมรับส่งและอุปกรณ์หลายประเภท