WordPress divi主题

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

| 5月 14, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

你有没有想过创建一个完全水平的页面,使用滑动和锚链接来导航? 好吧,如果您有并且不完全知道如何处理它,那么这是适合您的理想帖子。 我们将向您展示如何使用 Divi 创建一个完全水平的滑动页面。 这种技术确实可以帮助您使您的网站脱颖而出,并符合 2019 年的网页设计趋势。我们将创建的结果在所有屏幕尺寸上看起来都很棒。

google广告开户

让我们开始吧!

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

滑动页面

移动的

滑动页面

方法

  • 我们将仅使用一个部分创建整个页面
  • 我们将在教程末尾使用几行 CSS 代码将该部分转换为水平网格
  • 水平网格会将每一行放置在水平放置的列中
  • 您可以决定一个部分包含多少个水平列
  • 在这种情况下,我们将使用 4 个不同的列,每个列由 2 行组成
  • 您可以修改创建的水平列数并确定每个部分列包含多少行
  • 我们还使用锚链接来帮助人们浏览不同的部分列
  • 最重要的是,我们正在添加平滑滚动和部分滚动捕捉效果,这将使您的访问者轻松导航

让我们开始重新创建

添加新部分

背景颜色

创建一个新页面并向其中添加一个常规部分。 打开部分设置并更改背景颜色。

  • 背景颜色:#ffffff

滑动页面

间距

然后,转到间距设置并在不同的屏幕尺寸上添加一些自定义填充。

  • 顶部填充:10.5vw(台式机)、15vw(平板电脑)、10vw(手机)
  • 底部填充:3vw(台式机和平板电脑),10vw(手机)

滑动页面

添加第 1 行

立柱结构

继续使用以下列结构添加新行:

WordPress divi主题

滑动页面

浆纱

在不添加任何模块的情况下,打开行设置并让行占据屏幕的整个宽度。

  • 使这一行全宽:是
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

滑动页面

间距

接下来转到间距设置,并对所有不同的屏幕尺寸进行一些更改。

  • 顶部填充:0px
  • 底部填充:0px
  • 左填充:6vw(平板电脑和手机)
  • 右填充:6vw(平板电脑和手机)
  • 第 1 列底部填充:15vw(平板电脑和手机)
  • 第 2 列左侧填充:4vw(桌面)、0vw(平板电脑和手机)

滑动页面

CSS ID

我们需要为我们创建的每个部分列的第一行分配一个 CSS ID。 这将帮助我们稍后在这篇文章中创建锚箭头。

滑动页面

自定义 CSS

如本文的方法部分所述,我们还对机制应用了平滑滚动和捕捉效果。 为此,我们需要在我们创建的每个水平列的第一行添加一行 CSS 代码。

scroll-snap-align: start;

滑动页面

将 Blurb 模块添加到第 1 列

选择图标

我们现在可以开始添加模块了! 从第 1 列中的 Blurb 模块开始。打开模块设置并选择左箭头图标。

fiverr建站WordPress程序员

滑动页面

图标设置

然后,转到设计选项卡并对图标的外观进行一些更改。

  • 图标颜色: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(平板电脑和手机)

滑动页面

JasperAI 10000字免费额度试用

将按钮模块添加到第 2 列

添加内容

在您添加的文本模块正下方,继续添加一个按钮模块。 输入一些副本。

滑动页面

按钮设置

然后,转到设计选项卡并更改按钮设置。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:0.9vw(桌面)、2vw(平板电脑)、3.5vw(手机)
  • 按钮文字颜色:#000000
  • 按钮边框宽度:1px

滑动页面

  • 按钮边框颜色:#000000
  • 按钮边框半径:0px
  • 按钮字体:Mukta
  • 字体粗细:粗体
  • 字体样式:大写

滑动页面

WordPress备份工具updrafplus

间距

接下来添加一些自定义边距和填充。

  • 最高利润率: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 实现一些令人惊叹的水平滑动网页设计。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!