在您可以将视频模块添加到您的页面之前,您必须首先使用 Divi Builder。 一旦 Divi主题 安装在您的 网站Web,你会注意到一个按钮 使用可视化构建器 每次创建新页面时,位于发布商上方。

单击此按钮以激活Divi Builder,并访问所有Divi Builder模块。 然后点击按钮 使用可视化构建器 以可视模式启动发电机。 您也可以点击按钮 启用Visual Builder 当您浏览您的 网站Web 如果您登录到 WordPress 仪表板,则在前台。

去视觉builder.jpeg

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

添加video.jpeg模块

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

添加video.jpeg模块

用内容填充视频光标

如何填写视频内容Divi模块video.jpg

调整太多设置之前,最好先将视频幻灯片填充到视频滑块中。 这样,当您进行更改时,您将能够看到它们如何影响最终结果。 要添加新的视频幻灯片,您需要单击链接 +添加新项目 .

添加一个新的video.jpeg元素

在这里您可以下载.mp4或Webm文件。 您也可以在YouTube上插入视频URL。 上传文件或添加YouTube链接后,只需单击右下角的绿色按钮,您将返回到视频滑块模块的主要内容标签。 对您要添加的每个视频重复此过程。

视频滑块模块内容设置

现在,您的内容已添加,还有更多需要探索的领域。 内容选项卡上的三个下拉菜单(其中设置已分组)将影响整个模块。

分子

在这些项目下方,您可以调整视频滑块模块的箭头和滑块设置。

在这里,您可以选择显示或隐藏主视频上的视频叠加。 这可以通过在每个视频幻灯片上添加叠加层来完成,也可以由Divi自动生成。

管理员标签

在此下拉列表中,您可以添加将显示在后端构建器中的admin标签以及可视化构建器的框架视图。

视频滑块模块设计参数

视频选项design.jpeg

在此标签中,只有一个参数组称为 色彩控制 。 在这里,您可以将滑块控件的颜色从浅更改为暗,更改播放图标的颜色,并调整缩略图的叠加颜色。

视频滑块模块高级设置

高级参数module.jpeg

在视频滑块模块的“高级”选项卡中,可以添加唯一的ID和CSS类。 您还可以在自定义CSS下拉视频滑块模块中,将自定义CSS添加到各种预定义(和预选)的CSS选择器中。 最后,在可见性下拉列表中,您可以调整模块在手机,平板电脑和台式机上的可见性。

个别影片内容设定

配置videos.jpeg

如果要为单个幻灯片创建特定设置,则必须在视频幻灯片本身中进行配置。 只需单击该幻灯片上的齿轮图标即可打开其唯一设置。

个人视频配置.jpeg

视频

如上所述,您可以在此处添加视频内容。

从覆盖下拉列表中,您可以上传图像以覆盖视频幻灯片,或选择自动生成图像。

个别影片设计设定

设置视频

在视频幻灯片的“设计”选项卡上,可以将幻灯片箭头的颜色从浅色更改为深色。

个人视频配置

这就是本教程的全部内容,希望它可以让您在Divi上使用视频滚动模块。

[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教程