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

構造和自定義模板布局

上次更新時間: 一月 20, 2023

套用至:

行銷 Hub Professional, Enterprise
CMS Hub Professional, Enterprise
舊版 Marketing Hub Basic

了解如何設定和自訂現有的拖放模板,以及如何使用模板的模組、羣組和欄位作為構建基塊。

構建您的模板

透過在設計管理器中使用佈局編輯器,您可以快速建立內容佈局,而無需寫入任何HTML。

  • 在 HubSpot 帳戶中,進入「行銷」>「檔案和範本」>「設計工具」。
  • 在「尋找工具」中,按一下模板 以編輯它。

添加和拖拽模組

若要將模組新增到佈局,請按一下佈局檢查器頂部的 +新增。 搜尋或選擇某個 模組,然後將其拖動到您希望該模組在佈局中渲染的位置。 將模組拖動到其他模組之上,將會建立欄位或組合模組。

更改列寬度

若要更改欄的寬度,請將鼠標懸停在模組之間,然後按一下並水平拖動。

分組模組

模組羣組是組成頁面不同部分的模組單位。

若要將兩個模組分組,請按一下第一個模組,然後按住Control/Command鍵並選擇第二個模組。 如果你分組多於兩個模組,請重複此步驟。 接下來,按一下模 組檢查器中的羣組圖示groupModule。  

請注意:模組羣組不能穿過區段分隔符或包含部分選擇的模組羣組。

水平拆分模塊

拆分模組將模組分成兩半,建立兩個模組。 要拆分模組,請按一下模組,然後按一下模組檢查器 中的 分模組圖示splitModule。 或者,您可以右鍵按一下佈局中的模組,然後選擇拆分模組

中心模組

透過水平間隔線,您可以在頁面上將模組和羣組居中,或在其兩側新增空白空格。  若要新增水平間隔線,請按一下佈局檢查器頂部的+新增。 找到 水平分隔符,然後將其拖放到模板中。

若要變更水平分隔線的大小,請變更分隔其與其他模組的欄位寬度。 若要將模組或羣組居中,請在每邊添加水平間隔物。 

add-horizontal-spacer

添加彈性列

彈性欄位旨在讓網頁層級的內容管理更容易讓內容創作人。 當彈性欄位新增到HubSpot頁面範本時,使用者將可以選擇在個別頁面編輯器中 新增、移除和重新排序模組。 此功能允許設計師創建較少的模板,同時允許市場推廣專員彈性自訂每個頁面以滿足他們的需求。

若要新增彈性欄位,請按一下佈局檢查器頂部的+新增 。 找到 彈性列,然後將其拖放到模板中。

請注意:
  • 彈性欄只能新增至頁面範本,不能新增至電子郵件或網誌範本。
  • 新增至彈性欄的模組不能包含CSS類別、內嵌造型或與其關聯的包裹HTML。 樣式選項需要新增到彈性欄位本身。

 


自定義模板

建立範本的整體佈局後,您可以互換模組,並進行其他範本自訂。

編輯模組選項

您可以透過按一下佈局編輯器中的 模組來編輯模組的選項。 在右側的模組檢查器中,您會看到模組的可編輯選項。 這些選項通常包括造型、預設內容和編輯器選項,並根據特定的模組類型而有所不同。 進一步了解編輯模組CSS以及預設內容和設定

Edit options

SWAP模組

在模板中新增模組後,您可以選擇將它更換為另一個模組。 在佈局編輯器 中右鍵按一下該模組,然後按一下換用模組。 在出現的下拉式選單中,選擇要 替換原始模組的模組。

轉換為全局模組

您可以將模板中的模組轉換為全局模組,可以在多個模板中使用。 當您以某種方式設定模組的樣式,和/或在模組中擁有您想在其他模板中重用的預設內容時,這非常有用。

  • 在佈局編輯器中按一下模組 
  • 在模組檢查器中,按一下更多下拉選單,然後選擇轉換為全局模組
  • 在「」對話方塊中,輸入全局模組名稱,然後按一下建立

刪除模組

若要刪除模組,請在佈局編輯器中按一下組,然後在模組檢查器 中按一下垃圾桶 刪除 圖示。 或者,您可以右鍵按一下模組,然後選擇刪除模組

在查找器中管理模板

除了模組選項外,還有幾個特定於模板的操作。

  • 在模板的右上角,按一下 資料夾圖示資料夾
  • 右鍵單擊範本的 名稱 。 在下拉選單中,您可以自訂以下選項:
    • 複製到入口網站:將模板複製到另一個您也是用戶的入口網站。 從市場購買的模板將無法複製到其他入口網站。
    • 克隆模板:這將創建模板的完全複製,並且在您想要創建現有模板的變體時很有用。
    • 克隆到HTML :這會建立一個獨立的HTML版本的範本。 如果您需要更多地控制標記,或者想進一步了解模板的編碼方式,這很有幫助。
    • 查看模板源:查看模板的源代碼HTML。 與「複製到HTML」選項不同,這不會 創建模板的獨立HTML版本。
    • 重命名模板修改模板的內部名稱。
    • 顯示相關人員:檢視目前使用範本的所有網頁、電子郵件或網誌。
    • 顯示修訂紀錄:查看範本的修訂紀錄,並選擇將範本恢復為先前發佈的版本。
    • 建立電子郵件/頁面直接從模板建立電子郵件或登陸頁面/網站頁面。
    • 刪除模板:這將刪除模板。 刪除後,模板將保留 30天,之後將永久刪除。 若要還原模板,您需要聯絡客戶支援。 
  • 也可以從上面的「檔案 操作下拉菜單中存取這些選項。

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