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

設計經理的快速參觀

上次更新時間: 一月 20, 2023

套用至:

所有產品和版本

HubSpot的設計經理將設計師建立最先進網站所需的所有工具整合在一起,同時為市場推廣者提供創作內容時所需的靈活度。 

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

設計經理中包含的工具

設計經理將幾個重要工具合併成一個強大的應用程式

  • 查找器 -創建和整理檔案、模板、模組和文件夾的空間。
  • 佈局編輯器 -一種拖放編輯器,可用於結構網頁、網誌、電子郵件和系統範本。
  • 檢查器 -您可以在這裡編輯佈局、模組或羣組的屬性。 
  • 代碼編輯器 -所有前端代碼( CSS、Javascript ,甚至您自己的HTML範本)的整合開發環境( IDE )。
  • 模組編輯器-可重用的自訂模組,您可以設定這些模組,為您的網站新增進階功能,這些功能仍可由非技術用戶管理
  • 文件管理器 -網站所有資產的檔案託管系統。

前往設計經理以探索這些工具。在 HubSpot 帳戶中,進入「行銷」>「檔案和範本」>「設計工具」。 

查找器

尋找 器是管理所有資料夾、模板、模組和編碼檔的空間。 您可以使用尋找工具的拖放介面,隨意整理檔案和資料夾。 按一下檔案可以擴展或收起其包含的檔案。

所有營銷中心 業及企業帳戶和CMS中心 業及企業帳戶在設計管理器中預設有@ hubspot資料夾。 此資料夾包含您的所有主題和預設模組,包括拖放電子郵件模組。 這些主題和模組是只讀的,但如果你想自訂,可以複製它們。 進一步了解自訂主題預設模組

design-manager-hubspot-folder

按一下案以建立新的檔案或資料夾,或對尋找器中目前選擇的資產採取行動,例如刪除、複製或重命名資產。 使用「檢視」下的選項來管理檔案和資料夾的排列。 您可以快速收起所有資料夾,或拉起最近編輯或刪除的資產。

design manager collapse and deselect folders

請注意:尋找工具是上下文的,也就是說,你的操作將總是相對於所選的資料夾和文件。 若要在特定資料夾中新建檔案或資料夾,請按一下尋找器中的該資料夾。 若要在所有現有資料夾之外建立新檔案或資料夾,請按一下檢視,然後選擇全部取消選擇。

只有 在目前已 選擇檔案或資料夾,並為該類型的資產提供上下文選項時,「操作」選單才會啟用。 您也可以右鍵直接點擊資產以完成以下任一操作: 

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

right-cilck

Tabs

當您按一下範本、模組或編碼檔案的名稱時,它會在編輯器的標籤中開啟您的選項。 標籤可讓您輕鬆完成多重任務,並在各種範本和碼化檔案之間切換。 您可以在編輯器中右鍵按一下任意 標籤 以顯示管理標籤的選項。 您可以按一下右側的向下箭頭 ,查看開啟標籤 的完整清單。 

若要讓自己有更多空間在佈局編輯器中工作,您可以先按一下折縮圖示 以折縮尋找器。   您可以按一下資料夾圖示 資料夾,再次展開尋找工具。

2021-12-16_16-33-42 (2)

新建模板和文件


若要建立新的 模板、模  編碼檔案,請按一下尋 找器左上角的「檔案」>「新建檔案」。   你可以選擇建立以下任一類型的資產:

  • 拖放:透過將模組新增至直觀的拖放介面而建立的模板。
  • HTML和HUBL :使用HTML、CSS和Javascript在代碼編輯器中建立的自訂代碼模板。
  • 樣式表:可以用於設定模組和文件風格的已編碼CSS檔。
  • JavaScript :可以應用於模組和文件的Javascript的編碼檔。
  • 模組:可以新增至模板的自訂編碼模組。

布局編輯器

佈局編輯器是頁面和電子郵件的結構和預設內容的拖放介面。 您會看到您的模組和羣組的名稱,以及套用至各組件的體型類別。 您可以透過按一下右側的檢查器中的編輯,或右鍵按一下組件以存取檢查器的功能來修改每個模組或羣組。

在佈局編輯器中拖放組件以調整模板上的位置和大小。 左上角有「撤銷 」和「重做」按鈕,可幫助您快速還原變更。   您也可以右鍵按一下某個模組快速分組、複製或變更某個模組類型,或使用 鍵盤快捷鍵 來實現相同的動作。 一下右上角的「預覽 」按鈕,即可預覽作品並測試不同畫面大小的佈局。

所有HubSpot模板布局都是自適應的,也就是說,它們會自動調整到不同的畫面大小。 此編輯器會將您的模組拖放到乾淨的HTML標記中,這些標記是由一些內置 CSS製成的。

了解更多有關 建立和編輯範本以及在範本中新增風格的資訊 

檢查員

檢查器允許您在模板或模組中新增和編輯組件。 它依據上下文而定,這取決於您正在執行的任務和文件類型。 例如:

  • 在拖放編輯器中選擇組件時,檢查器將顯示該組件的所有功能和選項。
  • 在拖放編輯器中未選擇任何組件時,檢查器將顯示範本本身的選項。
  • 在編輯模組時,檢查器允許您編輯並新增欄位。

根據模板上選擇的模組類型,檢查器中可能有不同的選項。 

對於拖放範本,「+新增」標籤可用於在佈局中新增組件。 檢查器的「編輯」 標籤可用於分配自訂CSS類別、編輯預設內容或附加編碼檔案。

檢查器頂部有一個面包屑導覽,幫助您快速瀏覽您目前正在處理的資產、模組、羣組和範本。

對於自訂編碼的HTML和HUBL範本和模組,您可以使用檢查器新增欄位或連結到編碼檔案。  您也可以新增篩選標籤,以指示編碼範本和模組的內容類型和功能,讓它們在尋找工具中更容易搜尋。 您還可以在範本中找到有關如何使用這些自訂加密資產的片段和更多詳情。

編輯程式碼

HubSpot的代碼編輯器是一個強大的IDE ,讓您可以代碼 CSS檔案 Javascript檔案,甚至 HTML範本。 在編碼或編輯樣式表時,您可以即時預覽變更對各種畫面大小的影響。 代碼編輯器也利用其他許多有用的IDE功能,例如色彩編碼類別、錯誤檢查、語法高亮、自動儲存、自動關閉標籤、自動縮縮等。

進一步了解 如何使用代碼編輯器

請注意:預設 情況下, HubSpot會自動縮小設計管理器中包含的JavaScript和CSS ,以移除不必要的空格、改行字和評論。 這也適用於透過CLI上載到設計經理的JavaScript和CSS。 這表示您不應該直接將已縮小的代碼新增至設計經理。

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

design-manager-code-editor-example

模組編輯器

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

使用檢查器新增欄位、附加編碼檔案或新增標籤以整理資產。 就像在代碼編輯器中一樣,你可以隨時以各種畫面大小即時預覽作品。 您還可以為您的模組欄位指定預設內容,鎖定預設內容,或讓特定模組欄位為必填欄位。 

文件管理器

HubSpot 的文件管理器 儲存所有用於創建內容的資產。 此工具允許您上傳PDF、影像、影片、音訊檔案、字體等。 你可以存取創意資產,或快速上傳新檔案,而無需離開應用程式。 

file-manager

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.