WordPress divi主题

如何在 Divi 标题中添加固定的“最新剧集”音频栏

| 5月 4, 2022 | Divi主题使用教程 | 0 条评论

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

如果您使用 Divi 托管播客网站,那么您很有可能已经在使用内置音频模块。 现在,如果您正在寻找一种特殊的方式来让您的最新剧集成为焦点,那么您一定会喜欢这个教程。 今天,我们将向您展示如何在 Divi 标题中包含固定的最新剧集音频栏。 我们将包含一个文本模块循环动画以引起对音频栏的注意,您还可以下载全局标题模板,包括音频栏!

google广告开户

让我们开始吧。

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

音频条

移动的

音频条

免费下载音频栏标题模板

要使用免费的音频栏标题模板,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

转到 Divi Theme Builder 并开始构建全局标题

转到 Divi 主题生成器

首先转到 WordPress 网站后端的 Divi Theme Builder。

音频条

开始构建全局标题

然后,开始构建一个全局标头。

音频条

WordPress divi主题

使用最新剧集音频栏创建全局标题

部分设置

背景颜色

进入模板编辑器后,您会注意到一个部分。 打开该部分并更改背景颜色。 我们正在将此全局标题与 Podcast 布局包相匹配,但您可以随意使用您选择的任何其他类型的设计风格。

  • 背景颜色:#1a1844

音频条

间距

然后,转到设计选项卡并在不同的屏幕尺寸上添加一些自定义填充值。

  • 顶部填充:50 像素(桌面)、80 像素(平板电脑和手机)
  • 底部填充:0px

音频条

盒子阴影

为了将标题与页面/帖子内容分开,我们还将在我们的部分中添加一个框阴影。

  • 盒子阴影模糊强度:80px
  • 阴影颜色:rgba(0,0,0,0.3)

音频条

添加第 1 行

立柱结构

继续使用以下列结构将第一行添加到您的部分:

音频条

背景颜色

这整行将专门用于我们最新的剧集音频栏。 但在我们开始之前,打开行设置并更改背景颜色。

  • 背景颜色:#fe4943

音频条

fiverr建站WordPress程序员

浆纱

转到该行的设计选项卡,然后更改尺寸设置。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:90%
  • 最大宽度:100%

音频条

间距

我们也添加了一些自定义的顶部和底部填充。

  • 上边距:10px
  • 底部填充:10px

音频条

边界

然后,我们将进入边框设置,我们将添加一些圆角。

独立站选品工具
  • 左下角:10px
  • 右下:10px

音频条

盒子阴影

我们还包括一个盒子阴影。

  • 盒子阴影模糊强度:50px
  • 阴影颜色:rgba(0,0,0,0.3)

音频条

位置

接下来,我们将转到高级选项卡并修复整行。 我们还将增加该行的 z 索引,以确保它与我们将添加到我们的部分的第二行重叠。

  • 位置:固定
  • 位置:顶部中心
  • Z指数:11

音频条

高质量外链购买

第 1 列可见性

通过将列 1 溢出设置为隐藏来完成行设置。 这将有助于您在这篇文章的预览中注意到的文本动画。 通过将溢出设置为隐藏,我们将确保动画隐藏在列容器之外。

  • 水平溢出:隐藏
  • 垂直溢出:隐藏

音频条

将文本模块添加到第 1 列

添加内容

是时候添加模块了,从第 1 列中的文本模块开始。添加一些您选择的副本。

音频条

文字设置

转到模块的设计选项卡并相应地更改文本设置:

JasperAI 10000字免费额度试用
  • 文字字体:Open Sans
  • 文本字体样式:大写
  • 文字颜色:#ffffff
  • 文本大小:15px
  • 文字字母间距:3px

音频条

间距

我们还将为我们的模块添加一些负左边距。 这将有助于我们的循环动画。

音频条

动画片

最后但同样重要的是,将以下循环动画添加到您的文本模块:

  • 动画风格:幻灯片
  • 动画方向:左
  • 动画时长:9000ms
  • 动画强度:30%
  • 动画开始不透明度:100%
  • 动画速度曲线:线性
  • 动画重复:循环

音频条

WordPress备份工具updrafplus

将音频模块添加到第 2 列

删除所有内容

在第 2 列中,我们唯一需要的模块是音频模块。 确保内容已删除。

音频条

上传音频文件

然后,上传包含最新剧集的音频文件。

音频条

删除背景颜色

接下来移除模块的背景颜色。

音频条

间距

然后,转到设计选项卡并通过向它们添加“0px”来删除一些默认填充值。

  • 顶部填充:0px
  • 底部填充:0px
  • 左填充:0px

音频条

添加第 2 行

立柱结构

到下一行。 此行将包含我们的徽标、菜单和社交媒体图标。 选择以下列结构:

音频条

浆纱

在不添加模块的情况下,打开行设置并相应地修改大小设置:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 最大宽度:100%

音频条

间距

接下来删除所有默认的顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px

音频条

将菜单模块添加到第 1 列

选择菜单

然后,将菜单模块添加到第 1 列并选择您选择的菜单。

音频条

上传徽标

接下来上传徽标。

音频条

删除背景颜色

然后,删除默认的白色背景颜色。

音频条

菜单文字设置

转到设计选项卡并更改菜单文本设置,如下所示:

  • 菜单字体:Open Sans
  • 菜单文本颜色:#ffffff(桌面)、#1a1844(平板电脑和手机)
  • 菜单文字大小:15px
  • 文本对齐:右

音频条

下拉菜单文本设置

我们也在更改下拉菜单设置中的下拉菜单行颜色。

  • 下拉菜单行颜色:#ffffff

音频条

图标设置

连同图标设置中的汉堡菜单图标颜色。

  • 汉堡菜单图标颜色:#fe4943

音频条

浆纱

我们将通过在尺寸设置中分配徽标最大宽度来完成模块设置。

音频条

将社交媒体关注模块添加到第 2 列

添加社交网络

在第二行的第二列中,我们需要一个社交媒体关注模块。 添加您选择的社交网络。

音频条

结盟

转到模块的设计选项卡并更改模块对齐方式。

音频条

间距

接下来添加一些自定义边距值。

  • 上边距:20px
  • 底边距:-4%(仅限平板电脑和手机)

音频条

边界

并通过在模块的边框设置中添加一些圆角来完成标题。 完成全局标题后,请确保保存所有 Divi Theme Builder 更改并在您的网站上查看结果!

音频条

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

音频条

移动的

音频条

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的内置音频模块发挥创意。 更具体地说,我们向您展示了如何在自定义的全局标题中包含固定的音频条。 这是强调播客最新剧集的好方法。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请务必订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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