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

使用主題

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

套用至:

所有產品和版本

主題是一套模板、模組、全局內容和風格設定,可用於建立網站。 你可以從Asset Marketplace下載主題,而CMS Hub 帳戶也可以存取預設的HubSpot主題。 您可以使用拖放內容編輯器來編輯網頁,並在網誌設定中使用網誌範本。 

了解主題

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

  • 編碼範本:一組網站範本,包括首頁、關於網頁、登陸頁和網誌範本。 這些模板是由開發者自訂的,但可以在拖放內容編輯器中自訂內容和佈局。 
  • 模組:一組獨特的主題模組,您可以使用該主題新增至內容。 
  • 全局內容:在多頁面上重複的內容,例如網站頁首或頁尾。 您可以直接從拖放頁面編輯器編輯全局內容
  • 主題設定:使用主題的模板的風格設定,包括字體、間距和顏色。

使用活躍的主題

您可以設定活躍的主題,以顯示該主題的頁面作為新建立的頁面的預設選項。 設定或變更活躍的主題不會改變現有內容所使用的主題,這需要更換內容的當前範本。 其他主題可以在Asset Marketplace中購買。 

  • 瀏覽至您的內容:

    • 網站頁面: 在 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 帳戶中,進入「行銷」>「檔案和範本」>「設計工具」。
  • 在尋找器中,按一下@ hubspot資料夾。 此資料夾包含所有主題和預設模組,包括拖放電子郵件模組。  
    design-manager-hubspot-folder
  • 右鍵按一下主題 資料夾,然後選擇複製主題。 
design-manager-theme-folder-clone
  • 在「」對話方塊中,輸入佈景主題的名稱,然後按一下建立

主題將複製到根資料夾,並會與其他文件夾一起列在尋找器中。 

建立子主題

在設計管理器中,你可以根據購買的Asset Marketplace主題或預設的HubSpot主題建立子主題(購買主題的副本)。 

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

  • 在 HubSpot 帳戶中,進入「行銷」>「檔案和範本」>「設計工具」。
  • 在尋找工具中,按一下資產市場主題的@ marketplace資料夾,或按一下預設主題的hubspot資料夾。 
  • 右鍵按一下主題資料夾,然後選擇建立子主題。 
  • 在「」對話方塊中,輸入子主題的名稱 
  • 若要變更儲存子主題的位置,請按一下檔案位置區塊中的變更 。 按一下資料夾,然後按一下選擇
  • 若要自訂主題的CSS和JS檔案名稱,請按一下進階選項,然後在CSSJS欄位中輸入新的檔案名稱。 
  • 若要完成此流程,請按一下建立子主題。 您可以在內容編輯器中編輯子佈景主題的造型。 

將佈景主題複製到其他帳戶

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

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

如要將佈景主題複製到帳戶,請按照以下步驟操作:

  • 在 HubSpot 帳戶中,進入「行銷」>「檔案和範本」>「設計工具」。
  • 在尋找器中,將鼠標懸停在要複製的主題資料夾上,然後右鍵按一下資料夾,然後選擇複製至其他帳戶。 

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

上傳主題

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

  • 前往Envato ThemeForest Marketplace的HubSpot CMS Hub部分 。 
  • 從市場購買主題
  • 您將收到一封電子郵件,其中包含您所購買主題的購買代碼。 複製購買代碼。 

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 帳戶中,進入「行銷」>「檔案和範本」>「設計工具」。
  • 在「尋找工具」中,按一下包含主題資產的資料夾
  • 按一下檔案下拉選單,然後選擇刪除[資料夾名稱]。 
  • 在「」對話方塊中,選擇「我確定要刪除此資料夾」核取方塊,然後按一下「刪除此資料夾」。 

購買的主題必須從Asset Marketplace卸載: 

  • 按一下購買標籤。 
  • 將鼠標懸停在主題上,然後按一下[操作]下拉式選單,然後選擇[卸載]。 
  • 在「」對話方塊中,按一下「卸載」。
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.