WordPress divi主题

如何在 Scroll 上与 Divi 同步扩展副本

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

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

当某个部分的重点放在文案上时,确保文案不会被忽视是很重要的。 您可以使用许多技术将您的副本置于聚光灯下,但在本教程中,我们将向您展示如何使用 Divi 的新滚动效果在滚动上同步扩展副本。 当用户滚动时,副本的另一部分将出现,允许他们逐步阅读您提供的内容。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

扩大副本

移动的

扩大副本

免费下载 Scroll Layout 上的扩展副本

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

1. 创建剖面设计

添加新部分

背景颜色

首先向您正在处理的页面添加一个新部分。 打开部分设置并更改背景颜色。

  • 背景颜色:#151515

扩大副本

间距

接下来删除所有默认的顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px

扩大副本

WordPress divi主题

添加第 1 行

立柱结构

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

扩大副本

浆纱

在不添加任何模块的情况下,打开行设置并修改大小设置,如下所示:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:90%
  • 最大宽度:1380px

扩大副本

间距

接下来添加一些自定义顶部和底部填充。

  • 上边距:150px
  • 底部填充:150px

扩大副本

将文本模块 #1 添加到列

添加内容

然后,添加第一个文本模块,其中包含您选择的一些内容。

扩大副本

文字设置

转到模块的设计选项卡并相应地更改文本设置:

  • 文字字体:Livvic
  • 文字字体粗细:粗体
  • 文字颜色:#f1f1f1
  • 文字大小:170px(桌面)、100px(平板电脑)、70px(手机)
  • 文本行高:1em

扩大副本

fiverr建站WordPress程序员
  • 文字阴影水平长度:0.06em
  • 文字阴影垂直长度:0em
  • 文字阴影颜色:rgba(79,79,79,0.74)
  • 文本对齐方式:居中(桌面)、左(平板电脑和手机)

扩大副本

克隆文本模块两次

克隆文本模块两次。

扩大副本

更改内容

修改两个重复文本模块的内容。

扩大副本

独立站选品工具

添加第 2 行

立柱结构

使用以下列结构在前一行的正下方添加另一行:

扩大副本

浆纱

打开行设置并相应地更改大小设置:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

扩大副本

间距

接下来删除该行的默认顶部和底部填充。

高质量外链购买
  • 顶部填充:0px
  • 底部填充:0px

扩大副本

边界

接下来添加上边框。

  • 顶部边框宽度:1px
  • 顶部边框颜色:#4c4c4c

扩大副本

列设置

间距

我们也在对列设置进行一些更改。 打开设置并添加一些自定义填充值。

  • 顶部填充:5vw
  • 底部填充:10vw
  • 左填充:6vw
  • 右填充:6vw

扩大副本

JasperAI 10000字免费额度试用

边界

也使用右边框。

  • 右边框宽度:1px
  • 右边框颜色:#4c4c4c

扩大副本

将 Blurb 模块添加到第 1 列

添加内容

继续在列中添加一个包含您选择的一些内容的 Blurb 模块。

扩大副本

选择图标

接下来选择您选择的图标。

WordPress备份工具updrafplus

扩大副本

图标设置

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

  • 图标颜色:#a3acff
  • 图像/图标对齐:左

扩大副本

标题文本设置

修改标题文本设置。

  • 标题字体:Livvic
  • 标题字体粗细:粗体
  • 标题文字颜色:#c1c1c1
  • 标题文字大小:35px

扩大副本

  • 标题文字阴影水平长度:0.06em
  • 标题文字阴影垂直长度:0em
  • 标题文字阴影颜色:rgba(79,79,79,0.74)

扩大副本

正文文本设置

我们也在对正文设置进行一些更改。

  • 正文颜色:#878787
  • 正文大小:16px
  • 车身线高:2.4em

扩大副本

模糊标题 CSS

我们将使用一行 CSS 代码在标题周围创建一些空间,我们将添加到高级选项卡中的简介标题中。

margin: 30px 0 40px 0;

扩大副本

克隆整个列两次

完成整个列和其中的 Blurb 模块后,您可以克隆整个列两次。

扩大副本

删除第 3 列边框

打开第 3 列设置并删除右边框。

扩大副本

更改内容

并更改每个副本的 Blurb Module 内容。

扩大副本

2.添加滚动效果

部分

放大和缩小

是时候添加滚动效果了,从章节开始。 使用具有以下值的放大和缩小滚动效果:

  • 启用向上和向下扩展:是
  • 起始比例:70%
  • 中档:100%
  • 结束比例:100%

扩大副本

文本模块 #1

淡入淡出

然后,打开部分第一行中的第一个文本模块并添加淡入淡出效果。

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

扩大副本

放大和缩小

也使用放大和缩小效果。

  • 启用向上和向下扩展:是
  • 起始比例:0%(47%)
  • 中等规模:100%(56%)
  • 结束比例:100%(64%)

扩大副本

扩展文本模块 #1 滚动效果

继续将滚动效果扩展到列中的其他两个文本模块。

扩大副本

  • 致:所有文本
  • 通篇:本专栏

扩大副本

模糊模块 #1

放大和缩小

接下来,我们将在第 1 列的 Blurb 模块中添加一个上下滚动效果。

  • 启用向上和向下扩展:是
  • 起始规模:
    • 桌面:0%
    • 平板电脑和手机:100%
  • 中等规模:100%(33%)
  • 结束比例:100%(64%)

扩大副本

扩展模糊模块 #1 滚动效果

通过将滚动效果扩展到行中的所有 Blurb 模块来完成教程,您就完成了!

扩大副本

  • 至:所有的简介
  • 贯穿:这一行

扩大副本

预览

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

桌面

扩大副本

移动的

扩大副本

最后的想法

在本教程中,我们向您展示了一种在 Divi 部分同步扩展副本的创造性方法。 这是突出副本并允许访问者逐步阅读您部分的不同部分的好方法。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

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

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