圖片元素是可以插入到畫布上的圖像佔位符,與其他元素分開。請記住,圖片元素與應用於節或 div 塊等元素的背景圖像不同。
在本教程中,您將發現:
- 插入圖片的方法
- 調整圖片設定的技巧
- 替換圖片的步驟
- 設定圖片樣式的方法
- 包含替代文字的說明
如何插入圖片
您可以將圖片插入您的 Webflow 網站:
- 插入面板
- 資源面板
- 快速搜尋
- 你的裝置
筆記: 圖片的最大檔案大小為 4MB。
有價值的資訊: 當您將圖片上傳到「資源」面板時,Webflow 會產生圖片的響應式變體。儘管如此,建議您在上傳到 Webflow 之前優化您的圖片。了解有關圖片解析度的更多資訊。
了解網路上最常見的圖片檔案格式。
插入面板
若要從「插入」面板插入圖片元素:
- 導航至 插入面板
- 點擊並拖曳 圖片 元素到 Webflow 畫布上
要將佔位符替換為您的圖片檔案之一:
- 選擇 圖片 畫布上的元素
- 參觀 元素設定面板
- 選擇 選擇圖片
- 選擇之前上傳的圖片或點擊“雲” 圖示上傳新圖片 資源面板
資源面板
將照片上傳至 資源面板,您可以將圖片拖曳到畫布上。
您可以透過 3 種方式將圖片上傳到資源面板:
- 點擊 ”雲” 中的圖標 資源面板 然後從您的裝置中選擇要上傳的圖片
- 將圖片從您的裝置拖放到 資源面板
- 將圖片直接拖放到畫布上
了解有關如何將圖片插入資源面板的更多資訊。
快速搜尋
快速搜尋是 Webflow Designer 中整合的強大搜尋欄。您可以使用以下命令啟動快速搜索 命令 + 乙 (在 Mac 上)或 控制 + 乙 (在 Windows 上)並按名稱搜尋您上傳到「資源」面板的所有圖片。
你的裝置
您可以將圖片直接從裝置拖曳到畫布上。
如何解決圖片上傳問題
如果您在嘗試上傳圖片時收到「上傳失敗」警報,請檢查以下各項:
- 圖片檔案:確保圖片檔案未損壞,具有正確且受支援的檔案副檔名,且不大於 4MB
- 檢查您的網路連接:即使網路連線速度較慢(至少 5 mbps),您也應該能夠上傳圖片。為確保網路速度不成問題,請仔細檢查您的網路連線並確認訊號強度。了解如何解決您的網路連線問題。
- 檢查您的瀏覽器擴充:將圖片上傳到 Webflow Designer 時,某些瀏覽器擴充功能可能會導致問題。嘗試從隱身或私密瀏覽視窗上傳圖片,或了解如何對瀏覽器擴充功能進行故障排除。
如何調整圖片設定
要存取圖像設置,有四種方法可用。首先,選擇畫布上的圖像組件,然後:
- 雙擊影像組件
- 打 進入/返回 鍵盤上的鍵
- 點擊位於圖像組件標籤旁的類似“齒輪”的圖標
- 按 D 或導航至 元素設定面板
之內 影像設定,您有能力:
- 選擇影像 — 將預設佔位符替換為 資產面板。只需雙擊圖像組件並選擇 選擇圖片 來自 影像設定 窗戶
- 調整影像尺寸 — 指定影像寬度或高度的特定像素值。這些尺寸將應用於所有斷點,但寬度和高度的單獨設定可以覆蓋 元素設定面板 對於每個斷點。您也可以選擇拖曳圖像的角落來調整圖像的大小。注意調整圖片大小不會超過其父元素的尺寸
- 啟用影像的 HiDPI 模式 — 選取此方塊後,影像的像素寬度將減半。例如,寬度為 600 像素的影像將以 300 像素顯示。此像素密度可確保大多數 HiDPI 行動顯示器上的最佳影像質量
- 指定載入行為— 修改映像載入首選項。 「延遲」加載在頁面加載時加載可見折疊上方的圖像,並在用戶滾動到它們時加載折疊下方的圖像,「急切」加載在網站加載期間立即加載頁面上的所有圖像,「自動」加載根據瀏覽器的設定
替換圖片內容
將圖像插入畫布後,您可以在必要時靈活地替換它。要交換影像:
- 在畫布上突出顯示圖像
- 導航至 元素設定面板 > 影像設定
- 選擇 替換圖片 打開 資產面板
- 選擇現有圖像或上傳新圖像
提升影像美感
利用 風格面板 以增強影像的視覺吸引力。請注意,某些樣式屬性不適用於影像,例如背景樣式。對於影像的疊加效果,請考慮使用背景影像。
利用類別來風格化影像,這可以優化時間效率,因為您可以將一個類別應用於多個影像。套用於該類別的任何樣式都會影響與其關聯的所有圖像。當透過以下方式建立尺寸規格時,該方法被證明特別有利 風格面板 而不是 元素設定面板。透過利用類,您可以無需手動調整每個影像的大小。
以下是一些樣式屬性範例,您可以利用這些屬性為圖像添加風格:
- 角落半徑: 在一側或多側實現圓角。若要定義半徑,請訪問 風格面板 > 邊框 > 半徑.
- 投影: 建立陰影效果以增強影像的外觀。要設定陰影,請訪問 風格面板 > 效果 > 盒子陰影.
- 過濾器: 應用各種濾鏡,例如模糊、灰階或棕褐色調。若要新增過濾器,請導航至 風格面板 > 效果 > 過濾器.
新增替代文本
描述性文字是對隱藏在圖像「內部」的圖像的簡潔描述(這意味著它在網站頁面上不可見,與標題不同),當圖像無法顯示或查看時解釋該圖像。這有助於有視覺障礙或失明的人理解您的圖像內容,或在圖像檔案尚未載入或使用者選擇不查看圖像時代替圖像呈現。搜尋引擎利用替代文字來辨識圖像的內容。
要將替代文字引入圖像:
- 選擇畫布上的圖片
- 訪問 元素設定面板 > 影像設定
- 繼續 替代文字 並選擇 自訂描述
- 在下拉式選單下方的空間中建立替代文本
如果圖像只是裝飾性的(即,它不提供有價值的資訊),您也可以選擇 裝飾性的 從替代文字下拉清單中。
您也可以在中指定替代文本 資產面板 這樣,每次您從「資源」面板將圖像附加到網站時,該圖像都會配備替代文字。
實現動態替代文本
您可以在動態集合清單和集合範本頁面上使用圖片元素。了解有關圖像欄位的更多詳細資訊。
若要為這些圖像配置動態替代文字:
- 選擇 影像
- 導航至 元素設定面板 > 影像設定
- 核實 從以下位置取得替代文本
- 選擇包含圖像替代文字的部分(例如“名稱”)
- 包含或消除工作區點和成員 - 2024 年 4 月 15 日
- 定心框總結 - 2024 年 4 月 15 日
- 儲存站點以供日後參考 - 2024 年 4 月 15 日