你有没有想过创建一个完全水平的页面，使用滑动和锚链接来导航？ 好吧，如果您有并且不完全知道如何处理它，那么这是适合您的理想帖子。 我们将向您展示如何使用 Divi 创建一个完全水平的滑动页面。 这种技术确实可以帮助您使您的网站脱颖而出，并符合 2019 年的网页设计趋势。我们将创建的结果在所有屏幕尺寸上看起来都很棒。
让我们开始吧！
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
方法
- 我们将仅使用一个部分创建整个页面
- 我们将在教程末尾使用几行 CSS 代码将该部分转换为水平网格
- 水平网格会将每一行放置在水平放置的列中
- 您可以决定一个部分包含多少个水平列
- 在这种情况下，我们将使用 4 个不同的列，每个列由 2 行组成
- 您可以修改创建的水平列数并确定每个部分列包含多少行
- 我们还使用锚链接来帮助人们浏览不同的部分列
- 最重要的是，我们正在添加平滑滚动和部分滚动捕捉效果，这将使您的访问者轻松导航
让我们开始重新创建
添加新部分
背景颜色
创建一个新页面并向其中添加一个常规部分。 打开部分设置并更改背景颜色。
- 背景颜色：#ffffff
间距
然后，转到间距设置并在不同的屏幕尺寸上添加一些自定义填充。
- 顶部填充：10.5vw（台式机）、15vw（平板电脑）、10vw（手机）
- 底部填充：3vw（台式机和平板电脑），10vw（手机）
添加第 1 行
立柱结构
继续使用以下列结构添加新行：
浆纱
在不添加任何模块的情况下，打开行设置并让行占据屏幕的整个宽度。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
接下来转到间距设置，并对所有不同的屏幕尺寸进行一些更改。
- 顶部填充：0px
- 底部填充：0px
- 左填充：6vw（平板电脑和手机）
- 右填充：6vw（平板电脑和手机）
- 第 1 列底部填充：15vw（平板电脑和手机）
- 第 2 列左侧填充：4vw（桌面）、0vw（平板电脑和手机）
CSS ID
我们需要为我们创建的每个部分列的第一行分配一个 CSS ID。 这将帮助我们稍后在这篇文章中创建锚箭头。
自定义 CSS
如本文的方法部分所述，我们还对机制应用了平滑滚动和捕捉效果。 为此，我们需要在我们创建的每个水平列的第一行添加一行 CSS 代码。
scroll-snap-align: start;
将 Blurb 模块添加到第 1 列
选择图标
我们现在可以开始添加模块了！ 从第 1 列中的 Blurb 模块开始。打开模块设置并选择左箭头图标。
图标设置
然后，转到设计选项卡并对图标的外观进行一些更改。
- 图标颜色：rgba(255,255,255,0)
- 图像/图标位置：顶部
- 使用图标字体大小：是
- 图标字体大小：5vw（桌面）、13vw（平板电脑）、21vw（手机）
间距
接下来添加一些自定义边距值。
- 最高边距：14vw（台式机）、-11vw（平板电脑）、-17vw（手机）
- 左边距：60vw（平板电脑和手机）
能见度
我们还将模块隐藏在较小的屏幕尺寸上。
将文本模块添加到第 2 列
添加H2含量
我们需要的下一个模块是第 2 列中的文本模块。添加一些 H2 内容。
H2 文本设置
然后，转到设计选项卡并修改 H2 文本设置。
- 标题 2 字体：Source Serif Pro
- 标题 2 文本对齐：左
- 标题 2 文本大小：3vw（桌面）、7vw（平板电脑和手机）
浆纱
接下来在尺寸设置中修改宽度。
间距
并为较小的屏幕尺寸添加一些底部边距。
- 底边距：15vw（平板电脑和手机）
将按钮模块添加到第 2 列
添加内容
在您添加的文本模块正下方，继续添加一个按钮模块。 输入一些副本。
按钮设置
然后，转到设计选项卡并更改按钮设置。
- 为按钮使用自定义样式：是
- 按钮文字大小：0.9vw（桌面）、2vw（平板电脑）、3.5vw（手机）
- 按钮文字颜色：#000000
- 按钮边框宽度：1px
- 按钮边框颜色：#000000
- 按钮边框半径：0px
- 按钮字体：Mukta
- 字体粗细：粗体
- 字体样式：大写
间距
接下来添加一些自定义边距和填充。
- 最高利润率：6vw（桌面）、4vw（平板电脑和手机）
- 上边距：15px
- 底部填充：15px
- 左填充：50px
- 右内边距：50px
将 Blurb 模块添加到第 3 列
选择图标
我们在这一行中需要的下一个也是最后一个模块是第 3 列中的另一个 Blurb 模块。选择您选择的图标。
关联
然后，转到链接设置并添加一个链接，将访问者引导到该部分的第二个水平列。
- 模块链接网址：https://www.yourwebsite.com/page/#swipe-2
图标设置
继续并更改图标设置。
- 图标颜色：#333333
- 图像图标位置：顶部
- 使用图标字体大小：是
- 图标字体大小：5vw（桌面）、13vw（平板电脑）、21vw（手机）
间距
继续在不同的屏幕尺寸上添加一些自定义的上边距和左边距。
- 最高边距：14vw（台式机）、-11vw（平板电脑）、-17vw（手机）
- 左边距：60vw（平板电脑和手机）
添加第 2 行
立柱结构
我们需要的第二行使用以下列结构：
背景颜色
尚未添加任何模块，打开行设置并更改背景颜色。
- 背景颜色：#f7f7f7
浆纱
接下来修改大小设置。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
以及间距设置中的自定义填充和边距值。
- 最高边距：-3.5vw（台式机）、-10vw（平板电脑）、-17vw（手机）
- 顶部填充：8vw（台式机）、15vw（平板电脑）、20vw（手机）
- 底部填充：8vw（桌面）、15vw（平板电脑）、20vw（手机）
- 左填充：24vw（桌面）、5vw（平板电脑和手机）
- 右侧填充：24vw（桌面）、5vw（平板电脑和手机）
- 第 1 列右侧填充：2vw（桌面）、0vw（平板电脑和手机）
- 第 2 列左侧填充：2vw（桌面）、0vw（平板电脑和手机）
将文本模块添加到第 1 列
添加内容
继续在第一列中添加一个文本模块。 输入您选择的一些副本（包括 H3 标题）。
文字设置
转到设计选项卡并更改文本设置。
- 文字字体：Open Sans
- 文字大小：0.65vw（桌面）、1.8vw（平板电脑）、2.7vw（手机）
- 文字行高：1.8em
H3 文字设置
连同 H3 文本设置。
- 标题 3 字体：Mukta
- 标题 2 字体粗细：粗体
- 标题 3 字体样式：大写
- 标题 3 文本大小：0.8vw（桌面）、3vw（平板电脑）、4vw（手机）
- 标题 3 行高：1.8em
间距
也为较小的屏幕尺寸添加一些底部边距。
- 底边距：5vw（平板电脑和手机）
克隆文本模块并放入第 2 列
修改完第 1 列中的文本模块后，您可以克隆它并将副本放在第二列中。
更改内容
确保更改内容。
克隆第 1 行 3 次
两行都完成后，您可以克隆第一行 3 次。
更改重复 #1
更改行 CSS ID
我们需要更改第一个副本的 CSS ID。
更改 Blurb 模块（第 1 列）的图标颜色
连同第一个 Blurb Module 的颜色。
更改两个 Blurb 模块的链接
要使锚链接起作用，您必须相应地更改每个箭头的链接：
- 模块链接网址：https://www.yourwebsite.com/page/#swipe-1
- 模块链接网址：https://www.yourwebsite.com/page/#swipe-3
更改重复 #2
更改行 CSS ID
更改第二个副本的 CSS ID。
更改 Blurb 模块（第 1 列）的图标颜色
以及第一个 Blurb 模块的图标颜色。
更改两个 Blurb 模块的链接
同样，相应地更改每个 Blurb 模块的链接：
- 模块链接网址：https://www.yourwebsite.com/page/#swipe-2
- 模块链接网址：https://www.yourwebsite.com/page/#swipe-4
更改重复 #3
更改 CSS ID
更改第三行重复的 CSS ID。
更改 Blurb 模块的（第 2 列）图标
并在第 3 列中为 Blurb Module 选择另一个图标。
更改 Blurb 模块（第 2 列）的链接
确保在点击时，访问者将通过相应地修改模块链接 URL 被重定向到第一部分列：
- 模块链接网址：https://www.yourwebsite.com/page/#swipe-1
克隆第 2 行 3 次
到下一行。 将此行克隆 3 次。
更改重复 #1 的行背景颜色
更改第一个副本的背景颜色。
- 背景颜色：#dcdced
更改重复 #2 的行背景颜色
第二个副本使用以下背景颜色：
- 背景颜色：#ffeed1
更改重复 #3 的行背景颜色
更改第三行副本的背景颜色。
- 背景颜色：#d6ffe5
将 CSS ID 和 CSS 代码添加到部分
现在我们已经拥有了我们需要的所有行，我们可以让魔法发生。 将 CSS ID 添加到整个部分。 稍后在这篇文章中，我们将使用这个 CSS ID 来隐藏滚动条。
- CSS ID：部分滚动条
然后，转到自定义 CSS 选项并将几行 CSS 代码添加到主元素。
overflow-y: scroll; display: grid; grid-template-columns: repeat(4, 100%); scroll-behavior: smooth; scroll-snap-type: x mandatory;
您要创建的部分列越多，您必须在 CSS 代码中添加的列就越多。 因此，假设您希望具有相同的结构但允许 7 次滑动而不是 4 次滑动，您必须相应地修改网格模板列 CSS 代码行：
grid-template-columns: repeat(7, 100%);
但请记住，如果要增加列号，则必须添加更多行。 因此，在这种情况下，如果您希望每个部分列显示两行，则需要 14 行。
隐藏滚动条
您还可以选择隐藏滚动条，方法是使用部分 CSS ID 并将以下几行 CSS 代码添加到页面设置：
#section-scrollbar::-webkit-scrollbar {
display: none;
}
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
使用 Divi 设计网站时，最直接的做法是向下构建。 但仅仅因为它是最简单的事情，并不意味着您仅限于该选项。 您也可以创建一个完全水平的滑动页面。 在本教程中，我们向您展示了如何使用 Divi 实现一些令人惊叹的水平滑动网页设计。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！