WordPress divi主题

使用 Divi 创建令人惊叹的固定图标导航

by | May 14, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

每周,我们都会为您提供新的免费 Divi 布局包,您可以将其用于您的下一个项目。 对于其中一个布局包,我们还分享了一个用例,可帮助您将您的网站提升到一个新的水平。

google广告开户

本周,作为我们正在进行的 Divi 设计计划的一部分,我们将向您展示如何使用 Divi 的风险管理布局包创建令人惊叹的固定图标导航。 我们将把这个固定的图标导航与锚链接结合起来。 对于单页浏览器来说,这是一种很好的方法,但您也可以自由地将它用于您网站上的多个页面,以简化访问者的导航过程。 我们将重新创建三个示例,但您可以使用这种方法轻松创建自己的固定图标导航。

让我们开始吧!

预览

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

示例 #1

固定图标导航

示例 #2

固定图标导航

示例#3

固定图标导航

添加锚链接

将锚链接 #1 添加到部分

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

  • CSS ID:fixed-icon-navigation-1

固定图标导航

将锚链接 #2 添加到部分

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

WordPress divi主题
  • CSS ID:fixed-icon-navigation-2

固定图标导航

将锚链接 #3 添加到部分

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

  • CSS ID:fixed-icon-navigation-3

固定图标导航

将锚链接 #4 添加到部分

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

  • CSS ID:fixed-icon-navigation-4

开始重新创建示例 #1

固定图标导航

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

立柱结构

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

固定图标导航

背景颜色

尚未添加任何模块,打开行设置并为行添加背景颜色。

  • 背景颜色:#ffffff

固定图标导航

fiverr建站WordPress程序员

结盟

然后,更改行对齐方式。

固定图标导航

浆纱

同时修改行的大小设置。

  • 使用自定义宽度:是
  • 单元: %
  • 自定义宽度:4%
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

固定图标导航

间距

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

独立站选品工具
  • 左填充:2vw(仅限平板电脑和手机)
  • 右填充:7vw(仅限平板电脑和手机)

固定图标导航

边界

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

  • 右上角:10px
  • 右下:10px

固定图标导航

盒子阴影

连同一个微妙的盒子阴影,这将帮助我们创造一些深度。

  • 盒子阴影模糊强度:80px
  • 阴影颜色:rgba(0,0,0,0.3)

固定图标导航

高质量外链购买

自定义 CSS

最后但同样重要的是,我们将通过在行的高级选项卡中添加一些自定义 CSS 代码行来修复图标导航。

position:fixed;
left: 0px;
top: 33%;
bottom: 33%;
z-index: 9999;

固定图标导航

将 Blurb 模块添加到第 1 列

选择图标

现在我们已经完成了对行设置的修改,我们可以开始添加模块了。 添加一个模糊模块并选择您选择的图标。

固定图标导航

图标设置

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

JasperAI 10000字免费额度试用
  • 图标颜色:#000000
  • 图标位置:顶部
  • 使用图标字体大小:是
  • 图标字体大小:2vw(桌面)、4vw(平板电脑)、5vw(手机)

固定图标导航

克隆 Blurb 模块 3 次

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

固定图标导航

更改图标

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

固定图标导航

WordPress备份工具updrafplus

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

最后但同样重要的是,您需要将锚 URL 分别添加到每个 Blurb 模块。 确保将每个图标链接到正确的部分 ID。

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

固定图标导航

开始重新创建示例 #2

固定图标导航

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

立柱结构

继续第二个例子! 使用以下列结构将新行添加到页面的最后一部分:

固定图标导航

结盟

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

固定图标导航

浆纱

同时修改大小设置。

  • 使用自定义宽度:是
  • 单元: %
  • 自定义宽度:6%
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

固定图标导航

间距

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

  • 左填充:2vw(仅限平板电脑和手机)
  • 右填充:10vw(平板电脑)、15.5vw(手机)

固定图标导航

自定义 CSS

最后但同样重要的是,在行的高级选项卡中添加自定义 CSS 代码以固定图标导航。

position:fixed;
left: 0px;
top: 10%;
bottom: 10%;
z-index: 9999;

固定图标导航

将 Blurb 模块添加到第 1 列

选择图标

继续在您的行列中添加一个模糊模块,然后选择您选择的图标。

固定图标导航

图标设置

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

  • 图标颜色:#000000
  • 圆圈图标:是
  • 圆圈颜色:rgba(0,0,0,0.14)
  • 图标位置:顶部
  • 使用图标字体大小:是
  • 图标字体大小:1.5vw(桌面)、3vw(平板电脑)、2.5vw(手机)

固定图标导航

克隆 Blurb 模块 3 次

完成第一个 Blurb 模块的修改后,您可以继续克隆该模块 3 次。

固定图标导航

更改图标

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

固定图标导航

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

并且,再次将每个 Blurb 模块链接到正确的锚链接。

  • 模块链接网址: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 代码行添加到行设置的高级选项卡中。 这将有助于修复图标导航栏。

position:fixed;
left: 0px;
top: 62%;
bottom: 10%;
z-index: 9999;

固定图标导航

将 Blurb 模块添加到第 1 列

选择图标

继续将第一个 Blurb Module 添加到该行的列并选择您选择的图标。

固定图标导航

图标设置

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

  • 图标颜色:#ffffff
  • 图标位置:顶部
  • 使用图标字体大小:是
  • 图标字体大小:1.5vw(桌面)、4vw(平板电脑和手机)

固定图标导航

克隆 Blurb 模块 3 次

克隆 Blurb 模块 3 次。

固定图标导航

更改图标

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

固定图标导航

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

最后但同样重要的是,将锚 URL 分别添加到每个 Blurb 模块,您就完成了!

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

固定图标导航

预览

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

示例 #1

固定图标导航

示例 #2

固定图标导航

示例#3

固定图标导航

最后的想法

在这篇文章中,我们向您展示了如何创建固定图标导航栏,您可以将其应用于您所构建的任何类型的网站。 我们创建的那些与风险管理布局包非常匹配。 我们希望您喜欢这个正在进行的 Divi 设计计划,我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!