燕郊企业建站：如何用Div创建一个美丽的播客网站

你有一个很棒的播客。但你的网站可能需要一些工作。它做了它的工作，但它并不突出。别害怕，播客！我有你的掩护。

我将教你一个简单的方法，使用Divi不仅为您的播客创建一个容易更新的主页，而且还创建一个时尚的存档页面和一个针对个别剧集的模板。

今天的最后产品：三部分Podcast主页

燕郊企业建站想保持设计的简单和尽可能少，而不是失去一个好的播客必须保持的个性。这个设计是为一个虚构的独立播客设计的你是全明星专注于鞋子和快乐。我希望设计能反映这个主题。

第一部分使用明亮的颜色来吸引用户的注意，提供关于播客左边的内容的快速简介，并使用Divi音频模块呈现一个播客集，以便立即收听。

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

最后的部分只是一个电子邮件选择。每个品牌、播客、博客和公司都需要一个，为了让它脱颖而出，我把这个部分切换回了一个颜色背景，使它足够小，第二部分的视差可以帮助人们更多地关注它。

下面，我将一步地向您介绍我是如何设计和创建站点的每个模块、部分和页面的。

你需要的资产

这个设计的伟大之处在于它不需要Divi之外的很多资源。所有你需要的是5高分辨率的图像，用于背景和任何播客艺术和缩略图你使用的插曲。

我所有的图片都来自Unspash(这个站点的所有图片都可以在这个收藏)。我使用预览将其中的一些转换成黑白，但是你可以使用任何你想要的图像编辑软件。几乎所有这些选项都允许您选择灰度/黑白选项，或者将饱和度降低到零。

除此之外，你需要的所有资源都在Divi的内部。那我们开始吧！

播客网站主页：第一节

从在WordPress仪表板中创建一个新页面开始，并将其设置为站点的首页。(我方便地把我的名字命名为“家”。)

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

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

在中间列中，我们要插入一个Divi除法器模块。

在分隔设置中，在“设计”选项卡下，将高度设置为600。这不仅将保持两个外部列(该节的主要内容)分开，而且还将保持足够高的部分，允许在许多视口分辨率上有足够的空白。(默认情况下，隐藏在移动设备上。)

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

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

在“设计”选项卡中，将文本颜色更新为“光线”，并将文本方向更改为“中心”。然后调整文本字体和大小。我选择了字体“特殊精英”，因为它的痛苦的外观，然后设置它的大小为60。还将文本行高度设置为1em。

一旦解决了这个问题，就应该移到第二个文本框了。我们用这个作为播客的快速脱口而出。

在Content选项卡中，更新以下选项：

含量：输入描述的文本(我建议您在iTunes和其他服务上使用一个截断版本的描述)
背景色*非洲区域局(0，0，0，0.4)

在“设计”选项卡中，为文本颜色选择“light”，并选择“Center”进行文本定向，就像在前面的框中所做的那样。还将文本字体设置为“特殊精英”，大小为20 px。

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

然后，转到“高级”选项卡，然后在“自定义CSS”下，将其输入主元素字段，以绕过文本框的各个角落：

一旦你这样做了，你就完成了你的新网站的前两列！万岁！点击页面底部的紫色圆圈并点击绿色保存按钮来保存你的作品。

干得好！

不过，为了使其更具视觉吸引力，我们需要设置该部分的背景，因此进入蓝色(部分)框的设置并上传背景图像。我倾向于保持我的大约1920×1280分辨率。

你现在应该看到这样的东西了：

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

默认的音频模块并不完全符合我们为这个站点准备的主题，所以让我们从这里开始：

对此：

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

(有趣的事实：任何通过这个模块点击你的网站的人都会在你的Libsyn仪表板上下载。得分！)

然后你会想把你链接到的那集的标题放在标题下，你的名字用艺术家的名字(或者你去看什么在你的节目上)。对于我们虚构的关于鞋子的播客来说，除了查克·泰勒之外，我还能选择别的什么吗？)专辑标题将是你播客的名字。

接下来，让我们把绿色茶色换成一个完全透明的背景。颜色不重要。只需将透明条一直滑到底部，或直到RGBA的最后一位数为0。

对于封面艺术图像，最好是使用这一集的缩略图或你在iTunes和其他地方使用的播客艺术。

一旦播客细节被整理好，进入“设计”选项卡，你就可以真正地让这个玩家成为你的玩家了。

为文本颜色选项选择“light”。将字体设置为“特殊精英”，标题大小设置为50 px，标题大小设置为20 px。

我还将这个特定播放器的上边距设置为50 px，因为该边距使播放机在该部分水平居中，并且当您切换到Mobile时，它允许在元素之间有很好的间隔。(该设置适用于所有视口大小，只要您不单击智能手机图标。)

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

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

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

好的!再多一个元素，第一部分就完成了。(不过，别担心。这是他们中涉及最多的。)

大多数播客都会保留博客或节目笔记，让听众回到节目中讨论的内容。我肯定你的播客没什么不同。添加一个链接到你的播客的展示笔记是完全没有痛苦的。

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

单击工具栏中的图标以添加链接，并在显示说明的URL中键入/粘贴。(同样，在第2部分中，我将向您展示如何为显示笔记创建博客文章并将其样式化。)因为我的WordPress permalink结构被设置为“POST名称”，所以我所要做的就是输入我为这一集写的帖子中的片段。

(附带注意：通过不输入域信息和只输入段塞，您将告诉WordPress将用户引导到该页面，而不管域信息如何。)如果您曾经更改过域，这是非常有用的，它有助于防止断链接！)

只要保存那个链接，你就可以走了！

您还应该将这个模块保存到您的库中，就像您使用播客播放器一样。

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

不过不用担心。丑陋的链接是一个简单的修复！即使您使用文本模块中的设置来更改文本颜色，它也不会影响这些单词，因为它们是一个链接。

进入Divi->主题选项中的自定义CSS字段，并在底部输入此字段。

这样做的目的是将文本保持为白色(与站点的其余文本保持一致，确保它与大多数其他链接一样带有下划线，并在鼠标悬停在其上时将其改为粗体)。

确保你保存了它，现在你的播客玩家已经完成了！

对于第一节中的最后一点调整，单击行设置(绿色框)。

燕郊企业建站选择“使用自定义宽度”。确保单位设置为百分比，并将滑块移动到80以上。这样做将使该行占据用户拥有的任何大小视图的80%，这将防止所有的东西都聚集在一起。

你的播客新网站的顶部也是如此！现在应该是这样的了。

省省吧，就这样，大部分工作都完成了！多亏了Divi的图书馆功能，接下来的几个部分就会飞过去了！看着就行了。

播客网站主页：第二部分

本节将展示我们播客中的精选节目，并允许用户访问档案(如第2部分中的“节目笔记”页面)。

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

当我们准备好了，让我们按照上面的方式添加一个背景，只是这一次，我们希望在部分设置中选择“使用视差选项”。保持下拉的“真实视差”而不是“CSS”。

这是我们燕郊企业建站在主页上使用的唯一与视差有关的部分。我认为，使用这一效果时，需要更多地关注你想要突出的内容。

保存，然后在行中插入一个新文本框。键入“所选集”，在WYSIWYG编辑器中居中，然后指向设置，使文本字体为“特殊精英”，文本大小为50 px。你现在应该看到这样的东西：

在此下面，单击绿色+创建一个新的三列行，并在第一列中输入“Add From Library Tab”。(您现在没有所有这些库选项，但稍后会有！)

选择“播客史诗”或你在上面给玩家命名的任何东西。然后在它下面添加另一个模块，再次导航到库，并添加您保存的“显示备注链接”模块。对所有三列执行此操作，直到您看到以下内容：

继续这样做，直到你添加了所有你想要的插曲。编辑标题，专辑艺术，并显示每集笔记链接。我只是添加了第二行，只填写了第二列，以使设计符合我选择的背景。

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

打开Button模块的设置，并为您的存档页面输入URL段塞。我使用了显而易见的“/档案”，使用了文本“浏览档案馆”，然后将按钮居中。

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

然后，通过将边框半径设置为10 px，将字体设置为“特殊精英”，并将Add Button图标从“默认”更改为“No”，从而绕过按钮的角落。

最后，将ButtonHover边框半径更改为10 px，这样当按钮上有鼠标时，它就会四舍五入。

我把它保存到我的库中，这样我就可以在其他按钮中使用样式。

这样，你的第二部分就完成了。你快完了，播客！你在第三圈-真的！

播客网站主页：第三部分

这只是一个静态背景上的单个模块。
首先，创建一个带有双宽列的新蓝色框，就像我们为第二部分所做的一样，并从菜单中选择“Email optin”模块。

你会看到这个照明，这根本不符合我们的设计。不过，这是个超级简单的解决办法。

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

标题：我故意留下标题空白。
内容：将您的调用添加到ActionBlurb并将其中心化。
服务提供者：我用的是Mailimpp，所以我就是这么做的。
背景颜色：透明；这也使按钮本身透明。

您唯一需要做的就是确保您的电子邮件服务是提供的，否则表单将不会在您保存和退出构建器之后出现。如果你使用邮箱，有很好的文档查找API密钥在他们的辅助文件里。

一旦你有了你的钥匙，转到你的WordPress仪表板，再一次进入Divi->主题选项，然后在恰当的名为“MailimppAPI键”的字段中输入你的MailimppAPI键。

保存完后，在创建一个漂亮的、完整的页面之前，唯一剩下的步骤就是为第三节设置一个背景。最终产品应该如下所示：

你干得不错!万岁！您现在有一个功能齐全的主页为您的播客。是时候打破纪录告诉全世界了，对吧？

明天：为你的播客创建美丽的档案和展示笔记页面

既然你现在有了一个很棒的主页，你就可以展示你拥有的最棒的内容了。但如果你的粉丝成为真正的狂热者，他们会想深入你的节目。

明天，我将向你展示如何为你所有的播客集整理一些简单而又漂亮的页面，以及每一集的个别页面，告诉读者你在每一集中所讨论的内容，并给他们一个机会去注册你的超级惊人的电子邮件列表。

明天见!

显示备注页：

档案页：