讓網站各部分使用自己的顏色

在主要配色之外新增配色方案,並選擇每個頁面的哪些版塊使用它們。

適用戰隊擁有者與管理員 · 6 個步驟

事前準備

  • 你的戰隊有網站訂閱,而且已經選好範本,請看選擇範本和外觀。
  • 你是戰隊的擁有者或管理員。

步驟

  1. 步驟 1:開啟外觀

    在左側選單按 範本,再按右上角的 外觀。

    你會看到:外觀表單,旁邊是網站的即時預覽。

    範本頁面,外觀連結已框出。
  2. 步驟 2:新增配色方案

    在配色方案下方,按 新增淺色配色方案。上方的顏色是主要配色;你最多可以再新增三個配色方案。這個按鈕會先提供淺色方案,再來是強調色帶,之後是一份主要配色的複本讓你修改。

    你會看到:新的配色方案,有名稱、五種顏色和自己的文字與底色,每一項都和主要配色一樣顯示可讀性數值。只要你有淺色方案,商店、商品和購物車頁面就會先改用它,網站其他部分維持主要配色,直到你另外選擇。

    新淺色方案的名稱和移除方案按鈕,已框出。
  3. 步驟 3:設定配色方案的顏色

    輸入配色方案的名稱,再用修改主要配色的方式改它的顏色。每個有文字的顏色都會顯示像 7.2:1 · 容易閱讀 這樣的數值;低於最低標準時,會說明訪客實際會看到的色調,並提供 調整為易讀。

    你會看到:下方每個版塊的選單裡都有這個配色方案的名稱。

    配色方案的背景顏色欄位,已框出。
  4. 步驟 4:為版塊選擇配色方案

    在版塊下方,找到你想改的網站部分(依頁面排列,從每個頁面(導覽列和頁尾)到首頁、商店等),然後在它的選單裡選一個配色方案。預設會跟著主要配色;商店、商品和購物車則跟著淺色方案。你也可以點即時預覽裡的某個部分,找到它的那一列。

    你會看到:即時預覽切換到那個頁面,該部分被框出,並以你選的配色方案顯示。

    版塊清單,數據計數器那一列的配色方案選單已框出。
  5. 步驟 5:儲存

    按表單底部的 儲存。

    你會看到:「外觀已儲存」。訪客還看不到,儲存的變更會留在草稿裡,直到你發布。

    外觀表單底部,儲存按鈕已框出。
  6. 步驟 6:發布網站

    按左側選單的 發布 並發布,請看發布你的網站。

    你會看到:變更清單裡有外觀,發布後各版塊會以它們的配色方案顯示。

如何確認成功

  • 你選過的每個版塊在網站上都以它的配色方案顯示。
  • 商店和購物車使用淺色方案,或你為它們選的配色方案。

看起來不太對?

新增淺色方案的按鈕是灰色的

要先設定好主要配色。主要配色的五種顏色都需要完整的色碼,例如 #0a0a0a:修正不完整的那個,就能再按 新增淺色配色方案 或 新增配色方案。

我一新增配色方案,商店就變淺色了

商店、商品和購物車頁面預設使用你的淺色方案,讓買家容易看清價格和購物車。如果想維持主要配色,在版塊下方把它們那幾列設為 主選單。

我移除了一個配色方案,它的版塊怎麼了?

它們會回到預設:主要配色,商店則是淺色方案。不會刪除任何東西。

我選了預設組合,配色方案就變了

每個預設組合都有自己的強調色帶和淺色方案,會取代你原本的方案。使用了預設組合沒有的方案的版塊,會回到預設。如果你想保留自己的顏色,到配色方案下方重新設定。

清單裡沒有我想改的版塊

清單只列出你的範本會顯示的部分。有些範本會把頁面上幾個部分一起顯示,這些部分共用一列。

結帳頁面還是深色的

結帳是 Fourthwall 自己的頁面。它的顏色來自你在 Fourthwall 上的商店主題,請看開設戰隊商店。

相關文章

還是卡住了?聯絡客服或寄信至 support@spawnfront.com,告訴我們你所在的頁面和步驟編號。