跳到內容
請注意::這篇文章的翻譯只是為了方便而提供。譯文透過翻譯軟體自動建立,可能沒有經過校對。因此,這篇文章的英文版本應該是包含最新資訊的管理版本。你可以在這裡存取這些內容。
Landing Pages

了解頁面造型的來源

上次更新時間: 十一月 21, 2022

套用至:

所有產品和版本

有多個地方可以在HubSpot中添加內容樣式,它會根據新增的位置按特定順序應用。 在下方,了解如何套用造型、如何在活動頁面上找到造型,以及如何獲得設計編輯方面的協助。

了解如何應用樣式

HubSpot中的CSS樣式根據它在HubSpot中設置的位置依次應用,如下所示。 例如,全局樣式表中的樣式集會被特定頁面上的樣式集覆蓋。 

  1. 自定義模板CSS
    1. 附加到模組的樣式表。
    2. CSS已添加到模組的CSS部分。
    3. require_css區塊內的模組的HubL標記內的CSS
  2. 樣式表通過require_css塊添加到模板
  3. HubSpot預設樣式表(例如, layout.css )
  4. 附加到模板的樣式表

    design-manager-linked-stylesheet
  5. 附在頁面設定標籤上的
  6. 樣式表

    page-editor-attach-stylesheet
  7. 所有網域的設定中附加的樣式表
  8. 特定網域的設定中附加的樣式表
  9. CSS在< style >標籤中添加。 例如,網站設定、 設定或本的標題HTML。

    page-editor-head-html
  10. 通過頁面編輯器新增的
  11. 風格。 HubSpot也會在這些樣式中新增!重要標籤。 進一步了解!重要標籤及其對造型的影響
page-editor-styles-tab

在預覽或即時頁面上尋找造型

您可以使用瀏覽器中的開發工具來檢查套用於即時網站或預覽頁面的風格。 每個瀏覽器在如何排除造型問題方面略有不同。

要在Chrome瀏覽器中找到樣式:

  • 在預覽或即時頁面上,右鍵按一下要檢查的元素,然後選擇查。
  • 在左側的「元素」窗格中,您會看到網頁的HTML。 您可以按一下元素來檢視其風格,也可以使用窗格左上角的遊標圖示來按一下頁面上的元素。

    inspect-live-page-cursor

  • 在右側的「樣式」窗格中,您會看到套用到該元素的所有樣式。 您可以選擇並清除每個樣式旁邊的核取方塊,以移除並套用樣式。 這將有助於縮小要變更的風格規則。

    inspect-live-page
  • 在CSS規則的右側,您會看到該造型的源名,它會告訴您造型來源。 將鼠標懸停在源名稱上方可檢視全名:
    • 當造型來自造型表時,造型表的名稱將顯示在檢查器中的CSS宣言旁邊。 然後,您可以瀏覽設計經理,找到款式表,並根據需要進行編輯。

      inspect-css-stylesheet-name
    • 如果源名稱以模組開始,那麼樣式可能來自模組的CSS。 將鼠標懸停在源名稱上方,即可檢視模組的全名。

      inspect-css-module-name
    • 如果來源名稱是User agent stylesheet , CSS是瀏覽器預設造型的一部分。 一般HTML標籤樣式,如< p >、< h1 >、< h2 >、< span >、< div >等,您會經常看到這個。 當瀏覽器找不到元素的一般風格規則時,便會套用此風格,但可以透過向該元素新增自己的風格來覆蓋此風格。

      inspect-css-user-agent
    • 如果來源名稱是網頁網址, CSS將來自網頁上的< style >標籤。 例如,樣式可以在頁面或範本標題HTML中設定。

      inspect-css-page-url
    • 如果來源名稱是網頁網址,且造型針對# hs_cos_wrapper_module_number ,則可能會在網頁編輯器的「造」標籤中設定造型。 HubSpot將在這些樣式中新增!重要標籤。 進一步了解!重要標籤及其對造型的影響
       

      inspect-css-styles-tab
    • 如果源名稱是< style > ,樣式可能會自動包含在元素中。 這通常是由於可嵌入的HubSpot資產(如CTA或會議小工具)的編輯器中設置的造型所致。

      page-styling-style-tag0
    • 如果 element.style 顯示在檢查器中的聲明旁邊,則CSS已設為內嵌。 內嵌造型是直接新增至網頁的HTML源代碼模板的內嵌造型欄位。 例如,源代碼中的內聯樣式會顯示為< p style = "background: purple;" > Hello world </p >

      inspect-css-element-style

如要進一步了解如何檢查網頁,請查看網頁瀏覽器的說明文件:

尋求設計編輯方面的協助

修改HubSpot模板或樣式表的最佳資源是原始模板設計師。 然而,有各種資源可以獲得內容造型方面的其他協助,這取決於您對HTML和CSS的疑難解答的舒適程度。

  • 如果你願意使用檢查工具來排除模板上的設計問題,請按照以下步驟操作:
  • 如果您不願意在模板中閱讀或編輯HTML和CSS :
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.