如何在 Divi 中创建粘性音频内容栏

添加粘性音频内容栏是一种很好的方式来展示音频剪辑，以便在用户滚动页面内容时轻松访问。 例如，播客可以将他们的精选音频“粘贴”在剧集页面的顶部，这样用户在收听和参与页面内容的其余部分时始终可以访问这些音频控件。

在本教程中，我们将利用 Divi 的内置粘性位置选项来获得一些创意，以在 Divi 中构建粘性音频内容栏。 我们将向您展示如何将页面上的现有音频内容（如带有音频模块的一行）转换为粘性音频内容栏，一旦用户在滚动时向上传递音频内容，该内容栏就会停留在窗口顶部。 此外，我们还将向您展示如何在进入粘性状态（或卡在窗口顶部）后更改栏的内容、样式和布局。 这种设计的平滑过渡和功能为在任何 Divi 网站上展示音频内容提供了独特的解决方案。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

下面是音频内容到粘性音频内容栏的过渡。

这是在滚动页面时如何与音频栏互动的情况。

免费下载布局

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

下载文件

免费下载

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

下载

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

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

第 1 部分：从 Divi Builder 上传播客预制布局包

为了在 Divi 中快速启动我们的粘性音频栏的设计，我们将使用预制的播客登录页面布局。 从设置菜单中，选择“从库加载”加号图标。 然后找到播客登陆页面布局并将其加载到页面中。

第 2 部分：创建粘性行以保存音频内容

在预制布局的最顶部，找到该顶部内的行。 然后在现有行下方添加一个新的单列行。

行设置

在添加任何模块之前，打开新行的设置并更新以下内容：

• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%
• 填充（桌面）：顶部 10 像素，底部 10 像素，左 10%，右 10%
• 填充（平板电脑和手机）：顶部 10 像素，底部 10 像素，左侧 10 像素，右侧 10 像素

要使行具有粘性，请转到高级选项卡并更新以下内容：

• 粘滞位置：粘在顶部

当向下滚动页面时，这将导致该行（很快将成为我们的音频内容栏）粘在浏览器窗口的顶部。

第 3 部分：添加音频内容

将音频模块添加到行

接下来，将现有（预先设计的）音频模块从顶部的第一行移动/拖动到您刚刚创建的新行中。 这将作为我们将包含在粘性音频播放器中的特色音频

使用 Blurb 模块添加 CTA

接下来，我们将创建一个 CTA，它将显示在我们的粘性音频内容栏的右侧。

要创建 CTA，请复制带有布局顶部的播放图标的模糊模块。

然后，将复制的模糊模块粘贴到顶部第二行的音频模块下。

第 4 部分：设计音频内容的样式

设计音频模块

一旦该行继承了粘性位置，我们就希望我们的音频模块具有不同的样式。 为此，请打开音频模块的设置并更新以下粘滞状态选项：

• 标题文字大小（粘性）：14px
• 标题行高度（粘性）：1.3em
• 标题行高度（粘性）：1.3em

所有这些都是缩小文本和间距，以便音频内容不会在我们的粘性栏中占用太多垂直空间。

接下来，我们要更改粘性状态下音频模块的宽度，如下所示：

• 宽度（桌面）：80%
• 宽度（粘性）：100%
• 最大宽度（粘性）：100%

接下来，我们需要调整音频模块的间距如下：

• 边距：0px 顶部，0px 底部
• 填充：顶部 0px，底部 0px，左侧 0px，右侧 20px

最后，我们需要在高级设置下添加一些自定义 CSS 片段，以便左对齐我们的文本并为我们的音频播放器按钮和滑块添加独特的颜色。

仅在粘性选项卡下将以下 CSS 添加到音频标题：

text-align:left;

仅在粘性选项卡下将以下 CSS 添加到Audio Meta 中：

text-align:left !important;

仅在粘性选项卡下将以下 CSS 添加到播放器按钮：

color: #fe4943;

仅在粘性选项卡下将以下 CSS 添加到播放器滑块当前：

background: #2c4ca3;

设计 Blurb CTA

接下来，我们将设计我们的简介模块，该模块将用作模拟 CTA 以查看所有剧集。

首先，将文本“All Episodes”添加到简介的正文内容中。

在设计选项卡下，更新以下内容：

• 正文字体：Lato
• 正文字体粗细：粗体
• 正文字体样式：TT
• 正文文字大小：10px
• 正文字母间距：2px
• 车身线高：1.3em

然后调整模糊图标的大小：

• 图标字体大小：50px

然后调整模块的大小如下：

• 内容宽度：100%
• 宽度：20%

现在返回内容选项卡并为模糊添加背景，如下所示：

• 背景颜色：#1a1844
• 背景图片：[添加图片]
• 背景图像混合：亮度

我们希望这个模块最初从视图中隐藏，直到行达到粘滞状态并且音频控制栏卡在窗口顶部。 为此，我们可以添加一些 css 片段，将模块隐藏在桌面上并在粘性状态下显示模块。

在高级选项卡下，更新以下自定义 CSS：

主要元素 CSS（桌面）：

display:none;

主要元素 CSS（粘性）：

display:block;

模糊图像 CSS：

margin-bottom: 10px

第 5 部分：在粘性状态下更改音频栏内容的对齐方式

现在粘性行只有一列，两个模块相互堆叠。 因此，粘滞条会在音频模块下方显示 CTA 简介。 这将占用过多的垂直空间，用于粘性条，并且看起来不太好。

为了确保列内的所有内容都水平和垂直对齐，我们。 可以使用 CSS flex 属性来调整我们模块在粘性状态下的布局。

为此，请打开包含两个模块的列的设置。

在高级选项卡下，将以下自定义 CSS 添加到主元素

主要元素（桌面）：

display:flex;
flex-direction:column;

主要元素（粘性）：

display:flex;
flex-direction: row;
align-items:center;
justify-content:center;

就是这样！ 让我们回顾一下结果。

最后结果

一旦行处于粘性状态，这是桌面上的设计。

这是移动设备上的设计。

这里有一些关于音频内容粘性栏魔术如何在实时页面上工作的视频剪辑。

最后的想法

Divi 的粘性位置选项可以成为网页设计师的强大工具。 在本教程中，我们向您展示了如何使用 Divi 的粘性样式选项以高级和创造性的方式创建粘性音频内容栏。 本教程中的一项独特技术是如何使用 flex 属性对齐粘性行的内容。 值得庆幸的是，Divi's 有一种方便的方法可以使用高级自定义 CSS 块将自定义代码片段添加到粘性状态，从而为我们提供所需的设计灵活性。 希望这会给你一些灵感，让你在下一个项目中创建一个。

我期待在评论中收到您的来信。

干杯!