使用 Divi 创建内联滚动显示

每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将网站提升到一个新的水平。

本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 DJ 布局包创建漂亮的内联滚动显示。 这是一种将注意力吸引到您网站上的特定列容器的好方法，而无需多次将其添加到您的页面。 我们将为该技术添加一个很酷的悬停/释放效果，以帮助访问者抓住列容器并在需要时将其放下。 您也可以免费下载 JSON 文件！

预览

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

桌面

移动的

免费下载内嵌滚动显示布局

要了解免费的内联滚动显示布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

让我们开始重建吧！

使用 DJ Layout Pack 的主页创建新页面

添加新页面

对于本用例教程，我们将使用其中一种 DJ 布局。 首先创建一个新页面，为页面指定标题并切换到 Visual Builder。

上传DJ主页

继续将 DJ 主页布局上传到您的页面。

为页面上的每个部分添加更高的 Z 索引值

为英雄部分添加更高的 Z 索引

我们将固定一个特定的列，并允许它显示在我们想要的任何地方。 反之亦然。 我们想把它隐藏在我们不希望它出现的地方。 为此，我们将为页面上的每个部分（除了列所在的部分，即页面上的部分 #2）赋予更高的 z 索引值。 首先打开英雄部分并在可见性设置中增加 z 索引。

• Z指数：2

复制 Z 索引

添加 z 索引后，您可以复制它。

粘贴到页面上除部分 #2 之外的其他部分

并将其粘贴到页面上的所有其他部分，除了部分 #2 （包含我们将转换为内嵌滚动显示的列的部分）。

更改第 2 部分

将列内容放在单独的行中

更改行列结构

让我们开始修改第二部分，从行的列结构开始。

重复行

继续克隆该行。

删除行中的模块

移除第一行中的文本和按钮模块以及第二行中的音频模块。

修改第 2 节中的第 1 行

移除一些音频模块（以适应更小的屏幕尺寸）

在接下来的步骤中，我们将修复包含音频模块的列。 现在，为了确保列适合较小屏幕尺寸的视口高度，我们需要移除一些音频模块。

将底部边距添加到行

继续打开行设置，转到设计选项卡并添加一些底部填充。 我们将需要这个空间来允许列在本教程后面的滚动中显示。

• 下边距：700px

打开列设置

是时候开始将列转换为内联滚动显示了！ 打开列设置。

悬停框阴影

然后，转到设计选项卡并在悬停时更改一些框阴影值。

• 框阴影模糊强度：150px
• 阴影颜色：rgba(0,0,0,0.55)

悬停变换比例

通过修改变换比例值来增加悬停时列的大小。

• 底部：110%
• 正确：110%

默认主元素

为了使该列固定，我们将向该列的主要元素添加几行 CSS 代码。

position: fixed;
bottom: 100px;
max-width: 800px !important;
width: 80% !important;

悬停主元素

确保将固定位置 CSS 行也添加到悬停主元素。 这将防止列闪烁。

position: fixed;

默认 Z 索引

现在，在正常情况下，我们希望模块出现在所有页面内容下方。 为了确保发生这种情况，我们将更改列的 z 索引。

• Z 指数：0

悬停 Z 索引

但是，在悬停时，我们希望该列与所有页面内容重叠。 一旦有人发布该列，它就会退回到所有页面内容之后的位置。 相应地更改悬停时的 z 索引：

• Z指数：10

修改第 2 节中的第 2 行

将顶部填充添加到列

出于审美目的，我们将打开第 2 部分第二行中的列并添加一些自定义顶部填充。

• 顶部填充：80px

将自定义底部边距添加到整个页面的部分

定位部分

打开部分设置

现在我们已经修改了内联滚动显示列，我们必须创建一些空间来显示它。 我们已经为它所在的行（700px底部填充）完成了这项工作，但我们将允许该列也显示在页面上的其他位置。 打开以下部分的部分设置：

添加底部边距

转到间距设置并添加一些底部边距。 添加底部边距将在页面上创建允许低 z 索引列显示的空白空间。

• 下边距：700px

定位部分

打开部分设置

接下来打开以下部分：

添加底部边距

并在此处添加一些底部边距。

• 下边距：700px

删除多余的部分填充

删除第 2 部分底部填充

现在，我们唯一要做的就是优化我们的设计与内联滚动显示的匹配方式。 打开页面上的第二部分并删除底部填充。

• 底部：0px

定位部分

打开部分设置

接下来打开以下部分设置：

删除底部填充和添加顶部填充

添加一些顶部填充并删除底部填充。

• 顶部填充：100px
• 底部填充：0px

定位部分

打开部分设置

进入最后一节。 打开分区设置。

去除顶部填充

去除顶部填充物，你就完成了！

• 顶部填充：0px

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 和 DJ Layout Pack 创建内联滚动显示。 这是向您的网站添加交互的好方法。 我们希望本教程也能激发您创建自己的固定内联滚动显示！ 如果您有任何问题或建议，请务必在下面的评论部分留言。

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