版型編輯(下):樣式設定|操作教學|電商新知
top of page

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

已更新:1月2日



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

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


本文亮點

  1. 版型編輯功能簡介

  2. 素材設定

  • 素材項目說明

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

  • 如何編輯手機版素材




一、版型編輯功能簡介

版型編輯提供「主題樣版」、「樣式設定」、「素材設定」三個選項讓您打造專屬的官網印象。

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

樣式設定:設定頁首和頁尾,整體風格色調設定,包含標籤、訂單價錢、部分標題文字。 素材設定:提供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廣告屏蔽程式,可能導致該素材無法正常展示。


如何編輯手機版素材?

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

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

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

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

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

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

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

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

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

電腦版官網畫面


手機版官網畫面


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

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

前台顯示樣式

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

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

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

電腦版顯示畫面


手機版顯示畫面


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


 

點擊下方【預約諮詢】,將有 Showmore 專人為您服務,協助您立刻開始電商之路!


bottom of page