สุดยอดคู่มือการใช้ตัวอย่างในการออกแบบอีเมล

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

ที่งาน Email Design Conference Dan Denney แห่ง Code School ได้วางกรอบปัญหาไว้อย่างสมบูรณ์แบบ:

ความท้าทายที่ยิ่งใหญ่ที่สุดในการสร้างอีเมลไม่ใช่ Gmail…ถึงเวลาแล้ว

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

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

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

เกร็ดเล็กเกร็ดน้อยคืออะไร?

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

วิธีใช้ตัวอย่าง

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

Dreamweaver

ใน Dreamweaver คุณสามารถเพิ่มหรือแก้ไขตัวอย่างได้โดยไปที่: Windows → Snippets → New/Edit คุณยังสามารถบันทึกตัวอย่างของคุณเป็นกลุ่ม (เช่น ตัวอย่างที่เกี่ยวข้องกับตาราง ตัวอย่างที่เกี่ยวข้องกับรูปภาพ เป็นต้น) เพื่อให้ค้นหาได้ง่าย

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

ตัวสร้างสารสีน้ำเงิน

ภายในโปรเจ็กต์ Builder ให้คลิกที่ไอคอน Snippets ที่ด้านบนขวาของตัวแก้ไข

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

ข้อความประเสริฐ

หากต้องการดูตัวอย่างที่มีอยู่หรือเพิ่มตัวอย่างใหม่ใน Sublime Text ให้ไปที่: เครื่องมือ → ตัวอย่าง/ตัวอย่างใหม่ ข้อมูลโค้ดแต่ละรายการจะถูกบันทึกไว้ในไฟล์ .sublime-snippet ของตัวเอง

เพิ่มข้อมูลโค้ดลงในโค้ดของคุณผ่านทริกเกอร์แป้นพิมพ์ลัด ตัวอย่างเช่น ในโค้ดด้านล่าง ข้อมูลโค้ดจะถูกเรียกใช้เมื่อมีการพิมพ์ "hello" ภายในโค้ด คุณยังสามารถเพิ่มจุดแก้ไขภายในข้อมูลโค้ดโดยใช้เครื่องหมายดอลลาร์ตามลำดับ ( $1 , $2 เป็นต้น)

 <snippet> <content><![CDATA[ /* Insert snippet here */ ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet> 

อะตอม

ดู แก้ไข หรือเพิ่มส่วนย่อยใน Atom โดยไปที่: Atom → เปิดส่วนย่อยของคุณ ข้อมูลโค้ดแต่ละรายการจะถูกบันทึกเป็นไฟล์ snippet.cson ของตัวเอง

คล้ายกับ Sublime Text ตัวอย่างใน Atom ทำงานผ่านทริกเกอร์แป้นพิมพ์ลัด คุณยังสามารถเพิ่มจุดแก้ไขภายในข้อมูลโค้ดโดยใช้เครื่องหมายดอลลาร์ตามลำดับ ( $1 , $2 เป็นต้น)

 'Name': 'prefix': 'tabtrigger' 'body': """ /* Insert snippet here */ """ 

โคดา

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

ไลบรารีตัวอย่าง

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

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

Doctype

doctype บอกให้ไคลเอนต์อีเมลแสดงผลอีเมลในโหมดมาตรฐานหรือโหมดแปลก ประเภทของเอกสารที่แนะนำสำหรับอีเมลมี 2 รูปแบบ อย่างแรกคือประเภทเอกสาร HTML5:

HTML5

 <!doctype html>

XHTML

ประการที่สองคือประเภทเอกสาร XHTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

เมตาแท็ก

หากคุณกำลังเข้ารหัสอีเมลเพื่อให้ตอบสนอง มีเมตาแท็กที่สำคัญหลายแท็กที่คุณควรรวมไว้

UTF-8

เมตาแท็กแรกที่แนะนำตั้งค่าการเข้ารหัสอักขระเป็น utf-8 ซึ่งเป็นการเข้ารหัสทั่วไปสำหรับอีเมล สามารถเปลี่ยนแปลงได้หากจำเป็น

 <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />

วิวพอร์ต

เมตาแท็กที่สองที่แนะนำจะกำหนดการตอบสนองสำหรับอีเมล

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Windows Phone

เมตาแท็กที่สามที่แนะนำคือทำให้อีเมลตอบสนองบน Windows Phone โดยเฉพาะ

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

โต๊ะ

อีเมล HTML ใช้ตารางเพื่อจัดโครงสร้างเนื้อหา ตารางอาจเป็นเรื่องยุ่งยากในการเขียนโค้ดด้วยมือ เราจึงได้พัฒนาข้อมูลโค้ดพื้นฐานสำหรับการจัดวางตารางอย่างง่าย

ตาราง 1×1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> </tr> </table>

ตาราง 2×1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

ตาราง 3×1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

ตาราง 2×2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

ตาราง 2×3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

ตารางที่ 3×2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

ตาราง 3×3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

ปุ่มกันกระสุน

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

ปุ่ม VML

วิธีปุ่มกันกระสุนวิธีแรกได้รับการพัฒนาโดย Stig Morten Myre จาก Campaign Monitor และเป็นวิธีปุ่มแบบ VML:

 <div> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="{link}" arcsize="{arcsize}%" strokecolor="#{strokecolor}" fillcolor="{fillcolor}"> <w:anchorlock/> <center>{button text}</center> </v:roundrect> <![endif]--> <a href="{link}">{button text}</a> </div>

ตัวตรวจสอบแคมเปญยังได้สร้าง Button.cm ซึ่งเป็นเครื่องมือง่ายๆ ในการสร้างโค้ดปุ่ม VML ด้านบน

ปุ่ม Padding-Based

วิธีที่สองคือวิธีการข้อความแบบสดพร้อมปุ่มแบบใช้ช่องว่างภายใน:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#{bgcolor}" align="{align}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

ข้อเสียหลักของปุ่มนี้คือไม่สามารถคลิกได้ 100%

ปุ่มตามขอบ

วิธีปุ่มกันกระสุนวิธีที่สามเกี่ยวข้องกับการสร้างเส้นขอบรอบ ๆ ลิงก์เพื่อสร้างพื้นที่ที่สามารถคลิกได้ขนาดใหญ่:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

ข้อเสียที่สำคัญของวิธีนี้คือ Outlook 2007-2013 ไม่คำนึงถึงความกว้างของเส้นขอบบนแท็กลิงก์ ดังนั้นจึงทำให้การเติมเทียมของปุ่มลดลงบ้าง

Padding+ปุ่มตามขอบ

วิธีสุดท้ายเกี่ยวข้องกับการผสมผสานระหว่างปุ่มเติมและปุ่มขอบ:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="{align}" bgcolor="#{bgcolor}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

แฮ็คนี้ใช้เพื่อหลีกเลี่ยงปัญหาการแสดงช่องว่างภายในใน Outlook

รูปภาพ

มีปัจจัยสำคัญหลายประการที่ควรพิจารณาเมื่อใช้รูปภาพในอีเมล ตัวอย่างเช่น คุณต้องกำหนดความสูงและความกว้างในแอตทริบิวต์ HTML เพื่อให้รูปภาพแสดงผลอย่างถูกต้องใน Outlook และการใช้ข้อความ ALT มีความสำคัญอย่างยิ่ง ไม่เพียงแต่เพื่อวัตถุประสงค์ในการเข้าถึงเท่านั้น แต่เนื่องจาก 43% ของผู้ใช้ดูอีเมลโดยไม่ใช้รูปภาพ สุดท้าย เพื่อป้องกันช่องว่างภายในเพิ่มเติมและช่องว่างรอบรูปภาพ คุณควรตั้งค่าเป็น display:block;

 <img src="{src}" width="{width}" height="{height}" border="0" alt="{alt}"/>

ลิงค์

ลิงค์พื้นฐาน

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

 <a href="#">{style}</a>

ลบลิงค์สีน้ำเงินบน iOS

มีกลยุทธ์หลายอย่างในการลบลิงก์สีน้ำเงินบน iOS แต่นี่เป็นเพียงตัวอย่างง่ายๆ ที่ใช้การประกาศ CSS เดียวในการทำเช่นนั้น:

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

ซ่อนหัวเรื่อง/ข้อความแสดงตัวอย่าง

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

นี่คือตัวอย่าง:

 <div> {preheader text} </div>

แบบสอบถามสื่อ

ข้อความค้นหาสื่อเป็นส่วนประกอบของ cascading style ชีต (CSS) ซึ่งเป็นภาษาที่ใช้ในการจัดรูปแบบเว็บไซต์และแคมเปญอีเมล ด้วยการสืบค้นข้อมูลสื่อ คุณสามารถปรับแต่งการออกแบบอีเมลเพื่อให้ใช้งานได้มากขึ้นในกล่องจดหมายมือถือ เดสก์ท็อป และเว็บเมล

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

แบบสอบถามสื่อพื้นฐาน

 @media screen and ({declaration}) { {content} }

ข้อความค้นหาสื่อความกว้างสูงสุด

 @media screen and (max-width: {width}) { {content} }

คำถามสื่อความกว้างต่ำสุด

 @media screen and (min-width: {width}) { {content} }

iPad 1 & 2 + iPad Mini Media แบบสอบถาม

 @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

แบบสอบถามสื่อสำหรับ iPad 3 และ 4

 @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

คำถามสื่อสำหรับ iPhone 2G/3G/3GS

 @media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

iPhone 4/4S/5/iPhone 6 (มุมมองแบบซูม) Media Query

 @media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

แบบสอบถามสื่อ HTC ONE + SAMSUNG GALAXY S4/S5

 @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { {style} }

iPhone 6 (มุมมองมาตรฐาน) + iPhone 6 Plus (มุมมองซูม) Media Query

 @media screen and (max-device-width: 375px) and (max-device-height: 667px) { {style} }

iPhone 6 Plus (มุมมองมาตรฐาน) Media Query

 @media screen and (max-device-width: 414px) and (max-device-height: 776px) { {style} }

ความคิดเห็นแบบมีเงื่อนไขของ Outlook

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

การเรนเดอร์ Microsoft Word

 <!--[if mso]> {content} <![endif]-->

Outlook 2000-2013

 <!--[if (gte mso 9)|(IE)]> {content} <![endif]-->

ความคิดเห็นตามเงื่อนไขของ Outlook เพิ่มเติม:

• Outlook 2000
• แนวโน้มปี 2543-2545
• แนวโน้มปี 2543-2546
• แนวโน้มปี 2543-2550
• Outlook 2000-2010
• Outlook 2002
• แนวโน้มปี 2545-2556
• Outlook 2003
• Outlook 2003-2013
• Outlook 2007-2013
• Outlook 2010
• Outlook 2010-2013
• Outlook 2013

WebKit

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

 @media screen and (-webkit-min-device-pixel-ratio: {value}) { {style} }

Gmail

Gmail ไม่รองรับคลาสหรือรหัสใน <head> ของอีเมล ซึ่งเป็นสาเหตุที่ CSS ต้องอยู่ในอีเมล อย่างไรก็ตาม Justin Khoo จาก FreshInbox ค้นพบการแฮ็กใหม่ที่ Gmail จะอ่าน CSS ในอีเมล

หากคุณใช้แอตทริบิวต์ lang หรือ title เป็นตัวเลือกแอตทริบิวต์ที่มีค่าอยู่ในรายการค่าที่คั่นด้วยช่องว่างสีขาว ซึ่งค่าใดค่าหนึ่งตรงกันทุกประการ Gmail จะอ่าน CSS นั้น นี่เป็นเพียงตัวอย่างสั้นๆ ที่จะช่วยคุณ:

 * [lang~="{name}"] { {style} }

Yahoo

Yahoo Mail เพิ่งเปิดตัวการสืบค้นสื่อที่เป็นเอกลักษณ์ของตัวเอง ทำให้เราสามารถกำหนดเป้าหมายสไตล์บางอย่างสำหรับเว็บเมลได้อย่างง่ายดาย

 @media yahoo { {style} }

Android

James White เพิ่งโพสต์บน Litmus Community ซึ่งเป็นแฮ็คเพื่อจัดอีเมลบน Android 4.4

 body { margin:0 !important; } div[style*="margin: 16px 0"] { margin:0 !important; }

ตัวอย่างในชุมชน

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

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

ตรวจสอบตัวอย่างในชุมชน →