LIFE JOURNAL
【Elementor Post Info】用 Elementor 打造寫作平台:設計個人文章資訊
這篇文章將教你如何使用Elementor輕鬆打造個人文章資訊,提升讀者的興趣與使用體驗。無論是作者還是專業人士,透過設計文章資訊欄讓你的網站更加專業與吸引人,滿足讀者對內容的需求。

Elementor 肯定是WordPress 編輯器最受歡迎的其中之一,有超過 5百萬人次的下載和 5000多個五星評價。
本文花三分鐘教大家用 Elementor 來打造個人的文章資訊,資訊內可以放上社群或是讚助之類的功能。
來提高讀者對你的興趣和使用體驗,一定很有趣。
給他看下去…
#1 什麼是 Elementor Post Info 文章資訊?
我們常在文章的上方可以看到「文章資訊」,這是用來提供讀者內容資訊的一種功能。常用功能有:
- 作者
- 發佈時間
- 留言
- 閱讀數量
也可以依你的專業或你的目的放上各種功能;例如你是個作者:
- 訂閱文章
- 社群
- 我的書
如果你是個專業人員,那你可以放上:
- 作品集連結
- 個人經歷等
所以我們喜歡在「文章資訊欄」放上「文章資訊」加上希望讀者會看到「價值連結」。
#2 Elementor 編輯版面配置及功能
先插入個三個洞的版面
我們會用到的功能有:
- 圖片
- 標題
- 文章資訊 ( Elementor Pro 功能,更多功能介紹請上官網 )
大叔習慣先放上功能,再來調整設計,這樣的好處就是我們預先思考這件事情「我們想要用戶看到什麼?」
也就是先發想再找可行性。
#3 內容修改
再來更改功能裡的內容。
-
圖片換你的大頭照片;建議圖片比例為1比1,這樣好處為如果要改成圓型大頭照的話也可以使用。像是這樣:
-
標題改為「個人名稱」;大叔就改為菈喜大叔
-
文章資訊 ( 中間 )
中間想放入文章的相關資訊。
-
文章資訊 ( 後面 )
在後面大叔想放上社群及請我喝咖啡的連結。
自訂 URL 請記得放上自己的網址位置喔。
現在可能長的像是這個樣子,接下來我們要做版面做設計調整。
#4 版面調整
我們將調整版面,調整內容有:
- 編輯 段
- 內容寬度 - 方框 800px
- Vertical Align - 中央
- 欄寬度 15 -35 -50 %
- 標題
- 字體顏色 - #6D7C69
- HTML 標籤 - H4
- 編輯 文章資訊 ( 中間 )
- 字體 16px
- 編輯 文章資訊 ( 後面 )
- 字體 16px
- 對齊 - END
- 分隔線 - 開
- 之間的間距 - 20px
- 內縮 - 10px
- 字體顏色 - #6D7C69
最後修改完,應該會像是下面這樣,請記得這件事。
你應該試著找出適合自己的版型,因為這是你自己的寫作平台,表示你的個性及風格。
心得 & 總結
Elementor 真的是很好上手的網頁編輯軟體,如果你也想打造自己的寫作平台,強調自己的特性和優點,讓網站有個性和專業性。
大叔目前網站也是使用【Elementor Pro】設計的,如果你對這套工具有什麼問題,都可以在下面留言發問,如果我可以為你服務的話,這是我的榮幸。

Editor
瘦桑
MO Design Studio 共同創辦人。關注設計 × 工程的平衡協作,擅長以簡潔語言說故事。
延伸閱讀

Elementor AI Site Planner 教學:快速打造專業 WordPress 網站與提升 UIUX 體驗
想快速打造專業的 WordPress 網站卻苦於缺乏設計與技術背景嗎?使用 Elementor AI Site Planner,您可以輕鬆規劃網站結構、生成文案和設計線框,讓建站過程更高效無憂,提升網站的 UI/UX 體驗,無需繁瑣的手動操作。

你的網站在手機跑版了嗎?如何使用 Elementor 打造 RWD 響應式網頁設計
在這篇文章中,我們將探討響應式網頁設計(RWD)的重要性,並指導您如何使用 Elementor 工具來創建兼容各種設備的網頁,解決手機跑版的問題,讓您的網站在任何螢幕上都能完美展示,提升使用者體驗。

如何使用 Elementor Pro 打造動態內容? Header | Preloader | Form | Popup
在這篇文章中,我們將指導你如何使用 Elementor Pro 創建動態內容,包括自定義標頭、彈出式視窗和表單,這些都是提升網站用戶體驗的關鍵元素。無論你是設計新標頭,還是想要吸引訪客的彈出式窗口,甚至是收集用戶資料的表單,這篇指南都將幫助你輕鬆解決這些痛點,讓你的網站更具吸引力和功能性。
