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

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

หมายเหตุ

ต้องการใช้ HTML? ใช้เครื่องมือแก้ไขโค้ด HTML ของ Pushwoosh เพื่อการควบคุมที่มากขึ้น เรียนรู้เพิ่มเติม

สำคัญ

ก่อนที่คุณจะเริ่ม ให้ตั้งค่าภาษา หัวเรื่อง และ preheader ของอีเมลของคุณ เรียนรู้วิธี

สร้างเนื้อหาอีเมลใหม่

1. ไปที่ Content → Email content
2. เลือกวิธีเริ่มต้น:
   • คลิก Create email content เพื่อเปิดเครื่องมือแก้ไขแบบลากและวางและสร้างอีเมลตั้งแต่ต้น
   • คลิกที่ลูกศรข้าง Create email content จากนั้นเลือก Use a template เพื่อเริ่มต้นจากเค้าโครงที่สร้างไว้ล่วงหน้าในแกลเลอรี
   • คลิกที่ลูกศรข้าง Create email content จากนั้นเลือก HTML code เพื่อใช้เครื่องมือแก้ไขโค้ด HTML เรียนรู้เพิ่มเติม

สำรวจเค้าโครงของเครื่องมือแก้ไข

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

แถบด้านบน

เปลี่ยนชื่ออีเมล เลิกทำหรือทำซ้ำการเปลี่ยนแปลง เรียกใช้ Check เพื่อตรวจหาปัญหาก่อนที่คุณจะส่ง และบันทึกงานของคุณ ดูที่ ตรวจสอบอีเมลของคุณก่อนส่ง เปิดเมนู ⋮ สำหรับการดำเนินการเพิ่มเติม:

• Preview: ดูอีเมลตามที่จะแสดงผลสำหรับผู้รับ พร้อมปุ่มสลับ Desktop/Mobile ของตัวเอง ดูที่ แก้ไขมุมมองบนมือถือ
• Test email: ส่งตัวอย่างไปยังอุปกรณ์ทดสอบหรือที่อยู่ทดสอบ ดูที่ ส่งอีเมลทดสอบ
• Brand book: ใช้โลโก้ สี ฟอนต์ และค่าเริ่มต้นของบล็อกที่คุณบันทึกไว้กับอีเมลนี้ได้ในคลิกเดียว เรียนรู้เพิ่มเติม
• ส่วน Brand styles: ใช้แบรนด์ที่คุณบันทึกไว้หรือรีเซ็ตการตั้งค่าสไตล์ของแต่ละบล็อกโดยไม่ต้องเปิด Brand book เรียนรู้เพิ่มเติม
• Version history: ดูและกู้คืนเวอร์ชันที่บันทึกไว้ก่อนหน้าของอีเมลนี้ ดูที่ กู้คืนเวอร์ชันก่อนหน้า

แถบภาษา / หัวเรื่อง / Preheader

เหนือพื้นที่ทำงาน (canvas) ให้สลับภาษาในการแก้ไข ตั้งค่าหัวเรื่องและ preheader สำหรับอีเมล และใช้ Auto-translate เพื่อเติมคำแปลที่ขาดหายไป เรียนรู้วิธีตั้งค่าภาษาและการแปลภาษา

พื้นที่ทำงาน (Canvas)

ดูอีเมลตามที่ผู้รับจะเห็น และแก้ไขข้อความ รูปภาพ และปุ่มได้โดยตรงบนเค้าโครง อีเมลที่ว่างเปล่าจะแสดง Start with a block

แผงเลเยอร์ (Layers panel)

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

แผงด้านขวา (Right panel)

สลับระหว่างสามแท็บ:

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

เพิ่มบล็อกเนื้อหา

1. เปิดแท็บ Blocks ในแผงด้านขวา
2. ลากบล็อกไปยังพื้นที่ทำงาน หรือคลิกที่บล็อกเพื่อเพิ่มที่ท้ายอีเมล
3. เพิ่มบล็อกต่อไปจนกว่าเค้าโครงจะพร้อม

บล็อกแต่ละประเภทมีวัตถุประสงค์ที่แตกต่างกันในอีเมล:

• หัวเรื่อง: ชื่อเรื่องและหัวข้อสั้นๆ
• ข้อความ: เนื้อหาหลักและคำอธิบายที่ยาวขึ้น
• ปุ่ม: คำกระตุ้นการตัดสินใจที่สามารถคลิกได้
• รูปภาพ: รูปภาพจาก Media store การอัปโหลด หรือ URL
• วิดีโอ: โปสเตอร์วิดีโอที่สามารถคลิกได้ซึ่งจะเปิดบน YouTube หรือ Vimeo
• การ์ด: รูปภาพพร้อมหัวเรื่อง ข้อความ และปุ่มในเค้าโครงเดียว
• เส้นแบ่ง: เส้นที่แบ่งส่วนต่างๆ
• คอลัมน์: เค้าโครงแบบเคียงข้างกัน (2, 3 หรือ 4 คอลัมน์เท่ากัน หรือแบ่ง 33/67 และ 67/33)
• สินค้า: ตารางของการ์ดสินค้า — ป้อนสินค้าด้วยตนเอง หรือดึงมาจาก Product catalog ของคุณ หรือตะกร้าสินค้าที่ถูกทิ้งของผู้รับ
• ตัวจับเวลา: การนับถอยหลังสำหรับข้อเสนอและกำหนดเวลา
• เมนู: แถวหรือคอลัมน์ของลิงก์นำทางหรือลิงก์ติดต่อ
• โซเชียล: ไอคอนที่เชื่อมโยงไปยังโปรไฟล์โซเชียลของคุณ
• HTML: HTML ที่กำหนดเอง เช่น แบบฟอร์ม แบบสำรวจ หรือวิดีโอที่ฝังไว้

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

แสดงเนื้อหาให้ผู้รับที่ระบุ

หากต้องการแสดงบล็อกให้ผู้รับบางรายเท่านั้น ให้ตั้งค่า เงื่อนไขการแสดงผล

แก้ไขมุมมองบนมือถือ

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

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

ตั้งค่า padding และขนาดฟอนต์ที่แตกต่างกันสำหรับแต่ละอุปกรณ์

• Padding: ทุกบล็อก คอลัมน์ การ์ด และองค์ประกอบแต่ละอย่าง (เช่น ข้อความ รูปภาพ หรือปุ่ม) มีตัวควบคุม padding ที่คุณสามารถปรับเปลี่ยนสำหรับมือถือได้ สลับพื้นที่ทำงานเป็น Mobile เปิดช่องทำเครื่องหมายข้าง Padding และตั้งค่าใหม่ padding ของเดสก์ท็อปจะยังคงเหมือนเดิมจนกว่าคุณจะเปิดช่องทำเครื่องหมาย
• Font size: เปิด Font size (mobile) บนองค์ประกอบข้อความเพื่อตั้งค่าขนาดสำหรับมือถือโดยเฉพาะ หากไม่มีการปรับเปลี่ยนนี้ หัวข้อขนาดใหญ่จะย่อขนาดลงโดยอัตโนมัติเพื่อให้พอดีกับหน้าจอโทรศัพท์

ควบคุมวิธีการเรียงซ้อนของคอลัมน์บนมือถือ

เค้าโครง คอลัมน์ จะเรียงซ้อนกันในแนวตั้งบนโทรศัพท์โดยค่าเริ่มต้น ในมุมมองมือถือ ใช้ Stack columns เพื่อตั้งค่าการทำงานของแต่ละบล็อกคอลัมน์:

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

แสดงหรือซ่อนเนื้อหาตามอุปกรณ์

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

หมายเหตุ

การซ่อนเนื้อหาตามอุปกรณ์ไม่เหมือนกับการซ่อนตามผู้รับ หากต้องการแสดงบล็อกที่แตกต่างกันให้ผู้รับที่แตกต่างกัน ดูที่ แสดงเนื้อหาให้ผู้รับที่ระบุ

กำหนดค่าสไตล์และส่วนท้ายของอีเมลทั้งหมด

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

บันทึกอีเมลของคุณ

คลิก Save ในแถบด้านบนเพื่อบันทึกการเปลี่ยนแปลงของคุณ ใช้ Undo/Redo ในแถบด้านบนเพื่อย้อนกลับและไปข้างหน้าในการแก้ไขของคุณ

หมายเหตุ

การบันทึกจะเก็บอีเมลของคุณไว้ใน Content → Email content จากที่นั่นคุณสามารถแก้ไขและจัดการ และใช้ในแคมเปญของคุณได้ เรียนรู้เพิ่มเติม

กู้คืนเวอร์ชันก่อนหน้า

Pushwoosh จะบันทึกภาพรวมทุกครั้งที่คุณคลิก Save หากต้องการเข้าถึง ให้เปิดเมนู ⋮ ในแถบด้านบนและเลือก Version history — ซึ่งจะใช้ได้เมื่ออีเมลถูกบันทึกไว้อย่างน้อยหนึ่งครั้ง

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

การกู้คืนจะโหลดเวอร์ชันเป็นการเปลี่ยนแปลงที่ยังไม่ได้บันทึก จะไม่มีอะไรถูกเขียนทับจนกว่าคุณจะคลิก Save หากต้องการเลิกทำการกู้คืน ให้กด Cmd/Ctrl+Z Pushwoosh จะเก็บเวอร์ชันล่าสุด 20 เวอร์ชันต่ออีเมล

เคล็ดลับ

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

ตรวจสอบอีเมลของคุณก่อนส่ง

คลิก Check ในแถบด้านบนเพื่อเปิด Smart check และสแกนอีเมลของคุณเพื่อหาปัญหาทั่วไป:

• ปุ่มที่ไม่มีลิงก์
• ตัวยึดตำแหน่ง AI ที่ยังไม่ได้กรอก
• ช่องรูปภาพที่ว่างเปล่าและข้อความ alt ที่หายไป
• ความเปรียบต่างของข้อความที่ไม่เป็นไปตามมาตรฐาน WCAG AA
• หัวเรื่องที่ว่างเปล่าหรือยาวเกินไป
• ที่อยู่ไปรษณีย์ของผู้ส่งที่หายไปในส่วนท้ายของอีเมลการตลาด
• เนื้อหาที่ทำให้อีเมลเกินขีดจำกัดการตัดของ Gmail (~102 KB หลังจากนั้น Gmail จะตัดข้อความ)
• เนื้อหาที่ยังไม่ได้แปล
• ตัวจับเวลานับถอยหลังที่วันสิ้นสุดผ่านไปแล้ว
• เงื่อนไขการแสดงผล ที่มีกฎที่เสียหรือว่างเปล่า, สาขาที่สูญเสียบล็อกที่เชื่อมต่ออยู่, หรือเงื่อนไขที่จะไม่ถูกนำไปใช้เนื่องจากเนื้อหาแบบไดนามิกถูกปิดใช้งานสำหรับบัญชี
• ไวยากรณ์ Liquid ที่เสียในหัวเรื่อง, preheader, ส่วนท้าย หรือเนื้อหา ซึ่งจะถูกตรวจสอบในทุกภาษาที่คุณเพิ่ม
• บล็อก Products ที่ใช้ Catalog rule, Cart หรือ Recommendations โดยไม่มี API access token

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

หมายเหตุ

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

Smart check จะตรวจสอบไวยากรณ์ Liquid โดยอัตโนมัติทุกครั้งที่คุณเปิด — ไม่มีปุ่มแยกต่างหากให้คลิก ในขณะที่การตรวจสอบกำลังทำงาน แผงจะแสดง Checking Liquid syntax…; Smart check จะไม่รายงานว่าทุกอย่างผ่านจนกว่าการตรวจสอบนี้จะกลับมา ดังนั้นการตรวจสอบ Liquid ที่ช้าหรือล้มเหลวจะไม่สามารถซ่อนอยู่หลังข้อความ “all clear” ที่ไม่เป็นจริงได้

หมายเหตุ

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

ส่งอีเมลทดสอบ

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

1. เปิดเมนู ⋮ ในแถบด้านบนและเลือก Test email

2. ในหน้าต่างที่เปิดขึ้น ให้เพิ่มผู้รับได้สูงสุด 50 คน: เลือก อุปกรณ์ทดสอบ ที่บันทึกไว้อย่างน้อยหนึ่งเครื่อง หรือพิมพ์ที่อยู่อีเมลที่ถูกต้องเพื่อเพิ่มลงในรายการ หากต้องการลบผู้รับ ให้คลิก × บนนั้น

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

ใช้อีเมลที่คุณบันทึกไว้

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