您想添加到您的全角标题模块 Divi 向下滚动按钮？
全宽标题模块 Divi 包括一个按钮，告诉用户他们可以向下滚动。 一旦他们点击它，他们就会自动重定向到下一部分。 这是一个简单的按钮，有多个图标可供选择，它的颜色和大小是完全可定制的。
在本文中，我们将了解如何自定义它并查看可以包含在全角标题模块中的四个向下滚动按钮。 我们还将了解如何使用 CSS 自定义它以获得更多设计选项。
让我们开始吧！
向下滚动按钮概述
首先，让我们看看我们将在本文中创建的设计。
例子1
例如2
立即下载DIVI！！！
例如3
例如4
立即下载DIVI！！！
向下滚动按钮全宽标题设计
首先，我们将创建全角标题设计。 我正在使用 Divi 中提供免费的治疗布局包 . 创建一个新页面并添加一个 全宽头模块 到一个新的全宽部分。
也可以看看： Divi：如何使用 Blurb 模块创建组织结构图
全宽分区分隔器
我们将为这个全角标题添加一个分隔符。 打开设置 全宽截面 .
然后向下滚动到 分频器 . 单击选项卡 半身裙/裤 并选择第 8 个分隔符样式。 将颜色设置为 #e5e8f0 并输入 10vw 作为高度。 关闭部分设置。
- 分频器：低
- 款式：第8款
- 颜色：#e5e8f0
- 高度：10vw
标题文本
接下来，打开全角标题模块并添加标题、副标题和按钮文本。 删除虚拟文本 内容 身体并留空。
- 标题：今天开始您的感觉更好的旅程。
- 副标题：Leslie Saindon，持牌治疗师
- 按钮 #1：预约
- 紧身衣裤：无
标题图片
滚动到 图片 并选择一个标题图像。 我选择随 治疗布局包.
标题背景
滚动到 背景. 删除背景颜色并选择选项卡 背景渐变.
- 梯度停止：
- 25%：#2e5b61
- 100%：RGBA（46、91、97、0,5）
启用 将渐变放在背景图像上方 .
- 背景图像上方的方形渐变：是
全宽页眉背景图片
然后选择背景图像选项卡 并选择全屏图像。 我正在使用 Therapy Layout Pack 中的另一张图片。
- 背景图像位置：顶部中心
全宽标题布局
然后选择设计选项卡 并激活 制作全屏 .
- 制作全屏：是
全角标题向下滚动图标
然后激活 显示向下滚动按钮. 我们将在示例中设置此按钮的样式，因此我们暂时将其保留为默认设置。
- 显示向下滚动按钮：是
标题图片
然后向下滚动到 图片 并将桌面的左上角圆角更改为 200px。 将其余的圆角设置为 0px。 将平板电脑和手机的圆角更改为 100 像素。
- 图片圆角：
- 桌面：左上角 200 像素，其他所有 0 像素
- 平板电脑和手机：左上角 100 像素，其他所有 0 像素
标题标题文本
然后向下滚动到 标题文本. 使用 H1 作为标题级别。 选择 Cormorant Garamond 作为标题字体，将粗体设置为粗体，将颜色设置为 #e1ecea。
- 标题：
- 标题级别：H1
- 字体：Cormorant Garamond
- 字体粗细：粗体
- 文字颜色：#e1ecea
然后设置 尺寸 适用于所有三种屏幕尺寸。 台式机使用 90 像素，平板电脑使用 40 像素，手机使用 24 像素。 将行高更改为 1.1em。
- 标题文字大小：90px、40px、24px
- 标题行高度：1,1 em
全角标题字幕文本
然后向下滚动到 字幕文字. 将字体更改为 Inter，将粗细更改为粗体，并将颜色更改为 #e1ecea。
- 副标题：
- 字体：国米
- 字体粗细：粗体
- 文字颜色：#e1ecea
设置 尺寸 台式机为 22 像素，平板电脑为 20 像素，手机为 16 像素。 更改 行高 在 1,6 分。
- 字幕文字大小：22px、20px、16px
- 字幕行高：1,6 em
标题按钮
向下滚动到设置 一键式 并激活 为按钮一使用自定义样式 . 将大小更改为 14 像素，将文本颜色更改为 #2e5b61，将背景颜色更改为 #e1ecea。
- 为按钮一使用自定义样式：是
- 一键式
- 文字大小：14px
- 文字颜色：#2e5b61
- 背景：#e1ecea
改变宽度 包边 在 0px 和半径 包边 50 像素。 使用 Inter 作为字体并将粗细更改为半粗体。
- 按钮一：
- 边框宽度：0px
- 边框半径：50px
- 字体：国米
- 重量：粗体
为 按钮填充 ，顶部和底部使用 20px，左右使用 40px。
- 按钮一内边距：上下 20 px，左右 40 px
另请参阅： Divi：如何创建流体英雄部分
向下滚动按钮示例
现在我们有了全角标题，让我们看看如何自定义向下滚动按钮。 我们将看四个具有各种图标、颜色和大小组合的示例。
向下滚动按钮包括三个参数。 可以针对每个屏幕尺寸单独调整每个设置。 参数包括：
- 图标的选择 - 从 11 个图标中选择。 它们包括各种带或不带背景的箭头设计，包括不带圆圈的、带圆圈的和实心的。
- 颜色 – 颜色选择器 Divi 标准。
- 尺寸 – 标准 Divi 尺寸调整。
它还在“高级”选项卡中包含一个 CSS 字段。
我们将使用所有这些参数。
也可以看看： Divi：适用于背景图像的 5 种蒙版和图案叠加
示例 #1
对于我们的第一个示例，我们将使用一个没有背景的无圆圈图标。 选择第一个图标，将颜色更改为#e1ecea，并将大小更改为台式机的 66 像素、平板电脑的 60 像素和手机的 50 像素。
- 图标：第一个图标
- 颜色：#e1ecea
- 尺寸：66px（台式机和平板电脑），50px（手机）
这会创建一个浅绿色的向下箭头，该箭头与设计的其余部分配合得很好，并且足够突出以通知用户。
例如2
对于我们的第二个示例，我们将使用带圆圈的图标。 选择第七个图标并将颜色更改为#e8c553。 我们将放大这个图标。 将大小更改为台式机的 78 像素、平板电脑的 70 像素和手机的 60 像素。
- 图标：第 7 个图标
- 颜色：#e8c553
- 尺寸：78px（台式机）、70px（平板电脑）、60px（手机）
这种颜色是布局包中黄色的变体，但颜色较浅，在绿色背景上效果最佳。 图标有尖角，但圆形与布局的圆形设计相匹配。
例如3
对于我们的第三个示例，我们将使用一个带有圆圈和背景的图标。 这会为背景着色并创建带有显示背景图像的光圈的图标 网站Web.
为了获得最佳效果，我们需要密切注意图标大小和按钮背景颜色。
选择第八个图标并将其颜色更改为#0e4951。 将大小设置为台式机的 60 像素、平板电脑的 56 pc 和手机的 50 像素。
- 图标：第 8 个图标
- 颜色：#0e4951
- 尺寸：60px（台式机）、56px（平板电脑）、50px（手机）
绿色是背景中较深的绿色阴影。 较深的阴影在绿色的映衬下显得格外醒目，并且仍然与布局的其余部分相匹配。
例如4
如果您想组合颜色以便在剪切图标后面有背景颜色怎么办？ 我们可以用 CSS 做到这一点。
在本例中，我们将使用 CSS 在图标后面创建一个背景形状，该形状将通过剪切图标显示。 图标本身将使用标准设置。
选择第十一个图标并将颜色更改为#e1ecea。 我们将把这个图标设置得更小，并制作一个大的背景形状。 将大小更改为台式机的 50 像素、平板电脑的 40 像素和手机的 30 像素。
- 图标：11EME
- 颜色：#e1ecea
- 尺寸：50px（台式机）、40px（平板电脑）、30px（手机）
然后转到选项卡 高级 并滚动到该字段 向下滚动按钮 并输入这个 CSS：
border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61这种 CSS 格式在顶部、右侧、底部和左侧添加了填充。 我使用此填充创建了一个背景椭圆形，该椭圆形与使用布局设计指南的标题设计相得益彰。
各种例子的结果
例如1
例如2
立即下载DIVI！！！
例如3
例如4
立即下载DIVI！！！
结论
这是我们对您可以包含在全角标题 Divi 模块中的四个向下滚动按钮的概述。 滚动按钮包括几个可供选择的图标，您可以设置其颜色和大小。
通过使用 CSS 字段，您可以进一步自定义按钮。 按钮样式选项和 CSS 的组合为您的向下滚动按钮提供了许多设计可能性。
希望这对您的下一个博客站点有用。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。
不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
