懸停圖片連結

參考資料 所有方案 1 分鐘閱讀

連結清單旁搭配一張大圖片，滑鼠懸停時會切換成各連結的圖片。不需要佔用完整圖片格狀排列的空間，就能以視覺方式預覽分類（「New arrivals」、「Best sellers」、「Sale」）。

新增區塊

1. 選擇版面

   在預覽的大型選單面板中，點擊 Add block（新增區塊）。點擊 Link list（連結清單），將游標移到 Hover image links（懸停圖片連結）上，然後點擊 Select（選擇）。區塊一開始的標題是「Collections」，並有 3 個範例連結。

   

   (1) 點擊 Link list，(2) 選擇 Hover image links。

2. 設定標題與預設圖片

   在 Edit Item（編輯項目）的 General（一般）下，輸入 Heading（標題），挑選 Default image（預設圖片），並輸入 Button label on image（圖片上的按鈕文字）。

   

   預覽中的懸停圖片連結區塊，設定顯示在 Edit Item 中。

3. 設定每個連結

   輸入 Title（標題），選擇 Link（連結），並挑選 Image on hover（懸停時圖片）。點擊 Add（新增）可新增連結，點擊 Remove（移除）可刪除連結。

4. 儲存並發佈

   在 Style（樣式）下調整圖片，然後點擊 Save（儲存）和 Publish（發佈）。

設定

一般

Heading（標題）預設: Collections

連結上方的文字。

Default image（預設圖片）預設: None

沒有自己 Image on hover 的連結會顯示這張圖片。

Button label on image（圖片上的按鈕文字）預設: Shop now

顯示在圖片上、連結標題下方的文字。留空則只顯示標題。

Width（寬度）預設: 66.66%

區塊佔大型選單一列的比例：Auto（自動）或 8.33% 到 100%。

樣式

Image position（圖片位置）預設: Right

位於連結的 Right（右側）或 Left（左側）。

Image ratio（圖片比例）預設: 4:3

1:1、4:3、3:4、16:9 或 9:16。

每個連結

Title（標題）預設: New arrivals, Best sellers, Sale

連結文字。

Link（連結）預設: None

連結前往的位置。

Image on hover（懸停時圖片）預設: None

顧客將滑鼠懸停在此連結上時顯示的圖片。

每個區塊最多 10 個連結。每個連結也會出現在 Elements（元素）清單中的區塊下方，並附有 Add link（新增連結）按鈕：拖曳連結即可重新排序，或點擊其中一個（在清單或預覽中）只編輯該連結，包括它自己的 Visibility（顯示設定）。整個區塊的 Visibility 用法和其他區塊相同，請參閱每個區塊都有的設定。

提示

• 使用形狀相同的圖片，並將 Image ratio 設為相符的比例，避免圖片區域在連結之間跳動。
• 連結標題請保持簡短。標題也會顯示在圖片上。

相關頁面

• 連結清單新增一欄連結，這是最經典的大型選單區塊，可選擇加上圖示、圖片與徽章。
• 圖片顯示含標題、說明與連結的橫幅或促銷圖片。
• 區塊總覽在大型選單或分頁中新增連結、圖片、商品與倒數計時器等區塊。

這個頁面有幫助嗎？

回報問題