跳到內容
GloboGlobo Docs
安裝應用程式
繁體中文

調整選單顏色

設定選單列、子選單、分頁、商品標籤與加入購物車按鈕的顏色。

操作指南 所有方案 1 分鐘閱讀

Colors（顏色）分頁中的顏色會套用到選單中的每個項目，讓您在同一處就能配合品牌風格。

變更顏色

  1. 開啟顏色分頁

    在選單編輯器中，點擊左側邊欄的油漆桶圖示 (1)。

    開啟 Colors 分頁 (1)，然後點擊顏色欄位 (2)。

  2. 挑選顏色

    點擊顏色旁的欄位 (2)。挑選顏色，或輸入十六進位色碼，例如 #FFFFFF。

  3. 查看預覽

    將游標移到預覽中的項目上，檢查懸停時的顏色。

  4. 儲存並發佈

    點擊 Save（儲存），然後點擊 Publish（發佈）。

顏色設定

主選單

Background color（背景顏色）
選單列的背景。
Hover background color（懸停時背景顏色）
最上層項目在滑鼠懸停時或子選單開啟時的背景。
Separator color（分隔線顏色）
項目之間的分隔線，在選單設定中開啟 Show divider on desktop（在桌面裝置顯示分隔線）或 Show divider on mobile（在行動裝置顯示分隔線）時顯示。
Text color（文字顏色）
最上層項目的文字與圖示。
Hover text color（懸停時文字顏色）
滑鼠懸停時最上層項目的文字與圖示。

子選單

下拉式選單、大型選單及其內容。

Background color（背景顏色）
子選單的背景。
Border color（框線顏色）
子選單的框線，在選單設定中開啟 Show border（顯示框線）時顯示。
Heading color（標題顏色）
子選單內的標題，例如連結清單的標題。
Text color（文字顏色）
子選單內的連結與文字。
Hover text color（懸停時文字顏色）
滑鼠懸停時的子選單連結。
Description color（說明顏色）
項目下方的說明文字。
Hover description color（懸停時說明顏色）
滑鼠懸停時的說明文字。

分頁式選單

Heading color（標題顏色）
分頁名稱。
Active heading color（選取中標題顏色）
選取中分頁的名稱。
Active background color（選取中背景顏色）
選取中分頁的背景。

標籤

顯示在選單中商品上的標籤。

Sale text color · Sale background color（特價文字顏色 · 特價背景顏色）
折扣商品上的特價標籤。
Sold out text color · Sold out background color（售完文字顏色 · 售完背景顏色）
售完標籤。

加入購物車按鈕

在選單設定 > Advanced（進階）中開啟 Show add to cart button（顯示加入購物車按鈕）時顯示。

Text color · Hover text color（文字顏色 · 懸停時文字顏色）
按鈕文字在一般狀態與滑鼠懸停時的顏色。
Background color · Hover background color（背景顏色 · 懸停時背景顏色）
按鈕背景在一般狀態與滑鼠懸停時的顏色。

疑難排解

項目難以閱讀，或在滑鼠懸停時消失

請確認 Text color 與 Background color、Hover text color 與 Hover background color 之間有足夠的對比。白色的懸停文字搭配白色的懸停背景，會讓項目在滑鼠懸停時消失。

我想讓某個項目使用不同的顏色

使用該項目本身的 Color（顏色）設定（Pro Navigation 方案），例如設定紅色的「Sale」項目。請參閱編輯選單項目。

這個頁面有幫助嗎？

回報問題