为了让店家打造富有变化的商店设计,我们推出了 Ultra Chic 的版型,让您可以打造符合品牌风格的商店!
- 我能自定义哪些颜色 - 自订标题背景颜色
- 我能自定义哪些颜色 - 自订网站主题色
- 特色全版 Banner 来呈现大气版面
- 自制喜欢的页首,及各页面 Banner 建议尺寸
- Footer 页尾设计指南
- 自制/取消文字段落、标题下的底线
- 商品细节页排版建议
- 其他细节介绍
一、可以依照品牌客製化网站颜色了!
1. 自订标题背景颜色:
您能依照您的品牌风格,选择网站元件底色为黑或白色。这里控制的是 页首 & 页尾 & 购物车 的颜色。

若设为黑色:页首 & 页尾 & 购物车 将为黑色
- 页首

- 页尾

- 购物车

若设为白色:页首 & 页尾 & 购物车 将为白色
- 页首

- 页尾

- 购物车

2. 自订主题颜色:

您能使用色码控制整个网站的按键、重点资讯、底线颜色。(避免使用浅淡的颜色,以提高可读性)

*注意:「自订主题颜色」内必须要输入色码,您才可以按下「保存」并「出版」哦!
二、利用小撇步,快速建立精美品牌官网!
1. 在 Banner 更大气的呈现您的行销广告
Ultra Chic 首页 Banner 採用全幅显示。Logo、目录 会出现在图片上方,如果您希望文字能清楚凸显,建议选用顶部颜色较单纯的图片作为 Banner。
如以下范例:(标题背景选用黑色,目录文字为白色)

如以下范例:(标题背景选用白色,目录文字为黑色)

若想选用配色、内容丰富的图也没问题!不必担心 Menu 字顾客看不清,当顾客将网页向下捲时,就能看到清楚的目录囉!

(此处示意标题背景选用白色,目录为白底。选用黑色,目录会是黑底喔!)
- 只有被设为主页的页面,顶部的 Banner 会以全幅显示。
- 设定 Banner 时,图片记得关闭「上下间距」及开启「显示全宽图片模式」,图片才能以全幅显示!
2. 自製喜欢的 Menu 底色
如果不喜欢「目录」显示在 Banner 上的设计,可在顶部自行上传一张纯色 / 花纹的图,并关闭「上下间距」及开启「显示全宽图片模式」,就可以自订页首目录底色!
以下使用有花纹的白底图做示范

于商店显示效果:

记得检查手机版的底色也显示正常喔!

Ultra Chic 版型的特性是 logo & 目录 会显示在首张图片上(也就是会压在进阶分页的第一个图片元件上),若您不想要 logo & 目录 与首个「图片元件」重叠,可在最上方加入空白没有内容的「文字元件」,让它形成一个空元件就行了喔!

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


如果不想占满整个萤幕,喜欢较窄的比例,推荐使用 1920x720px,这样在桌机约占满 3/2 画面范围
在商品列表页的 Banner,建议高度不超过 640 px,让顾客在一进入商品列表页时,能稍微看到第一排商品。
4. Footer 底色以黑色 / 浅灰色显示(依所选标题背景色呈现)
系统将抓取页尾编辑器的最下一栏填满底色。您可在此栏填写品牌版权资讯,或依喜好拉入影片、图片等元件。
如以下范例,背景色为黑时,商店页尾会显示黑色

背景色为白时,商店页尾会显示浅灰色

*请注意,编辑模式是不会显示底色的,必须切换到预览,或实际套用才会看到效果喔!文字、图片记得要挑选足够凸显的颜色:例如黑底配白字、明亮的图,灰底配深字... 等,视觉上才能跳脱突出。

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

如果你也想在标题下加底线:
在进阶分页,只要使用「文字与标题」元件的「标题」,或将其他元件开启「显示标题」,都会有底线。


因为文字元件的预设样式(颜色、大小等)跟商品分类长得不一样,如果您想要使用跟「商品分类」一样的文字样式来统一整页的视觉风格,这裡提供 CSS 语法:
1. 请在编辑文字的编辑栏,将字体颜色设为 #666666,字体大小为 22,并点击 </> 按键。

2. 在 <span style="font-size:22px;"> 后贴上这段语法:<letter-spacing:"3px;"> 并点击确定就可以囉!

6. 如果您不想显示底线?
如果您不想使用有底线的文字,请使用「文字」元件,或其他元件的「显示描述」,就不会有底线囉!


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

8. 将 Instagram 元件的照片尺寸变大了,试用看看吧!
我们重新设计了进阶分页裡的 Instagram 元件,在手机、桌机版呈现的效果更加精美清晰。

9. 如果您的 Logo 是纯白色的,请新增阴影或描框
白色 Logo 在黑色版本的标题背景搭配有很好的效果,

但当您转贴官网连结、寄发 EDM 给顾客时,会直接抓取商店 Logo。若使用白色 Logo,在纯白的背景下会看不见,如下图于 LINE 转发。

所以建议将纯白 Logo 描边或加上阴影,才能让顾客看见喔!

评论