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

จัดโครงสร้างและปรับแต่งเค้าโครงเทมเพลต

อัปเดตล่าสุด: กุมภาพันธ์ 13, 2025

สามารถใช้ได้กับการสมัครใช้บริการใดๆ ต่อไปนี้ ยกเว้นที่ระบุไว้:

การตลาด Hub   Professional , Enterprise
เนื้อหา Hub   Professional , Enterprise
Marketing Hub Basic เดิม

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

โครงสร้างเทมเพลตของคุณ

ด้วยการใช้ตัวแก้ไขเค้าโครงในตัวจัดการการออกแบบคุณสามารถสร้างเค้าโครงเนื้อหาของคุณได้อย่างรวดเร็วโดยไม่ต้องเขียน HTML ใดๆ

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

เพิ่มและลากโมดูล

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

เปลี่ยนความกว้างของคอลัมน์

หากต้องการเปลี่ยนความกว้างของคอลัมน์ให้เลื่อนเมาส์ไปมาระหว่างโมดูลและคลิกและลากในแนวนอน

โมดูลกลุ่ม

กลุ่มโมดูลเป็นหน่วยของโมดูลที่ประกอบขึ้นเป็นส่วนต่างๆของหน้า

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

โปรดทราบ: กลุ่มโมดูลไม่สามารถข้ามตัวแยกส่วนหรือมีกลุ่มโมดูลที่เลือกบางส่วน

แยกโมดูลในแนวนอน

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

โมดูลกลาง

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

หากต้องการเปลี่ยนขนาดของตัวเว้นวรรคแนวนอนให้เปลี่ยนความกว้างของคอลัมน์ที่แยกออกจากโมดูลอื่นๆ ในการจัดกึ่งกลางโมดูลหรือกลุ่มให้เพิ่มตัวเว้นวรรคแนวนอนในแต่ละด้าน 

เพิ่มคอลัมน์ยืดหยุ่น

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

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

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

 


ปรับแต่งเทมเพลตของคุณ

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

แก้ไขตัวเลือกโมดูล

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

โมดูลสลับ

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

แปลงเป็นโมดูลส่วนรวม

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

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

ลบโมดูล

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

จัดการเทมเพลตของคุณในตัวค้นหา

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

  • ที่ด้านขวาบนของเทมเพลตให้คลิกโฟลเดอร์โฟลเดfolder
  • คลิกขวาที่ชื่อของเทมเพลต ในเมนูแบบเลื่อนลงคุณสามารถปรับแต่งตัวเลือกต่อไปนี้:
    • คัดลอกไปยังพอร์ทัล: คัดลอกเทมเพลตไปยังพอร์ทัลอื่นที่คุณเป็นผู้ใช้ด้วย เทมเพลตที่ซื้อจาก Marketplace จะไม่สามารถคัดลอกไปยังพอร์ทัลอื่นๆได้
    • เทมเพลตโคลน: สิ่งนี้จะสร้างเทมเพลตที่ซ้ำกันและมีประโยชน์เมื่อคุณต้องการสร้างรูปแบบของเทมเพลตที่มีอยู่
    • โคลนไปที่ HTML: นี่เป็นการสร้างเทมเพลต HTML แยกต่างหาก ซึ่งจะเป็นประโยชน์หากคุณต้องการควบคุมมาร์กอัปมากขึ้นหรือต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีเขียนโค้ดเทมเพลต
    • ดูแหล่งที่มาของเทมเพลต: ดู HTML ของซอร์สโค้ดของเทมเพลต ซึ่งแตกต่างจากตัวเลือก Clone to HTML ซึ่งจะไม่สร้างเทมเพลต HTML แยกต่างหาก
    • เปลี่ยนชื่อเทมเพลต: แก้ไขชื่อภายในเทมเพลตของคุณ
    • แสดงผู้อยู่ในอุปการะ: ดูหน้าเว็บอีเมลหรือบล็อกทั้งหมดที่กำลังใช้เทมเพลต
    • แสดงประวัติการแก้ไข: ดูประวัติการแก้ไขของเทมเพลตของคุณและเลือกที่จะเปลี่ยนเทมเพลตของคุณกลับเป็นเวอร์ชันที่เผยแพร่ก่อนหน้านี้
    • สร้างอีเมล/เพจ: สร้างอีเมลหรือแลนดิ้งเพจ/หน้าเว็บไซต์โดยตรงจากเทมเพลต
    • ลบเทมเพลต: สิ่งนี้จะลบเทมเพลต เมื่อลบแล้วเทมเพลตจะยังคงใช้งานได้เป็นเวลา 30 วันหลังจากนั้นเทมเพลตจะถูกลบอย่างถาวร หากต้องการกู้คืนเทมเพลตคุณจะต้องติดต่อฝ่ายสนับสนุนลูกค้า 
  • ตัวเลือกเหล่านี้ยังสามารถเข้าถึงได้จากเมนูแบบ เลื่อนลง  ไฟล์และการกระทำด้านบน

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