การตั้งค่ารูปลักษณ์ของ Stripo Email Editor

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

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

ด้านล่างนี้คือคำอธิบายโดยละเอียดของแต่ละส่วนภายในแท็บ Appearance

---

1. การตั้งค่าทั่วไป

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

• การจัดแนวข้อความ: จัดแนวเนื้อหาอีเมลไปทาง ซ้าย, กึ่งกลาง หรือ ขวา
• ระยะห่างภายในเริ่มต้น: กำหนดระยะห่างรอบโครงสร้างใหม่ให้เท่ากัน หรือปรับระยะห่างของแต่ละด้าน (บน ขวา ล่าง ซ้าย) แยกกัน
• สีพื้นหลังทั่วไป: กำหนดสีพื้นหลังของอีเมลด้วยรหัส hex หรือเครื่องมือเลือกสี
• แบบอักษร: เลือกแบบอักษรมาตรฐาน เช่น Arial, Helvetica หรือแบบอักษรตกแต่ง เช่น Roboto และ Lato
• ระยะห่างระหว่างบรรทัด: ปรับระยะห่างระหว่างบรรทัดด้วยตัวเลือกที่กำหนดไว้ล่วงหน้า 4 แบบ
• ระยะห่างด้านล่างย่อหน้า: เปิดหรือปิดระยะห่างระหว่างย่อหน้า
• ขีดเส้นใต้ลิงก์: ขีดเส้นใต้ลิงก์ทั้งหมดในอีเมลโดยอัตโนมัติ (เปิด/ปิด)
• การออกแบบแบบตอบสนอง: เปิดใช้เพื่อให้อีเมลปรับตามขนาดหน้าจอต่าง ๆ โดยเฉพาะอุปกรณ์มือถือ
• ทิศทางข้อความ RTL: เปิดใช้สำหรับภาษาอย่างภาษาอาหรับหรือภาษาฮีบรู
• ภาพพื้นหลัง: เพิ่มภาพพื้นหลังและเลือกเชื่อมโยงภาพได้ ลากแล้ววางเพื่ออัปโหลดภาพ

---

2. แถบโครงสร้าง

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

แถบส่วนหัว

• ขนาดข้อความ: ปรับขนาดข้อความส่วนหัว (8–72)
• สีพื้นหลัง: กำหนดสีพื้นหลังทึบหรือปล่อยให้โปร่งใส
• สีพื้นหลังเนื้อหา: ปรับสีพื้นหลังภายในส่วนหัว
• สีแบบอักษร: กำหนดสีข้อความ
• สีลิงก์: กำหนดสีสำหรับลิงก์เมนูนำทางหรือลิงก์อื่น ๆ ในส่วนหัว
• ภาพพื้นหลัง: เพิ่มภาพพื้นหลังได้ตามต้องการ

แถบเนื้อหา

เนื้อหาหลักของอีเมลสำหรับข้อความ ภาพ และองค์ประกอบแบบโต้ตอบ

• ขนาดข้อความ: ปรับขนาดข้อความเนื้อหา (8–72)
• สีพื้นหลังเนื้อหา: กำหนดสีพื้นหลังของพื้นที่เนื้อหาหลัก
• สีแบบอักษร: กำหนดสีเริ่มต้นของข้อความ
• สีลิงก์: ปรับแต่งสีลิงก์

แถบส่วนท้าย

โดยทั่วไปใช้สำหรับรายละเอียดการติดต่อ ข้อมูลทางกฎหมาย หรือลิงก์โซเชียล

• ขนาดข้อความ: กำหนดขนาดข้อความ (8–72)
• สีพื้นหลัง: เลือกพื้นหลังทึบหรือปล่อยให้โปร่งใส
• สีพื้นหลังเนื้อหา: กำหนดพื้นหลังด้านในของส่วนท้าย
• สีแบบอักษร: กำหนดสีแบบอักษร
• สีลิงก์: ปรับแต่งสีลิงก์ในส่วนท้าย
• ภาพพื้นหลัง: เพิ่มภาพพร้อมลิงก์ที่คลิกได้ตามต้องการ

แถบพื้นที่ข้อมูล

ใช้สำหรับข้อสงวนสิทธิ์ ประกาศทางกฎหมาย หรือข้อมูลเพิ่มเติม

• ขนาดข้อความ: กำหนดขนาดแบบอักษร (8–72)
• สีแบบอักษร: กำหนดสีแบบอักษร
• สีลิงก์: ปรับสีลิงก์ในแถบนี้

---

3. หัวเรื่อง

กำหนดรูปแบบภาพของหัวเรื่อง (H1, H2, H3) เพื่อสร้างลำดับชั้นและโครงสร้างในอีเมล

• แบบอักษร: เลือกแบบอักษรสำหรับหัวเรื่อง
• ระยะห่างระหว่างบรรทัด: ปรับระยะห่างระหว่างบรรทัดเพื่อให้อ่านง่าย
• ขนาดหัวเรื่อง: ปรับขนาดหัวเรื่อง H1, H2 และ H3 (8–72)
• รูปแบบข้อความ: ใช้รูปแบบ ตัวหนา หรือ ตัวเอียง
• สีแบบอักษร: กำหนดสีเฉพาะสำหรับหัวเรื่องแต่ละประเภท

---

4. ปุ่ม

ออกแบบปุ่มในอีเมลเพื่อเพิ่มการมีส่วนร่วม

• รองรับ Outlook: เปิดใช้เพื่อให้แสดงผลใน Microsoft Outlook ได้อย่างถูกต้องโดยใช้โค้ด VML (อาจทำให้ขนาดอีเมลเพิ่มขึ้น)
• สีปุ่ม: กำหนดสีเริ่มต้นของปุ่ม
• เน้นปุ่มเมื่อวางเมาส์: เปิดหรือปิดเอฟเฟกต์สีเมื่อวางเมาส์
  • สีเมื่อวางเมาส์: เลือกสีเมื่อวางเมาส์
• สีแบบอักษร: กำหนดสีข้อความบนปุ่ม
• รูปแบบข้อความ:
  • แบบอักษร: เลือกแบบอักษรสำหรับข้อความบนปุ่ม
  • ขนาดแบบอักษร: ปรับขนาดข้อความ (8–72)
  • รูปแบบ: ใช้รูปแบบข้อความ ตัวหนา หรือ ตัวเอียง
• รัศมีเส้นขอบ: ทำให้มุมปุ่มโค้งมน (0–100)
• เส้นขอบ:
  • ประเภท: เลือกเส้นขอบแบบ ทึบ, เส้นประ หรือ จุด
  • สี: กำหนดสีเส้นขอบ
• ระยะห่างภายใน: ปรับระยะห่างภายในปุ่ม (บน ขวา ล่าง ซ้าย)

---

5. การจัดรูปแบบบนมือถือ

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

• ขนาดข้อความส่วนหัว เนื้อหา ส่วนท้าย และพื้นที่ข้อมูล: ปรับขนาดข้อความของแต่ละส่วนบนมือถือ
• ขนาดแบบอักษรรายการเมนู: ปรับขนาดแบบอักษรของรายการเมนูนำทาง
• ขนาดหัวเรื่อง: กำหนดขนาด H1, H2 และ H3 สำหรับมุมมองบนมือถือ
• การจัดแนวหัวเรื่อง: จัดแนวหัวเรื่องไปทาง (ซ้าย กึ่งกลาง ขวา)
• ขนาดข้อความปุ่ม: ปรับขนาดข้อความบนปุ่มสำหรับมือถือ
• ปุ่มเต็มความกว้าง: เปิดใช้เพื่อให้ปุ่มขยายเต็มความกว้างของหน้าจอ
• ระยะห่างภายในด้านบนและด้านล่าง: ปรับระยะห่างภายในเพื่อให้แสดงผลบนมือถือได้ดีขึ้น
• ระยะขอบเนื้อหา: ปรับระยะขอบรอบเนื้อหาสำหรับมือถือ (0–100)

---

หมายเหตุส่งท้าย

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