ข้ามไปยังเนื้อหา
เอกสารสำหรับนักพัฒนา การสนับสนุน ขอสาธิต เข้าสู่ระบบ
Pushwoosh.com

อ้างอิงบล็อกเนื้อหาอีเมล

ข้อมูลอ้างอิงสำหรับทุกบล็อกที่คุณสามารถเพิ่มลงบน canvas ของ Drag & drop editor และสำหรับประเภทลิงก์ที่มีให้ใช้บนปุ่มและข้อความ หากต้องการควบคุมว่าผู้รับคนใดจะเห็นบล็อก ให้ตั้งค่า เงื่อนไขการแสดงผล

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

Anchor link to

เปิดแท็บ Blocks และลากบล็อกไปยัง canvas หรือคลิกที่บล็อกเพื่อเพิ่มไว้ที่ท้ายอีเมล บล็อกที่มีให้เลือก:

  • Heading: หัวข้อและพาดหัวสั้นๆ ในอีเมล
  • Text: เนื้อหาหลักและคำอธิบายที่ยาวขึ้น
  • Button: call to action ที่สามารถคลิกได้
  • Image: รูปภาพจาก Media store อัปโหลด หรือ URL
  • Video: โปสเตอร์วิดีโอที่สามารถคลิกได้ซึ่งลิงก์ไปยังวิดีโอ YouTube หรือ Vimeo
  • Card: รูปภาพที่จับคู่กับหัวข้อ ข้อความ และปุ่มในเลย์เอาต์เดียว
  • Divider: เส้นที่ใช้แบ่งส่วนต่างๆ ให้เห็นชัดเจน
  • 2 columns: สองคอลัมน์เท่ากันวางข้างกัน
  • 3 columns: สามคอลัมน์เท่ากันวางข้างกัน
  • 4 columns: สี่คอลัมน์เท่ากันวางข้างกัน
  • 33 / 67: สองคอลัมน์โดยที่คอลัมน์ซ้ายใช้ความกว้างประมาณ 33% และคอลัมน์ขวาประมาณ 67%
  • 67 / 33: สองคอลัมน์โดยที่คอลัมน์ซ้ายใช้ความกว้างประมาณ 67% และคอลัมน์ขวาประมาณ 33%
  • Timer: การนับถอยหลังสำหรับข้อเสนอและกำหนดเวลา
  • Menu: แถวหรือคอลัมน์ของลิงก์ เช่น การนำทางหรือข้อมูลติดต่อ
  • Social: ไอคอนที่ลิงก์ไปยังโปรไฟล์โซเชียลของคุณ
  • HTML: HTML ที่กำหนดเอง เช่น แบบฟอร์ม แบบสำรวจ หรือวิดีโอที่ฝังไว้
  • Products: ตารางการ์ดผลิตภัณฑ์ที่เกิดซ้ำ ป้อนผลิตภัณฑ์ด้วยตนเอง หรือดึงมาจาก Product catalog ของคุณ หรือตะกร้าสินค้าที่ถูกทิ้งของผู้รับ
  • News: ตารางการ์ดบทความที่เกิดซ้ำซึ่งดึงมาจากฟีด RSS หรือ Atom

หัวข้อและข้อความ

Anchor link to

บล็อก Heading และ Text ใช้สำหรับเก็บข้อความที่ผู้รับจะอ่านในอีเมล ใช้ Heading สำหรับหัวข้อและบรรทัดสั้นๆ และใช้ Text สำหรับเนื้อหาหลักและคำอธิบายที่ยาวขึ้น

คลิกที่บล็อกบน canvas เพื่อเริ่มแก้ไข เลือกข้อความเพื่อเปิดแถบเครื่องมือจัดรูปแบบ

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

ตัวเลือกในแถบเครื่องมือ

  • Text style: ตั้งค่าสไตล์ย่อหน้า (Heading 1, Heading 2, Normal, ฯลฯ) สำหรับทั้งบล็อก
  • Font size: ปรับขนาดข้อความที่เลือก หรือใช้ขนาดกับทั้งย่อหน้า
  • Bold / Italic / Underline / Strikethrough: การจัดรูปแบบตัวอักษรมาตรฐาน
  • Alignment: ชิดซ้าย, กึ่งกลาง หรือชิดขวา
  • Link: ครอบข้อความที่เลือกด้วยไฮเปอร์ลิงก์
  • Bulleted list / Numbered list: เปลี่ยนบรรทัดที่เลือกให้เป็นรายการ สัญลักษณ์หัวข้อย่อยหรือตัวเลขใดๆ ที่บรรทัดนั้นมีอยู่แล้วจะถูกลบออก เพื่อไม่ให้ซ้ำกับเครื่องหมายของรายการเอง

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

การวางจากเอกสารอื่น

การวางข้อความจาก Google Docs, Word หรือหน้าเว็บจะยังคงรูปแบบตัวหนา ตัวเอียง ขีดเส้นใต้ ขีดทับ และลิงก์ไว้ สี ขนาดตัวอักษร และตระกูลฟอนต์จากต้นฉบับจะไม่ถูกนำมาใช้ — การพิมพ์ของบล็อกเองจะถูกใช้เสมอ หากต้องการละเว้นการจัดรูปแบบของต้นฉบับทั้งหมดและใช้สไตล์ของบล็อก ให้วางด้วย Ctrl+Shift+V (Cmd+Shift+V บน Mac)

รายการสัญลักษณ์หัวข้อย่อยหรือรายการลำดับเลขที่วางจะยังคงสัญลักษณ์หรือตัวเลขเป็นข้อความธรรมดาที่จุดเริ่มต้นของแต่ละบรรทัดในบล็อกเดียวกัน เลือกบรรทัดเหล่านั้นแล้วคลิก Bulleted list / Numbered list เพื่อเปลี่ยนให้เป็นรายการจริง — ปุ่มจะลบเครื่องหมายที่เหลือออกให้คุณ

ในช่องบรรทัดเดียว เช่น ป้ายกำกับของ Button การขึ้นบรรทัดใหม่ที่วางจะถูกยุบเป็นช่องว่างเดียว

การปรับแต่งส่วนบุคคลด้วย Merge Tags

Merge Tags คือตัวยึดตำแหน่งที่แทรกค่า Tag จากโปรไฟล์ของผู้รับ เพื่อให้ผู้ติดตามแต่ละคนเห็นข้อความที่ปรับแต่งเฉพาะบุคคล หากต้องการเพิ่ม ให้เลือกข้อความ คลิก Merge Tags ในแถบเครื่องมือ และเลือก Tag จากบัญชีของคุณ คลิกที่ Merge Tag ที่แทรกเข้าไปเพื่อเปิดแผงที่มีช่อง Default (ค่าที่แสดงเมื่อแท็กว่าง) และ Format (การใช้อักษรตัวพิมพ์ใหญ่ การจัดรูปแบบตัวเลข หรือวันที่ที่จะใช้กับค่า)

รูปภาพ

Anchor link to

บล็อก Image ใช้แสดงรูปภาพในอีเมล เลือกบล็อกบน canvas เพื่อเปิดการตั้งค่า Image ในแผงด้านขวา

การเพิ่มรูปภาพ

คลิก Add image เมื่อบล็อกว่างเปล่า หรือ Replace image เมื่อมีรูปภาพตั้งค่าอยู่แล้ว ซึ่งจะเปิด Media Gallery ที่มีสามแท็บ:

  • Library: ไฟล์ที่คุณอัปโหลด สามารถค้นหาได้ตามชื่อไฟล์
  • Stock photos: ค้นหารูปภาพฟรีจาก Pexels โดยไม่ต้องออกจากเครื่องมือแก้ไข คลิกที่รูปภาพเพื่อคัดลอกไปยังไลบรารีของคุณและแทรกเข้าไป
  • Generate with AI: อธิบายรูปภาพที่คุณต้องการและเลือกอัตราส่วนภาพ รูปภาพที่สร้างขึ้นจะถูกบันทึกไว้ในไลบรารีของคุณ
Media Gallery ที่มีแท็บ Library, Stock photos และ Generate with AI และช่องค้นหาตามชื่อไฟล์

คุณยังสามารถวางลิงก์ที่โฮสต์ไว้โดยตรงใน Image URL เพื่อข้ามแกลเลอรีได้

Alt text

อธิบายรูปภาพใน Alt text เพื่อการเข้าถึง หรือคลิก Generate alt with AI เพื่อให้ AI เขียนคำอธิบายจากรูปภาพในภาษาที่คุณกำลังแก้ไขอยู่ รูปภาพที่เพิ่มจาก Stock photos หรือ Generate with AI จะได้รับ alt text โดยอัตโนมัติ

ขนาดและการปรับพอดี

  • Width: ตั้งค่าความกว้างของรูปภาพเป็น px หรือเป็นเปอร์เซ็นต์ของพื้นที่ที่มีอยู่เพื่อให้รูปภาพปรับขนาดได้ ปล่อยไว้เป็นค่าเริ่มต้นเพื่อใช้ความกว้างตามธรรมชาติของรูปภาพ
  • Width on mobile (px): เขียนทับความกว้างบนหน้าจอโทรศัพท์เท่านั้น ปล่อยว่างไว้เพื่อให้รูปภาพย่อขนาดลงตามสัดส่วนจากความกว้างบนเดสก์ท็อป
  • Height (px): ตั้งค่าความสูงในการแสดงผลแบบคงที่ ปล่อยว่างไว้เพื่อปรับขนาดอัตโนมัติ — จากอัตราส่วนการครอบตัดหากมีการตั้งค่าไว้ หรือจากสัดส่วนตามธรรมชาติของรูปภาพ
  • Crop: เลือก Original เพื่อรักษาสัดส่วนตามธรรมชาติของรูปภาพ หรือเลือกอัตราส่วน (Square (1:1), 4:3, 3:2, 16:9) เพื่อครอบตัดรูปภาพให้พอดีกับกล่องนั้น
  • Fit: เลือก Cover เพื่อเติมเต็มกล่องและครอบตัดให้พอดี ตั้งค่าจุดโฟกัสด้วย Focal point หรือเลือก Contain เพื่อปรับขนาดรูปภาพทั้งหมดภายในกล่องโดยไม่ครอบตัด จัดตำแหน่งด้วย Set position
การตั้งค่าขนาดและการปรับพอดีสำหรับบล็อก Image ที่มี Width, Height, Crop ตั้งค่าเป็น Original, Fit ตั้งค่าเป็น Cover และ Focal point

ลิงก์และระยะห่าง

หากต้องการเปิดลิงก์เมื่อคลิกที่รูปภาพ ให้ป้อนลิงก์ใน Link URL และตั้งค่า Link target ให้เปิดในแท็บเดียวกันหรือแท็บใหม่ ดู เพิ่มลิงก์ สำหรับประเภทลิงก์ที่มีให้เลือก

ใน Spacing เปิด Padding เพื่อเพิ่มช่องว่างรอบรูปภาพ ใช้ All sides สำหรับ padding ที่เท่ากันทุกด้าน หรือเปิด More options เพื่อตั้งค่าแต่ละด้านแยกกัน

แผงการตั้งค่ารูปภาพที่มี Replace image, Image URL, Alt text, Link URL, Link target และ Padding

วิดีโอ

Anchor link to

บล็อก Video เพิ่มวิดีโอ YouTube หรือ Vimeo ลงในอีเมลในรูปแบบภาพขนาดย่อที่สามารถคลิกได้ โปรแกรมอีเมลไม่สามารถเล่นวิดีโอภายในข้อความได้ ดังนั้นบล็อกจะแสดงภาพนิ่งพร้อมสัญลักษณ์ ▶ ซ้อนทับ เมื่อผู้รับแตะที่ภาพ วิดีโอจะเปิดขึ้นบน YouTube หรือ Vimeo ซึ่งใช้งานได้กับโปรแกรมอีเมลหลักทุกโปรแกรม รวมถึง Outlook

เลือกบล็อก Video บน canvas เพื่อเปิดการตั้งค่าในแผงด้านขวา

  • Video URL: วางลิงก์ YouTube หรือ Vimeo เครื่องมือแก้ไขจะดึงภาพขนาดย่อมาโดยอัตโนมัติ
  • Alt text: อธิบายวิดีโอเพื่อการเข้าถึง
  • Thumbnail URL: เก็บภาพขนาดย่อที่ดึงมาอัตโนมัติ หรือคลิก Add thumbnail / Replace thumbnail เพื่อเลือกจาก Media Gallery หรือวางลิงก์ที่โฮสต์ไว้โดยตรง
  • Play button overlay: เปิดใช้งานโดยค่าเริ่มต้น ปิดเพื่อแสดงภาพขนาดย่อธรรมดาโดยไม่มีสัญลักษณ์ ▶ ซ้อนทับ การซ้อนทับนี้ไม่สามารถใช้ได้กับภาพขนาดย่อบนโฮสต์ภายนอกบางแห่ง เครื่องมือแก้ไขจะเตือนคุณเมื่อเกิดกรณีนี้ และอีเมลจะแสดงภาพขนาดย่อธรรมดาแทน
  • Width (px), Corner radius (px), และ Alignment: ควบคุมลักษณะของภาพขนาดย่อและตำแหน่งในเลย์เอาต์ คุณสามารถตั้งค่าการจัดตำแหน่งแยกสำหรับมือถือได้
การตั้งค่าบล็อกวิดีโอที่มี Video URL, Alt text, Thumbnail URL, Play button overlay, Width, Corner radius และ Alignment

การ์ด

Anchor link to

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

แผงการตั้งค่าบล็อก Card สำหรับเลย์เอาต์ด้านซ้ายที่มีตัวเลือก Image, Size and fit, Spacing และ Block styles
  • Layout: เลือกด้านที่รูปภาพจะอยู่เทียบกับเนื้อหา
  • Image: แทนที่รูปภาพ, ตั้งค่า alt text, หรือแก้ไข prompt สำหรับรูปภาพที่คุณสร้างด้วย Generate with AI
  • Size & fit: ช่องขนาดจะขึ้นอยู่กับ Layout Crop สามารถใช้ได้กับทุกเลย์เอาต์ Fit ใช้ได้กับทุกเลย์เอาต์ยกเว้น Background:
  • Top: Height ตั้งค่าความสูงของรูปภาพเป็น px หรือเป็นเปอร์เซ็นต์ของความกว้างของการ์ด Width (px) จะจำกัดความกว้างของรูปภาพให้เป็นพิกเซลคงที่และจัดให้อยู่กึ่งกลาง
  • Background: Height ตั้งค่าความสูงของการ์ดเป็น px หรือเป็นเปอร์เซ็นต์ของความกว้าง ไม่มีช่อง Width (px) รูปภาพจะเติมเต็มการ์ดเป็นพื้นหลังและถูกครอบตัดให้พอดีเสมอ ดังนั้น Fit จึงไม่มีผลกับเลย์เอาต์นี้ Focal point ยังคงใช้งานได้: ใช้กำหนดส่วนของรูปภาพที่จะยังคงมองเห็นได้
  • Left หรือ Right: Width ตั้งค่าความกว้างของคอลัมน์รูปภาพเป็น px หรือเป็นเปอร์เซ็นต์ของการ์ด Height (px) จะกำหนดความสูงของรูปภาพเป็นพิกเซลคงที่ การตั้งค่าความสูงเป็นพิกเซลจะล้างอัตราส่วนการครอบตัดด้านล่าง การเลือกอัตราส่วนการครอบตัดจะล้างความสูงเป็นพิกเซล คุณไม่สามารถใช้ทั้งสองอย่างพร้อมกันได้
  • สำหรับทุกเลย์เอาต์:
  • Crop: เลือก Original เพื่อรักษาสัดส่วนตามธรรมชาติของรูปภาพ หรือเลือกอัตราส่วน (Square (1:1), 4:3, 3:2, 16:9) เพื่อครอบตัดรูปภาพให้พอดีกับกล่องนั้น
  • Fit: เลือก Cover เพื่อเติมเต็มกล่องและครอบตัดให้พอดี ตั้งค่าจุดโฟกัสด้วย Focal point หรือเลือก Contain เพื่อปรับขนาดรูปภาพทั้งหมดภายในกล่องโดยไม่ครอบตัด จัดตำแหน่งด้วย Set position
  • Spacing: ตั้งค่า padding รอบเนื้อหาของการ์ด

ปุ่ม

Anchor link to

Button คือ call to action ที่สามารถคลิกได้ในอีเมล

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

เพื่อตั้งค่าว่าจะเกิดอะไรขึ้นเมื่อผู้รับคลิกปุ่ม:

  • คลิกไอคอนลิงก์ในแถบเครื่องมือเพื่อเปิด Insert/Edit Link
  • หรือใช้ Action type และ URL ในส่วน Link ของแผงด้านขวา
บล็อก Button บน canvas พร้อมแถบเครื่องมือจัดรูปแบบและการตั้งค่า Link ในแผงด้านขวา

ดู เพิ่มลิงก์ สำหรับประเภทการกระทำที่มีให้เลือก

ในแผงด้านขวา ภายใต้ Styles:

  • Alignment: ชิดซ้าย, กึ่งกลาง หรือชิดขวา
  • Background, Text color, Font size, และ Font family: เปิดแต่ละตัวเลือกเพื่อเขียนทับลักษณะเริ่มต้น
  • Border radius, Border color, และ Border width: รูปร่างและเส้นขอบของปุ่ม
  • Width: ตั้งค่าความกว้างของปุ่มแบบคงที่หรือปล่อยให้เป็นอัตโนมัติ
  • Padding: เพิ่มช่องว่างภายในปุ่ม ใช้ All sides สำหรับ padding ที่เท่ากันทุกด้าน หรือเปิด More options เพื่อตั้งค่าแต่ละด้านแยกกัน
การตั้งค่า Button Styles ในแผงด้านขวาที่มี Alignment, Background, Text color, Font size, Border radius และ Padding

ตัวแบ่ง

Anchor link to

Divider คือเส้นแนวนอนระหว่างบล็อกเนื้อหา ใช้เพื่อแบ่งส่วนต่างๆ ในอีเมลให้เห็นชัดเจน

กำหนดค่า line style (Solid, Dashed, Dotted), color, thickness, และ width ในแผงการตั้งค่า

การตั้งค่าบล็อก Divider ที่มีสไตล์เส้น สี ความหนา และความกว้างในแผงด้านขวา

HTML

Anchor link to

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

เหนือช่องโค้ด คลิก Merge tag เพื่อค้นหา Tags ของบัญชีของคุณและแทรก Merge Tag ที่ตำแหน่งเคอร์เซอร์ — ซึ่งเป็นคุณสมบัติการปรับแต่งส่วนบุคคลเดียวกันกับที่อธิบายไว้ข้างต้น — หรือคลิกไอคอนอีโมจิเพื่อแทรกอีโมจิในลักษณะเดียวกัน คลิกที่ Merge Tag ที่แทรกเข้าไปเพื่อเปิดแผง Default / Format เดียวกันกับในบล็อก Heading หรือ Text

ตัวอย่าง

Anchor link to

แบบฟอร์มลูกค้าเป้าหมายนี้รวบรวมที่อยู่อีเมลเพื่อส่งรหัสโปรโมชั่นสำหรับ New Year Sale

แบบฟอร์มลูกค้าเป้าหมาย HTML ในเครื่องมือแก้ไขอีเมลที่มีช่องอีเมลและปุ่ม Get my code
โค้ด HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #CC0000;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
</style>
</head>
<body>


<h2>Get your New Year Sale code</h2>
<p>Enter your email and we'll send you an exclusive promo code for up to 50% off.</p>


<div id="form">
  <input type="email" placeholder="Your email address" />
  <button type="button">Get my code</button>
</div>


</body>
</html>

เมนู

Anchor link to

บล็อก Menu วางรายการที่สามารถคลิกได้หลายรายการในแถวหรือคอลัมน์ ใช้สำหรับแถบนำทางหรือรายชื่อผู้ติดต่อของบริษัท

สำหรับแต่ละรายการในเมนู ให้ตั้งค่า:

  • Label: ข้อความที่ผู้รับเห็น
  • URL: ที่ที่รายการจะเปิด
  • Target: แท็บเดียวกันหรือแท็บใหม่

ในการตั้งค่าบล็อก คุณยังสามารถตั้งค่า:

  • Direction: แนวนอนหรือแนวตั้ง
  • Alignment: ชิดซ้าย, กึ่งกลาง หรือชิดขวา
  • Separator: ตัวแบ่งเสริมระหว่างรายการ
  • ฟอนต์, ขนาด, น้ำหนัก, ระยะห่างตัวอักษร และสีของลิงก์/ข้อความ
การตั้งค่าบล็อกเมนูที่มีป้ายกำกับรายการ, URL, ทิศทาง, การจัดตำแหน่ง และตัวเลือกตัวแบ่ง

โซเชียล

Anchor link to

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

เพิ่มรายการแพลตฟอร์ม จากนั้นตั้งค่าการจัดตำแหน่ง ขนาดไอคอน และช่องว่างระหว่างไอคอน

การตั้งค่าบล็อกโซเชียลที่มีลิงก์แพลตฟอร์มพร้อมด้วย Alignment, Icon size และ Gap

ตัวจับเวลาถอยหลัง

Anchor link to

บล็อก Timer คือการนับถอยหลังในอีเมล ใช้สำหรับข้อเสนอที่มีเวลาจำกัด, flash sales และการแจ้งเตือนกิจกรรม

วิธีการตั้งค่า:

  1. ใน Countdown ตั้งค่า End date และ End time จากนั้นเลือก Timezone และ Language สำหรับป้ายกำกับของตัวจับเวลา
  2. เปิด Labels เพื่อแสดงคำบรรยาย “days / hours / minutes / seconds” ใต้ตัวเลข หรือปิดเพื่อแสดงเฉพาะตัวเลข
  3. ใน Appearance ตั้งค่า Background, Digits color, Labels color และขนาดฟอนต์สำหรับตัวเลข (ค่าเริ่มต้น 40px) และป้ายกำกับ (ค่าเริ่มต้น 16px)
  4. ปรับ Spacing (padding) ตามต้องการ
การตั้งค่าบล็อกตัวจับเวลาที่มีวันที่และเวลาสิ้นสุดการนับถอยหลัง, ป้ายกำกับ, ลักษณะที่ปรากฏ และตัวเลือกระยะห่าง

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

คอลัมน์

Anchor link to

Columns แบ่ง canvas ออกเป็นส่วนๆ วางข้างกันเพื่อให้คุณสามารถวางเนื้อหาติดกันในแถวเดียวได้

ลากหนึ่งในบล็อกเหล่านี้ไปยัง canvas:

  • 2 columns: สองคอลัมน์เท่ากัน
  • 3 columns: สามคอลัมน์เท่ากัน
  • 4 columns: สี่คอลัมน์เท่ากัน
  • 33 / 67: คอลัมน์ซ้ายกว้างประมาณ 33%, คอลัมน์ขวากว้างประมาณ 67%
  • 67 / 33: คอลัมน์ซ้ายกว้างประมาณ 67%, คอลัมน์ขวากว้างประมาณ 33%

จากนั้นเพิ่มเนื้อหาลงในแต่ละคอลัมน์ หากต้องการเปลี่ยนระยะห่างสำหรับทุกคอลัมน์ในอีเมล ให้เปิด Settings → Columns defaults และปรับ padding ด้านนอก, padding ของคอลัมน์ และช่องว่างระหว่างคอลัมน์

สำหรับรูปภาพของคอลัมน์เอง (รูปภาพที่คุณเพิ่มด้วย Add image ในการตั้งค่าของคอลัมน์) การตั้งค่าจะแสดงส่วน Size & fit ซึ่งเป็นการควบคุมเดียวกับเลย์เอาต์ Left / Right ของบล็อก Card บล็อก Image ที่ลากเข้าไปในคอลัมน์เป็นองค์ประกอบเนื้อหาแยกต่างหากและจะคงค่าช่องขนาดที่เรียบง่ายของตัวเองไว้ — ดู รูปภาพ

คุณยังสามารถวางลิงก์ที่โฮสต์ไว้โดยตรงใน Image URL เพื่อข้ามแกลเลอรีได้

  • Width: ตั้งค่าความกว้างของรูปภาพเป็น px หรือเป็นเปอร์เซ็นต์ของคอลัมน์ ปล่อยว่างไว้เพื่อเติมเต็มคอลัมน์
  • Height (px): กำหนดความสูงของรูปภาพเป็นพิกเซลคงที่ การตั้งค่าความสูงเป็นพิกเซลจะล้างอัตราส่วนการครอบตัดด้านล่าง การเลือกอัตราส่วนการครอบตัดจะล้างความสูงเป็นพิกเซล คุณไม่สามารถใช้ทั้งสองอย่างพร้อมกันได้
  • Crop: เลือก Original เพื่อรักษาสัดส่วนตามธรรมชาติของรูปภาพ หรือเลือกอัตราส่วน (Square (1:1), 4:3, 3:2, 16:9) เพื่อครอบตัดรูปภาพให้พอดีกับกล่องนั้น
  • Fit: เลือก Cover เพื่อเติมเต็มกล่องและครอบตัดให้พอดี ตั้งค่าจุดโฟกัสด้วย Focal point หรือเลือก Contain เพื่อปรับขนาดรูปภาพทั้งหมดภายในกล่องโดยไม่ครอบตัด จัดตำแหน่งด้วย Set position

สินค้า

Anchor link to

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

บล็อก Products บน canvas ที่มีตารางการ์ดผลิตภัณฑ์

คลิกที่การ์ดบน canvas เพื่อทำให้การ์ดนั้นใช้งานได้และแก้ไข:

  • เปลี่ยนชื่อ, คำอธิบาย, ราคา, รูปภาพ หรือลิงก์ต่อผลิตภัณฑ์เพื่ออัปเดตเฉพาะการ์ดนั้น
  • เปลี่ยนเลย์เอาต์ของเทมเพลต, สี, padding หรือองค์ประกอบที่บรรจุอยู่เพื่ออัปเดตทุกการ์ด

ในแผงการตั้งค่า ภายใต้ Source เลือกว่าผลิตภัณฑ์มาจากที่ใด:

  • Manual: ป้อนผลิตภัณฑ์ด้วยตนเอง, เลือกจาก Product catalog ของคุณตาม ID หรือผสมทั้งสองอย่าง
  • Catalog rule: ดึงผลิตภัณฑ์โดยอัตโนมัติตามหมวดหมู่และลำดับการจัดเรียง ซึ่งจะดึงข้อมูลล่าสุดจากแคตตาล็อก ณ เวลาที่ส่ง
  • Cart: แสดงรายการจากตะกร้าสินค้าที่ถูกทิ้งล่าสุดของผู้รับแต่ละคน

เพิ่มผลิตภัณฑ์ด้วยตนเอง

Anchor link to

เติมตารางด้วยตัวคุณเอง โดยการป้อนผลิตภัณฑ์ด้วยตนเองหรือโดยการเลือกรายการเฉพาะจาก Product catalog ของคุณตาม ID คุณสามารถผสมทั้งสองอย่างในบล็อกเดียวกันได้

  • Number of products: ตั้งค่าจำนวนการ์ดที่จะแสดง (1–24)
  • Add product: เพิ่มการ์ดและกรอกชื่อ, คำอธิบาย, ราคา, รูปภาพ และลิงก์ด้วยตัวคุณเอง
  • Pick from catalog…: เลือกผลิตภัณฑ์เฉพาะจาก Product catalog ของคุณแทนการพิมพ์
  • Refresh from catalog: ดึงชื่อ, คำอธิบาย, ราคา และรูปภาพล่าสุดสำหรับผลิตภัณฑ์ที่คุณเลือกจากแคตตาล็อก ในกรณีที่มีการเปลี่ยนแปลงหลังจากที่คุณเพิ่มเข้าไป จะไม่มีผลกับผลิตภัณฑ์ที่ป้อนด้วยตนเอง
  • Product images: คลิกที่ภาพขนาดย่อเพื่อแทนที่รูปภาพของผลิตภัณฑ์นั้น
  • Product links: ป้อนหรือแก้ไข URL สำหรับแต่ละผลิตภัณฑ์
การตั้งค่าแหล่งข้อมูลแบบ Manual สำหรับบล็อก Products ที่มี Add product, Pick from catalog, Refresh from catalog, Product images และ Product links

ดึงผลิตภัณฑ์ด้วยกฎแคตตาล็อก

Anchor link to

ดึงผลิตภัณฑ์โดยอัตโนมัติตามหมวดหมู่และลำดับการจัดเรียง โดยไม่ต้องเลือกด้วยตนเอง

  • Category: จำกัดเฉพาะหมวดหมู่ในแคตตาล็อกที่ระบุ หรือ All categories
  • Sort: เลือกลำดับการดึงผลิตภัณฑ์: Newest first, Price: low to high, Price: high to low, หรือ Title A-Z
  • Number of products: ตั้งค่าขีดจำกัดจำนวนการ์ดที่จะแสดง (1–12)
  • Refresh preview: คำนวณการแสดงตัวอย่างบน canvas เทียบกับแคตตาล็อกในขณะนี้
การตั้งค่าแหล่งข้อมูลแบบ Catalog rule สำหรับบล็อก Products ที่มี Category, Sort, Number of products และ Refresh preview

แสดงรายการจากตะกร้าสินค้า

Anchor link to

แสดงรายการปัจจุบันจากตะกร้าสินค้าที่ถูกทิ้งของผู้รับ

  • Max products shown: ตั้งค่าขีดจำกัดจำนวนการ์ดที่จะแสดง (1–12)
  • Preview a user’s cart: ป้อน user ID หรืออีเมลแล้วคลิก Preview cart เพื่อดูว่าบล็อกจะแสดงผลอย่างไรสำหรับผู้รับรายนั้นโดยเฉพาะ
การตั้งค่าแหล่งข้อมูลแบบ Cart สำหรับบล็อก Products ที่มี Max products shown และ Preview a user's cart

จัดสไตล์ตาราง

Anchor link to

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

  • Columns: เลือก 1, 2 หรือ 3 การ์ดต่อแถว บนมือถือ การ์ดจะเรียงซ้อนกันในคอลัมน์เดียวเสมอ
  • Gap: เปิดเพื่อตั้งค่าช่องว่างระหว่างการ์ด หากปิดจะใช้ค่าเริ่มต้น (16px)
  • Description limit: ขีดจำกัดตัวอักษรที่ข้อความคำอธิบายจะถูกตัด เพื่อให้การ์ดมีขนาดสม่ำเสมอ
  • Card template: เลือกเลย์เอาต์ จากนั้นตั้งค่า Card background, Card corner radius และ Content padding สำหรับทุกการ์ด
  • Size & fit: แสดงสำหรับทุกเลย์เอาต์ที่มีรูปภาพ การควบคุม Width, Height, Crop และ Fit เหมือนกับการปรับขนาดรูปภาพตามเลย์เอาต์ของ บล็อก Card โดยปรับขนาดเทียบกับความกว้างของการ์ดแทนที่จะเป็นทั้งอีเมล

การตั้งค่า Block style ด้านล่างจะจัดสไตล์บล็อกโดยรวม แยกจากการ์ดที่อยู่ภายใน:

  • Background และ Background image: ตั้งค่าสีพื้นหลังหรือรูปภาพพื้นหลังสำหรับทั้งตาราง
  • Border color, Border width, และ Border radius: เพิ่มเส้นขอบและมุมโค้งมนรอบทั้งตาราง
  • Hide on mobile และ Hide on desktop: ซ่อนทั้งบล็อกบนอุปกรณ์หนึ่ง ดู แสดงหรือซ่อนเนื้อหาตามอุปกรณ์

ข่าวสาร

Anchor link to

บล็อก News แสดงตารางการ์ดบทความที่ดึงมาจากฟีด RSS หรือ Atom เช่น บล็อกของคุณหรือเว็บไซต์ข่าว การ์ดแต่ละใบสามารถมีรูปภาพ, วันที่, พาดหัว, สรุป และลิงก์ “อ่านเพิ่มเติม” ได้ เทมเพลตจะเกิดซ้ำสำหรับทุกบทความ เช่นเดียวกับ บล็อก Products บล็อก News ใหม่จะเริ่มต้นด้วยการ์ดตัวอย่าง 2 ใบ

การ์ดบล็อก News บน canvas ที่มีรูปภาพบทความ, วันที่, พาดหัว, สรุป และปุ่มอ่านเพิ่มเติม

คลิกที่การ์ดบน canvas เพื่อทำให้การ์ดนั้นใช้งานได้และแก้ไข:

  • เปลี่ยนวันที่, พาดหัว, สรุป, รูปภาพ หรือลิงก์ต่อบทความเพื่ออัปเดตเฉพาะการ์ดนั้น
  • เปลี่ยนเลย์เอาต์ของเทมเพลต, สี, padding หรือองค์ประกอบที่บรรจุอยู่เพื่ออัปเดตทุกการ์ด

บทความจะถูกคัดลอกไปยังเนื้อหาอีเมลเมื่อคุณโหลดแล้ว จะไม่มีการดึงข้อมูลอีกครั้ง ณ เวลาที่ส่ง รูปภาพบทความจะถูกคัดลอกไปยัง Media store ของคุณและแปลงจาก WebP เป็น JPEG หากจำเป็น เนื่องจาก Outlook ไม่สามารถแสดงผล WebP ได้

ในแผงการตั้งค่า ภายใต้ News feed วาง RSS 2.0 หรือ Atom Feed URL จากนั้น:

  • Load latest articles: แทนที่การ์ดปัจจุบันด้วยบทความล่าสุดจากฟีด โดยมีจำนวนการ์ดเท่าเดิม (ค่าเริ่มต้น 2 ใบ)
  • Pick articles…: เปิดลิ้นชักที่แสดงรายการบทความล่าสุดจากฟีดสูงสุด 12 บทความ พร้อมภาพขนาดย่อ, พาดหัว, วันที่, หมวดหมู่ และผู้เขียน และเลือกบทความที่จะเพิ่ม บทความที่เลือกจะถูกต่อท้ายการ์ดที่มีอยู่แล้ว รวมสูงสุด 12 ใบ; บทความที่อยู่บน canvas แล้วไม่สามารถเลือกซ้ำได้
แผงการตั้งค่า News ที่มี Feed URL, ปุ่ม Load และ Pick article, Layout และตัวเลือก Card template

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

ลิ้นชัก Pick articles ที่แสดงรายการบทความในฟีดพร้อมภาพขนาดย่อ, พาดหัว, วันที่ และช่องทำเครื่องหมายเพื่อเลือก

Layout

  • Columns: เลือก 1, 2 หรือ 3 การ์ดต่อแถว บนมือถือ การ์ดจะเรียงซ้อนกันในคอลัมน์เดียวเสมอ
  • Gap: เปิดเพื่อตั้งค่าช่องว่างระหว่างการ์ด หากปิดจะใช้ค่าเริ่มต้น (16px)
  • Summary limit: ขีดจำกัดตัวอักษรที่สรุปบทความจะถูกตัด เพื่อให้การ์ดมีขนาดสม่ำเสมอ

รูปภาพและลิงก์บทความ

  • Article images: คลิกที่ภาพขนาดย่อเพื่อแทนที่รูปภาพของบทความนั้น
  • Article links: แสดงเมื่อเทมเพลตการ์ดมีลิงก์ที่ผูกกับบทความ (ปุ่ม “อ่านเพิ่มเติม” ที่เป็นค่าเริ่มต้น) แสดงรายการแต่ละบทความตามพาดหัวเพื่อให้คุณสามารถแก้ไขหรือเขียนทับ URL ปลายทาง ซึ่งเดิมดึงมาจากฟีด

เทมเพลตและการปรับขนาดการ์ด

เลือกเลย์เอาต์ จากนั้นตั้งค่า Card background, Card corner radius และ Content padding สำหรับทุกการ์ด สำหรับเลย์เอาต์ Left หรือ Right เปิด Wrap text around image เพื่อให้พาดหัวและสรุปไหลรอบรูปภาพแทนที่จะอยู่ในคอลัมน์คงที่ Size & fit (Width, Height, Crop, Fit) ทำงานเหมือนกับการปรับขนาดรูปภาพตามเลย์เอาต์ของ บล็อก Card โดยปรับขนาดเทียบกับความกว้างของการ์ด

สไตล์บล็อก

Background, Background image, สี/ความกว้าง/รัศมีของเส้นขอบ และ Hide on mobile / Hide on desktop ทำงานเหมือนกับ บล็อก Products

บันทึกและนำบล็อกกลับมาใช้ใหม่

Anchor link to

บันทึกบล็อกเพื่อนำกลับมาใช้ใหม่ในอีเมลนี้หรืออีเมลอื่นแทนที่จะต้องสร้างใหม่ทุกครั้ง

  1. คลิกที่ตัวบล็อกเอง (กรอบหรือพื้นหลัง ไม่ใช่ข้อความหรือปุ่มภายใน) เพื่อเลือกทั้งบล็อก Card, Columns และ Social เป็นตัวอย่างของบล็อกที่ทำงานในลักษณะนี้
  2. คลิกไอคอนบุ๊กมาร์กในแถบเครื่องมือของบล็อกและตั้งชื่อ
ไอคอนบุ๊กมาร์กในแถบเครื่องมือของบล็อก Card ที่เปิดกล่องโต้ตอบเพื่อตั้งชื่อและบันทึกบล็อก

บล็อกที่บันทึกไว้จะปรากฏใต้ Saved blocks ที่ด้านล่างของแท็บ Blocks

ส่วน Saved blocks ที่ด้านล่างของแท็บ Blocks ที่มีไทล์บล็อกที่บันทึกไว้และไอคอนลบ
  • ลากบล็อกที่บันทึกไว้ไปยัง canvas หรือคลิกเพื่อเพิ่มไว้ที่ท้ายอีเมล
  • คลิก × บนไทล์ของบล็อกที่บันทึกไว้เพื่อลบ

ซิงค์สำเนาให้ตรงกัน

Anchor link to

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

กล่องโต้ตอบ Save block ที่เปิด Keep copies in sync

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

  • Edit synced block: ปลดล็อกสำเนานี้เพื่อให้คุณสามารถเปลี่ยนแปลงได้ แบนเนอร์จะปรากฏที่ด้านบน คลิก Apply to all เพื่อบันทึกการเปลี่ยนแปลงของคุณไปยังแหล่งข้อมูลและสำเนาอื่นๆ ทั้งหมด หรือ Cancel เพื่อยกเลิกการเปลี่ยนแปลง คุณสามารถปลดล็อกบล็อกที่ซิงค์ได้ครั้งละหนึ่งบล็อกเท่านั้น
  • Update from source: แทนที่สำเนานี้ด้วยเวอร์ชันล่าสุดจากแหล่งข้อมูล
  • Detach from source: ยกเลิกการเชื่อมโยงสำเนานี้จากแหล่งข้อมูลเพื่อให้คุณสามารถแก้ไขได้ด้วยตัวเอง

เพิ่มลิงก์

Anchor link to

ใช้กล่องโต้ตอบ Insert/Edit Link เพื่อตั้งค่าว่าจะเกิดอะไรขึ้นเมื่อผู้รับคลิกปุ่มหรือข้อความที่เลือก เลือก Action type จากนั้นกรอกข้อมูลในช่องสำหรับการกระทำนั้น

Open Website

Anchor link to

เปิดลิงก์เมื่อผู้รับคลิก ป้อนที่อยู่ใน URL

กล่องโต้ตอบ Insert Edit Link ที่มี Action type Open Website และช่อง URL
Anchor link to

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

กล่องโต้ตอบ Insert Edit Link ที่เลือก Manage preferences link เป็นประเภทการกระทำ
Anchor link to

ให้ผู้รับเลือกไม่รับข่าวสารตามกฎระเบียบและความต้องการของพวกเขา

กล่องโต้ตอบ Insert Edit Link ที่เลือก Unsubscribe link เป็นประเภทการกระทำและมีช่อง redirect เสริม

จะเกิดอะไรขึ้นเมื่อผู้รับคลิกลิงก์ยกเลิกการสมัครรับข่าวสาร

Anchor link to
หากเปิดใช้งานศูนย์การตั้งค่าการสมัครรับข่าวสาร
Anchor link to

ผู้รับจะถูกยกเลิกการสมัครรับข่าวสารเฉพาะจากหมวดหมู่ที่กำหนดให้กับอีเมลนั้น (เช่น Newsletter) ชื่อหมวดหมู่จะถูกลบออกจากแท็ก Subscribed Email Categories ของพวกเขา

หน้าจอยืนยันจะปรากฏขึ้นพร้อมตัวเลือก Resubscribe และ Manage preferences เรียนรู้เพิ่มเติม

หากไม่ได้เปิดใช้งานศูนย์การตั้งค่าการสมัครรับข่าวสาร
Anchor link to

ผู้รับจะเลือกไม่รับอีเมลการตลาดทั้งหมดและแท็ก Unsubscribed Emails จะถูกตั้งค่าเป็น true อีเมลธุรกรรมจะไม่ได้รับผลกระทบและจะยังคงถูกส่งต่อไป เรียนรู้เพิ่มเติมเกี่ยวกับประเภทข้อความ

การคลิกจะถูกนับในอัตราการยกเลิกการสมัครรับข่าวสารใน Message History

Anchor link to

ให้ผู้รับเข้าถึงเวอร์ชันเว็บของอีเมล ซึ่งมีประโยชน์หากพวกเขามีปัญหาในการดูในกล่องจดหมาย

กล่องโต้ตอบ Insert Edit Link ที่เลือก Web version link เป็นประเภทการกระทำ

No track statistics

Anchor link to

เปิดลิงก์เมื่อผู้รับคลิก โดยไม่นับการคลิกในสถิติการคลิกของอีเมลของคุณ ป้อนที่อยู่ใน URL

กล่องโต้ตอบ Insert Edit Link ที่เลือก No track statistics เป็นประเภทการกระทำและมีช่อง URL
Anchor link to

แทรกลิงก์ยืนยันสำหรับการส่งแบบฟอร์มการสมัครรับข่าวสาร (ตัวอย่างเช่น เพื่อยืนยัน double opt-in) เรียนรู้เพิ่มเติมเกี่ยวกับ double opt-in

กล่องโต้ตอบ Insert Edit Link ที่เลือก Subscription form confirmation link เป็นประเภทการกระทำ