สร้างและแก้ไขโมดูลในตัวจัดการการออกแบบ

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

ก่อนที่คุณจะเริ่มต้น

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

ทำความเข้าใจข้อจำกัดและข้อพิจารณา

• หากคุณไม่คุ้นเคยกับ HTML, HubL และ CSS ขอแนะนำให้ทำงานร่วมกับนักพัฒนาซอฟต์แวร์ เพื่อสร้างโมดูลในตัวจัดการการออกแบบ

สร้างโมดูล

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ที่ด้านบนของตัว ค้นหาให้คลิกเมนูแบบเลื่อนลงไฟล์แล้วเลือกไฟล์ใหม่

3. ในกล่องโต้ตอบ ให้คลิกเมนูแบบเลื่อนลงวันนี้คุณต้องการสร้างอะไร และเลือก โมดูล
4. คลิกถัดไป
5. ในช่อง ที่คุณต้องการใช้โมดูลนี้ให้ เลือก ช่องทำเครื่องหมาย ถัดจากเนื้อหาแต่ละประเภทที่จะใช้โมดูลของคุณ (เช่น โพสต์บล็อก อีเมลหรือ หน้า Landing Page) 
6. ในฟิลด์ขอบเขต เนื้อหาของโมดูล ให้เลือก ตัวเลือก (เช่นโมดูลท้องถิ่นหรือโม ดูลทั่วโลก) หากคุณสร้างโมดูลส่วนรวมการแก้ไขเนื้อหาของโมดูลนี้จะอัปเดตทุกตำแหน่งที่ใช้โมดูล 
7. ป้อน ชื่อไฟล์สำหรับโมดูล
8. หากต้องการเปลี่ยนตำแหน่งไฟล์ของโมดูลให้คลิก เปลี่ยนในส่วน ตำแหน่งไฟล์ ในกล่องป๊อปอัปให้เลือก ตำแหน่ง ใหม่แล้วคลิก เลือก
9. เมื่อเสร็จแล้วให้คลิก สร้าง
10. แก้ไขโมดูลต่อไป

โปรดทราบ: โมดูลที่ใช้ในอีเมลไม่มี CSS หรือ JavaScript 

แก้ไขโมดูล

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

เพิ่มป้ายกำกับลงในโมดูล

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัว ค้นหาให้คลิกเพื่อเปิด โมดู ลที่คุณต้องการแก้ไขป้ายกำกับ
3. ในตัว ตรวจสอบให้ป้อน ฉลาก

เพิ่มฟิลด์ไปยังโมดูล

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัว ค้นหาให้คลิกเพื่อเปิดโมดูล
3. ในผู้ ตรวจสอบในส่วน เขตข้อมูล ให้คลิกเมนูแบบเลื่อนลงเพิ่มฟิลด์ จากนั้นเลือกฟิลด์ที่ จะเพิ่มลงในโมดูล

4. หากต้องการแก้ไขชื่อของฟิลด์ให้คลิกไอคอนแก้ไข  edit แล้วป้อน ชื่อใหม่ หากต้องการแก้ไขชื่อตัวแปร HubL ให้ป้อน ชื่อใหม่ ในฟิลด์ชื่อตัวแปร HubL 

ปรับแต่งเนื้อหาเริ่มต้นของฟิลด์

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัว ค้นหาให้คลิกเพื่อเปิด โมดูล
3. ในผู้ ตรวจสอบในส่วน เขตข้อมูล ให้วางเมาส์เหนือ เขต ข้อมูลแล้วคลิก แก้ไข
4. ในส่วน ตัวเลือกเนื้อหา ให้เพิ่มหรือแก้ไข ตัวเลือกเนื้อหาเริ่มต้น ตัวเลือกเนื้อหาเริ่มต้นที่มีอยู่จะขึ้นอยู่กับประเภทฟิลด์ที่เลือก

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

ตั้งค่าตัวเลือกเครื่องมือแก้ไขฟิลด์

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัว ค้นหาให้คลิกเพื่อเปิด โมดูล
3. ในผู้ ตรวจสอบในส่วน เขตข้อมูล ให้วางเมาส์เหนือ เขต ข้อมูลแล้วคลิก แก้ไข
4. ในส่วน ตัวเลือกเครื่องมือแก้ไข หากต้องการให้ฟิลด์ต้องการให้เปิดสวิตช์ ทำให้ฟิลด์นี้ต้อง เปิด การดำเนินการนี้จะป้องกันไม่ให้ผู้ใช้เว้นช่องว่างไว้ภายในตัวแก้ไขเนื้อหา
5. เพื่อป้องกันไม่ให้มีการแก้ไขเนื้อหาของฟิลด์ ให้เปิดสวิตช์ป้องกันการแก้ไขในเครื่องมือแก้ไขเนื้อหา เนื้อหาของฟิลด์ยังคงสามารถปรับแต่งได้ในตัวจัดการการออกแบบในระดับเทมเพลต ตัวเลือกนี้ไม่พร้อมใช้งานสำหรับ โมดูลทั่วไป
6. หากต้องการเพิ่มบริบทหรือคำแนะนำเกี่ยวกับวิธีใช้ฟิลด์ให้ป้อน ข้อความ ใน ฟิลด์ข้อความช่วยเหลือของ Tooltip หรือใน ฟิลด์ข้อความช่วยเหลือของ Inline
   • ข้อความช่วยเหลือของทูลทิป: ข้อความนี้จะปรากฏในทูลทิปเมื่อผู้ใช้วางเมาส์เหนือไอคอน infoCircleIcon ข้อมูลในเครื่องมือแก้ไขเนื้อหา
   • ข้อความช่วยเหลือแบบอินไลน์: ข้อความนี้จะปรากฏใต้ฟิลด์เมื่อผู้ใช้กำลังแก้ไขโมดูลในตัวแก้ไขเนื้อหา

ตั้งเงื่อนไขการแสดงผลฟิลด์

ในส่วน เงื่อนไขการแสดงผล ให้ใช้ เงื่อนไขการแสดงผลฟิลด์เพื่อ ตั้งค่าฟิลด์โมดูลให้ปรากฏเฉพาะเมื่อฟิลด์อื่นตรงตามเกณฑ์ที่กำหนด

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัว ค้นหาให้คลิกเพื่อเปิด โมดูล
3. ในผู้ ตรวจสอบในส่วน เขตข้อมูล ให้วางเมาส์เหนือ เขต ข้อมูลแล้วคลิก แก้ไข
4. ในส่วน เงื่อนไขการแสดงผล ให้คลิ กเมนูดรอปดาวน์ตัวแปร HubL และเลือก ตัวแปร 
5. คลิก เมนูแบบเลื่อนลง ที่สองและเลือกตัวเลือก (เช่น เท่ากับหรือไม่ว่างเปล่า) อาจต้องใช้ฟิลด์เงื่อนไขเพิ่มเติมขึ้นอยู่กับตัวเลือกที่เลือก ตัวอย่างเช่นหาก คุณเลือกเท่ากับจะต้องมีฟิลด์ค่าเพิ่ม
6. ตามค่าเริ่มต้นเงื่อนไขการแสดงผลจะเปิดโดยอัตโนมัติเมื่อมีการกำหนดค่าเงื่อนไข หากต้องการปิดเงื่อนไขการแสดง ผลให้ปิดสวิตช์เงื่อนไขการแสดงผล

ตั้งค่าตัวเลือกตัวทำซ้ำช่อง

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัว ค้นหาให้คลิกเพื่อเปิด โมดูล
3. ในผู้ ตรวจสอบในส่วน เขตข้อมูล ให้วางเมาส์เหนือ เขต ข้อมูลแล้วคลิก แก้ไข
4. ในส่วนตัวเลือกผู้ทำซ้ำให้ป้อน ตัวเลข ในฟิลด์ขั้น ต่ำ และ สูงสุด (ไม่บังคับ) การดำเนินการนี้จะกำหนดจำนวนครั้งขั้นต่ำที่ฟิลด์จะปรากฏในโมดูลสูงสุดเป็นค่าสูงสุด 
5. หากต้องการกำหนดจำนวนครั้งที่ฟิลด์ควรแสดงตามค่าเริ่มต้นให้ป้อน ตัวเลข ในฟิลด์จำนวน ออบเจ็กต์เริ่มต้น
6. ตามค่าเริ่มต้นตัวเลือกตัวทำซ้ำจะเปิดโดยอัตโนมัติเมื่อกำหนดค่าแล้ว หากต้องการปิดตัวเลือกตัว ทำซ้ำให้ปิดตัวเลือกตัวทำซ้ำ

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

ฟิลด์โมดูลกลุ่ม

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัว ค้นหาให้คลิกเพื่อเปิด โมดูล
3. ในผู้ ตรวจสอบในส่วน เขตข้อมูล ให้คลิกเมนูดร็อปดาวน์การ ดำเนินการ และเลือก กลุ่ม
4. เลือกฟิลด์อย่างน้อยหนึ่ง ฟิลด์เพื่อ จัดกลุ่มด้วยกันแล้วคลิก สร้างกลุ่ม

เพิ่มข้อความช่วยเหลือในโมดูล

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัว ค้นหาให้คลิกเพื่อเปิด โมดูล
3. ในตัว ตรวจสอบในส่วน ตัวเลือกตัวแก้ไขให้ป้อน ข้อความ ใน ฟิลด์ข้อความช่วยเหลือแบบอินไลน์

จัดการประเภทเนื้อหาและความพร้อมใช้งานสำหรับโมดูล

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัว ค้นหาให้คลิกเพื่อเปิด โมดูล
3. หากต้องการแก้ไขประเภทเนื้อหาสำหรับโมดูลให้คลิก ประเภทเนื้อหา ด้านล่างชื่อโมดูลในตัว ตรวจสอบ ที่ด้านบนขวา

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

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

โปรดทราบ: การปิดสวิตช์ ทำให้พร้อมใช้งานสำหรับเทมเพลตหรือหน้าเว็บจะไม่ลบโมดูลออกจากเทมเพลตหรือหน้าเว็บที่มีอยู่

คัดลอกและวางข้อมูลโค้ดฟิลด์

เมื่อรวมฟิลด์ลงในโมดูลให้คัดลอกและวางข้อมูลโค้ดของฟิลด์ลงใน ส่วน module.html (HTML + HubL) ภายในตัว แก้ไขโมดูล

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัว ค้นหาให้คลิกเพื่อเปิด โมดูล
3. ในตัว ตรวจสอบให้วางเมาส์เหนือฟิลด์โม ดูลและค ลิกเม นูแบบเลื่อนลงการกระทำ ในส่วนฟิลด์ จากนั้นเลือก คัดลอกข้อมูลโค้ด 
4. ในตัว แก้ไขโมดูลให้วางตัว อย่างฟิลด์ในตำแหน่งที่ต้องการ ภายใน module.html (HTML ส่วน + HubL) คุณสามารถใช้แป้นพิมพ์ลัด Cmd + V หรือ Ctrl + V 

เขียนไวยากรณ์ของโมดูล

ในขณะที่คุณแก้ไขโมดูลให้เขียนไวยากรณ์ใน ตัวแก้ไขโมดู ลสำหรับส่วน module.html (HTML + HubL),  module.css และ module.js เรียนรู้เพิ่มเติมเกี่ยวกับตัวแก้ไขโมดู  ลและภาพรวมโมดูล

ดูตัวอย่างและเผยแพร่โมดูล

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัว ค้นหาให้คลิกเพื่อเปิด โมดูล
3. หากต้องการดูตัวอย่างโมดูลให้คลิก ดูตัวอย่าง ที่ด้านบนขวา ระบบจะนำคุณไปยังแท็บเบราว์เซอร์ใหม่เพื่อดูตัวอย่างโมดูล ตัวอย่างนี้จะซิงค์กับตัว แก้ไขโมดูลและจะรีเฟรชโดยอัตโนมัติเมื่อมีการแก้ไขเกิดขึ้น
4. หากต้องการเผยแพร่โมดูลให้คลิก เผยแพร่การเปลี่ยนแปลง 

เพิ่มโมดูลไปยังเทมเพลต

หลังจากเผยแพร่โมดูลแล้วให้ใช้ข้ามเทมเพลตโดยเพิ่มลงในเท มเพลตแบบลากและวางหรือเท มเพลตที่กำหนดเอง ในตัวจัดการการออกแบบ หากต้องการเพิ่มโมดูลในตัวแก้ไขเนื้อหาให้เรียนรู้เพิ่มเติมเกี่ยวกับการ เพิ่มและแก้ไขโมดูลในตัวแก้ไขเนื้อหา

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัว ค้นหาให้คลิกเพื่อเปิดเทมเพลต
3. หากต้องการเพิ่มโมดูลลงในเทมเพลตการลากและวางใน ตัวแก้ไขเค้าโครงให้คลิกแท็บ + เพิ่ม ที่ด้านบนของตัว ตรวจสอบ
   • ในช่องค้นหาให้ป้อน ชื่อ ของโมดูล หากต้องการจำกัดการค้นหาให้แคบลงไปที่โมดูลที่กำหนดเองให้คลิกเมนูดรอปดาวน์ตัว กรองตามหมวดหมู่หรือ แท็กแล้วเลือก โมดูลที่กำหนดเอง
   • คลิกไอคอน dragHandleIcon ลากและวาง และย้าย โมดูลเข้า สู่ตำแหน่งใน ตัวแก้ไขเค้าโครง
4. วิธีเพิ่มโมดูลลงในเทมเพลตรหัสที่กำหนดเอง:
   •  คลิกขวาหรือ Ctrl + คลิกที่ โมดูลใน ตัวค้นหาและเลือก คัดลอกข้อมูลโค้ด หรือคลิกเพื่อเปิดโม ดูลจากนั้นในส่วน การใช้เทมเพลตของ ผู้ตรวจสอบให้คลิก คัดลอกข้อมูลโค้ด
   • ในเทมเพลตรหัสที่กำหนดเองให้วางตัวอย่าง โมดูลใน ตัวแก้ไขรหัส
5. เมื่อเสร็จแล้วให้คลิก เผยแพร่การเปลี่ยนแปลง ที่ด้านบนขวา

ตัวอย่าง: สร้างโมดูลการนับถอยหลัง

1. สร้างโมดูลใน ตัวจัดการการออกแบบและตั้งชื่อโมดูลว่า 'ตัวจับเวลานับถอยหลัง'
2. ในผู้ ตรวจสอบในส่วนฟิลด์ ให้คลิกเมนูแบบเลื่อนลง เพิ่มฟิลด์

• • เลือกช่อง วันที่และเวลา ป้อน ชื่อ 'วันที่และเวลากิจกรรม' การดำเนินการนี้จะอัปเดต ฟิลด์ชื่อตัวแปร HubL event_date_and_timeเป็น

• • เลือกช่อง สี ใส่ ชื่อ 'Timer Font Color' การดำเนินการนี้จะอัปเดต ฟิลด์ชื่อตัวแปร HubL timer_font_colorเป็น

โปรดทราบ: ชื่อตัวแปร HubL ต้องตรงกับชื่อตัวแปรที่รวมอยู่ในส่วนรหัส module.html (HTML + HubL) ด้านล่าง

3. ในตัว แก้ไขโมดูลให้คัดลอกและวาง โค้ดต่อ ไปนี้ลงใน ส่วน ที่เกี่ยวข้อง:

4. เมื่อเสร็จแล้วให้ ดูตัวอย่างและเผยแพร่ โมดูล
5. เพิ่มโมดูลลงในเทมเพลตต่อไป