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

建立、編輯和附加CSS檔案以設定網站的風格

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

套用至:

所有產品和版本

CSS (串接式樣式表)是選擇網頁元素並控制其顯示的加密檔案。 將自訂範本的HTML想像成網站的骨骼,將CSS想像成網站的外觀。

本文將介紹如何在HubSpot中建立、發佈和附加CSS檔案。 您可以在此處了解如何對特定頁面進行簡單的設計變更。 如果你使用的是主題範本,請瞭解如何編輯主題設定

新建CSS文件

  • 在 HubSpot 帳戶中,進入「行銷」>「檔案和範本」>「設計工具」。
  • 按一下左上角 資料夾圖示資料夾,以展開側邊欄選單。 然後按一下 檔案 > 新建檔案
New coded file
  • 在「」對話方塊中,按一下 CSS樣式表。 然後輸入CSS樣式表的名稱,然後按一下 建立

編輯CSS檔案

建立或開啟現有CSS檔案後,請在代碼編輯器中進行編輯。 除了標準CSS外,代碼編輯器還支援HubL變數和宏 ,讓您更輕鬆地維護CSS。 若要預覽HubL的渲染方式,請按一下以切換編輯器頂部的「顯示輸出」開關。 在渲染預覽時,面板會在右側開啟。


design-manager-show-output-toggle

若要查看HubSpot範本的標準CSS選擇器清單,請查看 Boilerplate CSS

發佈前,請檢查您的代碼是否有HubL錯誤。 有三個地方可以在自訂模組或密碼檔案中找到HubL錯誤或警告:

  • 在碼編輯器底部的錯誤控制臺中。
  • 在碼編輯器左側的錯誤槽中。
  • 在編輯器右側的捲動列中。

阻礙你發佈的錯誤將以紅色顯示,而一般警告將以黃色顯示。 在代碼編輯器的底部,按一下 顯示詳細資訊 以查看錯誤控制臺中有關錯誤的詳細資訊,然後按一下 隱藏詳情 以收起錯誤控制臺。

在錯誤控制臺中,只要您的代碼或自訂模組中有HubL錯誤或警告,便會連結到任何地方。 將滑鼠懸停在代碼編輯器左側的紅色錯誤指示器上,即可查看代碼中的錯誤或警告。 按一下錯誤將使遊標循環到該行中的所有錯誤或警告。 按一下捲動列註釋將會帶您到檔案的那一部分。

您也可以在代碼編輯器中按一下行號,並有相應的檔案更新網址。 這樣您就可以與其他人分享代碼連結,並將他們引導至您在檔案內工作的確切位置。

編輯檔案後,按一下右上角的「發佈變更」。 如果您想在其他編碼範本中呼叫此風格表,請點擊左側邊欄選單 中的「 操作 >「 複製公開網址」來複製該表格的網址。

Edit CSS

附加到模板

在HubSpot中,您可以通過幾種不同的方式爲內容附加樣式表。 以下是在您的網站上連結附加樣式表的順序:

  1. public_common.css * HubSpot應用程序主要使用的樣式表,但也適用於某些網站功能。
  2. 網站 > 頁面下的設定中的標題HTML :連結標籤添加到網站的全局< head >。
  3. Layout.css * * d efault響應CSS文件附加到所有拖放模板布局。
  4. 網站」>「 面」下的設定中附加的樣式表:附加到整個網站的樣式表。
  5. 網站」>「網 」下的設定中附加的樣式表:附加到網誌的樣式表(覆蓋網站全局表)。
  6. 連結的樣式表* * *在模板佈局中附加的樣式表。
  7. 模板中的其他< head >標記: link tags added to the < head > of a specific template layout.
  8. 特定網頁的樣式表:在網頁的設定中附加的樣式表。
  9. 頁面標題HTML :連結標籤新增到頁面設定中特定頁面的< head >。

*必填

* *拖放布局所需

* * *模板布局的樣式表附件的推薦方法

若要將樣式表附加到模板,請在設計管理器中開啟模板。 在「標題 與正文選項」下的右側邊欄選單中,從「 連結的樣式表」旁邊的「 新增」下拉式 選單中選擇一個檔案。

您可以將鼠標懸停在「編輯」上方,然後按一下 「編輯」來變更,或按一下 X」來刪除,以編輯或移除已附加的風格表。

新增樣式表後,按一下右上角 的「 發佈變更」,即可使用模板將變更套用至即時頁面。

HubSpot Help article screenshot

在特定頁面上附加或移除樣式表(僅限營銷中心專業版和企業版

請注意:此選項不適用於主題範本。 了解如何編輯主題設定

若要從頁面編輯器的設定部分新增或移除頁面特定的樣式表:

  • 瀏覽至網站頁面或登陸頁面
  • 將滑鼠停留在頁面上,然後按一下[編輯]
  • 在頁面編輯器中,按一下頂部的設定
  • 向下捲動並按一下[進階選項]。
  • 在「 頁面樣式表」下方,按一下「 附加樣式表」 下拉菜單,然後選擇要附加的工作表。 按一下要移除的樣式表旁邊的 X

  • 按一下右上角的[ 儲存發佈]。

您也可以停用模板或網域的網頁所繼承的樣式表。 禁用時,這些樣式表不會套用到您的頁面:

  • 在頁面編輯器的「同一 設定 」標籤下, 從包含的風格表旁邊的下拉選單中選擇停用」。
  • 按一下右上角 的[儲存 發佈]。

附加或移除網域級的樣式表(僅限營銷中心專業版和企業版

請注意:主題範本必須包含註釋enableDomainStylesheets: true才能使用網域級別的樣式表。 了解更多模板批注

若要從網域上的所有內容中新增或移除樣式表,請按照以下步驟操作:

  • 在 HubSpot 帳戶中,點擊主要導覽列中的「settings設定圖示」。
  • 在側邊欄選單中,按一下 網站 > 頁面
  • 按一下下 拉式選單,選擇您要更新的網域
  • 本」標籤上,捲動至 CSS與樣式表。 若要新增樣式表,請按一下 +新增樣式表。 按一下所附樣式表 旁邊的 X以刪除它。
  • 按一下 儲存

請注意:降級至HubSpot的入門工具或免費工具時,附加的網域級風格表將保持有效,直到你刪除它們為止。 移除所有樣式表後,您將無法再附加網域級的樣式表。 了解更多關於降級訂閱的資訊

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.