在首頁展示過往企劃

Wordpress網頁設計教學 - 展示你的過往企劃在首頁#5 - 封面

WordPress網頁設計教學 – 展示你的過往企劃在首頁
所需時間:23 mins
你將會學到:如何建立圖片集、過往企劃內容,並在首頁加入互動式內容

————————————————————

在上一課,我們已經把產品及服務的內容加到首頁了,如果你還記得,我們是首先寫好了內容,再把內容新增到首頁。這課的WordPress網頁設計教學,我們要先在Wordpress的後台建立圖片集,再用圖片集建立內容,最後才把它加入到首頁。會比剛才上一課多一個步驟。

在Wordpress建立作品集,並把過往企劃新增到首頁

先建立起圖片集

  1. 在左上角點擊網站名稱回到後台 > MetaSilder > + New
  2. 更改 圖片集名稱
  3. 更改寛度 = 960 px, 高度為540 px
  4. 點 添加幻燈片 > 按著 Ctrl 選擇所需圖片 > Add to slideshow
  5. 保存

重覆以上的步驟,把所有圖片集加進MetaSilder,這個教學影片的五個圖片集名稱分別是:婚禮攝影,人像攝影,影片後製,司儀工作及其他攝影。

把圖片集放進過往企劃當中

  1. 點Projects > Add New Project > 輸入企劃名稱
  2. Add Slider > 選擇相關的圖片集 > Insert Slideshow
  3. 在文字框輸入這個企劃的相關資料
  4. 點 新增分類 > 輸入攝影工作 > 新增分類
  5. 文章屬性 > 相容於各款頁面編輯器
  6. Featured Image > Set featured image > 選擇最能代表該企劃的圖片
  7. 發表

請繼續把其他的圖片集加入到相關的企劃中

企劃名稱   /   相關作品集   /    所屬分類
婚禮攝影   /      婚禮攝影    /    攝影工作
影片後製   /      影片後製    /    攝影工作,影片後製
司儀工作   /      司儀工作    /    司儀工作
人像攝影   /      人像攝影    /    攝影工作,影片後製
其他攝影   /      其他攝影    /    攝影工作,影片後製

之後的工作,是要把分類的名稱改為英文

  1. 選擇 Projects下的分類 > 快速編輯 > 將代稱改為英文 > 完成更改後點 更新分類
  2. 司儀工作 = public-speak,影片後製 = video-edit,攝影工作 = photo-take

最後,就是要把過往企劃加入到首頁當中

  1. 頁面 > 首頁 > Add Row > Set row layout = 1
  2. Layout > Row Layout = Full Width Stretched
  3. Design > Background  Color = #f5f5f5 > Insert
  4. Add Widget > SiteOrigin Editor > Edit > 在文字框輸入 過往企劃 >  設為 標題2 > 置中 > Done
  5. Add Widget > Sydney 佈景主題小工具 > Sydney FP: 作品集 > Edit >
  6. 確保 顯示導覽篩選條件 和 顯示專案資訊標題 打鈎 >
  7. 輸入分類的英文 (public-speak, video-edit. photo-take) > Done
  8. Add Widget > All Widgets > SiteOrigin Button > Edit >
  9. Button Text = 聯絡我們 > Destination URL = m.me/yourpagename > 打鈎 Open in a new window
  10. Icon > Choose Icon > 選擇合適的Icon (本教學使用 Font Awesome的Facebook Icon)
  11. Design and layout > Button theme = Wire > Done
  12. 更新

當我們回到首頁,並點進過往企劃裏面去查看的時候,你會發現在頂部有一個背景圖,如果想要移除他,其實也是很簡單的。

  1. 在首頁點上方的 自訂 > 頁首區域 > 頁首類型 >
  2. 在下面網站頁首類型更改為 無首頁,僅有選單 >
  3. 發表

就這樣,我們就完成了所過往企劃這一部份的設置了。我相信你已經開始掌握用Wordpress建站的方式了,讓我們繼續下去。如果你對這課有任何問題,記得可以Inbox問我啊

下一課:
#6 使用佈景主題工具在首頁展示相關數據