如何在 Divi 中为视频脚本创建自定义切换

为您的视频脚本添加自定义切换可以为您的网站带来很多好处。 事实上，只需为您网站上的每个视频添加一个视频脚本就可以改善用户体验、可访问性和 SEO。 用户可以选择阅读内容，这对于耳聋、听力障碍或在嘈杂的咖啡店里的人来说是一个很好的辅助功能。 而且您可以比观看视频（或视频字幕）更快地阅读成绩单。 此外，添加的内容可能会包含大量可改善 SEO 的关键字。 为视频抄本创建自定义切换也很好，因为它可以隐藏长格式的内容，直到需要它为止。

在本教程中，我们将为 Divi 中的视频转录创建自定义（和紧凑）切换。 为此，我们将通过简洁的改造来自定义 Divi 的切换模块，以便它可以很好地适应任何视频。 然后我们将向您展示如何使用 Youtube 自动生成的成绩单作为切换内容。 所有这一切都无需使用插件。

让我们开始吧！

抢先看

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

免费下载布局

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

下载文件

免费下载

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

下载

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

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

单击导入按钮。

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

然后点击导入按钮。

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

让我们进入教程，好吗？

你需要什么开始

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

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

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

在 Divi 中为视频转录创建自定义切换

第 1 部分：使用 Divi 视频模块将 Youtube 视频添加到页面

对于我们教程的第一部分，我们将使用 Divi 构建器中的视频模块将 youtube 视频添加/嵌入到页面中。 这个过程真的很简单。

但在添加视频之前，让我们向该部分添加一列行。

接下来，将视频模块添加到该行。

单击“视频 MP4 文件或 Youtube URL”选项下的添加视频加号图标。

然后在弹出窗口的左侧边栏上选择从 URL 插入操作。

在输入框中粘贴 YouTube 视频的 URL。

然后单击插入帖子按钮。

添加视频后，您可以向视频添加自定义叠加图像。

第 1 部分：为成绩单创建自定义切换

现在我们的视频已经就位，我们可以创建自定义切换来保存我们的转录内容。 为此，我们将自定义一个切换模块。

首先，直接在视频下添加一个切换模块。

在切换设置中，为标题文本添加单词“Transcript”。 （稍后我们将回到正文内容，以便稍后粘贴我们的 youtube 视频转录内容）

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

• 图标颜色：#42b3a9
• 打开切换背景颜色：透明
• 关闭切换背景颜色：透明
• 文本对齐：居中
• 标题字体：Roboto
• 标题字体样式：TT

• 最大宽度：800px
• 模块对齐：居中
• 填充：顶部 0px，底部 20px，左侧 0px，右侧 0px
• 边框宽度：0px

在高级选项卡下，我们需要添加一些 CSS 片段来完成切换的设计。

将以下 CSS 添加到切换标题：

display:inline-block;
padding: 1em 2.5em 1em 2em !important;

将以下 CSS 添加到切换图标：

right: 0.75em !important;

将以下 CSS 添加到切换内容：

max-height: 30vh;
overflow-y: scroll;
padding: 20px 3%;
background: #ffffff;
border: 2px solid #eeeeee;
border-radius: 5px;
text-align:left;

第 3 部分：从 Youtube 获取成绩单并将其添加到切换内容

手动为视频创建脚本可能有点麻烦。 并且有一些服务和插件可以以更专业的方式来完成（有些需要高价）。 但是对于本教程，我们将使用一种快速、简单且免费的方法。 我们将提取 Youtube 自动生成的视频脚本，并在我们的网站上使用。

为此，请转到您在 Youtube 上的视频并按照以下步骤操作：

1. 打开视频下方保存按钮旁边的更多操作下拉菜单（3 个水平点）。
2. 从列表中单击打开成绩单。
3. 在“成绩单”框的顶部，打开“更多操作”下拉菜单（3 个垂直点）。
4. 单击切换时间戳。 这将隐藏显示在每个文本块左侧的时间戳。

将框中的整个转录内容复制到剪贴板。

现在文本充满了换行符。 要删除这些内容，您可以访问 textfixer.com 并使用他们的免费换行符删除工具从文本中删除换行符。

在“删除换行符”部分下，选择“仅删除换行符”。

然后将转录文本粘贴到框中。

然后单击删除换行符按钮。

在标题为 New Text without Line Breaks 的部分下生成文本后，将文本复制到剪贴板。

返回您的站点，打开切换设置，然后将转录内容粘贴到模块中。

当然，成绩单文本缺少一堆大写字母、标点符号、段落等。但是，内容在那里并且可读。 但是，您可能需要花几分钟时间为读者清理文本。

就是这样！

最后结果

这是我们在 Divi 中自定义切换视频脚本的最终结果。

在桌面上...

在平板电脑上…

而在电话...

最后的想法

在本教程中，我们向您展示了如何将 Divi 切换模块转换为 Divi 中视频脚本的自定义切换。 单独切换的独特简洁设计具有超出视频脚本的应用范围。 我的意思是你可以在里面放任何你想要的文字。 但我认为它非常适合视频。 此外，如果您需要一个简单的解决方案，那么使用这些自动生成的 youtube 视频脚本肯定会派上用场。 但是，请随意探索其他选项来转录您的视频内容和/或与我们分享一些。

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

干杯!