为了让店家打造富有变化的商店设计，我们推出了 Ultra Chic 的版型，让您可以打造符合品牌风格的商店！
- 我能自定义哪些颜色 - 自订标题背景色
- 我能自定义哪些颜色 - 自订网站主题色
- 特色全版 Banner 来呈现大气版面
- 自制喜欢的 Header Menu 页
- Footer 页尾设计指南
- 自制/取消文字段落、标题下的底线
- 商品细节页排版建议
- 其他细节介绍
一、您可以依照品牌客製化网站颜色了！
1. 自订标题背景颜色：
您能依照您的品牌风格，选择网站元件底色为黑或白色。这裡控制的是 Header Menu ＆ Footer & 购物车的颜色。
若设为黑色：Header Menu ＆ Footer & 购物车将为黑色
- Header Menu
- Footer
- 购物车
若设为白色：Header Menu ＆ Footer & 购物车将为白色
- Header Menu
- Footer
- 购物车
2. 自订主题颜色：
您能使用色码控制整个网站的按键、重点资讯、底线颜色。（避免使用浅淡的颜色，以提高可读性）
请务必输入六位数的色码，色码可参考：https://htmlcolorcodes.com/
＊注意：「自订主题颜色」内必须要输入色码，您才可以按下「保存」并「出版」哦！
二、利用小撇步，快速建立精美品牌官网！
1. 在 Banner 更大气的呈现您的行销广告
Ultra Chic 首页 Banner 採用全幅显示。Logo、Menu 会出现在图片上方，如果您希望文字能清楚凸显，建议选用顶部颜色较单纯的图片作为 Banner。
如以下范例：（标题背景选用黑色，Menu 为白字）
如以下范例：（标题背景选用白色，Menu 为黑字）
若想选用配色、内容丰富的图也没问题！不必担心 Menu 字顾客看不清，当顾客将网页向下捲时，就能看到清楚的 Menu 囉！
（此处示意标题背景选用白色，Menu 为白底。选用黑色，Menu 会是黑底喔！）
＊小提示：
1.只有被设为主页的页面，顶部的 Banner 会以全幅显示。
2.设定 Banner 时，图片记得关闭「上下间距」及开启「显示全宽图片模式」，图片才能以全幅显示！
设定位置：SHOPLINE 管理后台 > 目录分页管理 > 网店分页 > 首页（被标示「主页」的分页）点击编辑 > 编辑顶部区块的图片 > 设定 > 关闭上下间距 / 勾选显示全宽图片模式
2. 自製喜欢的 Menu 底色
如果您不喜欢 Menu 显示在 Banner 上的设计，可在顶部自行上传一张纯色 / 花纹的图，并关闭「上下间距」及开启「显示全宽图片模式」，就可以自订 Menu 底色！
以下使用有花纹的白底图做示范
于商店显示效果：
记得检查手机版的底色也显示正常喔！
Ultra Chic 版型的特性是 logo & menu 会显示在首张图片上（也就是会压在进阶分页的第一个元件上），若您不想要 logo & menu 与首个元件重叠，可使用图片元件放入白色图片，或不放入任何图片，让他形成一个空元件，撑出一个不会压到下方元件的高度就行了喔！
3. Footer 底色以黑色 / 浅灰色显示（依所选标题背景色呈现）
系统将抓取 Footer 编辑器的最下一栏填满底色。您可在此栏填写品牌版权资讯，或依喜好拉入影片、图片等元件。
如以下范例，背景色为黑时，商店 Footer 会显示黑色
背景色为白时，商店 Footer 会显示浅灰色
编辑位置：Footer 要更新至新版编辑器才有支援喔！
SHOPLINE 管理后台 > 目录分页管理 > 网店目录管理 > 商店页尾点击编辑
请注意编辑模式是不会显示底色的，必须切换到预览，或实际套用才会看到效果喔！文字、图片记得要挑选足够凸显的颜色：例如黑底配白字、明亮的图，灰底配深字... 等，视觉上才能跳脱突出。
4. 标题样式会有底线
Ultra Chic 有自订的标题样式，如下图商品分类的名称，为套用品牌色的底线文字
如果您也想要用底线：
在进阶分页，只要使用「文字与标题」元件的「标题」，或将其他元件开启「显示标题」，都会有底线。
因为文字元件的预设样式（颜色、大小等）跟商品分类长得不一样，如果您想要使用跟「商品分类」一样的文字样式来统一整页的视觉风格，这裡提供 CSS 语法：
请在编辑文字的编辑栏，将字体颜色设为 #666666，字体大小为 22，并点击 </> 按键。
在 <span style="font-size:22px;"> 后贴上这段语法：<letter-spacing:"3px;"> 并点击确定就可以囉！
5. 如果您不想显示底线？
如果您不想使用有底线的文字，请使用「文字」元件，或其他元件的「显示描述」，就不会有底线囉！
6. 置中对齐商品细节页的商品描述
Ultra Chic 的商品细节页，没有商品分类的侧边栏，商品图片以更大的尺寸清楚呈现，能让顾客注意力聚焦在商品介绍本身。
因为宽度较大的关係，商品描述请用置中较美观喔！
7. 将 Instagram 元件的照片尺寸变大了，试用看看吧！
我们重新设计了进阶分页裡的 Instagram 元件，在手机、桌机版呈现的效果更加精美清晰。
8. 如果您的 Logo 是纯白色的，请新增阴影或描框
白色 Logo 在黑色版本的标题背景搭配有很好的效果，
但当您转贴官网连结、寄发 EDM 给顾客时，会直接抓取商店 Logo。若使用白色 Logo，在纯白的背景下会看不见，如下图于 LINE 转发。
所以建议将纯白 Logo 描边或加上阴影，才能让顾客看见喔！
评论