สร้างเทมเพลตรหัสที่กำหนดเอง

นักพัฒนาสามารถสร้างบล็อกหน้าเว็บไซต์หน้า Landing Page และเทมเพลตอีเมลได้ตั้งแต่เริ่มต้นโดยใช้ HTML + HubL นอกจากนี้คุณยังสามารถโคลนเค้าโครงเทมเพลตลากและวางเป็น HTML จากนั้นปรับแต่งเป็นเทมเพลตที่มีรหัส

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

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

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

ทำความเข้าใจข้อกำหนด

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

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

• ต้องสมัครใช้งาน Marketing Hub Professional หรือ Enterprise เพื่อสร้างเทมเพลตอีเมล บัญชี Content Hub สามารถสร้างอีเมลโดยใช้ตัวแก้ไขอีเมลแบบลากและวาง
• เทมเพลตรหัสที่กำหนดเองสามารถใช้ตัวแปรที่กำหนดไว้ล่วงหน้าจำนวนมาก ตัวแปรเหล่านี้บางตัวจำเป็นต้องใช้ในการสร้างอีเมลและหน้าเว็บในขณะที่ตัวแปรอื่นเป็นตัวเลือก เรียนรู้เพิ่มเติมเกี่ยวกับการเพิ่มอีเมลที่จำเป็นเว็บไซต์และหน้า Landing Page ตัวแปร HubL 

สร้างไฟล์ HTML + HubL ใหม่

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

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

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

เพิ่ม HTML + HubL ลงในเทมเพลตของคุณ

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

เพิ่ม HTML + HubL

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

เพิ่ม HubL ที่จำเป็น

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

• เทมเพลตเพจและบล็อกต้องการตัวแปรต่อไปนี้:
  • {{ {{standard_footer_includes}} }}
  • {{ {{standard_header_includes}} }}
• เทมเพลตอีเมลต้องการตัวแปรต่อไปนี้เพื่อให้สอดคล้องกับ CAN-SPAM 
  • {{ {{unsubscribe_link}} }} หรือ {{ {{unsubscribe_link_all}} }} (รวมอย่างน้อยหนึ่งรายการ)
  • {{ {{unsubscribe_anchor}} }}
  • {{ {{site_settings.company_name}} }}
  • {{ {{site_settings.company_street_address_1}} }}
  • {% RAW %}{{ {{site_settings.company_zip}} }}

โคลนเทมเพลตไปยัง HTML

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

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

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

ดูตัวอย่างและเผยแพร่เทมเพลตของคุณ

เมื่อคุณสร้างเทมเพลตของคุณแล้วคุณสามารถดูตัวอย่างว่าเทมเพลตจะปรากฏในหน้าสดอย่างไรจากนั้นเผยแพร่

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

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