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

ทำความเข้าใจที่มาของสไตล์การแต่งตัวของเพจ

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

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

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

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

ทำความเข้าใจว่าสไตล์การแต่งตัวถูกนำไปใช้อย่างไร

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

  1. CSS โมดูลที่กำหนดเอง
    1. สไตล์ชีตที่แนบมากับโมดูล
    2. เพิ่ม CSS ในส่วน CSS ของโมดูลแล้ว
    3. CSS ภายในมาร์กอัป HubL ของโมดูลภายในบล็อค require_css
  2. เพิ่มสไตล์ชีตไปยังเทมเพลตผ่านบล็อค require_css แล้ว
  3. สไตล์ชีตเริ่มต้นของ HubSpot (ตัวอย่างเช่น layout.css)
  4. สไตล์ชีตที่แนบมากับเทมเพลต



  5. สไตล์ชีตที่แนบมาในแท็บการตั้งค่าของหน้าเว็บของคุณ



  6. สไตล์ชีตที่แนบมาในการตั้งค่าของคุณสำหรับทุกโดเมน
  7. สไตล์ชีตที่แนบมาในการตั้งค่าของคุณสำหรับโดเมนเฉพาะ
  8. เพิ่ม CSS ภายใน < style > แท็ก ตัวอย่างเช่น HEAD HTML ของการตั้งค่าเว็บไซต์การ ตั้งค่าหน้าเว็บหรือเทมเพลต



  9. สไตล์ที่เพิ่มผ่านเครื่องมือแก้ไขหน้าเว็บ HubSpot จะเพิ่ม! แท็กสำคัญให้กับสไตล์เหล่านี้ด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับ! แท็กสำคัญและผลกระทบต่อสไตล์การแต่งตัว

ค้นหาการจัดแต่งในหน้าตัวอย่างหรือหน้าสด

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

วิธีค้นหาสไตล์ใน Google Chrome:

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

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



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



    • หากชื่อต้นทางขึ้นต้นด้วยโมดูลสไตล์การแต่งตัวก็น่าจะมาจาก CSS ของโมดูล วางเมาส์เหนือชื่อแหล่งที่มาเพื่อดูชื่อเต็มของโมดูล



    • หากชื่อแหล่งที่มาคือสไตล์ชีตตัวแทนผู้ใช้ CSS จะเป็นส่วนหนึ่งของสไตล์เริ่มต้นของเบราว์เซอร์ คุณจะเห็นสิ่งนี้บ่อยที่สุดสำหรับการจัดแต่งแท็ก HTML ทั่วไปเช่น < p >, < h1 >, < h2 >, < span >, < div > ฯลฯ การจัดแต่งทรงผมนี้จะใช้เมื่อเบราว์เซอร์ไม่พบกฎการจัดแต่งทรงผมทั่วไปสำหรับองค์ประกอบแต่สามารถเขียนทับได้โดยการเพิ่มสไตล์ของคุณเองลงในองค์ประกอบนั้น



    • หากชื่อต้นทางคือ URL ของหน้าเว็บ CSS จะมาจากแท็ก < style > ภายในหน้าเว็บ ตัวอย่างเช่นการจัดแต่งทรงผมสามารถตั้งค่าได้ในหน้าเว็บหรือหัวเทมเพลต HTML



    • หากชื่อแหล่งที่มาคือ URL ของหน้าเว็บและการจัดแต่งทรงผมมีเป้าหมายอยู่ที่ # hs_cos_wrapper_module_number การจัดแต่งทรงผมน่าจะถูกตั้งค่าในแท็บรูปแบบของเครื่องมือแก้ไขหน้าเว็บ HubSpot จะเพิ่ม! แท็กสำคัญให้กับสไตล์เหล่านี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับ! แท็กสำคัญและผลกระทบต่อสไตล์การแต่งตัว
       

    • หากชื่อแหล่งที่มาคือ < style > สไตล์การแต่งตัวมีแนวโน้มที่จะถูกรวมเข้ากับองค์ประกอบโดยอัตโนมัติ บ่อยครั้งที่สิ่งนี้เกิดจากการตั้งค่าสไตล์ในเครื่องมือแก้ไขเนื้อหา HubSpot ที่ฝังได้เช่น CTA หรือวิดเจ็ตการประชุม



    • หาก element.style ปรากฏถัดจากคำประกาศในผู้ตรวจสอบ CSS จะถูกตั้งค่าแบบอินไลน์ การจัดแต่งแบบอินไลน์คือการจัดแต่งที่เพิ่มโดยตรงไปยังซอร์สโค้ด HTML ของหน้าเว็บหรือฟิลด์การจัดแต่งแบบอินไลน์ของเทมเพลต ตัวอย่างเช่นการจัดแต่งทรงผมแบบอินไลน์ในซอร์สโค้ดจะปรากฏเป็น < p style =" background: purple ;"> Hello world

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

ขอความช่วยเหลือเกี่ยวกับการแก้ไขการออกแบบ

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

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

เนื้อหาที่เกี่ยวข้อง