如何使用 Divi 创建一个完全水平的滑动页面

已发表: 2019-03-16

你有没有想过创建一个完全水平的页面，使用滑动和锚链接来导航？ 好吧，如果您已经知道并且不完全知道如何处理它，那么这对您来说是理想的职位。 我们将向您展示如何使用 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 ID：swipe-1

滑动页面

自定义 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（平板电脑和手机）

滑动页面

浆纱

接下来在大小设置中修改宽度。

  • 宽度：77%

滑动页面

间距

并为较小的屏幕尺寸添加一些底部边距。

  • 下边距：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 列中的文本模块后，您可以克隆它并将副本放置在第二列中。

滑动页面

更改内容

确保更改内容。

滑动页面

克隆 Row #1 三次

两行都完成后，您可以克隆第一行 3 次。

滑动页面

更改重复 #1

更改行 CSS ID

我们需要更改第一个重复项的 CSS ID。

  • CSS ID：swipe-2

滑动页面

更改模糊模块的（第 1 列）图标颜色

连同第一个 Blurb 模块的颜色。

  • 图标颜色：#333333

滑动页面

更改两个 Blurb 模块的链接

要使锚链接起作用，您必须相应地更改每个箭头的链接：

  • 模块链接网址：https://www.yourwebsite.com/page/#swipe-1

滑动页面

  • 模块链接网址：https://www.yourwebsite.com/page/#swipe-3

滑动页面

更改重复 #2

更改行 CSS ID

更改第二个副本的 CSS ID。

  • CSS ID：swipe-3

滑动页面

更改模糊模块的（第 1 列）图标颜色

以及第一个 Blurb 模块的图标颜色。

  • 图标颜色：#333333

滑动页面

更改两个 Blurb 模块的链接

再次，相应地更改每个 Blurb 模块的链接：

  • 模块链接网址：https://www.yourwebsite.com/page/#swipe-2

滑动页面

  • 模块链接网址：https://www.yourwebsite.com/page/#swipe-4

滑动页面

更改重复 #3

更改 CSS ID

更改第三行重复的 CSS ID。

  • CSS ID：swipe-4

滑动页面

更改模糊模块的（第 2 列）图标

并为第 3 列中的 Blurb 模块选择另一个图标。

滑动页面

更改模糊模块的（第 2 列）链接

确保点击后，访问者将通过相应地修改模块链接 URL 重定向到第一部分列：

  • 模块链接网址：https://www.yourwebsite.com/page/#swipe-1

滑动页面

克隆 Row #2 三次

进入下一行。 也将这一行克隆 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 实现一些令人惊叹的水平滑动网页设计。 如果您有任何问题或建议，请务必在下方评论区留言！