設計經理的快速導覽

HubSpot的設計經理結合了設計師構建最先進網站所需的所有工具，同時仍然為營銷人員提供他們在創建內容時所需的靈活性。 

在本文中，您將瀏覽設計管理器的所有功能。 如果您正在尋找特定的代碼範例和參考文檔，請查看HubSpot的開發人員文檔。

Design Manager中包含的工具

設計經理將幾個重要工具整合到一個強大的應用程序中：

• Finder -建立和整理檔案、範本、模板和資料夾的空間。
• 布局編輯器 -一個拖放式編輯器，用於構建您的頁面，博客，電子郵件和系統模板。
• Inspector -您可以在此處編輯布局、模組或羣組的屬性。 
• 程式碼編輯器 -集成開發環境（ IDE ）為您的所有前端代碼（ CSS ， Javascript ，甚至您自己的HTML模板）。
• 模組編輯器-可重複使用的自訂模組，您可以設置為向網站添加高級功能，這些功能仍然可以由非技術用戶管理。
• 檔案管理器 -為您的網站的所有資產的檔案託管系統。

前往設計經理查看這些工具。在你的 HubSpot 帳戶中，瀏覽「行銷」>「檔案和範本」>「設計工具」。 

Finder

Finder 是管理所有資料夾、範本、模板和編碼檔案的空間。 您可以使用Finder的拖放界面，隨心所欲地整理檔案和資料夾。 單擊檔案可以展開或折疊其包含的檔案。

預設情況下，所有Marketing Hub Professional和Enterprise以及CMS Hub Professional和Enterprise帳戶在設計管理員中都有一個@ hubspot資料夾。 此資料夾包含所有佈景主題和預設模組，包括拖放電子郵件模組。 這些主題和模組是唯讀的，但如果您想自訂它們，則可以克隆。 進一步了解自訂主題和預設模組。

按一下「檔案」以建立新檔案或資料夾，或對搜尋器中目前選取的資產執行操作，例如刪除、複製或重命名資產。 使用「檢視」下的選項來管理檔案和資料夾的排列。 您可以快速折疊所有資料夾，或提取最近編輯或刪除的資源。

請注意：尋找器是上下文，這意味著您的操作將始終與所選的檔案夾和檔案相關。 若要在特定資料夾中建立新檔案或資料夾，請按一下搜尋器中的該資料夾。 若要在所有現有資料夾之外建立新檔案或資料夾，請按一下「檢視」，然後選擇取消全選。

「操作 」選單只有在目前選取了檔案或資料夾時才會啟用，並提供該類型資產的上下文選項。 您也可以 直接在資產上 按一下右鍵，以執行下列任一操作：

• 複製：複製檔案、資料夾或範本。
• 移動：為資產選擇新資料夾。
• 重命名：給資產一個新名稱。
• 複製到HTML ：創建完全用HTML編碼的資產副本。
• 複製到  入口網站：建立資產的副本，並將其發送到您有權訪問的另一個HubSpot帳戶。  
• 建立頁面/電子郵件：使用此範本建立新的內容。
• 顯示家屬：查看使用該檔案的任何HubSpot內容清單。
• 顯示修訂歷史：查看已儲存版本的歷史。
• 複製片段：使用此功能可將自訂 編 碼模組的代碼片段快速複製  到剪貼簿中。 此選項只會在  右鍵按一下  模組時出現。
• 鎖定資料夾：鎖定資料夾以防止使用者在設計管理員中編輯其內容。 鎖定資料夾中的內容只能在本地開發環境中編輯。
• 刪除 -刪除此檔案、資料夾、範本或模板。

制表符

單擊範本、模組或編碼檔案的名稱時，它會在編輯器的選項卡中開啟您的選擇。 標籤使您可以輕鬆地進行多項任務，並在各種模板和編碼文件之間切換。 您可以右鍵按一下任 意 標籤，在編輯器中顯示管理標籤的選項。 您可以按一下右側的向 下箭頭，查看完整的開啟標 籤頁清單。 

若要在版式編輯器中為自己提供更多工作空間，您可以先單擊折疊圖示 以折疊尋找器。 按一下資料夾圖示 資料夾，即可再次展開搜尋器。

新建模板和文件

若要建立新的 範本、 模組或 編碼檔案，請按一下搜 尋器左上角的「檔案」>「新檔案」。 您可以選擇建立以下任何類型的資產：

• 拖放：通過將模組添加到直觀的拖放界面來構建的模板。
• HTML和HUBL ：使用HTML ， CSS和Javascript在代碼編輯器中創建的自訂編碼模板。
• Stylesheet ：一個編碼的CSS檔案，可用於樣式模組和文件。
• JavaScript ： Javascript的編碼檔案，可應用於模組和文件。
• Module ：可以添加到模板的自定義編碼模塊。

布局編輯器

佈局編輯器是一個拖放界面，適用於網頁和電子郵件的結構和預設內容。 您將看到您的模組和羣組的名稱，以及應用於每個組件的body類別。 您可以修改每個模組或羣組，方法是按一下該模組或羣組在右側的檢查員中進行編輯，或按一下右鍵來訪問檢查員的功能。

在佈局編輯器中拖放組件以調整其在模板上的位置和大小。 左上角有「撤消」 和「重做」 按鈕，可協助您快速還原變更。 您也可以右鍵單擊模組以快速組合、複製或變更模組類型，或使用 鍵盤快捷方式 來執行相同的動作。按 一下右上角的「預覽 」按鈕，即可預覽您的作品，並在不同螢幕尺寸上測試您的佈局。

所有HubSpot模板佈局都是自適應性的，這意味著它們會自動調整到不同的屏幕尺寸。 此編輯器將您的拖放模組編譯成清晰的HTML標記，這些標記由一些內置 CSS做出響應。

進一步了解如何 建立和編輯範本，以及如何在範本中新增樣式 。

督察

Inspector允許您在範本或模塊中添加和編輯元件。 它取決於您執行的任務和檔案的類型。例如：

• 當在拖放編輯器中選擇一個組件時，檢查員將顯示該組件的所有功能和選項。
• 當在拖放編輯器中沒有選擇任何組件時，檢查員將顯示模板本身的選項。
• 編輯模組時，檢查員允許您編輯和添加欄位。

根據模板上選擇的模板類型， Inspector中可能有不同的選項。 

對於拖放模板， + Add標籤用於將新組件添加到佈局中。 Inspector的Edit 標籤可用於分配自訂CSS類別、編輯預設內容或附加編碼檔案。

檢查員在頂部包含一個麵包屑導航，以幫助您快速瀏覽您目前正在處理的資產，模塊，羣組和模板之間。

對於自訂編碼的HTML和HUBL模板和模組，您可以使用檢查器添加新欄位或連結到編碼文件。 您還可以新增過濾標籤，以指示編碼模板和模組的內容類型和功能，使其在尋找器中更容易搜索。 您還可以找到片段以及有關如何在模板中使用這些自訂編碼資產的更多詳細信息。

程式碼編輯器

HubSpot的代碼編輯器是一個強大的IDE ，允許您編碼 CSS文件， Javascript文件，甚至 HTML模板。 編碼或編輯樣式表時，您可以即時預覽變更對各種螢幕大小的影響。 代碼編輯器還利用了許多其他有用的IDE功能，例如顏色編碼類別，錯誤檢查，語法強調，自動保存，自動關閉標籤，自動縮進等。

進一步了解 如何使用程式碼編輯器。

請注意：預設 情況下， HubSpot會自動將設計管理器中包含的JavaScript和CSS最小化，以刪除不必要的空格，分行符和評論。 這也適用於通過CLI上傳到設計管理器的JavaScript和CSS。 這意味著您不應該直接將已縮小的代碼添加到設計管理器中。

瞭解更多關於 JavaScript和CSS縮小的資訊。

模組編輯器

雖然HubSpot的拖放模板附帶了許多標準模塊可供 選擇，但設計師偶爾可能需要更多定制設計解決方案。 模組 是可重用的自訂編碼元件，由HTML  和  HubL欄位、CSS和Javascript組成。 這些模組可以添加到模板中，並在頁面編輯器中自訂，無需任何代碼。

使用檢查員來新增欄位、附加編碼檔案，或新增標籤來整理資產。 就像在程式碼編輯器中一樣，您可以隨時在各種屏幕尺寸上實時預覽您的作品。 您也可以為模組欄位指定預設內容、鎖定預設內容，或設定特定的模組欄位。 

文件管理器

HubSpot 的檔案管理員會 儲存您用來建立內容的所有資產。 此工具允許您上傳PDF、圖像、視頻、音頻文件、字體等。 您可以存取創意資產或快速上傳新檔案，而無需離開應用程式。