構造和自定義模板布局
上次更新時間: 一月 20, 2023
了解如何設定和自訂現有的拖放模板,以及如何使用模板的模組、羣組和欄位作為構建基塊。
構建您的模板
透過在設計管理器中使用佈局編輯器,您可以快速建立內容佈局,而無需寫入任何HTML。
- 在 HubSpot 帳戶中,進入「行銷」>「檔案和範本」>「設計工具」。
- 在「尋找工具」中,按一下模板 以編輯它。
添加和拖拽模組
若要將模組新增到佈局,請按一下佈局檢查器頂部的 +新增。 搜尋或選擇某個 模組,然後將其拖動到您希望該模組在佈局中渲染的位置。 將模組拖動到其他模組之上,將會建立欄位或組合模組。
更改列寬度
若要更改欄的寬度,請將鼠標懸停在模組之間,然後按一下並水平拖動。
分組模組
模組羣組是組成頁面不同部分的模組單位。
若要將兩個模組分組,請按一下第一個模組,然後按住Control/Command鍵並選擇第二個模組。 如果你分組多於兩個模組,請重複此步驟。 接下來,按一下模 組檢查器中的羣組圖示groupModule。
請注意:模組羣組不能穿過區段分隔符或包含部分選擇的模組羣組。

水平拆分模塊
拆分模組將模組分成兩半,建立兩個模組。 要拆分模組,請按一下模組,然後按一下模組檢查器 中的 拆分模組圖示splitModule。 或者,您可以右鍵按一下佈局中的模組,然後選擇拆分模組。
中心模組
透過水平間隔線,您可以在頁面上將模組和羣組居中,或在其兩側新增空白空格。 若要新增水平間隔線,請按一下佈局檢查器頂部的+新增。 找到 水平分隔符,然後將其拖放到模板中。
若要變更水平分隔線的大小,請變更分隔其與其他模組的欄位寬度。 若要將模組或羣組居中,請在每邊添加水平間隔物。
添加彈性列
彈性欄位旨在讓網頁層級的內容管理更容易讓內容創作人。 當彈性欄位新增到HubSpot頁面範本時,使用者將可以選擇在個別頁面編輯器中 新增、移除和重新排序模組。 此功能允許設計師創建較少的模板,同時允許市場推廣專員彈性自訂每個頁面以滿足他們的需求。
若要新增彈性欄位,請按一下佈局檢查器頂部的+新增 。 找到 彈性列,然後將其拖放到模板中。
- 彈性欄只能新增至頁面範本,不能新增至電子郵件或網誌範本。
- 新增至彈性欄的模組不能包含CSS類別、內嵌造型或與其關聯的包裹HTML。 樣式選項需要新增到彈性欄位本身。
自定義模板
建立範本的整體佈局後,您可以互換模組,並進行其他範本自訂。
編輯模組選項
您可以透過按一下佈局編輯器中的 模組來編輯模組的選項。 在右側的模組檢查器中,您會看到模組的可編輯選項。 這些選項通常包括造型、預設內容和編輯器選項,並根據特定的模組類型而有所不同。 進一步了解編輯模組CSS以及預設內容和設定。

SWAP模組
在模板中新增模組後,您可以選擇將它更換為另一個模組。 在佈局編輯器 中右鍵按一下該模組,然後按一下換用模組。 在出現的下拉式選單中,選擇要 替換原始模組的模組。
轉換為全局模組
您可以將模板中的模組轉換為全局模組,可以在多個模板中使用。 當您以某種方式設定模組的樣式,和/或在模組中擁有您想在其他模板中重用的預設內容時,這非常有用。
- 在佈局編輯器中按一下模組 。
- 在模組檢查器中,按一下更多下拉選單,然後選擇轉換為全局模組。
- 在「」對話方塊中,輸入全局模組名稱,然後按一下建立。
刪除模組
若要刪除模組,請在佈局編輯器中按一下模組,然後在模組檢查器 中按一下垃圾桶 刪除 圖示。 或者,您可以右鍵按一下模組,然後選擇刪除模組。

在查找器中管理模板
除了模組選項外,還有幾個特定於模板的操作。
- 在模板的右上角,按一下 資料夾圖示資料夾。
- 右鍵單擊範本的 名稱 。 在下拉選單中,您可以自訂以下選項:
- 複製到入口網站:將模板複製到另一個您也是用戶的入口網站。 從市場購買的模板將無法複製到其他入口網站。
- 克隆模板:這將創建模板的完全複製,並且在您想要創建現有模板的變體時很有用。
- 克隆到HTML :這會建立一個獨立的HTML版本的範本。 如果您需要更多地控制標記,或者想進一步了解模板的編碼方式,這很有幫助。
- 查看模板源:查看模板的源代碼HTML。 與「複製到HTML」選項不同,這不會 創建模板的獨立HTML版本。
- 重命名模板:修改模板的內部名稱。
- 顯示相關人員:檢視目前使用範本的所有網頁、電子郵件或網誌。
- 顯示修訂紀錄:查看範本的修訂紀錄,並選擇將範本恢復為先前發佈的版本。
- 建立電子郵件/頁面:直接從模板建立電子郵件或登陸頁面/網站頁面。
- 刪除模板:這將刪除模板。 刪除後,模板將保留 30天,之後將永久刪除。 若要還原模板,您需要聯絡客戶支援。
- 也可以從上面的「檔案 與操作」下拉菜單中存取這些選項。
Thank you for your feedback, it means a lot to us.
相關內容
-
建立和編輯模組
在設計管理工具中,您可以建立自訂的編碼模組,將進階功能新增至您的網誌、網頁或電子郵件。自訂模組提供廣泛的功能,讓內容可以在網頁、電子郵件或網誌編輯器中完全自訂。你可以從頭開始建立自訂模組,或從HubSpot...
知識庫 -
在模板中使用預設模組
這是設計工具中可用於拖放模板的所有預設模組的概述。每種類型的模組都可以透過檢查器中的造型和內容選項自訂。您也可以將預設模組新增到HTML範本及其HubL片段。 向模板添加模板 ...
知識庫 -
設計經理的快速參觀
HubSpot的設計經理將設計師建立最先進網站所需的所有工具整合在一起,同時為市場推廣者提供創作內容時所需的靈活度。 在本文中,您將參觀設計經理的所有功能。 ...
知識庫