如何使用 Divi 创建漂亮的播客页面

你有一个很棒的播客。 但是您的网站可能需要一些工作。 它完成了它的工作，但它并不突出。 永远不要害怕，播客！ 我有你。

我将教你一种使用 Divi 的简单方法，不仅可以为你的播客创建一个易于更新的主页，还可以创建一个时尚的存档页面和单个剧集的模板。

今天的最终产品：三段式播客主页

我想保持设计简单和尽可能小，同时又不失去一个好的播客必须保持的个性。 此设计适用于名为“你是全明星”的虚构独立播客，其重点是鞋子和快乐。 我希望设计能够反映这个主题。

第一部分使用明亮的颜色来吸引用户的注意力，在左侧快速介绍播客的内容，并使用 Divi 音频模块呈现播客片段以供立即收听。

当用户向下滚动时，美感会略微转移到 Selected Episodes 部分，该部分再次使用 Divi 音频模块来呈现易于访问的内容，以及访问节目档案的选项。 背景是视差以引起对剧集本身的注意。

最后一部分只是电子邮件选择加入。 每个品牌、播客、博客和公司都需要一个，为了让它脱颖而出，我将这一部分切换回彩色背景，并使其足够小，以便第二部分的视差有助于引起对它的更多关注。

下面，我将向您提供有关我如何设计和创建站点的每个模块、部分和页面的分步教程。

您需要的资产

这种设计的伟大之处在于它不会占用 Divi 本身之外的大量资源。 您只需要 5 张用于背景的高分辨率图像以及用于剧集的任何播客艺术和缩略图。

我所有的图片都来自 Unsplash（这个网站的所有图片都可以在这个集合中找到）。 我使用预览将其中一些转换为黑白，但您可以使用任何您想要的图像编辑软件。 几乎所有这些都可以让您选择灰度/黑白选项或将饱和度降低到零。

除此之外，您需要的所有资源都在 Divi 中。 那么，让我们开始吧！

播客网站主页：第一部分

首先在您的 WordPress 仪表板中创建一个新页面并将其设置为您网站的首页。 （我方便地将我的命名为“家”。）

现在返回编辑您的新页面。 在右侧边栏的页面属性框中，将默认模板更改为空白页面模板。

首先，我们创建一个三列的行。

在中间的列中，我们要插入一个 Divi 分隔器模块。

在分隔线设置中，在 Design 选项卡下，将高度设置为 600。这不仅可以保持两个外部列（该部分的主要内容）分开，而且还将保持该部分足够高，以便在许多视口分辨率。 （虽然默认情况下在移动设备上保持隐藏状态。）

现在，在左栏中，我们将添加两个文本模块。 我决定对于这个项目，水平标题看起来不合适，所以第一个文本模块将只是一个标题。

在文本设置的内容选项卡下，将标题添加到内容框。

在“设计”选项卡中，将文本颜色更新为“浅色”并将文本方向更改为“居中”。 然后调整文本字体和大小。 我选择了字体“Special Elite”，因为它看起来很苦恼，然后将其大小设置为60。同时将文本行高设置为1em。

一旦处理完毕，就该移到第二个文本框了。 我们使用这个作为播客的快速介绍。

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

内容：输入您的描述文本（我建议您在 iTunes 和其他服务上使用的描述的截断版本）
背景颜色：rgba(0,0,0,0.4)

在“设计”选项卡中，为文本颜色选择“Light”，并像在上一个框中一样选择“Center”作为文本方向。 还将文本字体设置为 20px 大小的“Special Elite”。

最后，在整个文本框周围添加 10px 的填充。

之后，前往“高级”选项卡，然后在“自定义 CSS”下，将其输入到“主要元素”字段中以将文本框的角变圆：

border-radius: 10px;

完成此操作后，您就完成了新站点的前两列！ 万岁！ 通过单击页面底部的紫色圆圈并点击绿色保存按钮来保存您的工作。

优秀作品！

但是，为了使其更具视觉吸引力，我们需要设置该部分的背景，因此进入蓝色（部分）框的设置并上传背景图像。 我倾向于将我的分辨率保持在 1920×1280 左右。

你现在应该会看到如下所示的内容：

现在，您可能会问自己：“播客怎么样？ 这是一个播客网站，我们还没有对播客做任何事情！” 你是完全正确的。 因此，让我们通过选择我们行的第三列中的（您猜对了）音频模块来播放一些音频。

默认的音频模块并不完全适合我们为这个网站使用的主题，所以让我们从这个开始：

对此：

打开音频模块的设置。 在音频字段中，您可以将自己的文件上传到您使用的任何主机，也可以直接链接到您使用的任何播客服务的媒体文件。 我使用 Libsyn，所以我只是抓取了媒体 URL 并将其粘贴进去。

（有趣的事实：通过此模块在您的网站上点击播放的任何人也会在您的 Libsyn 仪表板中被计为下载。得分！）

然后，您需要将链接到的剧集的标题放在“标题”下，将您的名字放在“艺术家姓名”下（或者您在节目中使用的任何内容。对于我们关于鞋子的虚构播客，除了查克·泰勒之外，我还能选择其他什么？ ）。 专辑标题将是您播客的名称。

接下来让我们将青绿色更改为完全透明的背景。 颜色无所谓。 只需将透明条一直滑动到底部，或者直到 RGBA 的最后一位数字为 0。

对于封面图片，最好使用此特定剧集的缩略图或您在 iTunes 和其他地方使用的播客图片。

对播客详细信息进行排序后，进入“设计”选项卡，这样您就可以真正让这个播放器成为您的了。

为文本颜色选项选择“浅色”。 将字体设置为“Special Elite”，标题大小设置为 50px，标题大小设置为 20px。

我还将此特定播放器的顶部边距设置为 50 像素，因为此边距使播放器在该部分保持水平居中，并且当您切换到移动设备时，它允许元素之间有良好的间距。 （该设置适用于所有视口尺寸，只要您不单击智能手机图标即可。）

因为背景是透明的，所以不需要圆角以匹配第一列中的文本框，所以点击保存。

因为这个播客播放器是节目的明星，我们不想每次都重新创建它，所以我们要把这个模块保存到 Divi 库中，这将使我们能够轻松地在站点周围复制它，根据我们的需要进行编辑。

输入您想要的任何模板名称，不要选中“将此作为全局项目”。 我们将在本系列的第 2 部分中使用该选项，但不是现在。

好的！ 再多一个元素，第一部分就完成了。 （不过别担心。这是其中最复杂的。）

大多数播客都会保留博客或展示笔记，供听众回顾并重温该集中讨论的内容。 你的播客也不例外，我敢肯定。 将链接添加到您的播客的展示内容是完全无痛的。

在第三列中创建一个新的文本块，打开设置，然后键入您想要的任何链接文本。 对于这个例子，它是不言自明的“阅读节目笔记”。

单击工具栏中的图标以添加链接，然后键入/粘贴显示注释的 URL。 （同样，在第 2 部分中，我将向您展示如何为节目笔记创建和样式化博客帖子。）因为我将 WordPress 永久链接结构设置为“帖子名称”，所以我所要做的就是输入我为这一集写的帖子。

（旁注：通过不输入域信息而只输入 slug，您告诉 WordPress 将用户定向到该页面，而不管域信息如何。这在您更改域的情况下非常有用，并且有助于防止断开的链接！）

只需保存该链接，您就可以开始使用了！

您还应该以与您的播客播放器相同的方式将此模块保存到您的库中。

瞧！ 你自己的……等等。 哦哦。 你的节目笔记链接是……是……丑！

不过不用担心。 丑陋的链接很容易解决！ 即使您使用文本模块中的设置更改文本颜色，也不会影响这些单词，因为它们是链接。

前往 Divi –> Theme Options 中的 Custom CSS 字段，然后在底部输入。

a:link, a:visited, a:active {
    color: #ffffff;
}
 
a:hover {
 color: #ffffff;
 font-weight: bold;
 text-decoration: underline;
}

这将做的是保持文本白色（与网站的其余文本一致，确保它像大多数其他链接一样带有下划线，并在您用鼠标悬停在它上面时将其变为粗体。）

确保保存它，现在您的播客播放器已完成！

对于第一部分中的最后一点调整，单击进入行设置（绿色框）。

选择“使用自定义宽度”。 确保单位设置为百分比并将滑块移动到 80。这样做将使该行占据用户拥有的任何大小视口的 80%，从而防止所有内容聚集在一起。

您的播客新网站的顶部也是如此！ 现在它应该看起来像这样。

保存它，就这样，大部分工作就完成了！ 多亏了 Divi 的图书馆功能，接下来的几个部分会飞过去！ 只是看。

播客网站主页：第二部分

本节将展示我们播客的选定剧集，并允许用户访问档案（与第 2 部分中的节目注释页面一样）。

我们要做的第一件事实际上是通过单击该部分底部的蓝色 + 并添加一个常规部分来创建一个新部分。 这样做将在可视化构建器中创建另一个蓝色框。 添加单列行。

当我们准备好之后，让我们以与上面相同的方式添加背景，只是这一次，我们要在部分设置中选择“使用视差选项”。 保持下拉菜单为“True Parallax”而不是“CSS”。

这是我们将在主页上使用视差的唯一部分。 我认为谨慎使用效果会引起对您想要突出显示的内容的更多关注。

保存，然后在行中插入一个新的文本框。 输入“Selected Episodes”，在所见即所得编辑器中将其居中，然后前往设置，将文本字体设为“Special Elite”，文本大小为 50px。 你现在应该看到这样的东西：

在其下方，通过单击绿色 + 创建一个新的三列行，然后在第一列中输入“从库选项卡添加”。 （你现在不会有所有这些库选项，但你以后会有！）

选择“播客集”或您在上面为播放器命名的任何内容。 然后在它下面添加另一个模块，再次导航到库，然后添加您保存的“显示注释链接”模块。 对所有三列执行此操作，直到您看到：

继续这样做，直到你添加了所有你想要的剧集。 编辑每集的标题、专辑封面和显示注释链接。 我刚刚添加了第二行，只填充了第二列，以使设计适合我选择的背景。

本节唯一剩下的就是添加一个“浏览档案”按钮。 通过单击绿色 + 在最底部创建一个新行并使用单列布局。 插入一个“按钮”模块。 这将创建一个非常难以阅读的按钮（当然取决于您的背景），它需要一些简单的样式。

打开 Button 模块的设置并输入将作为您的档案的页面的 URL slug。 我使用明显的“/archives”，使用文本“Browse the Archives”，然后将按钮本身居中。

在设置选项卡中，我们单击“为按钮使用自定义样式”，并将背景颜色设置为“#ffffff”，将文本颜色设置为“#000000”（分别为白色和黑色）。

然后我们需要通过将边框半径设置为 10 像素来圆化按钮的角，将字体设置为“特殊精英”，并将添加按钮图标从“默认”更改为“否”。

最后，将 Button Hover Border Radius 更改为 10px，以便当鼠标悬停在按钮上时它会变圆。

我将其保存到我的库中，以便我可以在进行时在其他按钮中使用样式。

这样，您的第二部分就完成了。 你快完成了，播客！ 你四舍五入第三 - 字面意思！

播客网站主页：第三部分

这只是静态背景上的单个模块。
首先，像我们在第二部分所做的那样，创建一个带有双倍宽度列的新蓝色框，然后从菜单中选择“电子邮件选项”模块。

您会看到它亮起，这根本不符合我们的设计。 不过，这是一个超级简单的修复。

导航到模块的设置并更新以下选项：

标题：我故意将标题留空
内容：添加您的号召性用语简介并将其居中。
服务提供商：我使用 Mailchimp，所以这就是我在这里使用的。
背景颜色：透明； 这也使按钮本身透明。

您剩下要做的唯一一件事就是确保提供您的电子邮件服务，否则在您保存并退出构建器后表单将不会显示。 如果您使用 Mailchimp，在他们的支持文档中有关于如何找到您的 API 密钥的很棒的文档。

获得密钥后，转到 WordPress 仪表板，再次转到 Divi –> 主题选项，然后在恰当命名的“Mailchimp API 密钥”字段中输入您的 Mailchimp API 密钥。

保存后，在您拥有一个漂亮的完成页面之前，您剩下的唯一一步就是为第三部分设置背景。 最终产品应如下所示：

你做到了！ 万岁！ 您现在拥有一个功能齐全的播客主页。 是时候打破纪录并告诉全世界了，对吧？

明天：为您的播客创建漂亮的档案和显示笔记页面

由于您现在拥有一个很棒的主页，您可以展示您拥有的最棒的内容。 但是，如果您的粉丝成为真正的狂热分子，他们会想要深入了解您的节目。

明天，我将向您展示如何为您的整个播客剧集档案整理一些简单而美丽的页面，以及每集的单独页面，告诉读者您在每一集中讨论的内容并让他们有机会注册为您的超级惊人的电子邮件列表。

明天见！

显示笔记页面：

档案页面：