這篇將和Divi主題的使用者們，快速分享Divi Breadcrumbs外掛的使用方式。其實要做到Breadcrumbs麵包屑導覽的效果，方式很多種。前一篇有分享過使用RankMath的方式來達成，但使用Rank Math的方式，可以編輯調整的效果就有限。所以，利用Breadcrumbs專用的外掛就能輕鬆修改囉。
內容快速索引
二種方式進行下載與安裝。
①從WordPress Plugin網站直接下載後安裝，點擊下方Get this plugin下載即可。
②從WordPress外掛安裝的地方，直接安裝至WordPress後台。
- 關鍵字的地方輸入 Divi Breadcurmbs，就會在下方看到外掛名稱。
- 點擊安裝並啟用。
上述二個方式就可簡單進行外掛的安裝。
設置於Divi Theme Builder之中
- 點選DIVI裡的Theme Builder
- 到指定頁面中，客製頁面(Custom Body)進行設置
這裡為什麼Joyy會是在Theme Builder進行設置，而不是在上面【頁面】的地方執行。原因如下：
理由1：Theme Builder可以直接針對頁面、文章等，進行模組化設置，我只需要設置好版型、版面後，之後所有相關指定的頁面、文章，就可以一次性套用，我不用再一頁頁或一篇篇的去調整與修正。這正是我愛用Divi的原因之一。
理由2：基本頁面我只有把「內容」設置於頁面之中，所以只要內容放置後，用Theme Builder去設置，就算日後Divi主題出現什麼問題，或是我更換其他佈景主題，頂多就是「呈現內容」而已，並不會讓頁面被Divi主題綁架，而出現奇怪的畫面給訪客看到。
Divi主題真的超好用，Joyy誠心推薦 → Divi主題下載
(30天內使用不滿意，可隨時退款)
適當位置上插入物件
通常Breadcurmbs網站導覽列，會顯示在【標題】的下方，沒有絕對的位置，單純看你對於版面上的設置，設計的人覺得怎麼放置怎麼好看。Joyy我是建議放在標題下方，但如果這一頁面無需導覽的話，是不用去裝設定。
插入物件外掛後，未進行設置時會顯示如上圖的樣子。
在Content裡的Text，可以將Home Text改成你想呈現的說明，我是打上『首頁』這二字。
在Before Text上，亦可再加上字，如果加上 ‘ABC’ 的話，則會呈現出 ‘ABC’ 首頁 。
PS,在這裡呈現出來的ABC是沒有 Link效果的喔，只有 ‘首頁’ 才有。
Content裡的Icon具有二種設定。
- Separator Icon：分隔圖示，上圖①的地方，可以看到，我選用的是向右的箭頭，這個設定是用來做分隔圖示的。
- Add Before Icon：加入文字前圖示，上圖②的部分，就是用來設定位於 Home Text前的圖示顯示。可以在Search Icons裡輸入英文的類似文字進行查找。像我打上 ‘Home’ 就會出現房子的圖示。
在次一頁裡的Design中，即是針對物件的『外觀』進行設置。這部份即依個人的設置喜好進行調整就可以囉。
上圖就是使用後的範例。
建議設定的相關設定如下，有需要的人可以直接參考：
Content：
- Home Text：首頁
- Separator Icon：黑色右箭頭
- Add Before Icon：Yes
- Before Icon：Home
Design：
- Module Font Weight：Semi Bold
- Module Text Alignment：置中(Center)
- Module Text Color：白色 (#ffffff )
設定的條件和方式，當然是以目前設計的背景與整體網站色系一致為主，這樣才不會讓訪客看起來有眼花撩亂的感覺喔。
Divi主題使用推薦
如果你正在找尋更好的佈景主題，我推薦使用Divi，雖然這目前在台灣許多的使用者來說，並非熱門。但我從2016年使用至今，也建置過不少網站，都是使用Divi來進行的。主要還是因為他有lifetime(終身授權)，換算下來真很便宜。
有部分使用者對於如果是主機資源稍差的部分，在用Divi時會特別卡。但如果和我一樣，是使用Cloudways這種高CP值的主機，個人認為完全沒有差別，Divi還是真的超好用Der。
推薦連結→DIVI (30天內使用不滿意，可隨時退款)
如果你有想要試用看看，亦可留言與我聯絡喔。
▲ 讓你擁有一個能帶來現金流的網路賺錢基地，建立網路收入之路，實踐打造網路賺錢基地的策略與技巧 !
其他 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的話，就可以透過簡易的方式直接來建立囉。
0 Comments