Divi教學-Divi-Breadcrumbs外掛使用教學

【Divi教學】Divi Breadcrumbs外掛使用教學

作者:Joyy 志強

發佈日期:2022 年 05 月 06 日

首頁 E Divi 教學 E 【Divi教學】Divi Breadcrumbs外掛使用教學

這篇將和Divi主題的使用者們,快速分享Divi Breadcrumbs外掛的使用方式。其實要做到Breadcrumbs麵包屑導覽的效果,方式很多種。前一篇有分享過使用RankMath的方式來達成,但使用Rank Math的方式,可以編輯調整的效果就有限。所以,利用Breadcrumbs專用的外掛就能輕鬆修改囉。

下載Divi Breadcrumbs並安裝

二種方式進行下載與安裝。

①從WordPress Plugin網站直接下載後安裝,點擊下方Get this plugin下載即可。

②從WordPress外掛安裝的地方,直接安裝至WordPress後台。

Divi Breadcrumbs的使用方法_01
  1. 關鍵字的地方輸入 Divi Breadcurmbs,就會在下方看到外掛名稱。
  2. 點擊安裝並啟用。

上述二個方式就可簡單進行外掛的安裝。

設置於Divi Theme Builder之中

Divi Breadcrumbs的使用方法_02
  1. 點選DIVI裡的Theme Builder
  2. 到指定頁面中,客製頁面(Custom Body)進行設置

這裡為什麼Joyy會是在Theme Builder進行設置,而不是在上面【頁面】的地方執行。原因如下:

理由1:Theme Builder可以直接針對頁面、文章等,進行模組化設置,我只需要設置好版型、版面後,之後所有相關指定的頁面、文章,就可以一次性套用,我不用再一頁頁或一篇篇的去調整與修正。這正是我愛用Divi的原因之一。

理由2:基本頁面我只有把「內容」設置於頁面之中,所以只要內容放置後,用Theme Builder去設置,就算日後Divi主題出現什麼問題,或是我更換其他佈景主題,頂多就是「呈現內容」而已,並不會讓頁面被Divi主題綁架,而出現奇怪的畫面給訪客看到。

Divi主題真的超好用,Joyy誠心推薦 → Divi主題下載
(30天內使用不滿意,可隨時退款)

適當位置上插入物件

Divi Breadcrumbs的使用方法_03

通常Breadcurmbs網站導覽列,會顯示在【標題】的下方,沒有絕對的位置,單純看你對於版面上的設置,設計的人覺得怎麼放置怎麼好看。Joyy我是建議放在標題下方,但如果這一頁面無需導覽的話,是不用去裝設定。

Divi Breadcrumbs設定方式

Divi Breadcrumbs的使用方法_04

插入物件外掛後,未進行設置時會顯示如上圖的樣子。

在Content裡的Text,可以將Home Text改成你想呈現的說明,我是打上『首頁』這二字。

在Before Text上,亦可再加上字,如果加上 ‘ABC’ 的話,則會呈現出 ‘ABC’ 首頁 。

PS,在這裡呈現出來的ABC是沒有 Link效果的喔,只有 ‘首頁’ 才有。

Divi Breadcrumbs的使用方法_05

Content裡的Icon具有二種設定。

  1. Separator Icon:分隔圖示,上圖①的地方,可以看到,我選用的是向右的箭頭,這個設定是用來做分隔圖示的。
  2. Add Before Icon:加入文字前圖示,上圖②的部分,就是用來設定位於 Home Text前的圖示顯示。可以在Search Icons裡輸入英文的類似文字進行查找。像我打上 ‘Home’ 就會出現房子的圖示。
Divi Breadcrumbs的使用方法_06

在次一頁裡的Design中,即是針對物件的『外觀』進行設置。這部份即依個人的設置喜好進行調整就可以囉。

Divi Breadcrumbs設定範例與建議設定

Divi Breadcrumbs的使用方法_07

上圖就是使用後的範例。

建議設定的相關設定如下,有需要的人可以直接參考:

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主題 Navigation 導航選項設定

【Divi教學】Divi主題Options基本設置選項教學

【Divi教學】Divi表單如何設定Google reCAPTCHA

推薦閱讀 ▼

【教學】Cloudways Staging Site 使用方式介紹 ! 讓你更新網站內容更方便 !

【教學】Cloudways Staging Site 使用方式介紹 ! 讓你更新網站內容更方便 !

Staging Site 又稱之為臨時網站,之前在 Joyy 使用 Siteground 時,就已經知道這個功能。後來在協助其他客戶進行網站建置時,由於需要大改版 … 就是連同佈景主題這種大調整,可能無法在短時間進行修改的狀況。有這個 Staging Site 的功能,就可以滿足這個狀況 ! 可以放心修改,在修改好之後,再與原本的網站進行更新即可。可以說是非常實用的功能喔 ! 在這篇教學內容,將是以 Cloudways 的主機進行說明。如果你還沒有開始使用 Cloudways 的主機,或是在評估是否要更換使用 Cloudways...

【教學】Post SMTP 使用方式 ! 讓建製的 WordPress 網站可以進行郵件寄送 !

【教學】Post SMTP 使用方式 ! 讓建製的 WordPress 網站可以進行郵件寄送 !

使用 Post SMTP 這個寄件外掛,可以幫助你的網站進行郵件的發送,Post SMTP 是一套非常簡單使用,功能又特別強大的一個寄件外掛,讓你的 WordPress 網站,可以讓訪客在網站上完成某些動作時,即進行郵件的推播與發送,進而維持好與訪客之間的互動。Post SMTP 的設定方式很簡單,接下來就帶你來一步步完成吧 ! Post SMTP 外掛設定前的準備 要讓網站可以寄件,最主要的就是要先準備好一個屬於網站專用的域名信箱。而域名信用的取得方式通常有在購買域名時,域名服務商會進行贈送 ( 例如 Gandi.net...

【教學】Cloudways 如何設定域名信箱 Domain Mailbox

【教學】Cloudways 如何設定域名信箱 Domain Mailbox

Cloudways 是我目前使用最穩定的網站主機,價格、服務、性價比 … 等等,在比較之下,真的都沒話說。而長期使用之下,你一定會需要建置一個 域名信箱,在使用 Cloudways 的情況下,如何快速的為自己建立出 域名信箱,在這篇教學中,將會完整和你分享 Cloudways 如何設定域名信箱,讓你從無到有一次完成 ! 什麼是域名信箱 ? 使用郵件服務,已經現代人生活的習慣之一下,常見的信箱,可能都是以 gmail 為主,或是 hotmail 等等 … 而在你建立網站之後,能使用...

0 Comments

Submit a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *