WordPress divi主题

如何使用 Divi 的视频滑块模块创建播放列表页面

by | Apr 23, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

播放列表页面是一种以用户易于访问的方式呈现相似内容的有效方式。 Divi Video Slider 模块是构建包含视频内容(例如课程和教程)的播放列表页面的好方法。 在本文中,我们将了解如何使用 Divi 的 Video Slider 模块使用多个部分和多个支持模块创建播放列表页面。

google广告开户

让我们开始吧。

播放列表页面预览

首先,看看我们将构建什么。

桌面

播放列表页面

电话

播放列表页面

创建播放列表页面

我们的页面将包含三个部分,每个部分有两行。 每个部分将有5个模块。 创建第一部分后,我们将复制两次并进行更改以创建第二和第三部分。

我们的第一部分和行将使用默认样式。 我正在使用 Divi 中提供的免费 Print Shop Layout Pack 中的样式队列。 为了便于理解,我将使用线框视图构建页面并使用桌面视图对其进行样式设置。

全宽行

首先,创建一个 新页面,启用 视觉生成器, 和 添加全宽行.

创建播放列表页面

2/3 1/3 行

在这一行下, 添加 2/3、1/3 行.

WordPress divi主题

创建播放列表页面

添加视频滑块标题文本模块

在全宽行中,添加一个 文本模块.

添加视频滑块标题文本模块播放列表页面

添加视频滑块模块

接下来,添加一个 视频滑块模块 到 2/3、1/3 行的左列。

添加视频滑块模块播放列表页面

添加视频滑块描述标题文本模块

接下来,添加一个 文本模块 在视频滑块模块下。 这将用于介绍描述。

添加视频滑块描述标题文本模块播放列表页面

添加视频滑块描述文本模块

接下来,添加 文本模块 这将包含描述。 这在描述标题模块下。

添加视频滑块描述文本模块播放列表页面

添加人员模块

最后,添加一个 人物模块 在 2/3、1/3 行的右列。

fiverr建站WordPress程序员

添加人员模块

为视频播放列表页面设置样式

你的页面现在看起来像我的了。 这是线框视图。 现在是时候对模块进行样式设置了。 我们将切换到桌面视图。 由于我构建页面的方式,我的不会显示默认内容。

为视频播放列表页面设置样式

设置播放列表页面视频滑块标题文本模块的样式

打开 设置 对于第一个文本模块。

设置视频滑块标题文本模块的样式

独立站选品工具

更改 文本级别 到标题 2 并添加 标题 支柱一:Divi Fundamentals(或您的标题)到正文内容。

  • 文本级别:H2
  • 正文内容:第一支柱:Divi 基础

设置视频滑块标题文本模块的样式

接下来,前往 设计 标签。 选择 H2 标题文本并将字体更改为 Oswald。 将样式设置为 TT,将对齐设置为居中,并将颜色设置为 #000645。

  • 标题级别:H2
  • 字体:奥斯瓦尔德
  • 款式:TT
  • 对齐方式:中心
  • 颜色:#000645

设置视频滑块标题文本模块的样式

接下来,设置 字体 桌面尺寸为 46 像素,平板电脑为 32 像素,手机为 20 像素。 更改 字母间距 到 1px 和 线高 到 1.4em。 关闭模块的设置。

高质量外链购买
  • 字体大小:桌面46px,平板32px,手机20px
  • 字母间距:1px
  • 行高:1.4em

设置视频滑块标题文本模块的样式

设置播放列表页面视频滑块模块的样式

接下来,我们将添加内容和样式 视频滑块模块. 将鼠标悬停在模块上并单击齿轮图标以打开其 设置.

样式化视频滑块模块

点击 添加新视频.

样式化视频滑块模块

JasperAI 10000字免费额度试用

添加您的视频并关闭子模块。

样式化视频滑块模块

继续该过程,直到您为第一部分添加了所有视频。 我使用的是默认设置,但如果您不想显示视频的默认特色图像,您也可以使用点导航代替滑块轨道并启用叠加。

样式化视频滑块模块

为播放列表页面设置样式 视频滑块 描述 标题 文本模块

接下来,打开 设置 为了 文本模块 直接在视频滑块下方。 这将用作我们描述的标题。

WordPress备份工具updrafplus

样式化视频滑块描述标题文本模块

更改 主体 到标题 3 并输入 文本 关于本系列进入正文内容区域。

  • 文本级别:标题 3
  • 内容:关于本系列

样式化视频滑块描述标题文本模块

接下来,前往 设计 标签。 选择标题文本 H3 并将字体更改为 Oswald,将样式更改为 TT,将对齐更改为左,并将颜色更改为 #000645。 关闭模块的设置。

  • 标题文字:H3
  • 字体:奥斯瓦尔德
  • 款式:TT
  • 对齐方式:左
  • 颜色:#000645

样式化视频滑块描述标题文本模块

设置播放列表页面视频滑块描述文本模块的样式

接下来,打开 设置 为下一个 文本模块. 这将包含视频系列的描述。

设置视频滑块描述文本模块的样式

输入 描述 该系列的内容进入正文内容区域。

  • 内容:视频说明

设置视频滑块描述文本模块的样式

接下来,前往 设计 选项卡并向下滚动到文本对齐。 将对齐设置为左。 我们将其其余设置保留为默认值。 关闭模块的设置。

设置视频滑块描述文本模块的样式

设置播放列表页面人物模块的样式

最后,打开 设置 为了 人物模块.

为 Person 模块设置样式

在里面 一般的 选项卡,在文本下,在名称字段中输入人员的姓名,然后在职位字段中键入讲师。 输入您想要的任何社交媒体链接。 对于本教程,我将它们留空。

  • 姓名:人名
  • 职位:讲师

为 Person 模块设置样式

向下滚动到内容区域并添加 描述 的导师。 在下面 图片,从您的媒体库中选择一张图片。

  • 内容:描述
  • 图片:人物头像

为 Person 模块设置样式

标题文本

前往 设计 选项卡并滚动到标题文本。 选择 H4 标题级别。 将字体设置为 Oswald,将粗体设置为半粗体,将样式设置为 TT,将颜色设置为 #000645。 将大小设置为 20px,间距设置为 1px,行高设置为 1.5em。

  • H4
  • 奥斯瓦尔德
  • 半粗体
  • TT
  • #000645
  • 20像素
  • 间距 1px
  • 线高1.5em

为 Person 模块设置样式

位置文本

最后,向下滚动到 位置文本. 选择 Oswald 作为字体并将粗细设置为半粗体。 将样式设置为 TT,颜色设置为 #8f9ca4,大小设置为 15px,行距设置为 1px,行高设置为 1.5em。 关闭模块的设置。

  • 字体:奥斯瓦尔德
  • 重量:半粗体
  • 款式:TT
  • 颜色:#8f9ca4
  • 尺寸:15 像素
  • 间距:1px
  • 行高:2em

设置人员模块播放列表页面的样式

复制播放列表页面的部分

现在 Section 已经按照我们想要的方式进行了设计和样式设置,将鼠标悬停在其设置上并 制作2个副本.

复制播放列表页面部分

设置播放列表页面第二部分的样式

对于第二部分,我们将 更改背景颜色, 所以它与其他人不同。 我们还将更改模块的内容。

部分设置

接下来,打开 设置 为了 第二节.

样式化第二部分播放列表页面

向下滚动到 背景 并将颜色设置为#f9f7f4。 关闭设置。

  • 背景颜色:#f9f7f4

样式化第二部分播放列表页面

第二个视频滑块标题文本模块

打开 标题 对于第二部分,并对其进行更改以反映第二组视频。 我将此部分称为支柱二:Divi 模块。 关闭设置。

  • 内容:支柱二:Divi 模块

第二个视频滑块标题文本模块

第二个视频滑块模块

打开 设置 对于第二部分 视频滑块模块. 将视频替换为第二部分的视频。 关闭设置。

  • 子模块:选择视频

第二个视频滑块模块播放列表页面

第二个视频滑块描述标题文本模块

此标题将保持不变,因此我们无需进行更改。

第二个视频滑块描述标题文本模块

第二个视频滑块描述文本模块

接下来,打开 文本模块 带有第二个视频描述和 创建描述 对于第二组视频。

  • 正文内容:视频说明

第二个视频滑块描述文本模块

第二人称模块

如果另一位讲师教授第二组视频,请打开第二组视频 人物模块 并替换名称。 此外,如果您正在使用它们,请更改或添加社交媒体 URL。

  • 姓名:导师姓名

第二人称模块播放列表页面

接下来,向下滚动到 正文内容图片 区域并替换此人的描述和图像。

  • 正文内容:人物描述
  • 图片:人物头像

第二人称模块播放列表页面

样式第三部分

为了 第三节,我们将更改模块的内容。 本节将使用默认设置,因此我们可以继续第一个标题。

样式化第三部分播放列表页面

第三个视频滑块标题文本模块

打开标题 文本模块 并更改标题以匹配这组视频。 关闭模块的设置。

  • 正文内容:支柱三:Divi 布局

第三个视频滑块标题文本模块播放列表页面

第三个视频滑块模块

打开第三个 视频滑块模块 并将视频替换为该组的视频。 如果需要,更改 Amin 标签并关闭模块的设置。

  • 添加新视频:替换每个视频

第三个视频滑块模块播放列表页面

第三个视频滑块描述文本模块

打开 文本模块 第三部分的视频说明。 创建一个 描述 对于这组视频。 关闭文本模块的设置。

  • 正文内容:视频说明

第三个视频滑块描述文本模块

第三人称模块

最后,打开 人物模块 对于此部分,如果它与第一组视频不同,请替换名称。 如果与第二组是同一个人,只需复制该模块,将其粘贴到此列中,然后删除此模块。 如果您正在使用它们,请更改或添加社交网络链接。

  • 姓名:导师姓名

第三人称模块

向下滚动到 正文内容图片 区域并替换它们以匹配此人的信息。 关闭 模块, 节省 您的页面,以及 出口 视觉生成器。

  • 正文内容:人物描述
  • 图片:人物头像

第三人称模块

播放列表页面结果

这是我们的播放列表页面在桌面和手机上的外观。

桌面

播放列表页面

电话

播放列表页面

结束的想法

这就是我们对如何使用 Divi 的 Video Slider 模块创建播放列表页面的看法。 这是一个简单的过程,一旦您设置了第一部分的样式,创建副本会使创建第二和第三部分变得更加容易。 我们只需要更改内容,我们就完成了。 Divi 的视频滑块模块是任何带有视频的播放列表页面的绝佳选择。

我们希望收到你的来信。 您是否使用 Divi 的 Video Slider 模块构建了播放列表页面? 在评论中告诉我们您的经历。

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题