知識庫

使用佈景主題

作者:HubSpot Support | Nov 21, 2022 1:13:58 PM

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

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

了解主題

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

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

使用作用中的佈景主題

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

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

  • 前往你的內容:

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

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

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

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

使用主題建立頁面

  • 前往你的內容:

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

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

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

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

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

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

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

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

編輯主題設定

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

管理佈景主題

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

你可以在不影響父佈景主題的情況下編輯子佈景主題的佈景主題設定,但不會建立額外的佈景主題資產副本。 若要複製上層佈景主題的資產,建議複製該佈景主題。 

複製佈景主題

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

  • 在Finder中,按一下@ hubspot資料夾。 此資料夾包含所有主題和預設模組,包括拖放電子郵件模組。 
  • 在主題 資料夾上按一下滑鼠右鍵,然後選擇複製主題。 

  • 在對話框中,輸入主題的名稱,然後單擊創建。

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

建立子佈景主題

在設計管理員中,您可以根據購買的範本市場主題或預設的HubSpot主題,建立子主題,即購買的主題副本。 您可以編輯子佈景主題的佈景主題設定,而不會影響父佈景主題。 

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

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

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

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

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

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

  • 在尋找工具中,將滑鼠遊標懸停在要複製的主題資料夾上,然後在該資料夾上按一下滑鼠右鍵,然後選擇複製到其他帳戶。 

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

上傳佈景主題

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

  • 前往你的內容:

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

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

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

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

刪除佈景主題

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

  • 尋找工具中,按一下包含佈景主題資產的資料夾。
  • 按一下檔案下拉式選單,然後選擇刪除[資料夾名稱]。 
  • 在對話框中,選擇我確定要刪除此文件夾復選框,然後單擊刪除此文件夾。 

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

  • 按一下「已購買」索引標籤。 
  • 將遊標懸停在主題上,然後點擊操作下拉式選單,然後選擇解除安裝。 
  • 在對話方塊中,按一下解除安裝。