Divi主題在安裝完畢之後,在於WordPress後台上的設定項目滿多的。一般我們都是使用預設的設定項目。我在這篇文章中,將會特別針對Divi主題中的General頁進行說明。讓你可以了解,他用來設定哪些的功能,並且讓你自己選擇最適合自己的設定。
內容快速索引
- Logo (標識)
- Fixed Navigation Bar(固定導航列)
- Enable Divi Gallery (啟用Divi圖庫)
- Color Pickers Default Palette (顏色選取預設色板)
- Grab the first post image (以文章第一張圖片做為縮圖)
- Blog Style Mode (Blog模式)
- Sidebar Layout (側邊欄佈局)
- Google API Key (Google API金鑰)
- Use Google Fonts (使用Google字體)
- Social(社交媒體設定)
- 預設顯示頁數
- Date format (日期格式)
- Use excerpts when defined ( 使用摘要定義 )
- Back To Top Button (回到頂部)
- Smooth Scrolling (平滑移動)
- Disable Translations (禁用翻釋)
- Enable Responsive Images ( 啟用響應式圖片 )
- Custom CSS ( 自定義CSS )
- Performance Tab ( 性能表現頁 )
- Divi主題 一般設置 結語
- 其他 Divi 相關教學文章推薦
Logo (標識)

這裡是用來上傳網站Logo的,點擊UPLOAD,選擇欲做為網站裡的Logo標識即可。

上傳logo

會出現上傳後的網址路徑,這時要記得按下Save Changes

在網站頁頭導覽的地方,就會看到上傳好的Logo囉。

這個設定,預設是開啟的,開啟後,使用的導航列,就會固定在最上方。

上圖紅框處導航列,就會固定在上方,如果取消,則不會固定。
Enable Divi Gallery (啟用Divi圖庫)

在WordPress中,針對圖庫都會有預設的展示方式。啟用這個的話,另開的圖片將會有『燈箱』效果。

這功能比較奇怪 … Joyy 在 Divi 主題使用時,無法在文章 ( Post ) 啟用這功能。目前我是覺得有開啟和沒開啟是一樣的,上圖圖片是參考自 DiviCake 網站的圖片說明。
Color Pickers Default Palette (顏色選取預設色板)

預色的顏色選擇,可以設定8組。

點取顏色圖塊,就可以進行色碼的修改。
如果不知道怎麼為自己的網站做顏色的搭配,可以參考這個網站:https://coolors.co/
Grab the first post image (以文章第一張圖片做為縮圖)

啟用這個功能的話,文章在縮圖的使用上,將會以「第一張」圖片為主。
使用 Divi 主題,通常在寫作文章時,我仍是使用預設的文章編緝器方式來進行,所以一定會設定「精選圖片」。這個功能我通常不會使用,你可以依你在 Divi 主題上使用的習慣來決定是否開啟。
Blog Style Mode (Blog模式)

是否開啟 Blog 模式。以下我列出有啟用和沒啟用的差別。

沒啟用時,在文章列表的頁面,出現在 Blog 內的文章,就只會顯示內容摘要的部分。

啟用後,將會顯示出完整的內容。
在 Divi 主題裡,Joyy 不建議這個開啟。我建議是使用 Divi Theme Builder 去客製化個人的 Blog 頁,在這更能客製化出更美觀的頁面。

在此可以將預設的側邊欄,設定於右側 ( Right Sidebar ) 或左側 ( Left Sidebar )。
Joyy 在 Divi 主題的做法仍是用 Divi Theme Builder 去客製化。
Google API Key (Google API金鑰)

Google API Key 這裡用來放置申請好的 Google API 金鑰。有這個 API 金鑰,就可以將自己的網站與 Google 的服務功能做結合,是個很方便的功能。前題是你需要先到 Google Cloud 建立相關專案才可以使用。
另外在 Enqueue Google Maps Script ( 駐列 Google 地圖腳本 ),建議是開啟,這可以讓我們在不使用 Google API Key 的情況下,可以直接插入 Google 內嵌地圖的功能。
Use Google Fonts (使用Google字體)

在 Divi 主題中,啟用 Google 字體,將會協助我們在編輯時,使用多項 Google 字體。
Google Fonts Subsets 是字體集,建議開啟,這是專門提供給非英語系的網站所使用的功能喔。

這個設定就很明確了,就是用來設定社群媒體的相關連結。
預設顯示頁數

這裡是如果你使用預設的 Divi 主題後,在文章或是購物車的頁數上,基本的顯示數量。
這功能完全是用來針對「預設頁面的顯示數」。
一般進階的 Divi 主題使用者,都會使用 Theme Builder 去客製出「模版」來進行設置。
建議這裡不需要進行任何更動。
Date format (日期格式)

用來設定日期預設格式使用的。在 Divi 主題中,預設是使用 M j,Y

提供可以進行設定的格式,讓你參考看看。
- F j, Y g:i a – November 6, 2010 12:50 am
- F j, Y – November 6, 2010
- F, Y – November, 2010
- g:i a – 12:50 am
- g:i:s a – 12:50:48 am
- l, F jS, Y – Saturday, November 6th, 2010
- M j, Y @ G:i – Nov 6, 2010 @ 0:50
- Y/m/d \a\t g:i A – 2010/11/06 at 12:50 AM
- Y/m/d \a\t g:ia – 2010/11/06 at 12:50am
- Y/m/d g:i:s A – 2010/11/06 12:50:48 AM
- Y/m/d – 2010/11/06
也可以自訂格式,例如:Y 年 m 月 d 日 ( 將中文置入 )
Use excerpts when defined ( 使用摘要定義 )

這個功能如果沒有開啟,在看到 Blog 內容時,會以內容前幾行做為預覽。

上圖就是 Blog 內容預覽的地方。

如果有開啟,並設定摘要內容的話。

顯示摘要定義的好處,可以幫助文章先做摘要重點填寫,增加訪客的點擊。也因為通常不會在文章開頭寫太多細節,建議這功能要開啟。
開啟後,有填寫摘要,將會顯示摘要為優先,若沒有填寫摘要,則以文章開頭內容為預覽。
若沒有開啟,就算有寫摘要,也將無法讓 Blog 文章先顯示摘要,而只會顯示文章開頭前面的文字。

回到頂部功能,建議開啟,這個很好用。
後續文章將會加入目錄時,這個就可以讓讀者快速回到頂部。

啟用後,會在網站右邊,看到一個灰色的向上按鍵。
Smooth Scrolling (平滑移動)

開啟後,這可以幫助網站在移動頂部,若有設置標記時,平滑的移動,建議開啟。
Disable Translations (禁用翻釋)

這功能主要在幫助網頁提供翻譯功能。
如果你是建置「多語系內容」網站,就是有提供其他翻譯後的語系,則建議開啟功能。
如果沒有設置「多語系內容」,保持關閉即可,即指交給 Google 或其他使用者的環境自行翻釋。
Enable Responsive Images ( 啟用響應式圖片 )

啟用這功能,在網頁上的圖片、照片即會依訪客所持裝置的不用,呈現適合的視覺大小。建議開啟。
Custom CSS ( 自定義CSS )

這裡可以依你的需求,自定義 CSS 的相關語法,放置於此,適合進階使用者使用。
Performance Tab ( 性能表現頁 )

在另一頁的 Performance,主要加載了 Divi 主題有關一些 CSS、JavaScript 等等的設定。建議是保持原本的預設值即可。若有調整的話,也請務必至你自的頁面上,一頁頁確認功能是否正常。
Divi主題 一般設置 結語
在這裡整理的內容,主要幫助一些不清楚怎麼使用的朋友,可以有一個參考使用的地方。若有其他問題,也歡迎你在下方留言的地方,留言讓我知道。
希望整理這個的使用內容,有幫助到你更進一步了解 Divi 主題的使用。
Divi 主題真的是個很好用的佈景主題,我也有將 Divi 的使用製成影音教學,如果有興趣,可以到這裡來參考。WordPress 網站建置影音教學
Divi 主題聯盟行銷使用推薦:Divi主題購買推薦(Affiliate Link)
▲ 讓你擁有一個能帶來現金流的網路賺錢基地,建立網路收入之路,實踐打造網路賺錢基地的策略與技巧 !
其他 Divi 相關教學文章推薦
- 【Divi教學】Divi主題 SEO 基礎設定說明,簡易SEO功能介紹Divi主題之中,針對SEO的功能有著其基礎設定。在這次divi教學裡,將會教會你如何將divi主題裡的SEO功能進行基礎設定,這在divi教學中可則是非常基礎的一課。了解基礎設定後,後續若要使用其他SEO外掛,也就更能明白為什麼需要如此設定。你也可以選擇直接使用SEO外掛,在divi主題中,可以直接與外掛相支援。
- 【Divi教學】Divi主題 Navigation 導航選項設定Divi主題之下,可以透過原本的divi主題設定,來決定導航列(Navigation)所能夠呈現的功能。在這篇文章中,將詳細和你說明在Divi主題下的設定中,導航列的所有相關設定方式。
- 【Divi教學】Divi主題Options基本設置選項教學在divi主題中,由於沒有中文版本,有中文的版本在使用上常遇到更新就變的無法使用。 在這整理divi主題的使用細節,來幫助更多喜好使用divi主題的人,可以有一個正常參考的地方。 文章在一樓喔
- 【Divi教學】Divi表單如何設定Google reCAPTCHA還在煩惱網站中的表單被人亂留言、亂輸入資訊而打優嗎?使用Google提供的服務reCAPTCHA就可以有效防止,簡單的設定步驟,在這篇完整教會你!
- 【Divi教學】Divi Breadcrumbs外掛使用教學Divi這個強大的佈景主題,簡單幾步驟,就可以完成一個頁面或文章的導覽(Breadcrumbs)設定,只要使用Divi Breadcrumbs就能搞定,不清楚怎麼設定嗎?看這篇就搞定!
- 如何在使用 Divi 主題下,使用 RankMath 建立 BreadcrumbsDivi這個佈景主題,並沒有內建可以建立Breadcrumbs的功能。都需要另外安裝外掛才可以進行。但如果你本身有在使用RankMath的話,就可以透過簡易的方式直接來建立囉。