สร้างแก้ไขและแนบไฟล์ CSS เพื่อจัดสไตล์เว็บไซต์ของคุณ

ไฟล์ CSS (Cascading Style Sheets) เป็นไฟล์รหัสที่เลือกองค์ประกอบของหน้าเว็บของคุณและควบคุมการนำเสนอของพวกเขา ไม่สามารถแนบไฟล์ CSS กับอีเมลหรือเทมเพลตอีเมลได้ 

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

สร้างไฟล์ CSS ใหม่

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

• ในกล่องโต้ตอบให้คลิกสไตล์ชีต CSS จากนั้นป้อนชื่อสำหรับสไตล์ชีต CSS ของคุณแล้วคลิกสร้าง

แก้ไขไฟล์ CSS

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

หากต้องการดูรายการตัวเลือก CSS มาตรฐานสำหรับเทมเพลต HubSpot โปรดดูที่ Boilerplate CSS

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

• ในคอนโซลข้อผิดพลาดตามด้านล่างของเครื่องมือแก้ไขโค้ด
• ในรางระบายความผิดพลาดทางด้านซ้ายมือของเครื่องมือแก้ไขโค้ด
• ในแถบเลื่อนทางด้านขวามือของเครื่องมือตัดต่อ

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

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

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

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

แนบไปกับเทมเพลต

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

1. public_common.css *: สไตล์ชีตที่ใช้เป็นหลักโดยแอปของ HubSpot แต่ยังรวมถึงฟีเจอร์บางอย่างของเว็บไซต์ด้วย
2. HTML ส่วนหัวในการตั้งค่าภายใต้เว็บไซต์ > หน้า: เพิ่มแท็กลิงค์ไปยัง < head > ส่วนกลางของเว็บไซต์
3. Layout.css **: ไฟล์ CSS ที่ตอบสนองตามค่าเริ่มต้นที่แนบมากับเค้าโครงเทมเพลตแบบลากและวางทั้งหมด
4. สไตล์ชีตที่แนบมาในการตั้งค่าภายใต้เว็บไซต์ > หน้า: สไตล์ชีตที่แนบมากับเว็บไซต์ของคุณทั้งหมด
5. สไตล์ชีตที่แนบมาในการตั้งค่าภายใต้เว็บไซต์ > บล็อก: สไตล์ชีตที่แนบมากับบล็อกของคุณ (แทนที่ชีตส่วนกลางของไซต์)
6. สไตล์ชีตที่เชื่อมโยง ***: สไตล์ชีตที่แนบมาในเค้าโครงเทมเพลต
7. มาร์กอัป < head > เพิ่มเติมในเทมเพลต: เพิ่มแท็กลิงค์ใน < head > ของเค้าโครงเทมเพลตเฉพาะ
8. สไตล์ชีตเฉพาะหน้า: สไตล์ชีตที่แนบมาในการตั้งค่าของหน้า
9. HTML ส่วนหัวของหน้า: เพิ่มแท็กลิงค์ใน < head > ของหน้าใดหน้าหนึ่งในการตั้งค่าของหน้า

* ต้องระบุ

** จำเป็นสำหรับการลากและวางเลย์เอาต์

*** วิธีการที่แนะนำในการแนบสไตล์ชีตสำหรับเค้าโครงเทมเพลต

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

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

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

แนบหรือลบสไตล์ชีตในหน้าใดหน้าหนึ่ง (Marketing Hub Professional และ Enterprise เท่านั้น)

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

วิธีเพิ่มหรือลบสไตล์ชีตเฉพาะหน้าออกจากส่วนการตั้งค่าของตัวแก้ไขหน้า:

• ไปที่เนื้อหาของคุณ:

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

แนบหรือลบสไตล์ชีตโดเมน (Marketing Hub Professional และ Enterprise เท่านั้น)

โปรดทราบ: เทมเพลตธีมต้องมีคำอธิบายประกอบ enableDomainStylesheets: true เพื่อใช้สไตล์ชีตระดับโดเมน เรียนรู้เพิ่มเติมเกี่ยวกับคำอธิบายประกอบเทมเพลต

วิธีเพิ่มหรือลบสไตล์ชีตจากเนื้อหาทั้งหมดบนโดเมน:

• ในบัญชี HubSpot ของคุณ คลิก settings ไอคอนการตั้งค่า ในแถบนำทางด้านบน
• ในเมนูแถบด้านข้างให้คลิกเว็บไซต์ > หน้า
• คลิกเมนูแบบเลื่อนลงเพื่อเลือกโดเมนที่คุณต้องการอัปเดตการตั้งค่า
• ในแท็บเทมเพลตให้เลื่อนไปที่ CSS และสไตล์ชีต หากต้องการเพิ่มสไตล์ชีตให้คลิก + เพิ่มสไตล์ชีต คลิก X ข้างสไตล์ชีตที่แนบมาเพื่อลบออก
• คลิก บันทึก

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