【官網設計】關於佈景主題設定的顏色對應位置(Aroma 或其後發佈之佈景主題)
若你使用新版主題(Aroma 或其後發佈之佈景主題),你可參考這篇關於佈景主題設定裡顏色設定所對應的位置。此篇文章是以佈景主題 Muse 作為範例。
路徑:EasyStore 後台 → 品牌官網 → 佈景主題設定 → 設定 → 顏色
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_dkeoij.png)
基本會對應在官網的一般文字,不包括主選單和頁尾
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_vvno4v.png)
商品區塊/頁面的標題、商品名稱、售價
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1ab2oap.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_9byvbo.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_7kssr4.png)
登入頁面
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1ti29tq.png)
精選商品目錄區塊
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_14fd1sc.png)
分頁、部落格文章、商品描述的文字顏色也會有變化,不過你可以再到後台裡編輯這些頁面的文字顏色,即會變成你想呈現的文字顏色。或者是你在製作分頁、部落格文章、商品描述的文字時已經有調過顏色,則不會被覆蓋
如:紅框處是有客製化過文字顏色,更換佈景主題一般文字顏色時,紅框處不會被覆蓋
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_vu3jci.png)
官網背景會以你選擇的顏色呈現
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_ou4jcn.png)
對應官網的按鈕顏色,不包括一些佈景主題設定裡的區塊
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1bapfpx.png)
輪播圖片的按鈕顏色
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_ivop06.png)
商品區塊的「加入購物車」「瀏覽全部」按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1yzaseb.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1iooo5i.png)
登入頁面
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_4zpm3o.png)
佈景主題設定裡的精選區塊
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1gq0m6h.png)
這會對應按鈕裡文字的顏色,不包括一些佈景主題設定裡的區塊
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_18te0bv.png)
商品區塊的「加入購物車」「瀏覽全部」按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1axkl0w.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_d4sr74.png)
登入頁面
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_s59t5v.png)
佈景主題設定裡的精選區塊
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1s97enl.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_9wij0y.png)
佈景主題設定裡的多元格框區塊按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1r8pilp.png)
佈景主題設定裡的部落格區塊按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1oyjrnm.png)
登入頁面的「忘記密碼」「註冊帳號」按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_gmunil.png)
註冊頁面的條款名稱連結
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_tdr1tc.png)
💡 小提醒:
此篇文章是以 Muse 作為範例,一些其他新版主題可能會有些許顏色對應上的出入,如 Aroma、Freshbit、Marshmallow、Mels、Pastries、Brew 、Scents、Wood Essence、Craftyhands、Digitron
路徑:EasyStore 後台 → 品牌官網 → 佈景主題設定 → 設定 → 顏色
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_dkeoij.png)
一般內文顏色
基本會對應在官網的一般文字,不包括主選單和頁尾
這裡會調成紅色作為例子讓你更了解什麼部分會被影響
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_vvno4v.png)
商品區塊/頁面的標題、商品名稱、售價
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1ab2oap.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_9byvbo.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_7kssr4.png)
登入頁面
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1ti29tq.png)
精選商品目錄區塊
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_14fd1sc.png)
分頁、部落格文章、商品描述的文字顏色也會有變化,不過你可以再到後台裡編輯這些頁面的文字顏色,即會變成你想呈現的文字顏色。或者是你在製作分頁、部落格文章、商品描述的文字時已經有調過顏色,則不會被覆蓋
如:紅框處是有客製化過文字顏色,更換佈景主題一般文字顏色時,紅框處不會被覆蓋
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_vu3jci.png)
背景顏色
官網背景會以你選擇的顏色呈現
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_ou4jcn.png)
按鈕顏色
對應官網的按鈕顏色,不包括一些佈景主題設定裡的區塊
這裡會調成紅色作為例子讓你更了解什麼部分會被影響
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1bapfpx.png)
輪播圖片的按鈕顏色
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_ivop06.png)
商品區塊的「加入購物車」「瀏覽全部」按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1yzaseb.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1iooo5i.png)
登入頁面
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_4zpm3o.png)
佈景主題設定裡的精選區塊
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1gq0m6h.png)
按鈕字色
這會對應按鈕裡文字的顏色,不包括一些佈景主題設定裡的區塊
這裡會調成紅色作為例子讓你更了解什麼部分會被影響
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_18te0bv.png)
商品區塊的「加入購物車」「瀏覽全部」按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1axkl0w.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_d4sr74.png)
登入頁面
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_s59t5v.png)
佈景主題設定裡的精選區塊
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1s97enl.png)
外框型按鈕色
這裡會調成紅色作為例子讓你更了解什麼部分會被影響
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_9wij0y.png)
佈景主題設定裡的多元格框區塊按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1r8pilp.png)
佈景主題設定裡的部落格區塊按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1oyjrnm.png)
登入頁面的「忘記密碼」「註冊帳號」按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_gmunil.png)
註冊頁面的條款名稱連結
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_tdr1tc.png)
💡 小提醒:
此篇文章是以 Muse 作為範例,一些其他新版主題可能會有些許顏色對應上的出入,如 Aroma、Freshbit、Marshmallow、Mels、Pastries、Brew 、Scents、Wood Essence、Craftyhands、Digitron
更新時間: 13/05/2024
感謝!