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

使用佈景主題

上次更新時間: 四月 12, 2024

可与下列任何一种订阅一起使用,除非有说明:

所有產品和版本

佈景主題是一組可用於建立網站的範本、模組、全域內容和樣式設定。 你可以在內容編輯器中使用主題編輯頁面和文章,並將網誌範本設定為在網誌設定中使用主題。 

所有帳戶都可以存取至少一個預設HubSpot主題。 佈景主題也可以從範本市集下載。

了解主題

佈景主題是網站的一組檔案,包括:

  • 編碼範本:網站的一組範本,包括首頁、相關頁面、登陸頁面和網誌範本。 這些範本由開發人員自訂編碼,但內容和版面配置可以在內容編輯器中自訂。 
  • 模組:一組獨特的主題模組,你可以使用該主題添加到內容中。 
  • 全域內容:在多個頁面上重複的內容,例如網站頁首或頁尾。 你可以直接從拖放頁面編輯器編輯全域內容
  • 佈景主題設定:使用佈景主題的範本樣式設定,包括字型、間距和顏色。

使用作用中的佈景主題

你可以設定使用中的佈景主題,將該佈景主題的頁面顯示為新建立頁面的預設選項。

設定或變更作用中的佈景主題不會變更用於現有內容的佈景主題,這需要更換內容目前的範本。 您可以在HubSpot範本市集購買其他佈景主題。 

  • 前往你的內容:

    • 網站頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「網站頁面」。
    • 登陸頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「登陸頁面」。
  • 點擊右上角的「建立」下拉式選單,然後選擇「網站頁面」或「登陸頁面」。
  • 在對話框中,輸入頁面名稱,然後單擊創建頁面。
  • 在主題選擇畫面上,將鼠標懸停在主題上,然後單擊預覽主題以打開主題的預覽,或者單擊設置為活動主題以使用此主題作為頁面的默認值。 

set-an-active-theme設定佈景主題
後,每次建立新頁面時,系統都會顯示範本選擇畫面。 在此畫面中,你可以切換至其他作用中的佈景主題:

  • 按一下「主題」下拉式選單,然後選取「變更主題」。

change-theme-in-hubspot

  • 在主題選擇畫面上,將鼠標懸停在主題上,然後單擊預覽主題以打開主題的預覽,或者單擊設置為活動主題以使用此主題作為頁面的默認值。 

使用主題建立頁面

  • 前往你的內容:

    • 網站頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「網站頁面」。
    • 登陸頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「登陸頁面」。
  • 點擊右上角的「建立」下拉式選單,然後選擇「網站頁面」或「登陸頁面」。
  • 在對話框中,輸入頁面名稱,然後單擊創建頁面。
  • 在範本選擇畫面上,啟用中佈景主題的範本會顯示在「佈景主題範本」部分。 若要查看不屬於有效佈景主題的範本,請按一下「其他範本」。
  • 將遊標暫留於範本上,然後按一下預覽範本以預覽範本,或按一下選擇範本以繼續至內容編輯器。 

preview-or-select-template

  • 在內容編輯器中,使用拖放編輯器編輯頁面內容。 
  • 若要將變更上線,請按一下右上角的「發佈」或「更新」,然後在對話方塊中按一下「立即發佈」或「立即更新」。 

將佈景主題範本套用至您的網誌

你可以在網誌設定中將網誌設定為與頁面使用相同的主題。 博客文章和博客列表頁面模板是分開選擇的。 

  • 在你的 HubSpot 帳戶中,點擊頂端導覽列中的settings「設定圖示」。
  • 在左側邊欄選單中,前往「內容」>「網誌」。
  • 如果你有多個網誌,請點擊「選擇 要修改的網誌」下拉式選單,然後選擇一個網誌。 
  • 按一下範本索引標籤。
  • 在「部落格貼文範本」和「部落格清單頁面」部分,點擊「操作」下拉式選單,然後選擇「變更範本」。

change-blog-template

  • 在佈景主題選擇畫面上,選擇你的佈景主題,然後選擇使用該佈景主題的範本 。 按一下右下角的「完成」。 

select-a-theme-blog-template

  • 設定網誌文章和網誌旅居頁面範本後,點擊左下角的「儲存」。 

請注意:對於可以在內容編輯器中編輯的博客列表頁面,這些步驟將導致內容編輯器而不是主題選擇屏幕。 

編輯主題設定

你可以在佈景主題設定中自訂佈景主題的樣式,包括字型、顏色和間距。 此處編輯的樣式適用於此主題中包含的所有頁面和主題模組。 進一步了解如何管理佈景主題設定

edit-global-theme-fonts

管理佈景主題

在設計管理工具中,你可以編輯、複製或複製佈景主題至另一個HubSpot帳戶。 您也可以刪除預設HubSpot佈景主題、複製佈景主題和自訂佈景主題,以及建立子佈景主題。 

複製佈景主題

若要在設計管理員中編輯預設主題的編碼檔案,必須先複製它們。 從範本市集購買的佈景主題無法複製;建議改為建立子佈景主題。 

  • 在你的 HubSpot 帳戶中,瀏覽「內容」>「設計管理工具」。
  • 在Finder中,按一下@ hubspot資料夾。 此資料夾包含所有主題和預設模組,包括拖放電子郵件模組。 
    design-manager-hubspot-folder
  • 在主題 資料夾上按一下滑鼠右鍵,然後選擇複製主題。 
design-manager-theme-folder-clone
  • 在對話框中,輸入主題的名稱,然後單擊創建。

主題將被複製到根資料夾中,並與其他資料夾一起列在搜尋器中。 

建立子佈景主題

在設計管理員中,您可以根據購買的範本市場主題或預設的HubSpot主題,建立子主題,即購買的主題副本。 

開發人員還可以根據自訂主題創 建子主題,並使用我們的開發人員文檔使用CLI創建子主題。 進一步了解如何處理子佈景主題。 

  • 在你的 HubSpot 帳戶中,瀏覽「內容」>「設計管理工具」。
  • 在搜尋器中,按一下範本市場佈景主題的@ marketplace資料夾,或預設佈景主題的@ hubspot資料夾。 
  • 在主題資料夾上按一下滑鼠右鍵,然後選擇建立子主題。 
  • 在對話框中,輸入子主題的名稱 。
  • 若要變更儲存子佈景主題的位置,請按一下「檔案位置」區段中的變更 。 按一下資料夾,然後按一下選擇。
  • 若要自訂佈景主題的CSS和JS檔案名稱,請按一下進階選項,然後在CSS和JS欄位中輸入新的檔案名稱。 
  • 若要完成此過程,請按一下「建立子佈景主題」。 你可以在內容編輯器中編輯子佈景主題的樣式。 

將佈景主題複製到另一個帳戶

你可以將主題資料夾從一個帳戶複製到另一個帳戶。 您必須是兩個帳戶中擁有設計工具權限的用戶。

請注意: @ hubspot或@ marketplace目錄中的主題資料夾無法在帳戶之間複製。

如要將佈景主題複製到帳戶:

  • 在你的 HubSpot 帳戶中,瀏覽「內容」>「設計管理工具」。
  • 在尋找工具中,將滑鼠遊標懸停在要複製的主題資料夾上,然後在該資料夾上按一下滑鼠右鍵,然後選擇複製到其他帳戶。 

    copy-theme-folder-to-different-account
  • 在對話方塊中,選擇一個帳戶,然後按一下複製資產。 複製過程完成後,資料夾將立即顯示在指定的帳戶中。 

上傳佈景主題

Content Hub 帳戶中的用戶可以從Envato的ThemeForest Marketplace購買HubSpot主題,然後從主題選擇畫面將其上傳到HubSpot : 

copy-your-envato-purchase-code

  • 前往你的內容:

    • 網站頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「網站頁面」。
    • 登陸頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「登陸頁面」。
  • 點擊右上角的「建立」下拉式選單,然後選擇「網站頁面」或「登陸頁面」。 
  • 在對話框中,輸入頁面名稱,然後單擊創建頁面。 
  • 在範本選擇畫面上,按一下「佈景主題」下拉式選單,然後選取「變更佈景主題」。 

change-theme-in-hubspot

  • 在右上角,按一下從ThemeForest安裝佈景主題。

install-a-theme-from-themeforest

  • 在對話方塊中,貼上電子郵件中的購買代碼,然後按一下「安裝佈景主題」。 
  • 在新分頁中,登入Envato的ThemeForest Marketplace以完成安裝程序。 

成功登入後, HubSpot會顯示橫幅。 你的佈景主題可能需要幾分鐘才會出現。 

upload-theme

刪除佈景主題

預設HubSpot佈景主題、複製佈景主題和上傳的佈景主題可以從設計管理員中刪除:

  • 在你的 HubSpot 帳戶中,瀏覽「內容」>「設計管理工具」。
  • 尋找工具中,按一下包含佈景主題資產的資料夾。
  • 按一下檔案下拉式選單,然後選擇刪除[資料夾名稱]。 
  • 在對話框中,選擇我確定要刪除此文件夾復選框,然後單擊刪除此文件夾。 

購買的佈景主題必須從範本市集解除安裝: 

  • 在你的 HubSpot 帳戶中,點擊主導覽列中的「Marketplace 圖示」marketplace,然後選取「範本市集」。
  • 按一下「已購買」索引標籤。 
  • 將遊標懸停在主題上,然後點擊操作下拉式選單,然後選擇解除安裝。 
  • 在對話方塊中,按一下解除安裝。
這篇文章有幫助嗎?
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助