Divi 插件亮點 - Divi 麵包屑模塊

當我瀏覽網站時，我尋找的導航工具之一是麵包屑。 它們非常適合向您展示您在導航層次結構中的位置，並使您可以輕鬆地在結構中找到其他文章。 可以使用名為 Divi Breadcrumbs Module 的插件將麵包屑添加到 Divi。

Divi Breadcrumbs Module 是 CodeCrater 的第三方插件，可創建基於位置的麵包屑。 換句話說，它顯示了您當前正在閱讀的頁麵類別的層次結構。 它還為層次結構中的每個元素提供鏈接，因此您可以輕鬆查看每個類別的最新帖子。 麵包屑是高度可定制的。

使用麵包屑模塊，您可以將麵包屑放置在使用 Divi Builder 的各個頁面和帖子上。 它還適用於 Extra 和 Divi Builder 插件。 在這個插件亮點中，我們將看看 Divi 和 Extra 中的插件，看看它可以定制的一些方法。

為什麼要使用麵包屑？

麵包屑會留下顯示類別層次結構的軌跡，是改進導航的好方法。 它們不會佔用太多空間，並且可以減少和簡化用戶在瀏覽您的內容時必須執行的操作數量。 如果您有很多嵌入式類別，這一點尤其重要。

Divi Breadcrumbs Module 通過向 Google 提供有關您網站的層次結構信息來改進 SEO。 這意味著您應該為要排名的類別選擇關鍵字。 這也迫使設計師使用更容易理解的類別名稱。

麵包屑改進了用戶體驗和用戶界面。 它們不應該取代您的標準菜單導航，但它們可以建立興趣並使訪問者在您的網站上停留更長時間。

Divi 麵包屑模塊

正常上傳並激活插件。 該模塊將以鮮紅色出現，稱為好萊塢櫻桃色。 許多麵包屑插件需要 Yoast，因為它們從 Yoast 插件中提取麵包屑，但 Divi Breadcrumbs Module 不需要 Yoast。 相反，它會創建自己的麵包屑。 所以不需要其他插件。

內容設置包括隱藏主頁麵包屑、添加您自己的主頁麵包屑文本、選擇分隔符圖標（從 12 個選項中選擇）、隱藏當前頁面、背景設置和管理標籤。 設計設置包括圖標、文本和鏈接的樣式以及標準間距選項。

Divi 麵包屑模塊示例

這是一個基本的文章佈局，帶有帶有圖像的帖子標題模塊、麵包屑模塊和文章的文本模塊。 我將麵包屑設置保留為默認值。

這是模塊在默認設置下的外觀。 Home 和 Fencing 的鏈接是藍色的，表示它們是可點擊的。 麵包屑可以放置在左側、居中或右側。

在此示例中，我將麵包屑放置在中心並添加了漸變背景並增加了文章標題（14 磅）和鏈接（12 磅）的字體大小。 文字是白色的。 由於它們是在漸變上打印的，因此我將它們設為相同的顏色。 我還更改了行分隔符。 在常規帖子中，我不會注意帶有漸變背景的麵包屑，但這顯示了您可以用它做什麼。

在全角菜單下添加麵包屑

添加麵包屑的最佳位置是頁面頂部。 在這個例子中，我使用全角菜單創建了一個帖子，並將全角部分和標準部分的填充和邊距設置為 0。 我嵌入了類別以顯示層次結構。

我更改了麵包屑的字體顏色以匹配全角菜單，但隨後將它們柔化以使它們不突出。 我將分隔符更改為箭頭並從麵包屑導航中刪除了主頁和當前頁面。

請注意，麵包屑的嵌入結構與其上方圖像中的類別相同。 文章本身也包括這些類別，但沒有層次結構。 如果您不想多次顯示相同的類別，可以將它們從標題中刪除。

在這個例子中，我將背景顏色放在行中，使其全寬，更改字體的顏色，使其不會壓倒菜單，並在字母間距上添加 1 個像素。 小的改變可以產生大的不同。

這是使用麵包屑模塊中的背景而不是行的相同設置。 我添加了填充以減少寬度。 我喜歡它創建一個看起來獨立但附加到它上面的菜單的小元素。

樣式分隔符

分隔符還具有樣式功能。 更改字體樣式、大小、顏色、間距和高度。 在分隔符選項和样式功能之間，您可以輕鬆製作分隔符以匹配您網站的品牌。

此示例使用紫色的默認字體和 20 的字體大小作為分隔符。

這是相同的分隔符，分隔符為 Georgia 字體。 只需更改分隔符的字體就足以讓它煥然一新。

這是使用 Black Ops One 字體的相同分隔符。 它更大膽，更突出。

這是 20 磅字體的 Droid Serif，行距為 4 像素。 我把字體變成了深紅色。

即使是點的形狀也會隨著字體的選擇而改變。 這是 24 點的激情一號。 值得花一些時間來嘗試字體、顏色和大小來創造獨特的東西。 使用標準樣式控件很容易做到。

使用帶有額外功能的 Divi 麵包屑模塊

Divi Breadcrumbs Module 與 Extra 和 Divi Builder 插件配合使用。 這是在右側圖像下方帶有麵包屑的 Extra 的外觀。 我包含了帖子的名稱，因為麵包屑離屏幕頂部的標題太遠了。 它使用條形分隔符。

理想情況下，麵包屑應位於頁面頂部。 在我的頁面佈局中，麵包屑模塊位於頂部。 它顯示在圖像下方的原因是我允許 Extra 顯示特色圖像。

在此示例中，我已將圖像放置在佈局中並將該部分設置為具有 0 頂部填充。 我刪除了當前帖子並將分隔符設為紅色。

許可證、更新、支持

該插件可以為您和您的客戶安裝在無限的網站上。 更新是終身的。 它包括六個月的支持。

• 點擊此處購買：Divi Breadcrumbs 模塊

最後的想法

麵包屑是您在丟失時會注意到的那些小東西之一。 如果設計得當，它們會在用戶需要它們時出現，並在它們不需要時遠離。 Divi Breadcrumbs Module 是將它們添加到您的 Divi 頁面和帖子的好方法，並且可以輕鬆地將它們設置為適合您網站品牌的樣式。 它簡單直觀。

如果您有興趣向 Divi 佈局添加麵包屑，Divi Breadcrumbs Module 可能是您需要的插件。

我們想听聽您的意見！ 您是否嘗試過 Divi 麵包屑模塊？ 在下面的評論中讓我們知道您的體驗。

精選圖片來自 Yevgenij_D/shutterstock.com