GeneratePress:如何製作文章頁的大型圖片頭版?

這是 GeneratePress 系列的線上教學文章,內容都是從我購買 GP Premium 後到現在的經驗編寫而成。
標題可能沒辦法表達我們要做的效果,所以我們用 GeneratePress 官方首頁的影片來展示。

請直接轉到 0:28,經過一系列的動作完成的效果就是我們這篇文章要說明的。

啟用 Elements 模組

先安裝好 GeneratePressGP Premium,再進入 外觀 > GeneratePress 啟用 Elements 模組。

2020 04 20 12 30 01 GeneratePress ‹ WP 外掛測試 — WordPress

設置 Elements 頭版

第一步 進入 外觀 > Elements,新增一個 Header 設定檔。

image 40

第二步 並輸入以下程式碼,讓頭版可以顯示文章標題、作者與發表時間。

<h1>
	{{post_title}}
</h1>
<div>
	{{post_author}} | {{post_date}}
</div>

第三步 往下滾動到 Page Hero,設置適當的內距,並調整 Background Image 為 Featured Image,讓頭版自動取用特色圖片。

2020 04 20 14 11 04 Edit Element ‹ WP 外掛測試 — WordPress

第四步 往下繼續設定,勾選 Background Overlay 開啟顏色覆蓋,並設定大約 0.5 透明度的顏色給他,再調整文字為合適的色彩。

2020 04 20 14 07 07 Edit Element ‹ WP 外掛測試 — WordPress

第五步 最後切換到 Display Rules,在 Location 新增一條 All 文章 的顯示規則 (如圖)。

2020 04 20 13 57 05 Edit Element ‹ WP 外掛測試 — WordPress

現在的文章頁面已經有頭版了,只不過我會想再把它做得更好看,我們繼續調整。

2020 04 20 14 08 18 Everything is Honey – WP 外掛測試

第六步 切換到 Site Header,調整以下資訊:(色彩搭配依個人喜好)

Merge with ContentMerge
Header Backgroundrgba(10,10,10,0)
Site Title自訂網站名稱顏色
Site Tagline自訂網站副標題顏色
Navigation LocationFloat Right
Navigation Backgroundrgba(10,10,10,0)

頭版設置預覽

基本的圖片頭版設定就是這樣了,剩下調整一下佈景主題自訂、對齊方式、字體後就能快速產高品質的文章頁面。

2020 04 20 14 34 12 Everything is Honey – WP 外掛測試
訂閱
Notify of
guest
0 留言
Inline Feedbacks
檢視所有留言