昨天，我们使用 Divi 的可视化构建器为您的播客设置了一个主页，这绝对会给您的听众留下深刻印象，但如果他们想更深入地了解您的节目怎么办？

他们会前往美丽的档案馆并展示我今天要教你如何制作的笔记页。

这些页面本身旨在补充主页，但不直接反映其元素。

在节目注释页面上，我想确保任何访问者都能够直接在他们的浏览器中收听该剧集，查看该特定剧集的亮点和链接，并有机会注册您的电子邮件列表。

存档页面与显示注释页面一样简单但功能强大。 存档页面有一个目的：让您的用户快速轻松地查看您的旧目录。 这正是这个页面所做的。 通过节目的简短摘录，您的听众将能够浏览您的节目，准确找到他们想听的主题。

就像昨天一样，您将需要一些高分辨率的背景图像。 我使用的两个是Unsplash 上的这个集合中的（其中还包括昨天主页的背景）。 我在预览中将它们编辑为灰度，但任何图像编辑软件都可以应用黑白/灰度效果或让您将饱和度滑块向下移动到 0。

如果您已经构建了主页，您的生活也会稍微轻松一些，因为您将使用一些相同的样式。

就是这样，让我们​​开始构建吧！

显示注释只是 WordPress 中的“帖子”，因此导航到您的仪表板并转到帖子 – > 添加新内容。

每次要为节目的单个剧集创建节目注释页面时，您都需要执行此操作。 将其命名为您想要的名称并将 URL slug 设置为简单的内容（以便您的听众在剧集结束后记住它）。

首先，确保单击“使用 Divi Builder”。

这应该会打开我们需要的下一组选项。 在页面的右侧，将帖子设置为“全宽”，因为我们不会为我们的展示笔记使用侧边栏。 并将帖子标题设置为“隐藏”，这样帖子本身的作者、评论和日期等元数据就不会显示出来。

然后您会想要进入 Visual Builder 并看到一个令人愉快的空白网页。

您要做的第一件事是单击页面左上角蓝色部分中的齿轮图标以进入部分设置。

从那里上传您的背景图片。 进一步向下滚动到设置并打开使用视差效果。 将视差方法保留为默认的“真实视差”。

保存这些设置，您应该会看到如下内容：

上面的最终产品不完全是什么，是吗？ 我们将不得不通过将内容添加到页面来稍微扩展它。

单击绿色 + 并插入单列行（左上角的行）。

接下来，您会很高兴您已经完成了昨天的主页。 一旦你选择了你的行，你就会看到一个窗口，要求你选择一个元素。 您将通过单击“从库添加”来选择我们昨天保存的播客播放器。

我简单地将我的命名为“Podcast Episode”，但如果你选择了不同的东西，一定要选择它。

Badabing-badaboom，你有一个播客剧集像魔术一样添加到你的节目笔记页面。

请记住，您必须为每个新的节目注释页面编辑标题和媒体（以及可能的剧集艺术）。 您刚刚添加的是您保存的内容的精确副本。

您的实际节目笔记将直接显示在播客播放器下方，因此将鼠标悬停在播放器上并点击黑色 +。 向下滚动直到看到文本模块。 将其添加到页面。

在“文本设置”的“内容”选项卡下，将您的笔记输入所见即所得编辑器，然后转到“设计”选项卡。

在“设计”选项卡中，更新以下选项：

文字颜色：浅色文本方向：左文字字体：特殊精英文字字体大小：20px文字文字颜色：#ffffff

保存它，您应该会看到一个闪亮的新文本块和一个与此类似的页面。

我们已经到了展示注释页面的最后阶段——只剩下两个元素了。 再次点击黑色+，添加昨天保存的按钮模板。

与昨天那样将用户带到档案库不同，这个将把他们返回到主页。 导航到按钮的设置页面并将 URL 设置为简单的反斜杠。

为什么不把它放到 /home 或类似的地方？ 好吧，无论如何，仅使用反斜杠会将您的用户带到您网站的首页。 由于您在同一站点上，因此即使移动域也不会影响按钮。 它总会回家的。 这正是您想要它做的！

完成并填写按钮设置的其余部分。 在同一窗口中打开它，将按钮文本更改为“Return Home”（或任何你喜欢的），并将按钮对齐方式更改为“Right”（两者都使其远离内容，并使其站立反对内容）。 设计选项卡的样式应该是从 Divi 库中导入的。

您现在将拥有一个漂亮的导航按钮，我建议将它添加到您的库中，以便您可以在多个页面上使用它。

最后，让我们设置电子邮件注册，这样我们就可以获得那些甜蜜的电子邮件地址，让用户了解有关播客的最新消息。

为此，我们需要一个全新的单列行。 所以单击绿色 + 并将其放置到位。 然后从下拉列表中添加一个 Email Optin 模块。 就像昨天一样，导航到模块设置并在所见即所得编辑器中输入您想要显示的任何标题以及您想要的任何号召性用语文本。

此外，为按钮本身添加您想要的任何文本。 我选择了完全独特的“订阅”。

选择您的电子邮件服务提供商和列表（请记住从昨天开始如果您不选择列表，完整的模块将不会显示在页面上。

将背景 RGBA 更改为透明。

在“设计”选项卡下，将标题字体设置为“Special Elite”，并将大小设置为 36px。

您还将 Body Font 设置为“Special Elite”，大小设置为 16px。

与该站点的几乎所有其他内容不同，我们确实希望为电子邮件选择模块使用边框。 所以将“用户边框”移动到是，并将颜色设置为#ffffff，并将自定义填充在所有边上设置为 15px。

完成后，进入 Advanced 选项卡并将其添加到 Custom CSS 下的 Main Element 以圆化模块的角落：

保存你的工作，你有一个电子邮件选择！

您的显示注释页面唯一需要的另一件事是保存此模块以供其他页面使用。 由于您希望您的电子邮件选项在整个网站上保持一致，我们将把它保存为一个全局项目。 将鼠标悬停在模块上时单击“添加到库按钮”，并确保选中“将其设为全局项目”框。

现在您有了一个可以跨多个页面使用的元素。 如果您对其进行任何更改，它们将反映在所有实例中，这与上面的播客播放器和按钮不同，每个模块都可以单独更改。

朋友们，这是您的 Show Notes 页面模板！ 我还建议将整个页面保存到您的库中，这样您就可以导入它并更改每集所需的元素。

现在……前往档案馆！ 终点线就在眼前！

前往您的 WordPress 仪表板并导航至添加新页面，将其命名（我的是“Archives”），然后打开 Divi Visual Builder。 十分简单。

到达那里后，添加一个带有文本模块的新单列行。

导航到设置并在所见即所得编辑器中输入您的页面标题。

在“设计”选项卡中，将“文本颜色”设置为“浅色”，将“方向”设置为“居中”。 将字体设置为“Special Elite”，将字体大小设置为 50px。

为了使文本在移动设备上看起来不错，请务必将顶部和底部边距更改为 40px。

保存您的工作，然后——振作起来——准备好为档案添加背景！ 打开蓝色 + 框中的设置，然后选择您的背景图像并设置视差，就像您为 Show Notes 所做的那样。 同样，我使用预览制作了这个灰度图。

在“设计”选项卡下，将顶部和底部填充分别设置为 55 像素和 176 像素，这样无论您的档案中有多少帖子，整个页面都可以看到视差效果。

为什么是 176px 而不是 175？ 因为我是一个反叛者，这就是原因。

当你保存你的工作时你会看到这个：

接下来，添加一个新的单列行，只是这一次，插入一个博客模块。 这将显示您设置的任何 WordPress 循环，我们只希望它是摘录和标题，以便您的听众知道会发生什么。

前往设置并更新“内容”选项卡中的选项，如下所示：

帖子编号：10（或您认为最适合您网站的任何内容——显示此编号后它会分页）内容：显示摘录（因为我们希望用户点击并收听播放器中的剧集）显示特色图片：是网格图块背景颜色：rgba(73,73,73,0.72)

在“设计”选项卡中，更新以下选项：

布局：网格标题字体：特殊精英标题文字颜色：#ffffff正文字体：特殊精英正文颜色：#ffffff元字体：特殊精英元文本颜色：#ffffff使用边框：是边框颜色：#ffffff边框宽度：1px边框样式：实心

一切就绪后，您还有最后一点造型要做。 网格本身在每个方框内都有尖锐的方角，我们希望获得 10px 的边框半径，以便它与网站的其余部分相匹配。

导航到您的 WordPress 仪表板 –> Divi –> 主题选项，然后一直向下滚动到自定义 CSS。 将此代码添加到框中以圆化各个摘录的角……