版型編輯(下)：素材設定

前言

品牌在消費者心裡留下什麼樣的印象，很大一部分的因素取決於官方網頁的設計風格與瀏覽體驗，官網設計就是品牌的門面，能夠傳遞品牌理念及對質感要求。

Showmore 不僅提供精美的主題模板，讓您一鍵完成品牌官網設置，也提供設計素材，讓您自行客製化官網，滿足消費者對品牌的想像。

本文亮點

1. 版型編輯功能簡介

2. 素材設定

3. 素材項目說明

4. 如何編輯手機版素材

5. 如何在「商品與選單」頁面新增全版輪播圖

一、版型編輯功能簡介

提供「主題樣版」、「樣式設定」、「素材設定」三個選項讓您打造專屬的官網：

主題樣版：提供多種精選的素材組合，省去您選擇素材的煩惱。

樣式設定：設定頁首和頁尾，整體風格色調設定，包含標籤、訂單價錢、部分標題文

                 字。

素材設定：提供10種素材供編輯使用您可挑選喜愛的素材，自行搭配出最符合您風

                 格的主題視覺。

此篇文章主要針對「素材設定」此功能做說明，詳情請參考以下內容！

二、素材設定

「官網管理」→「總覽」，點擊進入到您欲編輯的官網中，並點擊「版型編輯」。

即可開始編輯您的官網，以下針對「素材設定」介紹其詳細用法。

另外，點擊「新增素材」可自行增加更多素材設定。

三、素材項目說明：

全版圖片公告（跑馬燈）

1. 設定「背景顏色」

2. 設定圖片連結

• 不跳轉：維持單圖形式

• 連結商品：點擊圖片後連結至您設定的指定商品

• 外部連結：點擊圖片後連結至您設定的外部網址

3. 於「文字內容」處輸入文字，進階設定可選擇「文字顏色」、「文字大小」。

4. 公告可「顯示於每一頁」或「跑馬燈效果」。

5. 點選「儲存設定」即完成更動。

全版圖片

1. 上傳圖片（標題、內容非必填） 2. 點選方框以上傳圖片

• 圖片限制：該欄位最多只可上傳1張圖片，若想要有輪播的功能，請選擇主頁橫幅

• 建議尺寸：最小寬度 1920px, 高度不限

• 支援圖片格式：JPG／PNG／GIF

3. 設定圖片連結

• 不跳轉：維持單圖形式

• 連結商品：點擊圖片後連結至設定的指定商品

• 外部連結：點擊圖片後連結至設定的外部網址

4. 點選「儲存設定」即完成更動。

全版輪播圖

1. 新增媒體類型，可選擇圖片 / 影片。

2. 點選【選取圖片】上傳圖片 / 影片（標題、內容非必填）

• 圖片限制：一次最多可於該處新增5張圖片

• 建議尺寸：1920*720px （全版面，建議寬度不低於 1440px，寬高比例須一致）

• 支援圖片格式：JPG／PNG／GIF

3. 設定圖片連結

• 不跳轉：維持單圖形式

• 連結商品：點擊圖片後連結至您設定的指定商品

• 外部連結：點擊圖片後連結至您設定的外部網址

4. 若欲更動圖片位置，點選標題前方的點狀圖形即可拖拉更改。

5. 點選「儲存設定」即完成更動。同個區塊最多可上傳 5張 圖片

系列商品

1. 點選新增商品，出現查詢商品列表後，可選擇已建立之商品，或使用右上方的

篩選功能挑選商品。（新增商品前須先至「商品設定」處新增商品）

2. 設定好商品後，點選「儲存設定」即完成更動。

圖文組合

圖文組合分為左右兩個版面，可於左右版面任意新增圖片、計時器或文字素材。

1. 分別設置左右兩欄的素材，可挑選圖片、計時器及文字（詳細操作步驟如下）。

2. 設置完成後點選「儲存設定」即完成更動。

圖片

1. 點選方框以上傳圖片（標題、內容非必填）

• 支援圖片格式：JPG／PNG／GIF

• 圖片建議尺寸：400 x 400

2. 設定圖片連結

• 不跳轉：維持單圖形式

• 連結商品：點擊圖片後連結至您設定的指定商品

• 外部連結：點擊圖片後連結至您設定的外部網址

3. 點選「儲存設定」即完成更動。

計時器

1. 填寫活動標題（文字內容非必填）

2. 填寫活動結束時間

3. 設定計時器連結

• 不跳轉：維持計時器形式

• 連結商品：點擊計時器後連結至您設定的指定商品

• 外部連結：點擊計時器後連結至您設定的外部網址

4. 選擇計時器樣式。預設有五種樣式可供選擇，您也可以自行設定文字、背景及

倒數時間的顏色。

5. 點選「儲存設定」即完成更動。

文字 1. 於「文字編輯」處輸入文字。

2. 選擇「背景顏色」或「背景圖片」，並點選「儲存設定」即完成更動。

全文字設定

1. 於「文字編輯」欄位輸入資訊

2. 可於「背景顏色」、「背景圖片」處上傳、或選擇您想要的背景。

3. 點選「儲存設定」即完成更動。

影片

1. 於「影片連結」欄位輸入影片網址。（此素材支援 YouTube / Facebook / Vimeo 影片）

2. 點選「儲存設定」即完成更動。

多欄橫幅

1. 點選新增圖片 （一次最多可於該處新增5張圖片）

2. 點選方框上傳圖片（標題、內容非必填）

• 圖片建議尺寸：總寬度1200px，寬度請依數量相除 （寬高比例須一致）

• 支援圖片格式：JPG／PNG／GIF

3. 設定圖片連結

• 不跳轉：維持單圖形式

• 連結商品：點擊圖片後連結至您設定的指定商品

• 外部連結：點擊圖片後連結至您設定的外部網址

4. 若欲更動圖片位置，點選標題前方的點狀圖形即可拖拉更改。

5. 點選「儲存設定」即完成更動。

彈出式廣告

1. 點選方框上傳圖片

• 支援圖片格式：JPG／PNG／GIF

• 支援裝置：Web

2. 設定圖片連結

• 不跳轉：維持單圖形式

• 連結商品：點擊圖片後連結至您設定的指定商品

• 外部連結：點擊圖片後連結至您設定的外部網址

3. 點選「儲存設定」即完成更動。

※如使用者電腦有安裝Ad Blocker廣告屏蔽程式，可能導致該素材無法正常展示。

側邊浮動小圖

1. 點選方框上傳圖片

• 支援圖片格式：JPG／PNG／GIF

• 支援裝置：Web

2. 設定圖片連結

• 不跳轉：維持單圖形式

• 連結商品：點擊圖片後連結至您設定的指定商品

• 外部連結：點擊圖片後連結至您設定的外部網址

3. 設定素材浮動位置。

4. 點選「儲存設定」即完成更動。

※如使用者電腦有安裝Ad Blocker廣告屏蔽程式，可能導致該素材無法正常展示。

頁尾懸浮橫幅

1. 點選方框以上傳圖片

• 素材特色：該欄位最多只可上傳1張圖片，將顯示於畫面最底部

• 建議尺寸：圖片容量限制 2MB 以內；電腦版寬高比例建議 16：1；手機版面建議另外上傳 8：1比例圖片

• 支援圖片格式：JPG／PNG／GIF

2. 設定圖片連結

• 不跳轉：維持單圖形式

• 連結商品：點擊圖片後連結至設定的指定商品

• 外部連結：點擊圖片後連結至設定的外部網址

3.選擇此素材是否要出現在網站的每一個頁面

• 一頁式官網不適用

4. 點選「儲存設定」即完成更動。

※酒類網站商家可使用此素材項目達到在網站每一個頁面顯示警語內容

提供 警語素材樣式 參考

四、如何編輯手機版素材？

說明：因電腦版的圖片比例與手機版不同，若商家想針對手機版的介面獨立編輯，可參考以下設定。

版型編輯界面上方，有電腦版＆手機版的圖示，點擊手機版即可切到手機版的預覽畫面。

商家如果沒有針對手機的裝置編輯素材，系統將會沿用電腦版素材至手機版上。

若想針對手機版的介面做素材編輯，可以點選「新增手機版素材」。

選擇欲新增的素材 (例如 全版圖片) ，新增該素材後，素材名稱旁邊會顯示手機的圖示，代表此為手機版素材，方便商家辨認。

備註：手機版素材建議尺寸為 3:4。

電腦版的圖片如果不想顯示在手機版上，可以在電腦版的素材旁邊點選眼睛的圖示，將此素材在手機版上隱藏。

補充說明：無法在手機版上編輯電腦版的素材，如果想針對電腦版的素材做調整，請記得將畫面切換回電腦版再進行更改。

以上素材設定皆完成後記得點選右上角的「儲存設定」即可！

電腦版官網畫面⬇

手機版官網畫面⬇

五、如何在商品與選單新增全版輪播圖

說明：商家除了可以在官網的首頁做素材編輯之外，「商品與選單」的頁面也可以放置全版輪播圖。

前台顯示樣式⬇

• 全版輪播圖可分別上傳電腦和手機版

• 同個區塊最多可上傳 5張 圖片

• 建議尺寸：1920*720px (全版面，建議寬度不低於 1440px,寬高比例須一致) ，支援圖片格式：JPG/PNG/GIF

電腦版顯示畫面⬇

手機版顯示畫面⬇

電腦和手機版的圖片上傳後，要記得點選「儲存設定」才算完成哦！