สร้างและแก้ไขโมดูล

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

โปรดทราบ: การสร้างโมดูลต้องใช้ความรู้เกี่ยวกับ HTML, CSS, HubL และตัวจัดการการออกแบบ HubSpot HubSpot แนะนำให้ทำงานร่วมกับนักพัฒนาซอฟต์แวร์เพื่อสร้างโมดูลที่มีรหัส

สร้างโมดูลใหม่

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

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

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

โปรดทราบ: โมดูลที่กำหนดเองสำหรับใช้ในอีเมลสามารถสร้างได้ในบัญชีที่มีการสมัครใช้งาน Marketing Hub Professional หรือ Enterprise เท่านั้น

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

ติดป้ายกำกับโมดูลของคุณ

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

เพิ่มฟิลด์ไปยังโมดูลของคุณ

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

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

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

เพิ่มเนื้อหาเริ่มต้นของฟิลด์

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

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

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

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

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

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

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

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

• ในส่วนเงื่อนไขการแสดงผลให้คลิกเม นูแบบเลื่อนลง ตัวแปร HubL เพื่อเลือกฟิลด์โมดูลจากนั้นคลิกเมนูแบบเลื่อนลงไม่ว่างเปล่าเพื่อเลือกเงื่อนไขสำหรับฟิลด์นั้น
• หากคุณเลือกเงื่อนไขเท่ากับให้ป้อนค่าหรือ regex

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

เงื่อนไข

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

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

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

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

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

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

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

วิธีจัดกลุ่มฟิลด์โมดูลร่วมกัน:

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

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

• เมื่อคุณพร้อมที่จะรวมฟิลด์ลงในโมดูลให้คัดลอกและวางข้อมูลโค้ดของฟิลด์ลงในเครื่องมือแก้ไข HTML + HubL ของโมดูล
  • หากคุณอยู่ในตัวตรวจสอบภาคสนามให้คลิกตัวอย่าง  C opy ทางด้านขวาของชื่อตัวแปร HubL ของช่อง
  • หากคุณอยู่ในตัวตรวจสอบโมดูลให้เลื่อนเมาส์ไปที่ช่องแล้วคลิก เมนูแบบ เลื่อนลงการดำเนินการ จากนั้นเลือกคัดลอกข้อมูลโค้ด
• คลิกที่ตำแหน่งที่คุณต้องการเพิ่มฟิลด์ในเครื่องมือแก้ไข HTML + HubL จากนั้นวางข้อมูลโค้ดโดยกด Ctrl + V หรือ Cmd + V

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

ในขณะที่คุณแก้ไขโมดูลคุณสามารถเขียนไวยากรณ์โมดูลเพิ่มเติมได้ใน บานหน้าต่างตัวแก้ไข HTML + HubL,  CSS และ  JS  เรียนรู้เพิ่มเติมเกี่ยวกับตัว แก้ไขรหัสโมดูลและ การ อ้างอิงไวยากรณ์ของโมดูลในเอกสารนักออกแบบของ HubSpot

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

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

เมื่อผู้ใช้แก้ไขโมดูลในตัวแก้ไขเนื้อหาข้อความช่วยเหลือจะปรากฏเหนือฟิลด์โมดูล

ดูตัวอย่างโมดูลของคุณ

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

เผยแพร่โมดูลของคุณ

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

ทำให้โมดูลของคุณพร้อมใช้งานสำหรับเทมเพลต

• เปิดใช้งานเทมเพลตที่ ด้านบนขวาของเครื่องมือแก้ไขเพื่อให้โมดูลนี้พร้อมใช้งานเพื่อเพิ่มลงในเทมเพลตของคุณ

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

เพิ่มโมดูลของคุณลงในเทมเพลต

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

วิธีเพิ่มโมดูลลงในเทมเพลตการลากและวาง:

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

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

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