门头沟网站建设：使用额外的第3部分构建产品评审站点

欢迎收看本系列的第3部分如何使用。如果你正在绞尽脑汁地思考如何开始开发一个产品评论网站，这个系列是给你的。它的内置评审功能和智能后分类，额外是特别配备创建伟大的外观评论，产品后模板，超级菜单，和类别布局在几分钟内。和我一起探索额外的力量。

在门头沟网站建设里面第二部分在本系列文章中，我们使用EXTER的内置设置和VisualBuilder创建了产品评审POST模板。使用新的POST模板，您可以添加额外的帖子并将它们分配给相应的类别。

今天，我们将使用EXTER的分类生成器构建两个类别布局。第一个布局将显示文章/产品评论在您的主页，突出最近和流行的评论。第二个布局将使用旋转木马滑块模块在一个页面上展示所有类别。一旦您完成本教程，您将有一个良好的基础，一个设计良好的产品审查网站。

这是我们将要建造的东西的偷窥

设计要素的准备

由于类别布局在很大程度上取决于POST内容，所以请确保添加了足够的帖子，以便在添加自己的内容后，您可以了解站点的外观。中讨论过的第二部分在本系列中，我的类别布局由4个类别组成，每个类别中有3个产品。我使用来自Shutterstock的股票图像作为我的帖子的特色图片。

为了设计类别布局，我们将使用Extern外的分类生成器和一些自定义CSS。

我们开始吧。

使用额外的第3部分构建产品评审站点

订阅门头沟网站建设的YOUTUBE频道

为主页构建类别布局

默认情况下，额外使用主页的类别布局。若要创建自定义布局，请从WordPress仪表板侧边栏转到额外>类别建筑。找到已经被命名为“主页”的类别布局，然后悬停在上面并选择“编辑”。

接下来，单击紫色构建器菜单上的“清除布局”，以擦除当前的默认布局。

现在我们可以开始构建自定义布局了。首先，将三分之二的三分之一列添加到标准部分的行中。

在左边(三分之二)列中，添加一个特色文章滑翔机。

门头沟网站建设更新特色帖子滑块模块设置如下：

在ContentTab…下面

类别：全部
只显示有特色的帖子：[我会把这个关起来，直到你决定你想要什么帖子。您可以将某篇文章指定为“文章编辑器”页面中的“额外设置”框中的特写。]
节目作者：关闭
放映日期：关闭

在“设计”选项卡…下

NAV箭色：#ffffff
NAV箭背景：#000000
说明背景：RGBA(255，255，255，0.4)
字体大小：24 px
标题文本颜色：#000000
元字体大小：16 px
元文本颜色：#000000
自定义页边距：底部0 px

在高级选项卡…下

在“主元素”文本框中输入以下自定义CSS：

保存设置

现在，在右边(三分之一)列中添加一个文本模块，并按如下方式更新文本模块设置：

在ContentTab下面，将以下html添加到内容框的Text选项卡：

这里的链接是用来作为模拟CTA按钮的。你可以任意选择使用它。只需更新URL和链接文本。

针尖：你可以用布卢姆若要在单击此CTA时触发电子邮件选项弹出框，请执行以下操作。这样的话，访问者将能够在今天与您的电子邮件营销活动产品熬夜。要做到这一点，您将需要安装Bloom，添加弹出表单，并集成您的电子邮件提供商。然后选择在单击CSS选择器“a.jo-CTA”时显示弹出窗口，它对应于上面html代码中的链接类。

您也可以阅读更多关于如何在单击按钮时弹出花期Optin形式。

现在回到文本模块设置。

在“设计”选项卡…下

字体大小：40 px(桌面)，24 px(平板电脑和智能手机)
页眉字体大小：42 px(桌面)，38 px(平板电脑)，28 px(智能手机)
自定义填充：40 px(顶部)，15 px(右)，15 px(底部)，15 px(左)

保存设置

现在去行设置这样我们就可以对行的背景进行样式化了。

门头沟网站建设更新以下内容：

在ContentTab…下面

背景：#ffffff

在“设计”选项卡…下

全宽行：是的
等分柱高：是

在高级Tab，将以下自定义CSS添加到主元素输入框中：

保存设置

现在请查看您的自定义功能滑块部分。

目前看来还不错。

我们继续。返回到“类别生成器”，并在当前部分下面添加一个标准部分，并添加带有文本模块的一列行。

然后按以下方式更新文本模块设置：

在内容标签，将此html标题添加到内容框的“文本”选项卡中：

在“设计”选项卡…下

文本定位：中心
标题字体：B(粗体)
页眉字体大小：48 px(桌面)，42 px(平板电脑)，36 px(智能手机)

保存设置

这将作为下面一节的标题，显示您的产品评论。

接下来，添加一个具有以下四分之三第一列结构的专业部分：

在左侧(四分之三)部分中，添加两列行。

在该行的左列中，添加一个POST模块

然后，门头沟网站建设通过向模块分配一个类别来更新ContentTab下的POST模块设置。这样，POST模块将只显示该类别。要做到这一点，我将选择“服装”作为我的类别。

然后更新以下内容：

节目作者：否
放映日期：否

保存设置

复制此POST模块，以便在左侧列上堆叠两个POST模块，右侧有2个POST模块。

然后用不同的类别更新每个模块中的设置。我有服装，电子，厨房，健康和健身。

如果要添加显示视频评论的POST模块，可以在这里添加。首先，您将需要添加一个新的帖子类别，称为视频，指定类别的颜色#222222。然后创建一个新的帖子，为格式选择“视频”，并将视频URL添加到Extern外的内置视频格式选项框中。

然后，您可以添加您的评论框内容，以显示在视频下。

一旦上传了一些视频，一定要将它们添加到视频类别中。然后返回到主页的分类生成器，并在包含四个POST模块的行下添加一个列行。然后从上一行复制一个POST模块并添加到新行中。在“内容”选项卡下的“发布模块设置”中，选择“视频”类别。现在您有了一个POST模块来显示视频。

在专业部分的右侧(侧边栏)区域，我们将在彼此之上再添加两个POST模块。

对于第一个类别，更新POST模块设置以包括“所有”类别。然后选择排序方法“最高等级”。

复制发布模块，以便它下面的另一个堆栈。然后将该方法上的排序方法更新为“最流行”。

继续更新帖子以保存您的设置。到目前为止，布局应该是什么样子的呢？

下一次复制(或复制)第二主要部分，包含标题为“产品评论”的文本模块。

然后在门头沟网站建设专业部分下拖动(或粘贴)复制部分。在新的部分中，用以下html更新文本模块设置内容：

保存设置

接下来，我们将添加一个博客提要，它将显示所有的产品评论，从最近的评论开始。

在您刚刚更新的文本模块下，向列中添加一个博客源砖石模块。在blog Feed砖石模块设置中，在ContentTab下，选择要在提要中显示的所有类别。

保存设置

最后，在博客馈送砖石模块下，添加一个帖子传送带模块。更新“内容”选项卡下的“帖子旋转模块设置”以包括所有类别，并选择“是”仅显示有特色的帖子。

在创建产品评论帖子时，这个旋转木马只显示您选择的作为功能项的帖子。

现在让我们看看最后的布局是什么样子。

添加几行自定义CSS

为了将设计结合在一起，我们需要添加几行自定义CSS。转到主题Customizer>附加CSS，并在当前CSS代码的顶部添加以下内容：

然后，在设置为980 px的最小宽度的媒体查询括号内，添加以下内容：

第一个CSS片段为模块添加了一个稍微暗一些的阴影和一个更高的顶部边框。第二个自定义顶部部分的“立即加入”按钮。

好吧，这就是主页的分类布局。最后的结果如下：

除了主页类别布局之外，让我们再添加一个简单的布局，在一个页面上显示我们所有的类别。

构建“所有类别”布局

这个布局非常容易创建，因为您已经加载了所有的帖子，设置了分类，并设置了主题样式。此布局的目的是创建一个在一个页面上显示所有类别和产品的页面。这可以做很多不同的方式，但通过额外的，我想利用POST旋转木马模块，以类似的布局显示类别和帖子，就像你会看到像Hulu和Netflix这样的视频流网站。

若要添加布局，请滚动到当前类别布局的顶部，并选择“添加新建”。使用“类别生成器”向标准部分添加一列行。然后向行添加一个文本模块。更新“内容”选项卡下的“文本模块设置”，以便在“内容”框中包含以下H1标记：

保存设置

然后在文本模块下添加一个POST Carousel模块。在“张贴传送带模块设置”中，选择“服装”作为“类别”。

保存设置

然后在服装类别下添加一个文本模块，张贴旋转木马。在“文本模块设置”中，将以下链接添加到“内容”选项卡下的“内容”框中：

URL和/或链接文本可能需要根据站点更改，但其想法是链接到该特定类别的类别页面，以显示该类别的所有产品评论。

在“设计”选项卡下，将文本方向更改为“右”。

保存设置

要以相同的方式显示接下来的三个类别，请重复添加分配给特定类别的POST Carousel模块的过程，然后是包含指向相应类别页的链接的文本模块。

在生成器右侧的“类别”框中，添加一个名为“所有类别”的新类别，并为此布局选择它。这样，每当我们链接到“所有类别”类别页面时，这个模板都会显示出来。

当您完成时，最终的布局应该是这样的。

下面是网站上的分类布局。

您现在可以知道，因为我们还没有太多的产品添加，但这最终将作为一种方便的方式，以洗牌每一个类别的产品使用后旋转木马滑块模块。

今天的邮件到此为止。我希望你已经享受了这个4部分系列的第3部分关于建立一个产品审查网站与额外。

我希望你还没累，我们还有最后一篇文章要做。

即将到来

在门头沟网站建设系列的最后一篇文章中，我们将定制产品评审站点的标题和导航元素。除了创建您的菜单，我将向您展示一种很酷的方法来为您的菜单链接分配颜色，这些链接与整个站点的类别颜色相对应。我还将向您展示如何通过几次单击构建超级菜单。

门头沟网站建设期待着共同建设我们网站的最后一部分。

如往常一样，请随意在下面提交评论。