在版面編輯器中使用預設模組

HubSpot提供預設 範本 組，用於在 設計管理工具 的 版面配置編輯器中建立拖放 範本。您可以新增預設模組並複製預設模組以用於拖放 範本。此外，您可以編輯某些預設模組的預設 內容。 

開始之前

在開始使用此功能之前，請務必提前充分了解應採取的步驟，以及該功能的局限性和使用該功能的潛在後果。 

了解要求

• 使用者必須是 超級管理員 ，或已切換 設計工具 權限以存取和編輯模組。 

了解限制和注意事項

• 本文說明如何在 設計管理工具 的版面配置編輯器 中使用 Inspector 來新增和複製預設模組。您也可以 編輯某些預設模組的預設 內容。
• 若要使用HubL將預設模組 新增至HTML 範本 或自訂 範本，請參閱 開發人員文件瞭解詳情。
• 若要在 內容 編輯器中新增和編輯模組，請深入瞭解如何在 內容 編輯器中新增和編輯模組。
• 根據預設，Marketing Hub 和Content Hub 專 & 業企業版帳戶在 設計管理工具 中有@ hubspot 資料夾。
• 部分預設模組只能新增至特定 範本 類型。例如，表單 單模組不適用於 電子郵件 範本。
• 必須先複製預設模組，才能自訂模組原始程式碼。

新增模組以拖放 範本

你可以使用 佈局編輯器在設 設計管理工具 範本 組以拖放範本。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在左欄中，按一下範本的名稱。 
3. 在右欄中，按一下「+新增」。 
4. 在搜尋列中輸入預設或自訂模組的名稱。 
5. 按一下模組名稱，然後將其拖曳到範本中。 
6. 在「 樣式選項」部分的 檢查器 中，為模組設置自定義 樣式 。 

7. 在「 預設 內容 」區段的 檢查器 中， 編輯將模組新增到 內容。深入瞭解如何 編輯模組的預設 內容 。

8. 若要防止其他使用者編輯模組的預設 內容，請在「編輯器 選項」區段中按一下以切換開啟「禁止在內 內容 編輯器中編輯 」。

複製預設模組

您可以複製設計管理員中 @ hubspot 資料夾中的預 設計管理工具 模組，以編輯模組的原始程式碼。此資料夾包含所有 主題 和預設模組，包括 拖放 電子郵件 模組。 

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在 Finder中，按一下 @ hubspot 資料夾。

3. 在 預設模組上按一下滑鼠右鍵，然後選取「 複製模組」。 
4. 在複製的模組中，編輯 模組原始程式碼。深入瞭解如何 設定模組。
5. 在右上角，按一下發佈變更。

管理模組版本

HubSpot可能會定期發佈現有預設模組的新版本。這使HubSpot能夠在不中斷現有 內容 的情況下實施重大更新。例如，新版本的模組可能會提供更好的欄位組織、更多樣式選項和改進的功能。請參閱 HubSpot開發人員文件，深入瞭解模組版本控制。

您可以從 帳戶 的「主題 & 模 組」設定頁面管理模組版本，包括更新版本、恢復到先前版本或查看所有預設模組的當前版本。

更新模組版本

• 若要更新至新版本的模組：

1. 1. 在你的 HubSpot 帳戶中，點擊頂端導覽列中的settings「設定圖示」。
   2. 在左側邊欄選單中，瀏覽至「內容 > 主題 & 模組」。
   3. 在「快訊 」索引標籤上，預設模組的最新更新會顯示「更新可用 」標籤。按一下單元旁邊的「檢視更新 」，即可查看更新的詳細資訊。

1. 4. 在右側邊欄查看變更內容。側邊欄會顯示更新的高階摘要，以及變更和受影響資產的詳細細節。

1. 5. 若要更新模組，請按一下「 安裝更新」。然後，在對話方塊中，按一下確認更新。

請注意： 頁面和 範本 組。

• 更新模組後，系統會帶您前往「主題 模組 設定」頁面的「 & 模組 」分頁。在此頁面上，您可以看到最近更新的模組、有可用更新的模組，以及所有 帳戶 預設模組的版本資訊。

還原已更新的模組

在設定頁面的「 模組 」索引標籤上，您可以將過去30天內更新的模組還原為先前版本。 

• 若要還原最近更新的模組：
  1. 在你的 HubSpot 帳戶中，點擊頂端導覽列中的settings「設定圖示」。
  2. 在左側邊欄選單中，瀏覽至「內容 > 主題 & 模組」。
  3. 按一下「 模組 」索引標籤，找到要還原的模組，然後按一下「 回復最近更新」。

• 4. 在右側欄中，查看模組的版本記錄，然後按一下「回復此更新」。

• 5. 查看右側邊欄的資訊，確認你想回復更新，然後按一下「回復」。 
  6. 在對話方塊中，按一下確認。 
• 還原模組後，範本 組。您可以透過更新模組的版本再次更新模組。

編輯不同類型模組的預設 內容

您可以在 Design Manager 的版面配置編輯器中，在 拖放範本中編輯某些預設 模組的預設內 內容。若要查看預設模組的完整 清單，請深入瞭解 預設 電子郵件 模組 和 預設Web模組。

備份取消訂閱

如果 電子郵件 收件人點擊取消訂閱的連結，而HubSpot無法確認其 電子郵件 地址，則會顯示備用取消訂閱模組。此模組只能從 電子郵件 備份取消訂閱系統 範本本進行編輯。 

• 若要編輯備份取消訂閱模組的預設 內容：
  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 範本。
  3. 在版面配置編輯器中，按一下 備份取消訂閱 模組。
  4. 在「 預設 內容 」部分的 檢查器 中，輸入顯示於「標題」、「 副 標題」和「 錯誤訊息」 的文字 。

• 編輯完模組後，按一下「 發佈變更」。

網誌電子郵件訂閱

博客電子郵件訂閱模塊允許訪客通過填寫表格來訂閱您的博客摘要電子郵件。此模組由您的部落格訂閱者表單填寫，可以在表單工具中自訂。

請注意：博客電子郵件訂閱模塊不適用於電子郵件模板。 

• 若要編輯部 部落格 電子郵件 訂閱 模組的預設 內容：
  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 範本。
  3. 在版面配置編輯器中，按一下部 部落格 電子郵件 訂閱 模組或 新增模組。
  4. 在「 預設 內容 」部分的 檢查 器中，按一下「 選擇要顯示的部 部落格 」下拉式選單，然後選擇訪 部落格 訂閱的部落格。
  5. 單擊 標題級別 下拉菜單以選擇 標題級別。
  6. 在 要顯示在 表單 上方的標題 欄位中，輸入將出現在 表單 上方的標題中的 文字 。
  7. 在 用戶的內嵌回應 欄位中，按一下 expandIcon展開圖示，以自訂訪客提交 表單 後出現 的文字 。

• 完成編輯 部落格 電子郵件 訂閱 模組後，按一下右上角的「 發佈變更 」。

CTA

行動號召（ CTA ）模組將CTA放置在您佈局中自己的模組中。你也可以在RTF文字模組中插入行動呼籲。

• 若要編輯行 行動呼籲 模組的預設 內容：

• 1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 範本。
  3. 在版面配置編輯器中，按一下 號召性用 語模組或 新增模組。
  4. 在「 預設 內容 」部分的 檢查器 中，單擊 選擇。

• 5. 在右側窗格中，選擇 CTA 或點擊「建立新內容」。
  6. 單擊插入。

內容庫

您可以使用內容庫模組設定資源庫，供訪客存取。

• 若要編輯內 內容 資源庫 模組的預設 內容：
  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 範本。
  3. 在版面配置編輯器中，按一下 內容 資源庫 模組或 新增模組。
  4. 要編輯內 內容 資源庫 中的現有資源，請單擊 檢查器中的 editIc on編輯圖標。你可以自訂名稱、說明、連結文字和圖片。
  5. 若要從 內容 資源庫 模組中刪除資源，請按一下 Inspector中的 deleteIcon 刪除圖示。
  6. 若要將自訂資源新增至 內容 資源庫 模組，請按一下 檢測器中的 +新增。
  7. 要將資源設置為特色，請單擊 檢查器中的 favoriteIcon 設置為特色 圖標。

• 編輯完 內容 資源庫 模組後，按一下右上角的「 發佈變更 」。

表單

您可以使用 表單 單模組在 內容 中新增 表單，以擷取訪客資訊。

請注意：表單模板不適用於電子郵件模板。 

• 若要編輯 表單 模組的預設 內容：
  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 範本。
  3. 在版面配置編輯器中，按一下 表單 模組或 新增模組。
  4. 在「 預設 內容 」區段的 檢查器 中，輸入「 表單 標題 」欄位的 文 字。
  5. 在 表單 單下拉式選單中，選擇 表單單。
  6. 在「 訪客在提交 表單 後會看到什麼？」 欄位中，選取「 重新導向 其他頁面 」或「 顯示內嵌感謝訊息」。 
     • 若要 重新導向 至其他頁面，請在「 重新導向 連結 」下拉式選單中選取 頁面、 發佈 或按一下「 +新增外部連結」。 
     • 若要顯示內嵌感謝訊息，請在「感謝訊息」欄位中按一下 expand展開圖示。
  7. 選取 將 表單 通知傳送到指定的 電子郵件 地址，而不是 表單 預設值 核取方塊，以覆寫 表單 單工具中設定的任何通知收件者。
• 編輯完 表單 單模組後，按一下右上角的「 發佈變更 」。

Header

您可以使用標題模組在標題HTML標籤中顯示一行文字。

• 若要編輯標題模組的預設 內容：
  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 範本。
  3. 在版面配置編輯器中，按一下 標題 模組或 新增模組。
  4. 在 預設 內容 部分的 檢查器 中，在 標題內 內容 欄位中輸入 文 字。 
  5. 單擊 標題級別 下拉菜單，然後選擇 標題級別（ H1-H4 ）。

• 編輯完標題模組後，按一下右上角的「 發佈變更 」。

圖片

您可以使用影像模組在 內容 中顯示單個影像。

• 若要編輯影像模組的預設 內容：
  
  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 範本。
  3. 在版面配置編輯器中，按一下 影像模組或 新增模組。
  4. 在「 預設 內容 」部分的 檢 測器中，單擊 影像 字段中的 替換 。
  5. 在右側窗格中，選擇要顯示的 影像 。 
  6. 在 替代文字 欄位中，輸入影像 的文字描述 。
  7. 在「 大小 」下拉式選單中，選擇 自動調整 或 精確調整寬度與高度。
  8. 在「 最大尺寸 」下拉式選單中，選擇 影像的原始尺寸 或 自訂。
  9. 在 影像載入 下拉式選單中，選擇 瀏覽器預設值、 延遲或 急切。
  10. 在「 連結」（可選） 欄位中，輸入可選的 URL ，以便在點擊影像時將訪客導向。

• 編輯完圖片模組後，按一下右上角的「 發佈變更」。

圖片網格

您可以使用影像網格模組為 內容 新增統一的影像網格。 

• 若要編輯影像網格模組的預設 內容：
  
  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 範本。
  3. 在版面配置編輯器中，按一下 影像網格模組或 新增模組。
  4. 要編輯影像網格模塊中的現有影像，請單擊 檢測器中的 editIc on編輯圖標。你可以上傳或瀏覽現有圖片，並編輯連結文字、連結網址或懸停訊息。
  5. 要刪除影像網格模塊中的影像，請單擊 檢測器中的 deleteIcon 刪除圖標。
  6. 要將新影像添加到影像網格模塊，請單擊 檢測器中的 +添加。
  7. 按一下以展開 設定。在設定窗格中，您可以調整H over功能、C lick功能、C olumns和A spect ratio。 

• 編輯完圖片網格模組後，按一下右上角的 發佈變更。

圖片滑桿

您可以使用影像滑桿模組來顯示在同一模組中自動循環的多個影像。 

• 若要編輯影像滑桿模組的預設 內容：
  
  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 範本。
  3. 在版面配置編輯器中，單擊 影像滑塊模塊或 添加模塊。
  4. 要編輯影像滑塊模塊中的現有影像，請單擊 檢查器中的 editIc on編輯圖標。你可以上傳或瀏覽現有圖片，並編輯說明或連結網址。
  5. 要從影像滑塊模塊中刪除影像，請單擊 檢測器中的 deleteIcon 刪除圖標。
  6. 要將新影像添加到影像滑塊模塊，請單擊 檢測器中的 +添加。
  7. 按一下以展開 設定。在設定窗格中，您可以調整S lides、M ovement和N avigation。 

• 編輯完影像滑桿模組後，按一下右上角的 發佈變更。

語言切換器

你可以使用語言切換器模組，讓訪客在頁面或網 部落格 的翻譯版本之間切換。 

請注意：語言切換器模板不適用於電子郵件模板。 

• 若要編輯語言切換器模組的預設 內容：
  
  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 範本。
  3. 在版面配置編輯器中，按一下 語言切換器模組或 新增模組。
  4. 在「 預設 內容 」部分的 檢查 器中，選取 新增V形向下 核取方塊，以顯示語言切換器的V形。
  5. 單擊 顯示模式 下拉菜單以選擇以下選項之一：
     
     • Pagelang ： 將以當前頁面的語言顯示的每種語言的名稱。例如，如果你正在檢視附有法語翻譯的網頁的英文版，點擊語言切換器時，你會看到英文和法文作為語言名稱。 
     • 本地化：每種語言的名稱都會顯示在該語言中。例如，如果您正在檢視包含法文翻譯的網頁的英文版本，當您按一下語言切換器時，您會看到英文和法文作為語言名稱。
     • Hybrid ：兩者的組合。例如，如果您正在檢視包含法文翻譯的網頁的英文版本，當您按一下語言切換器時，您會看到英文和法文(Français)作為語言名稱。
  6. 點擊 圖示選項 下拉式選單，然後選擇 無、 圖示或 自訂圖示。

• 編輯完語言切換器模組後，按一下右上角的「 發佈變更」。

請注意：此模組只會顯示在包含多個已發佈翻譯的即時頁面上。深入瞭解如何在HubSpot中使用多語言內容。

標誌

您可以使用標誌模組在 內容 上顯示 品牌套件 中的公司標誌。 

• 若要編輯標誌模組的預設 內容 ：
  
  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 範本。
  3. 在版面配置編輯器中，按一下 標誌模組或 新增模組。
  4. 在「 預設 內容 」部分的 檢查器 中，單擊以切換「覆蓋預設標誌 」開關，以使用 範本 為 內容 上傳新圖像。
  5. 若要編輯預設標誌，請按一下 此 網域 的「編輯預設標誌」。
  6. 在 影像載入 下拉式選單中，選擇 瀏覽器預設值、 延遲或 急切。 
  7. 在「 連結網址 」欄位中，輸入您希望在點擊標誌圖片時將訪客導向到的 網址 文字 。這將覆蓋 您的 品牌套件 中指定的默認值。

• 編輯完標誌模組後，按一下右上角的「 發佈變更」。

標誌網格

您可以使用標誌網格模組在一致的網格中排列不同尺寸的多個標誌。

• 若要編輯標誌網格模組的預設 內容：
  
  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 範本。
  3. 在版面配置編輯器中，按一下「 標誌網格」模組或 新增模組。
  4. 要編輯現有影像，請單擊 檢查器中的 editIcon編輯圖標。您可以上傳或瀏覽現有影像，並編輯替代文字或影像載入。
  5. 要刪除標誌網格模塊中的影像，請單擊 檢查器中的 deleteIcon 刪除圖標。
  6. 要將新影像添加到標誌網格模塊，請單擊 檢查器中的 +添加。

• 編輯完標誌網格模組後，按一下右上角的「 發佈變更」。

正文

主 電子郵件 內文模組是標準的RTF文字模組，預設包含在每個 電子郵件 範本 本中。 

• 若要編輯主要 電子郵件 內文模組的預設 內容：
  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 範本。
  3. 在版面配置編輯器中，按一下 主 電子郵件 內文 模組。
  4. 在「 預設 內容 」部分的 檢查器 中，按一下 expandIcon展開圖示以編輯 電子郵件 正 文 中顯示的文字。

• 若要編輯主要 電子郵件 內文模組的樣式選項： 
  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 範本。
  3. 在版面配置編輯器中，按一下 主 電子郵件 內文 模組。
  4. 在「 樣式選項」部分的 檢查器 中，在「文字顏色」、「 背景顏色」和「 邊框 顏色」的文字欄位中輸入 十六進位值 。 您也可以按一下 顏色選擇器。

• 完成編輯主要 電子郵件 內文模組後，按一下右上角的「 發佈變更」。

菜單

您可以使用選單模組為 內容 新增導覽。系統會直接在 導覽選單設定中建立和管理選單。 

• 若要編輯菜單模組的預設 內容：
  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 範本。
  3. 在版面配置編輯器中，按一下 選單模組或 新增模組。
  4. 在 預設 內容 部分的 檢查器 中，按一下功能表下拉 式 功能表，然後選擇 現有的功能表，或按一下 新建。
  5. 在 進階功能表 類型下拉式選單中，選擇以下其中一項：
     • 靜態-始終在菜單中顯示頂層頁面： 在所有頁面上保持菜單的一致性。
     • 按區段動態-在菜單中顯示與正在檢視的區段相關的頁面： 顯示相對於正在檢視的頂級菜單項的菜單項。
     • 按頁面動態-在選單中顯示與正在檢視的頁面相關的頁面：顯示與正在檢視 的特定頁面相關的選單項目。
     • 面包屑樣式路徑選單（使用水平流） ：在網站頂部的相對路徑中水平 顯示選單項目。
  6. 在「 最大級別 」欄位中，輸入可以顯示的 子功能 表項目的最大 數量 。
  7. 在 「方向」 下拉菜單中，選擇 水平 或 垂直。
  8. 要將鼠標懸停在父導航上時顯示子菜單項，請選擇 啟用飛出功能？ 核取方塊。

• 編輯完菜單模組後，按一下右上角的「 發佈變更」。

辦公室位置信息

辦公室位置模組包含所 需的代幣 ，必須包含在 電子郵件 範本 中才能發送 行銷 電子郵件。 

• 若要編輯辦公室位置資訊模組的預設 內容：
  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 前往您的 電子郵件 範本。
  3. 在版面配置編輯器中，按一下「 辦公室位置資訊」模組。
  4. 在「 預設 內容 」部分的 檢查器 中，按一下 expandIcon展開圖示以編輯 電子郵件 顯示 的所需權杖  的文字 。

• 若要編輯辦公室位置資訊模組的樣式選項：
  • 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  • 前往您的 範本。
  • 在版面配置編輯器中，按一下「 辦公室位置資訊」模組。
  • 在「 樣式選項」部分的 檢查器 中，在「文字顏色」、「 背景顏色」和「 邊框 顏色」的文字欄位中輸入 十六進位值 。 您也可以按一下 顏色選擇器。