3個情境
設計好看的網頁封面

如果網頁少了封面，視覺上就和放在網站上的文件一樣
網頁與網頁之間缺少關聯、無法從視覺看出和哪個主題相關聯、甚是是哪一檔活動?

我們整理了使用者在設計網頁時最常製作的封面圖
透過三個情境教你正確使用編輯器元件、發揮封面的最大效果

情境一

你已經把網頁、活動詳情都做在圖片上了

你已經做好一張完整的主視覺圖片
圖片含有文字資訊(像是: 網頁標題、活動時間等等...)

不要再用文字 T元件來設定背景了!!!!!!
請直接選擇圖片元件當作封面!!!

文字版塊區塊大小以文字為主
即使開了「區塊滿版」選項、也是以螢幕的高度為主
圖片的寬度會隨著高度比例調整
背景圖片的四周就容易跑版

使用圖片元件可以確保你放在圖片上的資訊不會因為不同裝置的螢幕大小、比例而跑版
也可以維持原本設計時的構圖巧思

記得也要設計一張適合手機比例的同系列主視覺圖喔

情境二

你有網頁或活動的主視覺素材或Logo，但還需要加上其他資訊

你只有活動的一張主視覺或活動Logo等等
其他資訊如時間及文字資訊還要打字加上

透過文字 T元件放上圖片、然後打字加入文字、最後設定背景
你可以開啟「區塊滿版」選項 或
如不開啟區塊滿版，可增加文字的行數把背景圖的高度撐開

將文字從圖片中隔離出來，好處是: 這些文字將可以被搜尋引擎爬蟲讀取
有機會可以透過這些關鍵字多一些自來客流量

記得檢查主視覺圖在手機上的呈現，可另外上傳一張適合手機的圖

情境三

你沒有任何主視覺、Logo，手上只有文字、活動資訊

如果你要做一頁網頁，但手上只有：
網頁標題、文字內容，可能還有個情境圖(?)

你可以使用文字 T元件，打字放上文字後加入背景
找張適合的情境圖非常重要，你可以透過幾個圖庫找到相對應的圖片，
也可以使用單色、漸層的方式製作底色

建議挑選一張沒有特別主題的氛圍圖做為背景圖，PC手機都好看

文字 + 影片背景