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

建立和編輯模組

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

套用至:

所有產品和版本

在設計管理工具中,您可以建立自訂的編碼模組,將進階功能新增至您的網誌、網頁或電子郵件自訂模組提供廣泛的功能,讓內容可以在網頁、電子郵件或網誌編輯器中完全自。你可以從頭開始建立自訂模組,或從HubSpot Marketplace新增預建模組

請注意: 建立模組需要了解HTML、CSS、HubL和HubSpot設計管理系統。HubSpot建議與設計師合作,建立已編碼的模組。

新建模組

  • 在 HubSpot 帳戶中,進入「行銷」>「檔案和範本」>「設計工具」。
  • 尋找器頂部,按一下檔案下拉選單,然後選擇 新建檔案

新建文件

  • 在「」對話方塊中,按一下「今天要建立甚麼?」下拉式選單,然後選擇「模組」

構建模塊

  • 按一下下一步。
  • 選擇使用模組的每種類型內容旁邊的核取方塊:網 網誌文章網誌列表電子郵件或引用。電子郵件範本中使用的模組不能包含CSS或JavaScript。 

請注意:用於電子郵件的自訂模組只能在擁有營銷中心業版或企業版訂閱的帳戶中建立。  

  • 選擇此模組是本地模組還是全局模組如果你建立一個 全局模組,編輯此模組的內容將更新使用該模組的每個位置。 
  • 輸入模組的檔案名稱,然後按一下建立

setup-your-new-module

標籤您的模組

預設情況下,內容編輯器將使用設計管理器中指定的名稱引用模組。如果您希望模組在內容編輯器中使用不同的名稱,您可以輸入標籤。 

design-manager-label-module

向您的模組添加欄位

將欄位新增至模組,以設定模組的內容或造型,並使之可在內容編輯器中編輯。在我們的開發人員文件中了解更多有關可用字段類型的資訊。 

  • 在右側的模組檢查器中,按一下新增欄位 下拉式 欄位」部分的選單中,然後選擇要新增至模組的欄位。

模塊加法字段

  • 按一下欄位名稱旁邊的 鉛筆圖示編輯,即可編輯欄位名稱。若要編輯HubL 變量名稱,請在HubL變量名稱文字欄位中進行變更。 

添加字段預設內容

在「內容選項」部分,您可以新增模板和內容編輯器中使用模板時出現的預設內容。預設內容的選項將根據欄位類型而有所不同。

在下面的示例中,字段類型是影像字段,因此預設內容的選項是選擇預設影像並隱藏大小控制。

field-content-options

設置欄位編輯器選項

在「編輯器選項」部分,您可以啟用以下選項,讓用戶可以在內容編輯器中編輯模組:

  • 工具提示幫助文字:向欄位添加幫助文字,為用戶提供上下文或說明。當用戶在編輯時懸停在欄位上時,此幫助文字會顯示在工具提示中。 

    custom-module-help-text
  • 內嵌幫助文字:向欄位添加幫助文字,為用戶提供上下文或說明。用戶編輯模組時,此幫助文字會顯示在欄位下方。

design-manager-module-field-options

設置欄位顯示條件

您可以使用欄位顯示條件將模組欄位設定為僅在其他欄位符合特定條件時才出現。

  • 在「顯示條件」部分,按一下HubL變數 下拉式 選擇模組欄位,然後按一下不是空的下拉式選單,以選擇該欄位的條件。
  • 如果選擇等於的條件,請輸入正數

在下面的示例中,正在為影像欄位設定顯示條件。條件是名為IMAGE_TITLE的文本欄位中的值必須等於Headshot才能使影像欄位出現在模組中。

野外展示條件

設定條件後,顯示條件將自動啟用。若要禁用顯示條件,請按一下顯示條件右側的切換開關

設置字段中繼器選項

您可以在「中繼器選項」區段中為欄位設定中繼器選項。中繼器是可以建立多個物件並使用for循環顯示物件的欄位和羣組。

  • 在「重 複程式選項」部分中,選擇最小值和/或 最大值此字段的必需實例數。
  • 您也可以選擇設定一個預設的物件數量,該數量是預設會顯示在模組中的欄位的實例數量。

在下面的示例中,影像欄位設置為影像滑桿。已設定物件數目限制 所以該模組中最少會出現3 影像欄位,最多可出現5個 影像欄位。用戶會在預設情況下看到4個影像欄位出現在模組中,並可以選擇新增一個影像欄位或移除一個現有影像欄位。

field-Repater-options

修改其中一個選項後,中繼器選項將自動啟用。若要禁用中繼器選項,請按一下中繼器選項右側的切換開關

分組模組欄位

建立欄位後,你可以將其中最多4個欄位分組在一起,按相關性整理欄位。字段羣可用於構建自定義字段邏輯。進一步了解模組欄位羣組。 

要將模組字段分組在一起:

  • 在模組編輯器的右側邊欄按一下羣組。

    design-manager-group-fields
  • 選擇要分組在一起的欄位。
  • 按一下建立羣組

復制並粘貼您的字段片段

  • 當您準備好將欄位整合到模組中時,請將欄位片段複製並貼上到模組的HTML + HubL編輯器中。
    • 如果您在欄位檢查器中,請按一下欄位HubL變量名稱右側的  C opy片段
    • 如果您在模組檢查器中,請將鼠標懸停在欄位上,然後按一下操作 下拉式,然後選擇複製片段
  • 按一下您想要在HTML + HubL編輯器中新增欄位的位置,然後按Ctrl + VCmd + V貼上片段

復制粘貼字段片段

撰寫您的模組語法

在編輯模組時,您可以在HTML + HubL
CSS和JS編輯器窗格中寫入其他模組語法。了解更多關於HubSpot設計師文件 中的  組代碼編輯器 和模組語法參考資料。

在模組中新增說明文字

在「編輯器」選項區段中,新增說明文字,以便在編輯模組時為用戶提供上下文。說明文字不能長於300個字元。 

design-manager-help-text

用戶在內容編輯器中編輯模組時,說明文字會顯示在模組欄位上方。

page-editor-module-help-text

預覽您的模組

您可以按一下模組編輯器右上角的「預覽」按鈕,在內容編輯器中預覽模組的顯示和功能。您的模組預覽將在新標籤中開啟。此預覽與編輯器同步,並會在您工作時自動刷新。

預覽模組

發佈您的模組

新增欄位並撰寫模組語法後,便可繼續發佈模組。按一下右上角的「發佈變更」

發佈模組

使您的模板可用於模板

  • 切換「模板可用 換至編輯器右上角,使此模組可用於新增至模板。

content-toggle

  • 切換此關閉 以進行變更或測試模組的功能。如果禁用此切換,您的團隊將看到模板無法使用此模板的警報。

make-module-available

將模板新增至模板

發佈模組後,您可以透過將其新增至模板來在頁面上使用它。

若要將模組新增至拖放模板:

  • 在模板佈局編輯器中,按一下佈局檢查器頂部的「新增」標籤,然後搜尋您的模組。您可以透過自訂模組圖示「customModules」來識別您建立的自訂模
  • 將模組拖放到模板中。

add-custom-module

若要將模組新增到編碼模板,您可以複製模組片段並貼上到模板中:

  • 若要從模組編輯器中複製模組片段,請按一下右側邊欄底部的複製片段

    module-editor-copy-snippet0
  • 若要從設計管理器的左側欄中複製模組片段:
    • 在左側邊欄中,找到自訂模組。
    • 使用滑鼠右鍵按一下模組,然後選擇複製片段。或者,您可以選擇模組,然後按一下左上角的「 操作」,然後選擇「複製片段」

      custom-module-copy-snippet00
  • 在編碼範本中,貼上所需的片段。

    coded-template-paste-snippet0

從市場新增或購買模組

除了建立自己的模組外,您還可以新增或購買其他用戶或供應商在HubSpot Marketplace中建立的自訂模組。

  • 在左側的「篩選產品」部分,按一下「類別」下的「所有產品」下拉式選單, 然後選擇「模組」。您可以根據以下情況過濾可用模組:
    • 價格:模組是免費還是付費
    • 函數 :模組所包含的函數類型(例如計算器、圖庫、地圖)
    • 適用於:模板可用於模板
    • 提供者:模組由提供者提供
  • 將鼠標懸停在您選擇的模組上,然後按一下檢視詳情
  • 按一下免費取得模組,或按一下右上角 的$購買模組。
    • 如果模組是免費的,它將自動新增至設計經理。
    • 如果該模組已付款,請繼續輸入付款詳情。付款處理完畢後,該模組將新增至設計經理。
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.