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