發佈於

【教學】元件｜地圖+FB+影片資訊

如何在您的網路商店中，
快速提供給消費者  您的商店門市
所在地圖、商店FB專頁、動態影片…等關鍵資訊呢？
您絕對不能錯過 【地圖+FB+影片資訊jo】這顆元件的應用！
JOO為您提供這顆能同時滿足以上三種需求的元件，
一起來看看怎麼操作這顆元件，快快運用在您的網站上~

一、資料收集

在設定開始之前，可以預先準備好哪些資料呢？

1-1，取得 嵌入資料

這顆元件同時應用結合了  地圖、FB、影片資訊  等三種不同元素。

1-1-1，門市地圖  嵌入資料取得

在門市地圖嵌入資料的取得步驟如下：

先在您的瀏覽器  新開一個頁面

搜尋輸入”Google Map”，按下鍵盤上的 enter鍵

點選 Google Map，進入到Google Map的頁面後，在左上角輸入您的門市地址資料，按下鍵盤上的 enter鍵。

接著  點選下圖畫面紅框的  “分享”  選項

出現一個  新的  分享視窗

點選  視窗選項的  “嵌入地圖”

點選 複製HTML，

貼到記事本內，複製 ” 和 ” 內的網址即可

1-1-2，FB網址    嵌入資料取得

請先到您欲進行分享的FB網頁，在畫面上方  網址列  進行”複製”即可。

1-1-3，Youtube影片    嵌入資料取得

請先到您已完成影片上傳之youtube頁面，點選欲分享的影片下方”分享”

出現一個新的視窗，請將視窗中的嵌入資料，進行”複製”即可。

1-2，小icon圖

您可以先準備好您設計好的三個icon小圖(請參閱下圖)

說明：

A，檔案格式— jpg, gif, png。

B，檔案  寬*高–350(以內)*70px

C，多語系之圖檔，請使用相同圖檔格式，維護版面一致。

二、JOO後台操作

請先完成登入，進入您在JOO的後台

2-1，點選 Home>網站維護>頁面維護

點選JOO後臺畫面  左側上方  的”網站維護”，右邊出現一個  選單，點選  “頁面維護”

2-2，選擇放置的位置

來到頁面維護，在這邊可以選擇你要放置這顆  【地圖+FB+影片資訊jo】 元件功能的的位置~

您可以選擇放在  “新建立” 的頁面–在下圖  新增網站頁面的地方，輸入  頁面名稱後，按下下方的  藍色  “新增”  按鍵

當然，也可以  直接應用  在您網站  “現有的”  網頁上~

直接在後台  頁面維護  的畫面右邊  網站頁面列表，點選您要應用的頁面。

(假設：選擇  下圖中的  序號 143  最新消息&粉絲團jo元件，點選  該頁面右側的”放大鏡”圖案)

2-3，選擇  地圖+FB+影片資訊jo  元件

選定要放置編輯的頁面後，點選  該頁面右側的”放大鏡”圖案後，會看到 編輯頁面內容(如下圖的畫面~)

接著請在  畫面中間，中間元件的右側，點選”+”號

點選完”+”後，會看到下圖  編輯頁面內容的畫面，請到右側將捲軸下拉

捲軸下拉後，會看到下圖畫面，點選  下圖紅框處之藍色”新增”按鈕，新增這顆  【地圖+FB+影片資訊jo】  元件~

接著回到上一個畫面，會看到編輯頁面內容的部分，多了一個【地圖+FB+影片資訊jo】  元件~(如下圖紅框處)

2-4，編輯  地圖+FB+影片資訊jo  元件

選定放置好【地圖+FB+影片資訊jo】  元件後，接下來就是要進行元件”編輯”

請點選下圖紅框處的  “放大鏡圖案“內容，準備  進行編輯~

點選完 “放大鏡圖案“內容後，會看到下圖這個  元件內容列表，

點選右上角的”鉛筆圖案”新增

點選完右上角的”鉛筆圖案”後，會看到 “新增元件內容”的頁面，

在主標題的欄位先輸入您的  標題名稱(例如：MAP)

輸入完您的標題文字(MAP)後，然後到畫面下方，按下藍色”新增”按鈕，完成階段性編輯

完成輸入標題名稱(MAP)，按下”新增”按鈕後，接下來回到  元件內容列表這個畫面，

您會看到剛剛新增的主標題”MAP”，資料已出現在列表上~

完成第一個主標題的資料(MAP)新增後，同樣的方式，點選下圖畫面右上角的藍色”鉛筆圖案”新增，來接著新增第二個主標題~

點選完藍色”鉛筆圖案”新增後，來到新增元件內容的標題欄位，輸入您的第二組標題文字資料(例如：Youtube)

輸入完您的第二組標題文字(Youtube)後，然後到畫面下方，按下藍色”新增”按鈕，完成階段性編輯

完成輸入第二組標題名稱(Youtube)，按下”新增”按鈕後，接下來回到  元件內容列表這個畫面，

您會看到剛剛新增的主標題”Youtube”，資料已出現在元件內容列表上~

完成第二個主標題的資料新增後，同樣的方式，點選下圖畫面右上角的藍色”鉛筆圖案”新增，來接著新增第三個主標題~

點選完藍色”鉛筆圖案”新增後，來到新增元件內容的標題欄位，輸入您的第三組標題文字資料(例如：FB)

輸入完您的第三組標題文字(FB)後，然後到畫面下方，按下藍色”新增”按鈕，完成階段性編輯

完成輸入第三組標題名稱(FB)，按下”新增”按鈕後，接下來回到  元件內容列表這個畫面，

您會看到剛剛新增的主標題”FB”，資料已出現在元件內容列表上~(如下圖紅框處)

2-5，上傳icon小圖、嵌入資料

完成元件三個標題名稱文字輸入後，點選元件內容列表的標題右方藍色”鉛筆圖案”

準備進行第二階段的內容編輯–“上傳icon小圖”

點選完藍色”鉛筆圖案”後，來到畫面中間  上傳圖檔的欄位，點選按下”選擇檔案”的灰色按鈕，到您的電腦中，去選擇已經預先準備好的第一個標題icon(MAP)小圖~

接著來到畫面下方，GoogleMap欄位，貼上之前預先準備好的GoogleMap嵌入資料

上傳完您的第一組標題icon小圖(MAP)、嵌入資料(MAP)後，然後到畫面下方，按下藍色”新增”按鈕，完成編輯(如下圖)

完成選擇第一個標題的icon小圖上傳(MAP)+第一個標題的嵌入資料(MAP)後，接著依照相同的步驟，將第二個標題(Youtube)、第三個標題(FB)的icon小圖、嵌入資料分別上傳操作完成~

這時您到貴司在JOO網站的前台畫面，會看到的畫面如下圖紅框區域~

2-6，調整  排列順序(地圖+FB+影片資訊)

那麼，這顆【地圖+FB+影片資訊jo】元件裡的三項標題組合

排列的先後順序可以進行調整嗎？

可以的！

操作的方式就像直覺式的簡單，例如您原本的元件內容列表  主標題  排列順序(後台標題排列順序由上至下，對應前台畫面由左至右)分別為：MAP、Youtube、FB(如下圖)

您可以直接以滑鼠左鍵點選抓取後，直接放到您想排列的位置(如下圖)

原本的  元件內容列表  主標題  排列順序分別為：MAP、Youtube、FB

已調整為  元件內容列表  主標題  排列順序分別為：Youtube、MAP、FB(如下圖)，彈性調整操作依此類推~