Litmus Builder Essentials: แนวทางปฏิบัติที่ดีที่สุดสำหรับการสร้างเทมเพลตอีเมล HTML ใน Builder

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

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

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

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

ต่อไปนี้คือฟีเจอร์ Litmus Builder ที่ทำให้การสร้างเทมเพลตของคุณเองง่ายขึ้นมาก:

• CSS inlining
• ตัวอย่างและบางส่วน
• เส้นตาราง
• ตัวอย่างอีเมล
• การแบ่งปัน

ใช้ CSS inlining

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

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

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

เมื่อคุณพร้อมที่จะย้ายเทมเพลตของคุณออกจาก Litmus Builder และไปยังผู้ให้บริการอีเมล (ESP) ของคุณเอง ให้คลิกปุ่ม ส่งออก จากที่นี่ คุณสามารถซิงค์อีเมลของคุณกับ ESP คัดลอก HTML ที่คอมไพล์แล้ว หรือดาวน์โหลด HTML ที่คอมไพล์แล้ว ง่ายมาก!

ใช้ประโยชน์จากตัวอย่างและบางส่วน

Litmus Builder มีเครื่องมือสองอย่างที่ออกแบบมาโดยเฉพาะเพื่อให้การสร้างและการใช้เทมเพลตทำได้เร็วและง่ายขึ้น: ตัวอย่าง และบาง ส่วน มาดูกันดีกว่าว่าพวกเขาจะช่วยคุณสร้างเทมเพลตที่ดีขึ้นได้อย่างไร

ตัวอย่าง

Snippets ช่วยให้คุณบันทึกและนำบิตโค้ดมาใช้ซ้ำในโครงการ Builder ทั้งหมดของคุณ คุณสามารถเข้าถึงตัวอย่างของคุณโดยใช้ปุ่ม แทรก

หากคุณไม่เคยใช้ตัวอย่างมาก่อน คุณจะเห็นไลบรารีว่าง โชคดีที่การสร้างตัวอย่างใหม่นั้นทำได้ง่าย!

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

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

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

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

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

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

บางส่วน

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

สามารถเข้าถึงบางส่วนได้โดยคลิก แทรก จากนั้นคลิก บางส่วน

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

คุณอาจจะสงสัยว่า “ทำไมคุณถึงใช้ partials แทน snippets?” นั่นเป็นคำถามที่ดี

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

ลองนึกถึงส่วนท้ายของอีเมล บ่อยครั้ง บริษัทจำเป็นต้องอัปเดตข้อมูลในส่วนท้ายของอีเมลหลายฉบับทุกครั้งที่ฝ่ายกฎหมายทำการเปลี่ยนแปลง แทนที่จะต้องอัปเดตอีเมลหลายสิบฉบับด้วยตนเอง คุณสามารถอัปเดตเพียงบางส่วน {{footer}} ที่ดึงเข้าไปในอีเมลทั้งหมดแทน การอัปเดตบางส่วนนั้นจะอัปเดตเทมเพลตทั้งหมดโดยอัตโนมัติ ช่วยให้คุณประหยัดเวลาได้มาก

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

ใช้เส้นตารางเพื่อการนำทางอย่างรวดเร็ว

แม้ว่า CSS inlining, snippets, และ partials จะช่วยเร่งการพัฒนาและทำให้การนำทางโค้ดง่ายขึ้น แต่อีเมลส่วนใหญ่ยังคงมีโค้ดจำนวนมากที่อาจอ่านได้ยาก แทนที่จะต้องเลื่อนดูโค้ดหลายร้อยบรรทัดเพื่อค้นหาส่วนที่ต้องการแก้ไข เส้นตาราง ของ Builder ช่วยให้คุณค้นหาและเลือกองค์ประกอบของอีเมลที่จะเน้นได้อย่างรวดเร็ว

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

ดูตัวอย่างในไคลเอนต์อีเมลมากกว่า 100 รายการ

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

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

แชร์เทมเพลตกับทีมของคุณ

ขั้นตอนสุดท้ายในการพัฒนาเทมเพลตใน Litmus Builder คือการแชร์เทมเพลตเหล่านั้นกับสมาชิกในทีมและผู้มีส่วนได้ส่วนเสีย

แทนที่จะคัดลอกโค้ดและรูปภาพของคุณไปยัง ESP ตั้งค่ารายการทดสอบ และส่งแคมเปญไปยังรายการนั้นด้วยตนเอง Litmus Builder มี แผงการแชร์ ทั้งหมดสำหรับรับข้อเสนอแนะเกี่ยวกับแคมเปญของคุณ

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

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

ตัวเลือกอีเมลช่วยให้คุณส่งอีเมลทดสอบตรงไปยังกล่องจดหมายของคุณได้อย่างรวดเร็วโดยไม่ต้องอัปโหลดไปยัง ESP

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

เริ่มต้นกับตัวสร้างวันนี้

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

เป็นลูกค้า Litmus แล้ว? เข้ามาเลย มิฉะนั้น ให้ลองใช้ Litmus ฟรี 7 วัน และดูว่า Builder สามารถปรับปรุงกระบวนการพัฒนาของคุณได้อย่างไรในวันนี้

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

เรียนรู้เพิ่มเติมในซีรีส์ Litmus Builder Essentials

• Litmus Builder Essentials ส่วนที่ 1: ทำความรู้จักกับเครื่องมือสร้างอีเมลของเรา
• Litmus Builder Essentials ส่วนที่ 2: สร้างในตัวสร้างอีเมลของเรา
• Litmus Builder Essentials, ตอนที่ 3: วิธีที่ทีมสามารถใช้ตัวสร้างอีเมลของเรา
• คุณอยู่ที่: Litmus Builder Essentials ส่วนที่ 4: แนวทางปฏิบัติที่ดีที่สุดสำหรับการสร้างเทมเพลตอีเมล HTML ใน Builder