Ultra Chic 版型使用指南

4.CHS_______________.png

Artboa2rd.png

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

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

 

1. 自订标题背景颜色:

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

 

 

2. 自订主题颜色:

 
 
您能使用色码控制整个网站的按键、重点资讯、底线颜色。(避免使用浅淡的颜色,以提高可读性)
请务必输入六位数的色码色码可参考:https://htmlcolorcodes.com/
_____2019-01-09___11.58.27.png
 
*注意:「自订主题颜色」内必须要输入色码,您才可以按下「保存」并「出版」哦!
 
 
 
 

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

 

1. 在 Banner 更大气的呈现您的行销广告

 
Ultra Chic 首页 Banner 採用全幅显示。Logo、目录 会出现在图片上方,如果您希望文字能清楚凸显,建议选用顶部颜色较单纯的图片作为 Banner。
 
如以下范例:(标题背景选用黑色,目录文字为白色)
 
Artboard_Copy_2.png
 
如以下范例:(标题背景选用白色,目录文字为黑色)
 
Artboard.png
 
若想选用配色、内容丰富的图也没问题!不必担心 Menu 字顾客看不清,当顾客将网页向下捲时,就能看到清楚的目录囉!
 
Artboard_Copy_3.png
 
(此处示意标题背景选用白色,目录为白底。选用黑色,目录会是黑底喔!)
 
 
  • 只有被设为主页的页面,顶部的 Banner 会以全幅显示。
  • 设定 Banner 时,图片记得关闭「上下间距」及开启「显示全宽图片模式」,图片才能以全幅显示!
 
 
 
 

2. 自製喜欢的 Menu 底色 

如果不喜欢「目录」显示在 Banner 上的设计,可在顶部自行上传一张纯色 / 花纹的图,并关闭「上下间距」及开启「显示全宽图片模式」,就可以自订页首目录底色!
 
以下使用有花纹的白底图做示范
 
_____2019-01-07___3.48.15.png
 
于商店显示效果:
 
_____2019-01-07___3.47.38.png
 
记得检查手机版的底色也显示正常喔!
 
_____2019-01-07___3.57.06.png
 
 
Ultra Chic 版型的特性是 logo & 目录 会显示在首张图片上(也就是会压在进阶分页的第一个图片元件上),若您不想要 logo & 目录 与首个「图片元件」重叠,可在最上方加入空白没有内容的「文字元件」,让它形成一个空元件就行了喔!
 
 
mceclip0.png
 

 

3. 建议 Banner 尺寸

请记得使用图片压缩工具,让大图不会占用顾客太多网路流量导致网站读取速度过慢。
 
进阶分页:
如果是页首置顶 Banner,喜欢整个萤幕满版图片,可使用 1920x1080px。

 _____2020-05-07___12.44.03.png

 

如果不想占满整个萤幕,喜欢较窄的比例,推荐使用 1920x720px,这样在桌机约占满 3/2 画面范围

_____2020-05-07___12.46.53.png

 

在商品列表页的 Banner,建议高度不超过 640 px,让顾客在一进入商品列表页时,能稍微看到第一排商品。

_____2020-05-07___12.53.32.png

 

 

4. Footer 底色以黑色 / 浅灰色显示(依所选标题背景色呈现)

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

 

5. 标题样式会有底线

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

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

  

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

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

 

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

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

 

 

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

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

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
 
 
 
 
 
 
 
还有其它问题?提交请求

评论