資源部分

在 Webflow Designer 中上傳和管理您網站的所有資源。

資源部分使您能夠上傳和組織網站的所有資源。此部分位於設計器的左側工具列中。在此區域中,您可以上傳資源,將它們分類到資料夾中,按類型(圖像、文件或 Lottie)過濾它們,並將它們無縫拖放到 Webflow 畫布上。

透過本教程,您將深入了解以下內容:

  1. 新增資源
  2. 相容的文件格式
  3. 命名資源
  4. 利用資源
  5. 刪除資源
  6. 過濾和組織資源

新增資源

筆記: 上傳到資源部分的檔案是 沒有限制 - 這意味著它們可以公開訪問和搜索,但不會被搜尋引擎自動索引,除非文件連結到可公開查看的網頁上。有關資源隱私的更多詳細資訊可以在 Webflow 中找到。

可透過三種方法在您的網站上包含圖像或檔案:

  • 點擊“資源”部分中的“雲”上傳圖標
  • 直接將資源拖曳到資源部分
  • 將資源直接拖曳到畫布上

筆記: 僅上傳您擁有必要的使用和分發權限的檔案。

將資源上傳到資源部分

若要將資源新增至資源部分:

  1. 訪問“資源” 左側工具列中的圖標
  2. 點擊 ”” 上傳圖標
  3. 從您的裝置中選擇一張或多張影像或文件
提醒: 如果上傳資源部分中已存在的具有不同名稱的文件,則在文件未更改(即大小或尺寸保持不變)的情況下,將保留原始名稱。要上傳具有不同名稱的相同資源,必須對檔案進行修改。 

直接將資源加入畫布

您也可以將裝置中的一張或多張影像或檔案直接拖曳到畫布上,而無需開啟「資源」部分。此操作將自動產生圖像元素或建立文件的連結。該圖像或文件也將添加到資源部分以供將來使用。

筆記: 由於瀏覽器的限制,直接將 dotLottie 檔案拖到畫布上是不可行的。不過,dotLottie 檔案可以上傳到資源部分。

相容的文件格式

資源部分與各種圖像檔案類型、下面列出的 document 類別以及 Lottie JSON 和 dotLottie 動畫檔案相容。

提醒: 影像檔案大小不得超過 4MB,documents 不得超過 10MB。

支援的映像檔副檔名

  • 巴布亞紐幾內亞
  • JPEG 和 JPG
  • 動圖
  • 靜止無功發生器
  • 網路P

支援的 document 檔案類型

  • PDF
  • DOC 和 DOCX
  • XLS 和 XLSX
  • PPT 和 PPTX
  • TXT
  • CSV
  • ODT
  • 消耗臭氧層物質
  • 臭氧開發計劃

支持的 Lottie 文件類型

  • JSON(僅限洛蒂)
  • 點洛蒂
附加提示: 可以透過三種方式取得 dotLottie 檔案。你可以 轉換 使用以下命令將現有的 Lottie JSON 檔案傳輸到 dotLottie JSON 到 dotLottie 轉換工具, 產生 直接從 After Effects 使用的 dotLottie 文件 LottieFiles 插件, 或者 下載 預先設計的 dotLottie 文件 LottieFiles.com.

命名資源

為了防止在將資源上傳到資源部分或畫布期間出現問題,請在命名資源時考慮以下事項:

  1. 被允許 使用字母、數字、連字符和底線(URL 中允許使用的字元來連結到資源)
  2. 避免 檔案名稱中的特殊字元(例如,`#、()、'、`)
  3. 保持檔案名稱簡潔(100 個字元或更少, 包括 檔案副檔名)
提醒: 為了提高載入速度,請確保圖片低於 4MB - 調整大小、最佳化和/或壓縮大檔案。使用免費的第三方工具,例如 壓縮JPEG 或者 壓縮PNG。您也可以使用Webflow轉換工具將資源轉換為WebP格式來壓縮資源。
提醒: 如果檔案以不同的名稱上傳到資源部分但保持不變(即大小或尺寸不變),則將保留原始名稱。若要以新名稱上傳相同資源,需要修改檔案。 

利用資源

一旦可以在「資源」部分存取資源,您就可以將它們合併到您的網站中。新增圖像時將顯示為圖像元素,檔案將顯示為文字連結。

將資源附加到連結元素

您可以透過連結設定將資源連結到連結元素。要將資源連結到連結元素:

  1. 選擇 連結元素 (連結區塊、文字連結或按鈕)在畫布上
  2. 導航 設定面板 > 連結設定
  3. 點擊 ”迴紋針” 文件圖示
  4. 選擇 選擇附件

當訪客點擊連結時,圖像或 document 檔案將在同一分頁中開啟。其他文件類型將下載到訪客的裝置上。

如果您想要修改連結的附件,您可以 代替 連結設定中的附件。您也可以調整設定以取得圖像或 document 文件 在新分頁中開啟 點擊後。

在“連結設定”部分中選擇“檔案”選項。

利用圖像資源作為背景圖像

使用上傳的圖片資源作為背景圖片:

  1. 選擇畫布上的元素作為背景圖像
  2. 使用權 風格面板 > 背景
  3. 點擊 ”” 旁邊的圖標 影像和漸變
  4. 選擇 選擇圖片
  5. 選擇影像中的 資源部分

有關設定背景圖像樣式的更多信息,請探索其他資源。

提醒: 上傳具有正確解析度的最佳化背景影像,因為 Webflow 不會產生背景影像的響應式變體。了解有關背景影像解析度的更多資訊。

尋找資源

您可以使用「資源」部分中的搜尋欄或使用「快速尋找」來尋找資源。可以透過快捷方式快速找到 命令 + (在 Mac 上)或 控制 + (在 Windows 上)。使用快速尋找時,請確保 使能夠 功能.資源發現。

如果您希望在快速尋找功能中啟動資源發現:

  1. 進入 命令 + (在 Mac 上)或 控制 + (在 Windows 上)啟動 快速尋找
  2. 按齒輪圖標
  3. 選擇 包含資源
快速尋找搜尋欄中的齒輪圖示突出顯示。

消除資源的步驟

當您刪除畫布上的資源版本時, 才不是 刪除資源面板中的資源。若要從資源面板中刪除資源:

  1. 訪問 資源面板
  2. 將滑鼠懸停在您要消除的資源上
  3. 點擊資源右上角可見的齒輪圖標
  4. 刪除
揭開資源上的資源設定「cog」圖示。
資源詳細資訊模式中反白顯示的擦除按鈕。

請記住,如果從「資源」面板中刪除仍在網站上某處使用的資源,將導致在發布網站並刷新設計器後該資源重新出現在「資源」面板中。必須從您的網站中刪除所有出現的資源, 然後 從資源面板中,將其完全刪除。

關鍵訊息: 透過選擇資源的齒輪圖示來揭示 資源詳情 模態,你可以查看它的 方面, 尺寸,和/或 框架.

資源分類和排列的方法

為了更方便地找到特定資源,您可以在「資源」面板中選擇多種過濾和排序選項。

過濾資源的過程

最初,所有類型的資源都顯示在「資源」面板中。按文件類型過濾資源:

  1. 啟動 資源面板
  2. 按下面板左上角的下拉式選單
  3. 選擇category資源進行展示(所有資源, 圖片, 文件, 或者 洛蒂)
資源面板中反白顯示的過濾資源下拉清單。選項包括“所有資源”、“圖像”、“文檔”和“Lottie”。

資源排序流程

最初,「資源」面板中的資源會依照從最新到最舊的順序排列。您可以按以下方式對資源進行排序 新的先來, 最老的在前, 或者 按字母順序(AZ 或 ZA)。對資源進行排序:

  1. 訪問 資源面板
  2. 按下面板左下角的下拉式選單
  3. 選擇排序首選項(例如, 新的先來, 最老的在前, 按字母順序 (AZ), 或者 按字母順序 (ZA))
資源面板中反白顯示的排序資源下拉清單。選項包括「最新的優先」、「最舊的優先」、「按字母順序 (AZ)」和「按字母順序 (ZA)」。

修改資源面板呈現選項的過程

最初,「資源」面板中的資源是使用網格視圖顯示的。您可以查看資源 網格, 清單, 或者 清單 – 小 選項。若要變更視圖選項:

  1. 啟動 資源面板
  2. 按 ”網格” 面板左下角的圖標
  3. 選擇查看選項(例如, 網格, 清單, 或者 清單 – 小)
資源面板視圖選項下拉清單在資源面板中反白顯示。選項包括“網格”、“列表”和“列表 - 小”。
麥伊凡
Ewan Mak 的最新帖子 (看全部)