知識庫

設計經理快速導覽

作者:HubSpot Support | Nov 21, 2022 12:47:32 PM

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、影像、影片、音訊檔、字型等。 無需離開應用程式,即可存取創意資產或快速上傳新檔案。