จัดโครงสร้างและปรับแต่งเทมเพลตโดยใช้ตัวแก้ไขเค้าโครง

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

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

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

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

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

จัดโครงสร้างเทมเพลต

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

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

เพิ่มและจัดเรียงโมดูล

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

1. ในผู้ตรวจสอบให้คลิก + เพิ่ม
2. ป้อนข้อความเพื่อค้นหาโมดูลแล้วคลิกโมดูล 
3. ลากโมดูลลงในเครื่องมือแก้ไขเค้าโครง

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

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

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

โมดูลกลุ่ม

จัดกลุ่มโมดูลเพื่อจัดระเบียบส่วนของเทมเพลต

ในการจัดกลุ่มโมดูล:

1. ในตัวแก้ไขเค้าโครงให้เลือกโมดูล
2. กดปุ่ม Control (Windows) หรือ Command (Mac) ค้างไว้และเลือกโมดูลเพิ่มเติม 
3. ในตัวตรวจสอบให้คลิกไอgroupModule โมดูลกลุ่มโมดูล

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

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

การแยกโมดูลแบ่งครึ่งโมดูลสร้างสองโมดูล

วิธีแยกโมดูล:

1. ในตัวแก้ไขเค้าโครงให้คลิกโมดูล

2. ในตัวตรวจสอบให้คลิกไอsplitModule แยกโมดูลแยกโมดูล  

โมดูลกลาง

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

วิธีเพิ่มตัวเว้นระยะแนวนอน:

1. ในผู้ตรวจสอบให้คลิก + เพิ่ม

2. ป้อนตัวเว้นวรรคแนวนอนในช่องค้นหา จากนั้นลากโมดูลตัวเว้นวรรคแนวนอนไปยังตำแหน่งบนเทมเพลตในตัวแก้ไขเค้าโครง

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

4. ในการจัดกึ่งกลางโมดูลหรือกลุ่มให้เพิ่มโมดูลตัวเว้นวรรค H หรือแนวนอนในแต่ละด้าน 

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

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

1. ในผู้ตรวจสอบให้คลิก + เพิ่ม

2. ป้อนคอลัมน์ที่ยืดหยุ่นในช่องค้นหา จากนั้นลากโมดูลคอลัมน์ยืดหยุ่นไปยังตำแหน่งบนเทมเพลตในตัวแก้ไขเค้าโครง

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

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

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

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

1. ในตัวแก้ไขเค้าโครงให้คลิกโมดูล 
2. ในผู้ตรวจสอบให้ปรับแต่งตัวเลือกของโมดูล 

โมดูลสลับ

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

1. ในตัวแก้ไขเค้าโครงให้คลิกขวาที่โมดูลจากนั้นเลือกโมดูล Swap

2. ในป๊อปอัปให้เลือกโมดูลเพื่อแทนที่โมดูลดั้งเดิมด้วย

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

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

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

ลบโมดูล

1. ในตัวแก้ไขเค้าโครงให้คลิกโมดูล

2. ในผู้ตรวจสอบให้คลิกไอคอนdelete ถังขยะ 

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

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

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