首頁圖設計

首頁主視覺是訪客進站後最先看到的區塊。先放入背景圖與核心文案，再利用遮罩和文字顏色提高對比，最後用電腦版與手機版預覽確認裁切結果。

秒站首頁主視覺的內容設定，包含背景圖、大標題、說明文字與圖片比例
主視覺的「內容」頁籤可更換背景圖，並修改大標題、說明文字與圖片比例。

設定背景圖與首頁文案#

  1. 進入「網站控制台 → 頁面編輯器」，開啟首頁的「主視覺」區塊。
  2. 在「內容」頁籤選擇背景圖。主體盡量放在畫面中央，避免手機裁切時切掉人物、商品或重要文字。
  3. 填寫大標題，直接說明品牌提供的核心價值；說明文字再補充服務對象或主要特色。
  4. 依圖片構圖選擇比例。設定後先看右側即時預覽，不要只依原始圖片尺寸判斷。

設定遮罩與文字顏色#

切換到「設定」頁籤，可選擇深色遮罩、淺色遮罩或無遮罩。深色遮罩適合搭配白字；淺色遮罩適合搭配深色文字。若品牌有指定色，也能設定自訂遮罩顏色、自訂文字顏色與遮罩濃度。

秒站首頁主視覺的遮罩、遮罩顏色、濃度與文字顏色設定
先選遮罩類型，再依需要調整自訂遮罩顏色、濃度與文字顏色。

怎麼選遮罩#

  • 背景偏亮或細節很多：使用深色遮罩與白字。
  • 背景偏暗，但希望首頁維持明亮風格：使用淺色遮罩與深字。
  • 圖片本身已有足夠留白與對比：可使用無遮罩，但仍要檢查文字是否清楚。
  • 品牌色遮罩：先從較低濃度開始，再逐步增加到文字清楚為止。

儲存前做兩種預覽#

  • 電腦版：確認標題沒有過長，背景圖在寬螢幕上不會模糊。
  • 手機版：確認人物或商品沒有被裁掉，文字行數與對比仍然清楚。
  • 前台：另開頁面測試，確認首屏載入、選單與後續區塊銜接正常。

延伸閱讀#

常見問題

首頁背景圖一定要固定 400 px 高嗎？

不用。新版主視覺可依圖片構圖選擇比例，不再以固定 400 px 高度當唯一標準。上傳後請用電腦版與手機版預覽確認裁切。

首頁大標題可以留空嗎？

欄位可留空，但建議用一句短標題說明品牌提供的核心價值。背景圖負責吸引目光，文字負責讓訪客快速理解。

可以使用品牌色遮罩或自訂文字顏色嗎？

可以。主視覺的「設定」頁籤可選深色、淺色或無遮罩，也能調整自訂遮罩顏色、遮罩濃度與文字顏色。

手機版會另外上傳一張首頁背景圖嗎？

目前主視覺使用同一張背景圖響應不同寬度。請把人物、商品與重要內容放在中央安全區，並用手機預覽確認裁切；若需要桌機與手機分開用圖，可評估改用支援兩種圖片的圖片輪播區塊。

怎麼讓首頁圖上的文字更清楚？

先依背景亮度選擇深色或淺色遮罩，再調整遮罩濃度。文字與背景要保持足夠對比，並避免把文字放在照片最複雜的位置。

選首頁圖時要注意什麼？

優先選主體清楚、中央留有安全區、授權可用且解析度足夠的圖片。避免直接把重要文字做進圖片，因為手機裁切後可能看不到。