設計經理快速導覽

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

在本文中，你將了解設計經理的所有功能。 如果您正在尋找特定的代碼示例和參考文檔，請查看HubSpot的開發人員文檔。

設計管理工具中包含的工具

設計經理將幾個重要工具彙整成一個功能強大的應用程式：

• Finder -用於建立和組織檔案、範本、模組和資料夾的空間。
• 版面配置編輯器-拖放式編輯器，用於構建頁面、部落格、電子郵件和系統範本。
• Inspector -您可以在此處編輯佈局、模組或羣組的屬性。 
• 程式碼編輯器-適用於所有前端程式碼（ CSS、Javascript ，甚至您自己的HTML範本）的整合開發環境（ IDE ）。
• 模組編輯器-可重複使用的自訂模組，您可以設定為網站新增進階功能，這些功能仍可由非技術使用者管理。
• 檔案管理員-網站所有資產的檔案託管系統。

前往設計管理站，探索這些工具。 

Finder

Finder 是管理所有資料夾、範本、模組和編碼檔案的空間。 您可以使用尋找器的拖放介面，隨心所欲地組織檔案與資料夾。 單擊文件可以展開或折疊其包含的文件。

根據預設，所有行銷中心 專業版和企業版以及內容中心專 業版和企業版帳戶的設計管理員中都有@ hubspot資料夾。 此資料夾包含所有主題和預設模組，包括拖放電子郵件模組。 這些主題和模組是唯讀的，但如果您想自訂它們，可以克隆它們。 進一步了解如何自訂佈景主題和預設模組。

單擊文件以創建新文件或文件夾，或者對查找器中當前選擇的資產執行操作，例如刪除、克隆或重命名資產。 使用「檢視」下的選項來管理檔案與資料夾的排列。 您可以快速折疊所有資料夾，或上拉最近編輯或刪除的資產。

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

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

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

Tabs

單擊模板、模塊或編碼文件的名稱時，它會在編輯器中的選項卡中打開所選內容。 透過分頁，您可以輕鬆執行多個任務，並在各種範本和編碼檔案之間切換。 你可以在任何標籤上按一下滑鼠右鍵，以顯示在編輯器中管理標籤的選項。 按一下右側的向下箭頭，即可查看完整的開啟分頁清單。 

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

建立新範本與檔案

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

• 拖放：在直觀的拖放介面中新增模組所建立的範本。
• HTML與HUBL ：在程式碼編輯器中使用HTML、CSS和Javascript建立的自訂編碼範本。
• 樣式表：可用於模組和檔案樣式的編碼CSS檔案。
• JavaScript ：可以應用於模組和文件的Javascript編碼文件。
• 模組：可新增至範本的自訂編碼模組。

版面配置編輯器

版面配置編輯器是一個拖放介面，用於顯示頁面和電子郵件的結構和預設內容。 您會看到模組和羣組的名稱，以及套用到每個元件的內文類別。 您可以在右側的Inspector中按一下以進行編輯，或在元件上按一下滑鼠右鍵以存取Inspector的功能，以修改每個模組或羣組。

在版面配置編輯器中拖放元件，以調整其在範本上的位置和大小。 左上角有「復原」和「重做」按鈕，可幫助您快速還原更改。 您也可以在模組上按一下滑鼠右鍵，以快速分組、複製或變更模組類型，或使用鍵盤捷徑來執行相同的動作。 按一下右上角的預覽按鈕，即可預覽作品，並在不同螢幕尺寸上測試版面配置。

所有HubSpot範本佈局都是響應式的，這意味著它們會自動調整到不同的螢幕尺寸。 此編輯器會將拖放模組編譯成乾淨的HTML標記，並透過內建的CSS進行回應。

深入瞭解如何建立和編輯範本，以及如何在範本中新增樣式。

檢查員

Inspector允許您在範本或模組中新增和編輯元件。 上下文取決於您正在執行的任務和檔案類型。例如：

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

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

對於拖放範本，「+新增」索引標籤用於在版面配置中新增元件。 檢查器的「編輯」索引標籤可用於指定自訂CSS類別、編輯預設內容或附加編碼檔案。

檢查器頂部包含一個麵包屑導航，可幫助您在目前正在處理的資產、模組、羣組和範本之間快速導航。

對於自定義編碼的HTML和HUBL模板和模塊，您可以使用檢查器添加新字段或鏈接到編碼文件。 您也可以新增篩選器標籤，指出編碼範本和模組的內容類型和功能，以便在搜尋器中更輕鬆地搜尋。 您還可以找到程式碼片段，以及如何在範本中使用這些自訂編碼資產的更多詳細資訊。

程式碼編輯器

HubSpot的程式碼編輯器是一個功能強大的IDE ，可讓您編寫CSS檔案、Javascript檔案，甚至HTML範本。 編寫或編輯樣式表時，可以即時預覽變更對各種螢幕尺寸的影響。 程式碼編輯器還利用許多其他有用的IDE功能，例如顏色編碼類別、錯誤檢查、語法醒目提示、自動儲存、自動關閉標籤、自動縮排等。

深入瞭解如何使用程式碼編輯器。

請注意：根據預設， HubSpot會自動縮小設計管理員中包含的JavaScript和CSS ，以刪除不必要的空格、換行符和評論。 這也適用於透過CLI上傳到設計管理員的JavaScript和CSS。 這表示您不應直接將已縮小的程式碼新增至設計管理員。

深入瞭解JavaScript和CSS縮小。

模組編輯器

雖然HubSpot的拖放範本有許多標準模組可供選擇，但設計師偶爾可能需要更自訂的設計解決方案。 模組是可重複使用的自訂編碼元件，由 HTML 和 HubL欄位、CSS和Javascript組成。 這些模組可以新增至範本，並在頁面編輯器中自訂，無需任何程式碼。

使用檢查器來新增欄位、附加編碼檔案或新增標籤來組織資產。 就像在程式碼編輯器中一樣，您可以隨時以各種螢幕尺寸即時預覽作品。 您還可以為模組欄位指定預設內容、鎖定預設內容或將特定模組欄位設為必填。 

檔案管理員

HubSpot的檔案管理員會儲存您用來建立內容的所有資產。 此工具可讓您上傳PDF、影像、影片、音訊檔、字型等。 無需離開應用程式，即可存取創意資產或快速上傳新檔案。