未命名_自定义px_2019.08.gif

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

12344455e0dfef
用过divi主题的人都知道,divi可视化编辑模块里面没有侧边栏的模块,需要自己去设置调试。今天看小程序网就教一下大家怎么去设置网页的侧边栏。对于单页用户来说,这是一种很好的方法,但是您也可以在网站上的多个页面上自由使用它,以简化访问者的导航过程。我们将重新创建三个示例,但是您可以使用这种方法轻松创建自己的固定图标导航类型。让我们开始吧!

预习

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

例子1

1df534812e2ef2

范例#2

15e3e4fcf2b442

例子#3

1f6ef5275f142e

添加锚链接

将锚点链接1添加到部分

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

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

1fce180fe5124e

将锚点链接2添加到部分

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

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

1e5fe94f68c452

将锚点链接3添加到部分

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

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

1cef5f574a2eea

将锚点链接4添加到部分

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

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

14219c5f28fee7

开始重新创建示例#1

1df534812e2ef2

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

列结构

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

1ee9f5da2f73e4

背景颜色

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

  • 背景颜色:#ffffff

1f04e92cf9eef5

对准

然后,更改行对齐方式。

  • 行对齐:左

115eedf5e402a5

浆纱

也修改行的大小设置。

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

1a20d5ee5ff253

间距

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

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

10d45f2ae5e0e9

边境

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

  • 右上方:10px
  • 右下:10px

17026f31e9655e

框影

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

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

1ece95627e058f

自定义CSS

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

01
02
03
04
05
position:fixed;
left: 0px;
top: 33%;
bottom: 33%;
z-index: 9999;

19055ef2e5ee2f

将Blurb模块添加到列1

选择图标

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

1e5c562a08f0be

图标设置

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

  • 图标颜色:#000000
  • 图标位置:顶部
  • 使用图标字体大小:是
  • 图标字体大小:2vw(桌面),4vw(平板电脑),5vw(电话)

1f52e2c05e015e

克隆Blurb模块3次

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

12fe1551e9d6e0

更改图标

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

113ee2c50555fe

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

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

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

1e42e0dd5f715f

开始重新创建示例2

15e3e4fcf2b442

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

列结构

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

1d525e6f40e851

对准

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

  • 行对齐:左

16ebf7621515e3

浆纱

也修改大小设置。

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

10bf96c1ef55e2

间距

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

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

1a0de815f25eaa

自定义CSS

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

01
02
03
04
05
position:fixed;
left: 0px;
top: 10%;
bottom: 10%;
z-index: 9999;

1a1e5ef2c22f5f

将Blurb模块添加到列1

选择图标

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

15fb525eee201f

图标设置

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

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

1f50f5e5e2f263

克隆Blurb模块3次

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

142225eeff5342

更改图标

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

114e727df558e2

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

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

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

1e5629c2e52a2f

开始重新创建示例#3

1f6ef5275f142e

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

列结构

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

1582598f792e1e

渐变背景

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

  • 颜色1:#ffb337
  • 颜色2:#1b52d9

1e25325ef5eb8e

对准

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

  • 行对齐:左

127b704542ee5f

浆纱

然后,修改尺寸设置。

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

1f9e2d5d2e5579

间距

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

  • 左填充:2vw(平板电脑),1vw(电话)
  • 右填充:7vw(平板电脑),5.5vw(电话)

12ee1fdbe55592

边境

并在行中添加左边框。

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

12e535fe3031fd

框影

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

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

13ff55022fee84

自定义CSS

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

01
02
03
04
05
position:fixed;
left: 0px;
top: 62%;
bottom: 10%;
z-index: 9999;

161f34de525edd

将Blurb模块添加到列1

选择图标

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

1257e753f815ea

图标设置

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

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

1357e2f2e59a23

克隆Blurb模块3次

克隆Blurb模块3次。

16e5283fc5e537

更改图标

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

1e5e992fe3bf5b

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

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

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

15bef8453e34c2

预习

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

例子1

1df534812e2ef2

范例#2

15e3e4fcf2b442

例子#3

1f6ef5275f142e

神器大全

cabbage – 简洁无广告的磁力搜索神器,内容全速度快

2020-7-18 16:46:38

Divi主题教程WordPress教程精品教程

【Divi主题教程】divi主题如何设置顶部菜单栏滚动是进行隐藏

2019-12-23 22:37:10

未命名_自定义px_2019.08.gif

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索