WordPress divi主题

如何用 Divi 在 Scroll 上讲述您的故事

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

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

您的关于页面是您网站上最重要的页面之一。 它可以让人们更好地了解你,并决定他们是否愿意采取下一步行动。 如果您正在寻找一种在“关于”页面中包含讲故事的流畅方式,那么您会喜欢本教程的。 我们将使用 Divi 的滚动效果在滚动上创建平滑的叙事过渡。 一旦故事的一部分消失,另一部分就会消失。这让访问者感觉他们正在阅读一个有趣的故事。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

卷轴上的故事

移动的

卷轴上的故事

订阅我们的 Youtube 频道

免费下载 Scroll Layout 上的 About Page Story

要免费获得有关滚动布局的页面故事,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

1. 创建页面的第一个全屏部分

添加新部分

背景颜色

首先将第一部分添加到您的关于页面。 打开部分设置并将背景颜色更改为黑色。

  • 背景颜色:#000000

卷轴上的故事

WordPress divi主题

浆纱

接下来通过在尺寸设置中添加最小高度来将部分全屏显示。

卷轴上的故事

2.添加动画行

添加新行

立柱结构

然后,使用以下列结构向您的部分添加新行:

卷轴上的故事

浆纱

打开行设置并通过修改大小设置允许行占据整个部分容器的宽度。

  • 宽度:100%
  • 最大宽度:100%

卷轴上的故事

间距

然后,在不同的屏幕尺寸上添加一些左右填充。

  • 左填充:20vw(桌面),10vw(平板电脑和手机)
  • 右填充:20vw(桌面)10vw(平板电脑和手机)

卷轴上的故事

动画片

为了增加讲故事的效果,我们还将为行使用淡入淡出动画。

  • 动画风格:淡入淡出
  • 动画时长:3000ms
  • 动画速度曲线:Ease-In-Out
  • 动画重复:一次

卷轴上的故事

fiverr建站WordPress程序员

位置

最后但并非最不重要的一点是,我们将通过修改位置选项确保该行位于部分容器内的中心位置。

  • 职位:绝对
  • 地点:中心

卷轴上的故事

3.插入带有滚动效果的标题

将文本模块 #1 添加到列

添加H1内容

我们在这一行中唯一需要的模块是一个带有一些 H1 内容的文本模块。

卷轴上的故事

标题 1 文本设置

转到模块的设计选项卡并更改 H1 文本设置,如下所示:

独立站选品工具
  • 标题字体:Nunito
  • 标题字体粗细:半粗体
  • 标题文字颜色:#ffffff
  • 标题文字大小:7vw(桌面)、9vw(平板电脑)、11vw(手机)

卷轴上的故事

垂直运动

我们还将添加一个微妙的垂直动画。

  • 启用垂直运动:是
  • 起始偏移量:0(在 50% 时)
  • 中偏移:10(100% 时)
  • 结束偏移:10

卷轴上的故事

淡入淡出滚动效果

伴随着淡入淡出的效果。

  • 启用淡入和淡出:是
  • 起始不透明度:100%
  • 中等不透明度:100%(55%)
  • 结束不透明度:0%(62%)

卷轴上的故事

高质量外链购买

放大和缩小滚动效果

最后但并非最不重要的一点是,我们还将使用放大和缩小滚动效果。

  • 启用向上和向下扩展:是
  • 起始比例:100%(40%)
  • 中档:95%(74%)
  • 结束比例:90%

卷轴上的故事

4.克隆整个部分一次并包含带有滚动效果的描述文本

更改内容标题和复制

完成第一部分后,您可以完全克隆它。 打开重复部分容器内的文本模块并使用一些 H2 副本。

卷轴上的故事

修改文本模块 H2 文本设置

相应地更改 H2 文本设置:

JasperAI 10000字免费额度试用
  • 标题 2 字体:Nunito
  • 标题 2 字体粗细:半粗体
  • 标题 2 文本颜色:#ffffff
  • 标题 2 文本大小:5vw(桌面)、7vw(平板电脑)、8vw(手机)
  • 标题 2 行高:1em(桌面)、1.2em(平板电脑和手机)

卷轴上的故事

将文本模块 #2 添加到列

添加内容

接下来,将另一个文本模块添加到包含您选择的一些描述内容的列中。

卷轴上的故事

文字设置

更改文本模块的文本设置如下:

  • 文字字体:Open Sans
  • 文字颜色:#ffffff
  • 文字大小:1vw(桌面)、2.5vw(平板电脑)、3vw(手机)
  • 文本行高:3.1em(桌面),2.5em(平板电脑和手机)

卷轴上的故事

WordPress备份工具updrafplus

间距

也使用一些上边距。

卷轴上的故事

淡入淡出滚动效果

然后,转到高级选项卡中的滚动效果,并使用以下淡入和淡出设置:

  • 启用淡入和淡出:是
  • 起始不透明度:100%
  • 中等不透明度:0%(31%)
  • 结束不透明度:0%(35%)

卷轴上的故事

放大和缩小滚动效果

添加放大和缩小效果。

  • 启用向上和向下扩展:是
  • 起始比例:100%(40%)
  • 中档:95%(74%)
  • 结束比例:90%

卷轴上的故事

5. 尽可能多地克隆第二部分

随时更改内容

完成页面上的第二部分后,您可以根据需要克隆它任意多次,具体取决于您的关于页面的故事情节。 确保更改每个部分的内容。

卷轴上的故事

6. 包含 CTA 部分的完整页面

更改描述文本模块间距

完成关于页面的末尾有一个 CTA 部分。 打开描述文本模块并修改顶部和底部边距。

  • 最高边距:4vw
  • 底边距:4vw

卷轴上的故事

添加按钮模块

添加副本

然后,添加一个按钮模块以及您选择的一些副本。

卷轴上的故事

按钮设置

转到模块的设计选项卡并更改按钮设置,如下所示:

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

卷轴上的故事

  • 按钮边框半径:100px
  • 按钮字体:Nunito
  • 按钮字体粗细:粗体

卷轴上的故事

间距

通过添加一些跨不同屏幕尺寸的自定义填充值来完成按钮模块设置。

  • 顶部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 底部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 左填充:3vw(桌面)、6vw(平板电脑)、8vw(手机)
  • 右填充:3vw(桌面)、6vw(平板电脑)、8vw(手机)

卷轴上的故事

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

卷轴上的故事

移动的

卷轴上的故事

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的内置滚动效果在您的 about 页面上讲述故事。 我们创建的效果允许连续副本淡入淡出,给访问者一种他们正在阅读故事的印象。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请务必订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题