iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
嗨呦大家好我是 Jasmine~腦袋總是胡思亂想停不下來的設計師一枚\(✪ω✪)/

明天就是萬眾矚目的連假啦!!!(撒花

不過在迎接快樂的連假前,我們再來學一個功能吧!

今天要學的是我本人期待很久的「Blog」部落格功能,也就是我們網站上會放最多內容的地方(如果你是個人網站的話),可以在這裡放文章、照片、影片等等,這是我們網站的核心地帶,可要好好善待!(押

那麼我們就趕快開始這令人興奮的功能吧!

影片在這兒
Yes

影片精華版:

首先我們依照慣例先打開 Divi(如果你的網站還沒有 Blog 頁面的話要先新增一個呦!
https://ithelp.ithome.com.tw/upload/images/20200930/20121040sN71uA0jAt.png

點擊加號,選取「Blog」
https://ithelp.ithome.com.tw/upload/images/20200930/20121040JNFHLco0AY.png

這樣最基礎的部落格頁面就出來囉!
https://ithelp.ithome.com.tw/upload/images/20200930/20121040v09qIm8Zkh.png

接著點擊「Design」Tab,我們選「Layout」開始調整版面,將預設改為「Grid」(若你喜歡預設的排版之後也是可調回來~
https://ithelp.ithome.com.tw/upload/images/20200930/20121040JntCdUcllp.png

他就會變成這樣一塊一塊的,我自己覺得這個版面的好處是可以一次看到很多不同的文章,瀏覽者不用滑很久就可以找到有興趣的文章!
https://ithelp.ithome.com.tw/upload/images/20200930/20121040jyz8tGtl8q.png

然後左邊我們可以調整你想顯示多少篇文章、還有什麼類別的文章,對於想分頁面管理的人很方便!
https://ithelp.ithome.com.tw/upload/images/20200930/20121040OOXr1SktbH.png
https://ithelp.ithome.com.tw/upload/images/20200930/20121040i8An6RN1pz.png

接下來就可以來調整版面細節,像是你想不想再預覽畫面顯示作者、日期、文章分類等等,都可以自己選擇~
https://ithelp.ithome.com.tw/upload/images/20200930/2012104097U6N235jE.png

背景顏色當然也能換!還有滑鼠移過去會顯示的 Hover 狀態也可以改!
https://ithelp.ithome.com.tw/upload/images/20200930/20121040awGN8TBDQD.png
https://ithelp.ithome.com.tw/upload/images/20200930/20121040GKDanVvIxG.png

背景顏色當然也能換!還有滑鼠移過去會顯示的 Hover 狀態也可以改!
https://ithelp.ithome.com.tw/upload/images/20200930/20121040T8eciQNUcB.png
https://ithelp.ithome.com.tw/upload/images/20200930/201210401mBD0UKGzP.png

這樣就建好我們的部落格啦!484很有趣呢?我個人很喜歡這一課,可以製作自己喜歡的文章頁面很開心!

但大家要小心別調太久,花時間好好經營內容也很最重要呦!

我是 Jasmine,我們明天見ξ( ✿>◡❛)!

上一篇
Day 16|Divi 功能練習 08 Bar Counters Module 進度條設定
下一篇
Day 18|Divi 功能練習 10 Button Module 網頁按鈕設計
系列文
Divi Theme 真的那麼神嗎?WordPress 架站&傳說中最好用主題新手入坑日記!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言