品牌在消費者心裡留下什麼樣的印象,很大一部分的因素取決於官方網頁的設計風格與瀏覽體驗,官網設計就是品牌的門面,能夠傳遞品牌理念及對質感要求。
Showmore 不僅提供精美的主題模板,讓您一鍵完成品牌官網設置,也提供設計素材,讓您自行客製化官網,滿足消費者對品牌的想像。
本文亮點
版型編輯功能簡介
素材設定
素材項目說明
如何在「商品與選單」頁面新增全版輪播圖
如何編輯手機版素材
一、版型編輯功能簡介
版型編輯提供「主題樣版」、「樣式設定」、「素材設定」三個選項讓您打造專屬的官網印象。
主題樣版:提供多種精選的素材組合,省去您選擇素材的煩惱。
樣式設定:設定頁首和頁尾,整體風格色調設定,包含標籤、訂單價錢、部分標題文字。 素材設定:提供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 專人為您服務,協助您立刻開始電商之路!
Comments