Divi教程：如何将视频模块添加到Divi

平价 布莱尔Jersyer | Divi

使用“视频”模块时，将视频添加到Divi中的页面很简单。 该模块允许您嵌入任何来源的视频，还可以自定义缩略图和播放按钮。

如何在页面上添加视频模块

在将视频模块添加到页面之前，您必须先跳转到 Divi Builder。 一旦 Divi主题 安装在您的网站上，您会注意到一个按钮 使用Divi Builder 创建新页面时，在帖子编辑器上方。 单击此按钮以激活Divi Builder，并访问所有Divi Builder模块。 然后点击按钮 使用Visual Builder 以可视模式启动发电机。 您也可以点击按钮 使用Visual Builder 如果您已连接到WordPress仪表板，则在前台浏览网站时。

divi生成器

进入Visual Builder后，您可以单击灰色加号按钮将新模块添加到页面。 新模块只能添加到行内。 如果要开始新页面，请记住首先在页面中添加一行。

视频模块divi.png

在模组列表中找到视频模组，然后单击将其添加到页面。 修改列表是可搜索的，这意味着您也可以输入单词“ video”，然后单击Enter以自动查找并添加视频修改！ 添加模块后，模块选项列表将为您打招呼。 这些选项分为三个主要组： 包装内容 , 概念 et 先进 .

用例示例：将视频添加到目标页面

将视频添加到您的目标网页是一个很好的方法 促进 您的产品并提高转化率。 在此示例中，我将向您展示如何使用视频模块将视频添加到您的着陆页。 我在视频应该播放的地方画了一个红色圆圈。

在divi上创建视频exemple.jpg

使用Visual Builder，我添加了一个全角行（1列）的新部分。 在行设置的“设计”选项卡下，选择“使用自定义宽度”选项。 对于显示的“自定义宽度”选项，我输入自定义宽度767px。 这样可以确保我要在此行中添加的视频模块不会超过此宽度，并且在较大的屏幕尺寸上不会太大。

使用自定义宽度divi.png

然后，将视频模块添加到该行。 在“视频模块”设置的“内容”标签下，输入要嵌入到目标网页上的视频的视频URL。 在此示例中，我使用的是YouTube视频的网址。

在divi.png上添加视频

然后，通过单击“生成视频”按钮，为我的视频添加图像叠加层网址。 这会自动从视频中拉出一帧以用作新的自定义视频图标的覆盖。

添加叠加divi video.jpg

在“设计”标签下，我更改了播放图标的颜色以匹配我的登录页面。

编辑播放器图标divi video.jpg

现在，我的着陆页有一个视频，看上去很干净，符合我的设计。

最终设计的内容video.jpg

既然您已经看到了视频模块的实际运行，请在下面的部分中深入了解其所有设置。 我们已详细介绍了您在模块设置的每个选项卡中会找到的内容，并解释了每个功能的用途。

内容选项

参数模块divi.png

影片网址

Divi Video模块允许您使用两种不同的方法添加视频。 您可以通过单击“下载视频”按钮并选择所需的文件从计算机下载自己的视频文件，也可以输入来自第三方视频源（例如Youtube）的任何视频网址或Vimeo。 只需从您的浏览器复制并粘贴URL，然后将其粘贴到Video URL（视频URL）字段中，剩下的就由Divi负责！

图片叠加层网址

如果要设置自定义视频缩略图，并使用自定义播放按钮将其放置在标准视频界面上，以创建更清晰和风格化的外观，则可以选择使用“图像覆盖”字段来进行设置。 通过此控件，您可以上传自己的个性化图片，也可以自动让Divi从视频的网址生成一个。 大多数视频提供商（例如Youtube和Vimeo）都支持此选项。 只需单击“生成视频”按钮，然后让Divi负责其余的工作！

管理员标签

默认情况下，您的视频模块将在生成器中显示为“视频”标签。 管理员标签可让您更改此标签，以便于识别。

德观念选项

更改图标颜色

节设计divi.png设计

如果为视频窗格指定图像叠加层，则显示的视频在视频上包含播放图标。 您可以在此处指定此图标的颜色以匹配页面上的颜色。

高级选项

视频模块高级section.png

CSS标识符和类

这可用于向您的模块添加CSS ID或类。 然后可以在样式表或“主题选项自定义CSS”框中使用这些样式，以将自定义样式应用于模块。 CSS ID也可以通过锚点链接定位，以链接到页面的某些区域。

自定义CSS

您可以在此处向视频模块添加自定义CSS。

能见度

如果要在某些设备上隐藏视频模块，则可以选择要在其上禁用视频模块的设备。

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]下载DIVI主题[/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family =下载 TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

其他Divi教程

发表评论

您的电子邮件地址将不会被发表。 必填字段标 *

这个网站使用Akismet来减少不需要的。 详细了解如何使用您的评论数据.