Divi 插件亮点 – DotNav

Divi 有一个内置的导航功能，称为点导航，它会在屏幕右侧放置一系列点。 每个点代表该页面的一部分。 单击这些点会转到该部分。 这些点很简单，可以与大多数网站设计融为一体。 如果你想设计它们怎么办？ 更好的是，如果您想在加载时显示标签或为其设置动画怎么办？ 您可能对名为 DotNav 的插件感兴趣。

DotNav 是 Divicio.us 的第三方插件。 DotNav 为您提供了更改点和背景的颜色、大小和形状、添加标签、禁用特定点以及控制加载动画的工具。 您可以按设备隐藏 DotNav。 在这个插件亮点中，我们将看看 DotNav。

在这些示例中，我使用了 Divi 附带的称为产品功能的布局。 图片来自 Unsplash.com。 首先，让我们启用 Divi 的点导航。

启用点导航

可以在每页的基础上启用或禁用点导航。 您将在页面的可视化编辑器中找到这些设置，位于右上角的点页面设置下。

点导航将出现在页面的右侧。 点代表部分。 单击一个点会将您带到该部分。 在这个例子中，我导航到第二部分，第二个点亮了。

安装 DotNav

首先，解压下载文件。 文件夹内将有三个文件。 上传并激活 divi-dotnav 文件。

DotNav 主题定制器设置

DotNav 的设置可在主题定制器中找到。 它包括三个方面：

• 通用设置
• 点设置
• 标签设置

让我们来看看每个区域。

DotNav 常规设置

常规设置允许您按设备隐藏 DotNav，调整偏移、边框、填充、颜色和动画。 有 11 种动画可供选择，包括从您选择的方向移入、从一个方向淡入或在 x 或 y 轴上翻转。

例子

当您调整控件时，您会实时看到变化。 在本例中，我将右偏移设置为 38，并调整了边框宽度、半径和填充以创建圆形边缘。

在这个例子中，我将边框宽度设置为 10，所有边的边框半径都设置为 30，顶部填充为 20，右侧为 10，底部为 20，左侧为 9。我使用了背景和边框颜色从页面本身，所以它会融合。

DotNav 点设置

点设置允许您显示或隐藏单个部分（需要将 CSS 添加到该部分）、调整边距、边框半径、宽度和颜色。 点设置包括颜色、宽度和高度，以及悬停颜色、宽度和高度。

例子

在本例中，我将点边框半径设置为 10，并将点宽度调整为 30。这会创建有趣的水平线而不是圆点。

调整边框宽度和点高可以创建一些有趣的效果。 在这里，我将点边框宽度设置为顶部的 4 和右侧的 10。

在这里，我将左上边框半径设置为 0，右上角设置为 98，将其他设置为 10。我还将点边框宽度设置为 6，并调整了点颜色和活动点颜色。

这个使用默认的通用设置，边框宽度为 1，点宽度和高度为 15，活动点宽度和高度为 20。点为深灰色，带有红色边框。 活动点是带有红色边框的白色。

这是相同的点设置，并添加了顶部和底部边框宽度、半径和填充以创建圆形边缘。

DotNav 标签设置

标签设置允许您显示或隐藏点标签，调整字体、背景、宽度、应用固定宽度等。固定宽度添加对常规标签宽度、活动标签宽度和标签文本对齐的调整。 为了显示标签，这些部分必须有一个 ID（用作标签）。

将标签添加到每个部分的高级选项卡中的 CSS ID 字段。

标签将自动显示。 标签可以自定义，您可以选择不显示特定标签。 此示例显示默认设置。

在这个中，我更改了背景和字体颜色，并为其字体设置了活动部分偏移和鲑鱼色。 您可以调整水平线间距，但对于垂直线，您必须在点设置中调整点边距。 对我来说，这是唯一令人困惑的调整。

如果您不想显示所有标签，您可以将其设置为仅活动、仅悬停或活动并悬停。

我已经调整了点设置以在标签之间留出一些空间。 这将使我能够使标签更高而不会重叠。 在这一个中，顶部和底部的点边距设置为 16。 右上角和左下角的边框半径设置为72，左上角和右下角设置为22。

在标签设置中，我将所有边的内边距调整为 10，将活动悬停右偏移设置为 45，并将字体大小增加到 18。标签更加突出。

隐藏特定点

如果需要，您可以隐藏特定的点。 将 CSS 类添加到部分模块的高级设置选项卡。 您将在主题定制器的点设置中找到 CSS。

在点设置中，第一个设置是一个下拉框。 默认设置为显示。 选择隐藏。 这将隐藏您添加了隐藏部分 CSS 类的所有部分（CSS 类位于下拉框上方的注释中）。 标有 ALL THE RIGHT THINGS 的部分不再位于点导航结构中。

此示例仅在悬停时显示。 字体和活动/悬停点颜色设置为红色。 背景和边框是透明的。 顶部和底部的点边距设置为 16。 宽度为 15，高度为 5，活动点设置为 20 和 8。

这个标签使用固定宽度。 我使用黑色作为活动标签的背景，红色字体和红色边框用于左右（设置为 5）。 边界半径设置为 9 以使其具有轻微的曲线。 我已将标签内的文本居中。 正确的偏移量为 6 以使标签挂在线上。 活动的右偏移量为 20 以使其跳线。

我还缩短了部分名称并隐藏了名为 All The Right Things 的部分的标签。 字体为斜体。

对于点设置，我将宽度设置为 6，将高度设置为 38。活动点是 10 和 35。这使得点看起来像一条垂直线。 我将使用这个例子来展示动画。

点导航动画

动画显示页面加载时点的显示方式。 它包括11个动画。 可以使用滑块调整动画持续时间。 下面来看看其中的一些。

就在

Right In 很难看到，但它在出现时从右侧移动。

底部进入

底部出现并向上滑动。

淡入

淡入淡入已经到位。

淡入左侧

Fade In Left 淡入，然后从左向右移动到位。

淡入顶部

淡入顶部淡入，然后向下做一个大动作。

翻转 X

Flip In X 从 X 轴翻转并在其就位时反弹。

翻转 Y

Flip In Y 从 Y 轴翻转，看起来像一扇门。

许可证和文件

该插件可以与您和您的客户的无限网站一起使用。 文档包含在下载文件中。 我发现控件足够直观，我不需要文档，但我很高兴它被包含在内以防万一。

最后的想法

我发现 DotNav 易于使用。 它为点和背景提供了很多自定义，我喜欢能够添加标签。 悬停和活动部分分开，可以单独定制。 动画很有趣，但数量不多，而且它们只在加载时动画。 在两个单独的选项卡上调整标签宽度和高度（调整标签高度的点高度）起初可能会令人困惑，但一旦我掌握了它，我就可以轻松进行调整。

与主题定制器中的所有设置一样，DotNav 设置是站点范围的。 您需要尝试使用字体和背景颜色来找到适合您网站上所有背景的组合。

如果您对自定义 Divi 的点导航感兴趣，Divicio.us 的 DotNav 可能是您正在寻找的插件。

我们希望听到您的意见。 您是否将 DotNav 用于 Divi？ 请在评论中告诉我们您对此的看法。

精选图片来自 newelle/shutterstock.com