เครื่องมือสร้าง HTML Email Template สร้างอะไรออกมา?

สร้างเอกสาร HTML แบบ self-contained เพียงไฟล์เดียวที่สร้างด้วย table-based layout และ inline CSS ซึ่งเป็นรูปแบบมาตรฐานที่แสดงผลได้สม่ำเสมอใน Outlook (desktop และ web), Gmail (web และแอปมือถือ), Apple Mail, Yahoo และ email client หลักอื่น ๆ ผลลัพธ์พร้อมวางลงใน Mailchimp, SendGrid, Amazon SES, Postmark หรือ email service provider อื่น ๆ ได้ทันที

ทำไมต้องใช้ table-based layout และ inline CSS แทน CSS สมัยใหม่?

email client ส่วนใหญ่จะตัดหรือละเว้น external stylesheet และฟีเจอร์ CSS สมัยใหม่หลายอย่าง Outlook ใช้การ render แบบ Word ที่รองรับ CSS ได้น้อยมาก table พร้อม inline style เป็นวิธีเดียวที่แสดงผลได้สม่ำเสมอบน client หลักทุกตัว ซึ่งเป็นเหตุผลว่าทำไม email template และ framework มืออาชีพทุกตัว (รวมถึง MJML และ Foundation for Emails) จึง compile ออกมาเป็น table เสมอ

ใช้สีแบรนด์และโลโก้ของตัวเองได้ไหม?

ได้ คุณสามารถตั้งชื่อแบรนด์ (แสดงในส่วนหัว) และเลือกสีแบรนด์ใดก็ได้ผ่านตัวเลือกสีหรือพิมพ์รหัส hex สีจะถูกใช้กับพื้นหลังส่วนหัวและปุ่ม call-to-action เครื่องมือไม่รองรับการอัปโหลดโลโก้รูปภาพ แต่คุณสามารถแก้ไข HTML ที่สร้างขึ้นภายหลังเพื่อแทนที่ส่วนหัวข้อความด้วยแท็ก img ได้

เทมเพลตพรีเซ็ตทำงานอย่างไร?

มีห้าพรีเซ็ต: Newsletter, Welcome, Promo/ลดราคา, Transactional และ Plain การเลือกพรีเซ็ตจะกรอกเนื้อหาเริ่มต้นและโครงสร้างที่เหมาะสมสำหรับประเภทอีเมลนั้นลงในทุกฟิลด์ ทำให้คุณเริ่มจากพื้นฐานที่เกี่ยวข้องแทนที่จะเริ่มจากหน้าว่าง จากนั้นคุณสามารถแก้ไขฟิลด์ใดก็ได้และพรีวิวจะอัปเดตทันที

พรีวิวอีเมลตรงกับที่ผู้รับจะเห็นจริงไหม?

พรีวิว render ภายใน sandboxed iframe โดยใช้ browser engine ของคุณ จึงสะท้อนวิธีที่ client สมัยใหม่ (Apple Mail, Gmail web) จะแสดงอีเมล Outlook desktop อาจแสดงผลแตกต่างเล็กน้อยเนื่องจากใช้ engine แบบ Word แต่มาร์กอัปแบบ table และ inline CSS ถูกออกแบบให้แสดงผลได้ดีที่นั่นด้วย ควรส่งอีเมลทดสอบให้ตัวเองเสมอก่อนส่งจำนวนมาก

เครื่องมือสร้าง HTML Email Template

สร้าง email template แบบ table layout พร้อม inline CSS ที่แสดงผลได้ดีใน Outlook และ Gmail มีเทมเพลตพรีเซ็ต 5 แบบ (newsletter, welcome, promo, transactional, plain) พร้อม live preview และโค้ดพร้อมใช้งาน

Loading tool...