Ultra Chic 版型使用指南

Artboa2rd.png

為了讓店家打造富有變化的商店設計,我們推出了 Ultra Chic 的版型,幫助你打造符合品牌風格的商店!

T____.jpg

 

一、可以依照品牌客製化網站顏色了!

1. 自訂標題背景顏色:

你能選擇網站主題色為黑或白色。這裡控制的是 Header Menu & Footer & 購物車的顏色。

_____2019-01-09___3.02.47.png


若設為黑色:Header Menu & Footer & 購物車將為黑色

  • Header Menu

_____2019-01-09___11.50.56.png

 

  • Footer

_____2019-01-09___12.03.44.png

 

  • 購物車

_____2019-01-09___12.03.36.png

 

若設為白色:Header Menu & Footer & 購物車將為白色

  • Header Menu

_____2019-01-09___11.51.43.png

 

  • Footer

_____2019-01-09___12.01.56.png

 

  • 購物車

_____2019-01-09___12.02.57.png

2. 自訂主題顏色:

_____2019-01-09___3.02.47_2.png

使用色碼可以控制整個網站的按鍵、重點資訊、底線顏色,請使用 HEX 六位數色碼。(避免使用淺淡的顏色,以提高可讀性)
色碼參考:https://htmlcolorcodes.com/

_____2019-01-09___11.58.27.png

 

 

二、利用小撇步,快速建立精美品牌官網!

1. 在 Banner 更大氣的呈現行銷廣告

Ultra Chic 首頁 Banner 採用全幅顯示。Logo、Menu 會出現在圖片上方,如果希望文字能清楚凸顯,建議選用頂部顏色較單純的圖片作為 Banner。

如以下範例:(標題背景選用黑色,Menu 為白字)

Artboard_Copy_2.png


如以下範例:(標題背景選用白色,Menu 為黑字)

Artboard.png


若想選用配色、內容豐富的圖也沒問題!不必擔心 Menu 字顧客看不清,當顧客將網頁向下捲時,就能看到清楚的 Menu。

Artboard_Copy_3.png

(此示意圖標題背景色是選用白色,因此 Menu 為白底。若選用黑色,Menu 會是黑底喔!)

 

小提示

1. 只有被設為主頁的頁面,頂部的 Banner 會以全幅顯示。


2.設定 Banner 時,圖片記得關閉「上下間距」及開啟「顯示全寬圖片模式」,圖片才能以全幅顯示!
設定位置:SHOPLINE 管理後台 > 目錄分頁管理 > 網店分頁 > 首頁(被標示「主頁」的分頁)點擊編輯 > 編輯頂部區塊的圖片 > 設定 > 關閉上下間距 / 勾選顯示全寬圖片模式

 

_____2019-01-07___3.05.45.png

 

2. 自製喜歡的 Menu 底色

如果不喜歡 Menu 顯示在 Banner 上的設計,可在頂部自行上傳一張純色 / 花紋的圖,並關閉「上下間距」及開啟「顯示全寬圖片模式」,就能自訂 Menu 底色!


以下使用有花紋的白底圖做示範

_____2019-01-07___3.48.15.png


於商店顯示效果:

_____2019-01-07___3.47.38.png


記得檢查手機版的底色也顯示正常喔!

_____2019-01-07___3.57.06.png

 

Ultra Chic 版型的特性是 logo & menu 會顯示在首張圖片上(也就是會壓在進階分頁的第一個元件上),若不想要 logo & menu 與首個元件重疊,可使用圖片元件放入白色圖片,或不放入任何圖片,讓他形成一個空元件,撐出一個不會壓到下方物件的高度就行了喔!

_____2019-01-25___11.34.19.png

 

3. 建議 Banner 尺寸

請記得使用圖片壓縮工具,讓大圖不會佔用顧客太多網路流量導致網站讀取速度過慢,推薦使用:https://tinypng.com/

進階分頁:如果是頁首置頂 Banner,喜歡整個螢幕滿版圖片,可使用 1920x1080px。

_____2019-05-22___3.15.55.png

如果不想佔滿整個螢幕,喜歡較窄的比例,推薦使用 1920x720px,這樣在桌機約佔滿 3/2 畫面範圍

_____2019-05-22___3.16.21.png

在商品列表頁的 Banner,建議高度不超過 640 px,讓顧客在一進入商品列表頁時,能稍微看到第一排商品。

_____2019-05-22___3.20.27.png

 

4. Footer 底色以黑色 / 淺灰色顯示(依所選標題背景色呈現)

系統將抓取 Footer 編輯器的最下一欄填滿底色。你可在此欄填寫品牌版權資訊,或依喜好拉入影片、圖片等元件。

如以下範例,背景色為黑時,商店 Footer 會顯示黑色

_____2019-01-07___3.12.16.png

 

背景色為白時,商店 Footer 會顯示淺灰色

_____2019-01-07___3.10.01.png

 

編輯位置:Footer 要更新至新版編輯器才有支援喔!

SHOPLINE 管理後台 > 目錄分頁管理 > 網店目錄管理 > 商店頁尾點擊編輯

_____2019-01-07___3.17.33.png

請注意,編輯模式不會顯示底色,必須點擊預覽、或套用才會看到效果喔!文字、圖片記得要挑選足夠凸顯的顏色:例如黑底配白字、明亮的圖,灰底配深字... 等,視覺上才能跳脫突出。

_____2019-01-07___3.21.05.png

 

5. 標題樣式會有底線

Ultra Chic 有自訂的標題樣式,如下圖商品分類的名稱,為套用品牌色的底線文字

_____2019-01-07___4.15.05.png

 

如果你也想在標題下加底線:

在進階分頁,只要使用「文字與標題」元件的「標題」,或將其他元件開啟「顯示標題」,都會有底線。

_____2019-01-07___4.25.41.png

_____2019-01-07___4.28.38.png

因為文字元件的預設樣式(顏色、大小等)跟商品分類長得不一樣,如果想要使用跟「商品分類」一樣的文字樣式來統一整頁的視覺風格,這裡提供 CSS 語法:

1. 請在編輯文字的編輯欄,將字體顏色設為 #666666,字體大小為 22,並點擊 </> 按鍵。

_____2019-01-07___4.35.19.png

2. 在第一個 <p> 後貼上這段語法:<span style="letter-spacing:3px;"> 並點擊確定就可以囉!

_____2019-01-07___4.37.22.png

 

6. 如果不想顯示底線?

如果不想使用有底線的文字,請使用「文字」元件,或其他元件的「顯示描述」,就不會有底線囉!

_____2019-01-07___4.25.37.png

_____2019-01-07___4.39.40.png

 

7. 置中對齊商品細節頁的商品描述

Ultra Chic 的商品細節頁,沒有商品分類的側邊欄,商品圖片以更大的尺寸清楚呈現,能讓顧客注意力聚焦在商品介紹本身。

因為寬度較大的關係,商品描述請用置中較美觀喔!

_____2019-01-09___10.55.45.png

 

8. 將 Instagram 元件的照片尺寸變大了,試用看看吧!

我們重新設計了進階分頁裡的 Instagram 元件,在手機、桌機版呈現的效果更加精美清晰。

 ig.jpg

 

9. 如果 Logo 是純白色的,請新增陰影或描框

白色 Logo 在黑色版本的標題背景搭配有很好的效果,

_____2019-01-09___11.06.41.png

但當轉貼官網連結、寄發 EDM 給顧客時,會直接抓取商店 Logo。若使用白色 Logo,在純白的背景下會看不見,如下圖於 LINE 轉發。

_____2019-01-09___11.12.59.png

所以建議將純白 Logo 描邊或加上陰影,才能讓顧客看見喔!

_____2019-01-09___11.17.12.png

 

還有其他問題?提交請求

評論