Ultra Chic 版型使用指南

Artboa2rd.png
为了让店家打造富有变化的商店设计,我们推出了 Ultra Chic 的版型,让您可以打造符合品牌风格的商店!
 S____.jpg
 

一、您可以依照品牌客製化网站颜色了!

 

1. 自订标题背景颜色:

您能依照您的品牌风格,选择网站元件底色为黑或白色。这裡控制的是 Header Menu & Footer & 购物车的颜色。
 
若设为黑色:Header Menu & Footer & 购物车将为黑色
 
- Header Menu
 
- Footer
 
- 购物车
 
若设为白色:Header Menu & Footer & 购物车将为白色
 
 - Header Menu
- Footer
 
- 购物车
 
 

2. 自订主题颜色:

 
 
您能使用色码控制整个网站的按键、重点资讯、底线颜色。(避免使用浅淡的颜色,以提高可读性)
请务必输入六位数的色码,色码可参考: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 管理后台 > 目录分页管理 > 网店分页 > 首页(被标示「主页」的分页)点击编辑 > 编辑顶部区块的图片 > 设定 > 关闭上下间距 / 勾选显示全宽图片模式
 
 
 

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. Footer 底色以黑色 / 浅灰色显示(依所选标题背景色呈现)

系统将抓取 Footer 编辑器的最下一栏填满底色。您可在此栏填写品牌版权资讯,或依喜好拉入影片、图片等元件。 
 
如以下范例,背景色为黑时,商店 Footer 会显示黑色
_____2019-01-07___3.12.16.png
 
背景色为白时,商店 Footer 会显示浅灰色
_____2019-01-07___3.10.01.png
 
编辑位置:Footer 要更新至新版编辑器才有支援喔!
 
SHOPLINE 管理后台 > 目录分页管理 > 网店目录管理 > 商店页尾点击编辑
mceclip10.png
 
请注意编辑模式是不会显示底色的,必须切换到预览,或实际套用才会看到效果喔!文字、图片记得要挑选足够凸显的颜色:例如黑底配白字、明亮的图,灰底配深字... 等,视觉上才能跳脱突出。
 
_____2019-01-07___3.21.05.png
 
 

 

4. 标题样式会有底线

Ultra Chic 有自订的标题样式,如下图商品分类的名称,为套用品牌色的底线文字

_____2019-01-07___4.15.05.png
 
如果您也想要用底线:
 
在进阶分页,只要使用「文字与标题」元件的「标题」,或将其他元件开启「显示标题」,都会有底线。
 
因为文字元件的预设样式(颜色、大小等)跟商品分类长得不一样,如果您想要使用跟「商品分类」一样的文字样式来统一整页的视觉风格,这裡提供 CSS 语法:
 
请在编辑文字的编辑栏,将字体颜色设为 #666666,字体大小为 22,并点击 </> 按键。
 
 
在 <span style="font-size:22px;"> 后贴上这段语法:<letter-spacing:"3px;"> 并点击确定就可以囉!
 
 

  

5. 如果您不想显示底线?

如果您不想使用有底线的文字,请使用「文字」元件,或其他元件的「显示描述」,就不会有底线囉!
_____2019-01-07___4.25.37.png
 
 

 

6. 置中对齐商品细节页的商品描述

Ultra Chic 的商品细节页,没有商品分类的侧边栏,商品图片以更大的尺寸清楚呈现,能让顾客注意力聚焦在商品介绍本身。
 
因为宽度较大的关係,商品描述请用置中较美观喔!
 
_____2019-01-09___10.55.45.png

 

 

7. 将 Instagram 元件的照片尺寸变大了,试用看看吧!

我们重新设计了进阶分页裡的 Instagram 元件,在手机、桌机版呈现的效果更加精美清晰。
 

8. 如果您的 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
 
 
 
 
 
 
 
还有其它问题?提交请求

评论