【Divi主题教程】使用Divi创建固定图标侧边导航栏

预习

在深入学习本教程之前，让我们快速看一下这三个示例以及它们在不同屏幕尺寸下的外观。

例子1

范例＃2

例子＃3

添加锚链接

将锚点链接1添加到部分

我们要开始的第一件事是锚点ID。我们将重新创建的固定图标导航栏将包含4个不同的图标。这意味着您必须将每个图标链接到页面的不同部分。您可以将锚点ID添加到任何类型的设计元素中，但它最常用于部分。使用登录页面创建一个新页面，并将第一个锚链接添加到页面上的一个部分。

• CSS编号：fixed-icon-navigation-1

将锚点链接2添加到部分

将另一个锚点ID添加到第二部分。

• CSS编号：fixed-icon-navigation-2

将锚点链接3添加到部分

对第三个锚ID重复相同的步骤。

• CSS编号：fixed-icon-navigation-3

将锚点链接4添加到部分

并将锚点ID也添加到第四部分和最后一部分。在本教程的后面，我们将这些ID链接到放置在固定图标导航栏中的图标。

• CSS编号：fixed-icon-navigation-4

开始重新创建示例＃1

将新行添加到页面的最后一部分

列结构

让我们开始重新创建第一个示例！向下滚动到页面底部，并使用以下列结构在最后一节中添加新行：

背景颜色

尚未添加任何模块，请打开行设置并将背景色添加到该行。

• 背景颜色：#ffffff

对准

然后，更改行对齐方式。

• 行对齐：左

浆纱

也修改行的大小设置。

• 使用自定义宽度：是
• 单位：％
• 自订宽度：4％
• 使用自定义装订线宽度：是
• 装订线宽度：1

间距

并为较小的屏幕尺寸添加一些自定义填充。

• 左填充：2vw（仅限平板电脑和手机）
• 右填充：7vw（仅限平板电脑和手机）

边境

我们还在边框设置中使用了一些圆角。

• 右上方：10px
• 右下：10px

框影

带有细微的阴影，可以帮助我们创造一些深度。

• 框影模糊强度：80px
• 阴影颜色：rgba（0,0,0,0.3）

自定义CSS

最后但并非最不重要的一点是，我们将通过在行的高级选项卡中添加一些自定义CSS代码行来固定图标导航。

将Blurb模块添加到列1

选择图标

既然我们已经完成了行设置的修改，就可以开始添加模块了。添加一个模糊模块，然后选择一个图标。

图标设置

然后，转到“设计”选项卡并修改图标设置。

• 图标颜色：＃000000
• 图标位置：顶部
• 使用图标字体大小：是
• 图标字体大小：2vw（桌面），4vw（平板电脑），5vw（电话）

克隆Blurb模块3次

克隆您添加了三次的Blurb模块。

更改图标

并更改每个重复项的图标。

分别将锚链接添加到Blurb模块

最后但并非最不重要的一点是，您需要将锚URL分别添加到每个Blurb模块中。确保将每个图标链接到正确的部分ID。

• 模块链接URL：https://www.yourwebsite.com/yourpage/#fixed-icon-navigation-1

开始重新创建示例2

将新行添加到页面的最后一部分

列结构

继续第二个例子！使用以下列结构在页面的最后部分添加新行：

对准

尚未添加任何模块，请打开行设置并更改行对齐方式。

• 行对齐：左

浆纱

也修改大小设置。

• 使用自定义宽度：是
• 单位：％
• 自订宽度：6％
• 使用自定义装订线宽度：是
• 装订线宽度：1

间距

并为较小的屏幕尺寸添加一些自定义填充值。

• 左填充：2vw（仅限平板电脑和手机）
• 右填充：10vw（平板电脑），15.5vw（电话）

自定义CSS

最后但并非最不重要的一点是，在该行的高级选项卡中添加自定义CSS代码，以固定图标导航。

将Blurb模块添加到列1

选择图标

继续向行的列添加Blurb Module，然后选择所需的图标。

图标设置

然后，转到设计选项卡，并对图标设置中的图标外观进行一些更改。

• 图标颜色：＃000000
• 圆圈图标：是
• 圆形颜色：rgba（0,0,0,0.14）
• 图标位置：顶部
• 使用图标字体大小：是
• 图标字体大小：1.5vw（桌面），3vw（平板电脑），2.5vw（电话）

克隆Blurb模块3次

修改完第一个Blurb模块后，就可以继续克隆该模块3次。

更改图标

确保更改用于每个重复项的图标。

分别将锚链接添加到Blurb模块

然后，再次将每个Blurb模块链接到正确的锚点链接。

• 模块链接URL：https://www.yourwebsite.com/yourpage/#fixed-icon-navigation-1

开始重新创建示例＃3

将新行添加到页面的最后一部分

列结构

转到下一个和最后一个示例！使用以下列结构在页面的最后部分添加新行：

渐变背景

尚未添加任何模块，请打开行设置并添加渐变背景。

• 颜色1：＃ffb337
• 颜色2：＃1b52d9

对准

通过在设计选项卡中更改行对齐来继续。

• 行对齐：左

浆纱

然后，修改尺寸设置。

• 使用自定义宽度：是
• 单位：％
• 自订宽度：4％
• 使用自定义装订线宽度：是
• 装订线宽度：1

间距

也为较小的屏幕尺寸添加一些自定义填充值。

• 左填充：2vw（平板电脑），1vw（电话）
• 右填充：7vw（平板电脑），5.5vw（电话）

边境

并在行中添加左边框。

• 左边框宽度：3px
• 左边框颜色：#ffffff

框影

我们还添加了一个微妙的框阴影以在页面上创建深度。

• 框影模糊强度：80px
• 阴影颜色：rgba（0,0,0,0.3）

自定义CSS

最后但并非最不重要的一点是，将以下CSS代码行添加到行设置的“高级”标签中。这将有助于固定图标导航栏。

将Blurb模块添加到列1

选择图标

通过将第一个Blurb Module添加到该行的列，然后选择一个图标来继续。

图标设置

然后，转到“设计”选项卡并更改图标设置。

• 图标颜色：#ffffff
• 图标位置：顶部
• 使用图标字体大小：是
• 图标字体大小：1.5vw（台式机），4vw（平板电脑和手机）

克隆Blurb模块3次

克隆Blurb模块3次。

更改图标

并确保您更改每个重复项的图标。

分别将锚链接添加到Blurb模块

最后但并非最不重要的一点是，将锚URL分别添加到每个Blurb模块中，您就完成了！

• 模块链接URL：https://www.yourwebsite.com/yourpage/#fixed-icon-navigation-1

预习

现在我们已经完成了所有步骤，让我们最后看一下不同屏幕尺寸的结果。

例子1

范例＃2

例子＃3