WordPress網頁設計教學 – 開始設計你的網站
所需時間:11 mins
你將會學到:為網站建立首頁與部落格(Blog)頁面、更新網站的標誌(Logo)、圖標(Favicon)、橫額(Banner)及主要色彩(Theme Color)
————————————————————
開始使用WordPress去設計你的網站
太好了,我們已經安裝了網站的內容管理系統(簡稱CMS),亦已經為它安裝了佈景主題,及所需要的外掛。接下來就要開始建立網站的內容了!在這課堂,我們會開始設計網站首頁,上傳所需的媒體內容,還會為網站的基礎架設(例如網站的LOGO,主要顏色等)
為網站新增頁面
在使用Wordpress建立網站,我們首先要建立兩個頁面,第一個是網站的首頁,第二個是網站的部落格(Blog)頁面。
- 在網站的左上角,點擊網站的名稱回到Wordpress後台
- (新增首頁) 在左邊的欄位,點 頁面 > 新增頁面 > 在請輸入標題的位置,輸入 首頁 > 右邊的模板,選擇 網站首頁 > 發表
- (新增部落格頁面) 完成發表首頁後,在上方點 新增頁面 > 在請輸入標題的位置,輸入 部落格 > 發表
- 為確保已經新增這兩個頁面,在左邊欄點 頁面,查看首頁及部落格已經新增
上傳圖片到網站
我把網站所需用的圖片都上傳到Google Drive,你可以自行決定,是使用我提供的圖片,還是自行上傳所需圖片。
- 到 Google Drive 下載圖片
- 在網站的後台,左邊的欄位中點 媒體 > 新增檔案 > 點 選擇檔案
- 將剛才下載的圖片上傳到網站
- 檢查圖片是否已經上傳
更新網站的標誌和圖標
- 外觀 > 自訂 > 在下邊的位置點 首頁設定
- 選擇 靜態頁面 > 在首頁的欄位選擇 首頁 > 在文章列表頁面選擇 部落格 > 點 發表
這樣就可以指定網站的首頁和部落格的頁面,接下來… - 點 網站標題/標語/標誌 > 點上邊的 選擇圖片 > 在媒體庫選擇 網站的標誌 > 點 選擇圖片
- 點下邊的 選擇圖片 > 在媒體庫選擇 網站的圖標 > 裁切圖片到合適位置 > 點 裁切圖片
- 完成後點 發表
你可能會有疑問,到底標誌和圖片是什麼呢?
網站標誌(Logo),在這個教學中,它是展示在網站的左上角,當用戶點擊標誌的時候,就會回到首頁,如下圖:
網站圖標(Favicon),是在你瀏覽器上的小圖示,在下圖中,橙色箭咀的是加入了網站圖標,如果沒有加入網站圖標,預設的圖標就會是綠色箭咀的那個:
更新首面的背景圖片(Banner)
- 點 頁首區域 > 頁首投影片輪播 > 將投影片輪播速度改為 0
- 在第一張投影片的下方點 移除 > 再點 選擇圖片 > 選擇合適的圖片後,點 選擇圖片
- 輸入投影片的標題及子標題
- 拉到下面,更改行動召喚按鈕文字
- 完成後點發表
最後,是修改網站的主要色彩
- 色彩 > 一般 > 將主要色彩改為 #41a9d5
- 色彩 > 頁首 > 選單頁目(游標經過/停駐)改為 #e5e5e5
- 點發表
這樣,我們就完成了「WordPress網頁設計教學 – 開始設計你的網站」囉!
回顧一下在這一課我們做了什麼
- 建立了網站的首頁及部落格
- 把所需用的圖片上傳到網站
- 更新了網站的標誌(Logo)及圖標(Favicon)
- 更新了首頁的Banner
- 修改網站的主要色彩
做得很不錯啊!現在網站開始呈現我們的風格了,下一課,是時候開始編寫網站的內容了。如果你對這課內容不明白,可以Inbox我啊
下一課:
#3 在首頁加入「有關於我」