如何使用 Divi 创建自定义粘性“返回顶部”设计
已发表: 2019-06-19每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将网站提升到一个新的水平。
本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Divi 和绿色能源布局包创建自定义粘性返回顶部设计。 这种技术将帮助您改善页面上的用户体验，同时利用 Divi 在设计方面的内置选项。 我们希望本教程能激励您创建自己的替代设计，并在您的下一个网站上使用它们！
让我们开始吧。
预览
在我们深入学习本教程之前，让我们快速浏览一下本教程的结果。
动图
示例#1
示例#2
示例 #3
1. 添加平滑滚动到页面 HTML
将绿色能源登陆页面上传到新页面
您需要做的第一件事是创建一个新页面并上传绿色能源布局包的登录页面。
打开页面设置
单击下面打印屏幕中标记的图标打开页面设置：
将平滑滚动添加到自定义 CSS 框
转到高级选项卡，通过将以下 CSS 代码添加到自定义 CSS 框，为整个页面添加平滑滚动行为：
html {
scroll-behavior: smooth;
}
2.在英雄部分添加CSS ID
打开英雄部分
返回顶部设计会将访问者重定向到英雄部分。 要完成它，您需要先打开英雄部分设置。
添加 CSS ID
然后，转到高级选项卡并向该部分添加 CSS ID。 在这篇文章的后面，我们将添加一个锚链接，将访问者引导到此部分。
- CSS ID：第 1 部分
3.使用“返回顶部”设计在页面底部添加新部分
一般步骤
将新的常规部分添加到页面底部
正如您在这篇文章的预览中所注意到的，我们将重新创建三个不同的设计示例。 为了简化流程，我们将首先从一些一般步骤开始，然后在帖子中单独关注每个设计示例。 在页面底部添加一个新的常规部分。
间距
打开部分设置并删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
添加新行
列结构
继续使用以下列结构添加新行：
添加锚链接
一旦有人点击整行，我们希望他们被重定向到页面顶部。 为此，我们将添加一个重定向到页面英雄部分的链接。
- 行链接 URL：yourwebsite.com/page/#section-1
行对齐
我们还将行放置在节容器的右侧。
- 行对齐：右
固定位置
接下来，我们通过转到行的高级选项卡并更新以下位置选项来修复整行：
- 位置：固定
- 垂直偏移：30px
- 水平偏移：30px
- Z指数：99
除了固定行之外，我们还通过增加 z 索引来确保该行与所有页面内容重叠。
重新创建设计示例 #1
行设置
更改列结构
现在我们已经完成了所有一般步骤，我们将重新创建您在本文开头看到的三个不同示例。 让我们从第一个开始！ 更改行列结构：
背景颜色
继续打开行设置并添加白色背景色。
- 背景颜色：#ffffff
浆纱
转到设计选项卡并更改大小设置。
- 使用自定义装订线宽度：1
- 宽度：9vw（桌面）、23vw（平板电脑）、35vw（手机）
间距
添加一些自定义填充值。
- 顶部填充：2.5vw（台式机）、6vw（平板电脑）、10vw（手机）
- 底部填充：2.5vw（台式机）、6vw（平板电脑）、10vw（手机）
- 左填充：1vw（桌面）、2vw（平板电脑）、4vw（手机）
- 右填充：1vw（桌面）、2vw（平板电脑）、4vw（手机）
边界
继续向边框设置中的每个角添加“10px”。
盒子阴影
并使用以下设置添加框阴影：
- 框阴影模糊强度：80px
- 阴影颜色：rgba(0,0,0,0.3)
展示
为了确保列在所有屏幕尺寸上都保持相邻，我们将向行的主要元素添加一行额外的 CSS 代码。
display: flex;
将文本模块添加到第 1 列
添加内容
是时候开始添加模块了！ 将文本模块添加到具有您选择的一些内容的第一列。
文字设置
转到设计选项卡并相应地更改文本设置：
- 文字字体：Arial
- 文字字体粗细：粗体
- 文本对齐：右
- 文字颜色：#000000
- 文字大小：1.1vw（桌面）、3vw（平板电脑）、4.4vw（手机）
- 文字字母间距：-1px
- 文本行高：1em
将文本模块添加到第 2 列
添加符号
移到第二列并在那里添加一个文本模块。 将“▲”符号添加到内容框中。
文字设置
最后但并非最不重要的是，转到设计选项卡并更改文本设置。
- 文字字体：Open Sans
- 文本对齐：居中
- 文字颜色：#000000
- 文字大小：3vw（桌面）、8vw（平板电脑）、12vw（手机）
- 文本行高：0.6em
重新创建设计示例 #2
行设置
浆纱
进入第二个例子！ 打开行设置并更改行的宽度。
- 宽度：7%
间距
转到间距设置并删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
将文本模块添加到列
添加符号
继续向该行添加文本模块并输入“↑”符号。
文字设置
转到设计选项卡并更改文本设置。
- 文字字体：Open Sans
- 文本对齐：居中
- 文字颜色：#000000
- 文字大小：56px
- 文本行高：1em
间距
接下来，我们将添加一些自定义的顶部和底部填充。
- 顶部填充：30px
- 底部填充：50px
边界
转到设计选项卡，并在每个角上添加“50vw”。 使用以下设置添加边框：
- 边框宽度：3px
- 边框颜色：#000000
重新创建设计示例 #3
行设置
浆纱
继续下一个也是最后一个例子！ 打开行设置并修改宽度。
- 宽度：4%（桌面）、10%（平板）、15%（手机）
间距
接下来删除默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
盒子阴影
使用以下设置向行添加自定义框阴影：
- 框阴影传播强度：4px
- 阴影颜色：rgba(0,0,0,0.3)
将文本模块添加到列
添加符号
本设计示例所需的唯一模块是文本模块。 将“^”添加到内容框中。
文字设置
转到设计选项卡并相应地更改文本设置：
- 文字字体：Open Sans
- 文字字体粗细：超粗
- 文本对齐：居中
- 文字颜色：#4359e9
- 文字大小：56px
- 文本行高：1em
- 文字阴影颜色：#35d764
间距
继续转到间距设置并添加一些自定义顶部和底部填充。
- 顶部填充：30px
- 底部填充：20px
边界
最后但并非最不重要的一点是，向文本模块添加边框，就大功告成了！
- 边框宽度：3px
- 边框颜色：#4359e9
预览
现在我们已经完成了所有步骤，让我们最后看看结果。
动图
示例#1
示例#2
示例 #3
最后的想法
在本用例教程中，我们向您展示了如何使用 Divi 创建自定义返回顶部设计。 我们为页面添加了平滑滚动，为英雄部分分配了一个部分 ID，并将固定行链接到英雄部分。 本教程是我们正在进行的 Divi 设计计划的一部分，我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议，请务必在下方评论区留言！
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。