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

ทัวร์ด่วนของผู้จัดการฝ่ายออกแบบ

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

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

ผลิตภัณฑ์และแพ็กเกจทั้งหมด

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

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

เครื่องมือที่รวมอยู่ในตัวจัดการการออกแบบ

ผู้จัดการฝ่ายออกแบบรวบรวมเครื่องมือที่สำคัญหลายอย่างไว้ในแอปเดียวที่มีประสิทธิภาพ:

  • Finder - พื้นที่สำหรับสร้างและจัดระเบียบไฟล์เทมเพลตโมดูลและโฟลเดอร์ของคุณ
  • Layout Editor - ตัวแก้ไขการลากและวางสำหรับการจัดโครงสร้างหน้าเว็บบล็อกอีเมลและเทมเพลตระบบของคุณ
  • ผู้ตรวจสอบ - นี่คือที่ที่คุณสามารถแก้ไขคุณสมบัติของเค้าโครงโมดูลหรือกลุ่มได้ 
  • ตัวแก้ไขโค้ด - สภาพแวดล้อมการพัฒนาแบบบูรณาการ (IDE) สำหรับโค้ดส่วนหน้าทั้งหมดของคุณ (CSS, Javascript หรือแม้แต่เทมเพลต HTML ของคุณเอง)
  • ตัวแก้ไขโมดูล - โมดูลที่กำหนดเองที่สามารถนำกลับมาใช้ใหม่ได้ซึ่งคุณสามารถตั้งค่าเพื่อเพิ่มฟังก์ชันการทำงานขั้นสูงให้กับไซต์ของคุณซึ่งผู้ใช้ที่ไม่ใช่ด้านเทคนิคยังสามารถจัดการได้
  • File Manager - ระบบไฟล์โฮสติ้งสำหรับเนื้อหาทั้งหมดของเว็บไซต์ของคุณ

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

ตัวค้นหา

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

บัญชี Marketing Hub Professional และ Enterprise และ Content Hub Professional และ Enterprise ทั้งหมดมีโฟลเดอร์ @ hubspot ในตัวจัดการการออกแบบตามค่าเริ่มต้น โฟลเดอร์นี้มีธีมและโมดูลเริ่มต้นทั้งหมดของคุณรวมถึงโมดูลการลากและวางอีเมล ธีมและโมดูลเหล่านี้เป็นแบบอ่านอย่างเดียวแต่สามารถโคลนได้หากคุณต้องการปรับแต่ง เรียนรู้เพิ่มเติมเกี่ยวกับการปรับแต่งธีมและ โมดูลเริ่มต้น



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

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

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

  • โคลน: ทำสำเนาไฟล์โฟลเดอร์หรือเทมเพลตของคุณ
  • ย้าย: เลือกโฟลเดอร์ใหม่สำหรับเนื้อหาของคุณ
  • เปลี่ยนชื่อ: ตั้งชื่อเนื้อหาใหม่
  • โคลนไปที่ HTML: สร้างสำเนาของเนื้อหาของคุณที่เข้ารหัสทั้งหมดใน HTML
  • คัดลอกไปยัง พอร์ทัล:  สร้างสำเนาเนื้อหาของคุณและส่งไปยังบัญชี HubSpot อื่นที่คุณมีสิทธิ์เข้าถึง
  • สร้างเพจ/อีเมล: สร้างเนื้อหาชิ้นใหม่โดยใช้เทมเพลตนี้
  • แสดงผู้อยู่ในอุปการะ: ดูรายการเนื้อหา HubSpot ใดๆโดยใช้ไฟล์
  • แสดงประวัติการแก้ไข: ตรวจสอบประวัติของเวอร์ชันที่บันทึกไว้
  • คัดลอกข้อมูลโค้ด: ใช้สิ่งนี้เพื่อคัดลอกข้อมูล โค้ดของโมดูลรหัสที่กำหนดเอง ของคุณลงบนคลิปบอร์ดของคุณอย่างรวดเร็ว ตัวเลือกนี้จะปรากฏเฉพาะเมื่อ คลิกขวา ที่โมดูล
  • ล็อกโฟลเดอร์: ล็อกโฟลเดอร์เพื่อป้องกันไม่ให้ผู้ใช้แก้ไขเนื้อหาในตัวจัดการการออกแบบ เนื้อหาในโฟลเดอร์ที่ล็อกไว้จะสามารถแก้ไขได้ภายในสภาพแวดล้อมการพัฒนาในพื้นที่ของคุณเท่านั้น
  • ลบ - ลบไฟล์โฟลเดอร์เทมเพลตหรือโมดูลนี้

แท็บ

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

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

การสร้างเทมเพลตและไฟล์ใหม่

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

  • ลากและวาง: เทมเพลตที่สร้างขึ้นโดยการเพิ่มโมดูลลงในอินเทอร์เฟซการลากและวางที่ใช้งานง่าย
  • HTML และ HUBL: เทมเพลตรหัสที่กำหนดเองที่สร้างขึ้นในตัวแก้ไขรหัสโดยใช้ HTML, CSS และ Javascript
  • สไตล์ชีต: ไฟล์ CSS ที่มีรหัสซึ่งสามารถใช้ในการจัดรูปแบบโมดูลและไฟล์ได้
  • JavaScript: ไฟล์รหัสของ Javascript ที่สามารถนำไปใช้กับโมดูลและไฟล์ได้
  • โมดูล: โมดูลรหัสแบบกำหนดเองที่สามารถเพิ่มลงในเทมเพลตได้

ตัวแก้ไขเค้าโครง

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

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

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

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

ผู้ตรวจสอบ

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

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

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

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

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

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

ตัวแก้ไขโค้ด

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้เครื่องมือแก้ไขโค้ด

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

เรียนรู้เพิ่มเติมเกี่ยวกับ JavaScript และ CSS minification

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

แม้ว่าเทมเพลตแบบลากและวางของ HubSpot จะมาพร้อมกับโมดูลมาตรฐานมากมายให้เลือกแต่บางครั้งนักออกแบบอาจต้องการโซลูชันการออกแบบที่กำหนดเองมากขึ้น โมดูลเป็นส่วนประกอบที่กำหนดเองที่สามารถนำกลับมาใช้ใหม่ได้ซึ่งประกอบด้วยฟิลด์ HTML และ   HubL, CSS และ Javascript โมดูลเหล่านี้สามารถเพิ่มลงในเทมเพลตและปรับแต่งในตัวแก้ไขหน้าได้โดยไม่ต้องใช้รหัสใดๆ

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

ตัวจัดการไฟล์

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

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