1. Home
  2. Docs
  3. 一般設定
  4. 網站設定
  5. 首頁Banner

首頁Banner

系統導航 →網站設定→首頁Banner

首頁Banner (首頁輪播廣告)的用途說明:

管理者可自行設計Banner(廣告圖片)後將圖片上傳至後台,將顯示於網校首頁。亦可自行為圖片加上連結,引導學員觀看更多活動訊息。

Banner特別說明:因網校是RWD響應式網頁的設計,會依據實際使用之裝置顯示比例,自動將圖片進行縮放與切割,例如以手機瀏覽時,即有裁切狀況產生,如需避免裁切掉的是重要文字內容與主視覺,建議將主要設計之視覺元素擺放於中央位置,以避免不同裝置顯示比例之些微差距造成的影響(如下方示意圖)。

首頁Banner示意圖
首頁Banner示意圖

【⚙首頁 Banner】設定方式:

進入後台時左列出現”系統導航” 選單,展開【⚙網站設定】→【首頁Banner】,管理者可建置網校宣傳用Banner(橫幅廣告)並添加連結,以推廣重點課程或主打活動。

首頁Banner設定步驟_操作示意圖
首頁Banner設定步驟_操作示意圖

狀態

此欄顯示”正常”時,該筆Banner圖式,會按照管理者設定模式,於學員瀏覽網頁使用的電腦或手機正常顯示。若欄位顯示”封鎖”,則該筆Banner圖式將無法按設定顯示於學員網頁瀏覽狀態中,如需更改封鎖狀態,點選右側的【🔓】即可解除封鎖狀態。

推薦順序

管理者在網校如設置兩個以上的Banner要輪播時,可使用此欄位建置推薦順序,於學員瀏覽網校頁面時,即會按照推薦順序輪播呈現。

標題

此欄位顯示為管理者進行添加Banner時,所設定的標題文字,在首頁輪播時將會顯示於圖片上。

連結

此欄位顯示為管理者進行添加Banner時,所設定的連結位置,透過Banner播放圖片時,學員點選圖片即可連到指定的網站。

顯示於電腦與橫式手機

管理者設置Banner圖式時,將此選項作勾選,學員在使用電腦或手機螢幕橫式播放時,該筆Banner圖式即可顯示播放。

✽請注意! Banner圖片規格建議尺寸為16:9,並每張大小不得超過5M,以保持最佳瀏覽效果。

顯示於直式手機

管理者設置Banner圖式時,將此選項作勾選,學員在使用手機螢幕為直式觀看模式時,該筆Banner圖式即可顯示播放。

✽備註:目前直式圖片規格暫未有建議比例,若管理者在設定圖片規格時,是以電腦與手機橫式播放為設定,亦可兩種模式都勾選,讓學員在電腦與手機橫放直放都可觀看同一款Banner圖式。

【+添加 Banner】:

管理者點選【+添加 Banner】按鈕後,會跳出”新增”頁面,可進行編輯Banner相關內容。依序編輯下方各項欄位

標題(必填):

管理者編輯的Banner標題文字,在首頁輪播時將會顯示於圖片上。

圖片替代文字(必填):

管理者可自行編輯Banner圖卡的”圖片替代文字”欄位,讓搜尋引擎可以對該圖片進行索引(index)動作,可增加該堂課程的搜尋曝光率。

連結(非必填):

管理者若在此提供網站連結,透過Banner播放圖片時,學員點選圖片即可連到指定的網站。

首頁是否顯示標題:

此欄位系統預設值為【否】,可預先做多組不同Banner圖片設定,或可於特定活動期間再開啟使用。

新開窗口:

此欄位預設值【否】,若需要學員另開網頁視窗進行瀏覽動作,可直接點選改為【是】。

選項功能說明:

(1)【🖍修改編輯】按鈕:

管理者可將已新增的Banner進行文字內容編輯修改。

(2)【圖片編輯】按鈕:

當新增Banner文字內容完成後,可點選【圖片編輯】按鈕進行上傳Banner使用的圖片。

✽ 建議Banner圖片規格設計尺寸: 16:9,且圖片每張大小不得超過5M。才能保持最佳瀏覽效果。

(3)【🔒封鎖】按鈕:

已增加到網頁中的Banner,若暫不需要做輪播時,可使用封鎖功能,就不會出現在網校頁面(置頂),等需要使用時,再點選該圖示一次即可解除封鎖。

(4)【🗑刪除】按鈕:

已增加到網頁中的Banner,若確定不再使用相關圖片資訊,可點選【🗑刪除】按鈕移除此指定的Banner圖檔。

最佳Banner 設計方式(操作範例):

首頁Banner_網頁觀看時_示意圖
首頁Banner_設計原圖_示意圖
首頁Banner_設計原圖_示意圖
  1. 在banner圖檔左右空出留白處,如以上範例所示,可避免重要資訊被裁掉(如上方示意圖)。
  2. 若左右不留白,則儘量將重要訊息置中。(可參考下圖,上圖(一)為網頁觀看效果,下圖(二)為原始設計檔案)
  3. 新增首頁Banner:系統導航 -> 網站設定 -> 首頁Banner 
  4. 【+ 添加Banner】請參考上方【首頁Banner設定】操作步驟。
首頁Banner_網頁瀏覽(2)_示意圖
上圖(一)
首頁Banner_設計原圖(2)_示意圖
下圖(二)