使用 Extra 构建产品评论网站 - 第 3 部分

欢迎阅读有关如何使用 Extra 开发产品评论网站的 4 部分系列的第 3 部分。 如果您正在绞尽脑汁思考如何开始开发产品评论网站，那么本系列适合您。 凭借其内置的评论功能和智能帖子分类，Extra 专门用于在几分钟内创建漂亮的评论、产品帖子模板、大型菜单和类别布局。 和我一起探索 Extra 的力量。

在本系列的第 2 部分中，我们使用 Extra 的内置设置和 Visual Builder 创建了我们的产品评论帖子模板。 使用新的帖子模板，您可以添加其他帖子并将它们分配到相应的类别。

今天我们将使用 Extra 的类别构建器构建两个类别布局。 第一个布局将在您的主页上显示帖子/产品评论，突出显示最新和最受欢迎的评论。 第二个布局将使用轮播滑块模块在一个页面上展示所有类别。 完成本教程后，您将为设计良好的产品评论网站奠定良好的基础。

这是我们将要构建的内容的先睹为快

准备设计元素

由于类别布局在很大程度上取决于帖子内容，因此请确保添加了足够的帖子，以便您可以了解添加自己的内容后网站的外观。 正如本系列的第 2 部分所讨论的，我的类别布局填充了 4 个类别，每个类别中有 3 个产品。 我正在使用来自 shutterstock 的库存图片作为我帖子的特色图片。

为了设计类别布局，我们将使用 Extra 的 Category Builder 和一些自定义 CSS。

让我们开始吧。

使用 Extra 构建产品评论网站 - 第 3 部分

订阅我们的 YouTube 频道

为主页构建类别布局

默认情况下， extra 使用主页的类别布局。 要创建自定义布局，请从 WordPress 仪表板侧边栏转到Extra > Category Building 。 找到名为“主页”的类别布局，然后将鼠标悬停在它上面并选择编辑。

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

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

在左侧（三分之二）列中，添加一个精选帖子滑块。

更新特色帖子滑块模块设置如下：

在内容选项卡下...

分类： 全部
仅显示精选帖子：[在您决定要展示哪些帖子之前，我会保持关闭。 您可以在帖子编辑器页面的“额外设置”框中将某个帖子指定为特色帖子。]
显示作者：OFF
演出日期：关闭

在设计选项卡下...

导航箭头颜色：#ffffff
导航箭头背景：#000000
字幕背景：rgba(255,255,255,0.4)
标题字体大小：24px
标题文字颜色：#000000
元字体大小：16px
元文本颜色：#000000
自定义边距：底部 0px

在高级选项卡下...

在 Main Element 文本框中输入以下自定义 CSS：

border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
margin-bottom: 0px !important;

保存设置

现在将文本模块添加到右侧（三分之一）列并更新文本模块设置，如下所示：

在内容选项卡下，将以下 html 添加到内容框的文本选项卡：

<h1>Get the Latest Reviews on Popular Products</h1>

<a class="join-cta" href="/reviews" target="_blank">Click to Join</a>

此处的链接旨在用作模拟 CTA 按钮。 您可以选择随意使用它。 只需更新 URL 和链接文本。

提示：单击此 CTA 时，您可以使用 Bloom 触发电子邮件选择弹出框。 这样，访问者今天就可以通过您的电子邮件营销活动了解产品。 为此，您需要安装 Bloom、添加弹出表单并集成您的电子邮件提供商。 然后选择在点击CSS选择器“a.join-cta”时显示弹出窗口，该选择器对应于上面html代码中的链接类。

您还可以阅读有关如何在单击按钮时弹出bloom optin 表单的更多信息。

现在回到文本模块设置。

在设计选项卡下...

文本字体大小：40px（桌面）、24px（平板电脑和智能手机）
页眉字体大小：42 像素（桌面）、38 像素（平板电脑）、28 像素（智能手机）
自定义填充：40px（上）、15px（右）、15px（下）、15px（左）

保存设置

现在转到行设置，以便我们可以设置行的背景样式。

然后更新以下内容：

在内容选项卡下...

背景：#ffffff

在设计选项卡下...

使这一行全宽：是
均衡柱高：是

在Advanced Tab 下，将以下自定义 CSS 添加到 Main Element 输入框：

border-top: 10px solid #121212;
border-radius: 3px;
-webkit-box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
-moz-box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);

保存设置

立即查看您的自定义特色滑块部分。

到目前为止看起来不错。

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

然后更新文本模块设置如下：

在内容选项卡下，在内容框的文本选项卡中添加此 html 标题：

<h1 class="subtitle fancy"><span>Product Reviews</span></h1>

在设计选项卡下...

文字方向：居中
标题字体：B（粗体）
页眉字体大小：48px（桌面）、42px（平板电脑）、36px（智能手机）

保存设置

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

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

在左侧（四分之三）部分，添加两列行。

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

然后通过为模块分配类别来更新“内容”选项卡下的“帖子模块设置”。 这样，帖子模块将只显示该类别。 为此，我将选择“服装”作为我的类别。

然后更新以下内容：

显示作者：NO
演出日期：否

保存设置

复制此帖子模块，以便在左侧列堆叠两个帖子模块，在右侧堆叠两个帖子模块。

然后使用不同的类别更新每个模块中的设置。 我拥有的类别是服装、电子产品、厨房和健康与健身。

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

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

上传了几个视频后，请确保将它们添加到视频类别。 然后返回主页的类别生成器，并在包含四个帖子模块的行下添加一个单列行。 然后从前一行复制一个帖子模块并添加到新行。 在内容选项卡下的帖子模块设置中，选择类别“视频”。 现在您有一个将显示视频的帖子模块。

在专业部分的右侧（侧边栏）区域，我们将添加另外两个堆叠在一起的帖子模块。

对于第一个，更新帖子模块设置以包含“所有”类别。 然后选择排序方法“最高评分”。

复制该帖子模块，以便在其下堆叠另一个。 然后将该排序方法更新为“最受欢迎”。

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

接下来复制（或复制）包含标题为“产品评论”的文本模块的第二个主要部分。

然后在专业部分下拖动（或粘贴）复制的部分。 在新部分中，使用以下 html 更新文本模块设置内容：

<h2 class="subtitle fancy"><span>Latest Reviews</span></h2>

保存设置

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

在您刚刚更新的文本模块下，向列中添加博客提要砌体模块。 在“博客 Feed Masonry 模块设置”中的“内容”选项卡下，选择要在 Feed 中显示的所有类别。

保存设置

最后，在 Blog Feed Masonry Module 下，添加 Posts Carousel Module。 更新“内容”选项卡下的“帖子轮播模块设置”以包含所有类别，并选择“是”以仅显示精选帖子。

此轮播旨在仅显示您在创建产品评论帖子时选择为特色项目的帖子。

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

添加几行自定义 CSS

为了将设计整合在一起，我们需要添加几行自定义 CSS。 转到 Theme Customizer > Additional CSS 并在现有 CSS 代码的顶部添加以下内容：

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
border-top: 10px solid;
}

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

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

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

嗯，这就是主页类别布局。 这是最终结果的样子：

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

构建“所有类别”布局

由于您已加载所有帖子、设置类别和主题样式，因此创建此布局非常简单。 此布局的目的是创建一个页面，在一个页面上显示所有类别和产品。 这可以通过多种不同的方式完成，但是使用 Extra，我想利用帖子轮播模块以类似于您在 Hulu 和 Netflix 等视频流网站上看到的布局来显示类别和帖子。

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

<h1 class="subtitle fancy"><span>All Categories</span></h1>

保存设置

然后在文本模块下添加一个帖子轮播模块。 在帖子轮播模块设置中，选择服装作为类别。

保存设置

然后在服装类别帖子轮播下添加一个文本模块。 在文本模块设置中，将以下链接添加到内容选项卡下的内容框中：

<a href="/category/clothing">view all clothing reviews</a>

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

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

保存设置

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

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

完成后，最终布局应如下所示。

这是网站上的类别布局。

您现在可以判断，因为我们还没有添加很多产品，但这最终将成为使用帖子轮播滑块模块随机浏览每个类别的产品的便捷方式。

这就是今天的帖子。 我希望您喜欢这个关于使用 Extra 构建产品评论网站的 4 部分系列的第 3 部分。

我希望你还没有感到疲倦，我们的系列还有最后一篇文章。

接下来

在我们系列的最后一篇文章中，我们将自定义产品评论网站的标题和导航元素。 除了创建您的菜单之外，我还将向您展示一种很酷的方式来为您的菜单链接分配颜色，这些颜色与整个站点的类别颜色相对应。 我还将向您展示如何通过单击几下来构建大型菜单。

我期待着共同构建我们网站的最后一部分。

与往常一样，请随时在下面提交评论。