每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于您的下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将您的网站提升到一个新的水平。
本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Divi 和绿色能源布局包创建自定义的置顶设计。 这种技术将帮助您改善页面上的用户体验，同时利用 Divi 在设计方面的内置选项。 我们希望本教程能激发您创建自己的替代设计并在您的下一个网站上使用它们！
让我们开始吧。
预览
在深入学习本教程之前，让我们快速浏览一下本教程的结果。
动图
示例 #1
示例 #2
示例#3
1. 添加平滑滚动到页面 HTML
将绿色能源登陆页面上传到新页面
您需要做的第一件事是创建一个新页面并上传 Green Energy Layout Pack 的登录页面。
打开页面设置
通过单击下面打印屏幕中标记的图标打开页面设置：
将平滑滚动添加到自定义 CSS 框
转到高级选项卡，通过将以下 CSS 代码添加到自定义 CSS 框，为整个页面添加平滑滚动行为：
html {
scroll-behavior: smooth;
}
2. 添加CSS ID到英雄部分
打开英雄部分
返回顶部的设计会将访问者重定向到英雄部分。 要完成它，您需要先打开英雄部分设置。
添加 CSS ID
然后，转到高级选项卡并将 CSS ID 添加到该部分。 稍后在这篇文章中，我们将添加一个锚链接，将访问者引导至此部分。
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
行设置
浆纱
继续第二个例子！ 打开行设置并更改行的宽度。
间距
继续进行间距设置并删除所有默认的顶部和底部填充。
- 顶部填充：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 频道，这样您将永远是第一批了解并从这些免费内容中受益的人之一。
