你有没有想过创建一个完全水平的页面,使用滑动和锚链接来导航? 好吧,如果您有并且不完全知道如何处理它,那么这是适合您的理想帖子。 我们将向您展示如何使用 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 实现一些令人惊叹的水平滑动网页设计。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!