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

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

在门头沟网站建设里面第一部分在本系列文章中，我们通过设置主题选项和主题定制设置开始了构建产品评审站点的旅程。

今天，我们将通过添加我们的第一个产品评论作为一个新的帖子，并使用DiviBuilder和额外的主题设置定制该帖子的帖子布局来实现我们的目标。完成本教程后，您将可以从库中提取保存的POST模板，轻松地创建其余的帖子。

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

设计要素的准备

由于我们将在本系列的这一部分中添加我们的产品，您将需要您的产品图像。对于本教程，我将有4个类别和3个产品在每个类别，所以我将使用总共12个图像。我使用来自Shutterstock的白色背景的股票图像来给它一个更干净的外观。

为了设计POST布局，我们将使用VisualBuilder和一些自定义CSS。

我们开始吧。

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

订阅我们的YOUTUBE频道

添加您的第一篇产品评论作为一个新的职位

从WordPress仪表板，转到员额>添加新.

每一篇文章都将是你的产品评论，所以你的帖子的名字应该是你的产品的名字。由于我的产品将是一个健身跟踪器，我将进入“健身跟踪”作为我的帖子标题。

注：如果您还没有，那么现在是将您的permalink设置为“POST名称”选项的好时机，这样您的URL将只包含产品名称(当然是您的首选项)。

接下来，单击“使用DiviBuilder”按钮，然后单击“使用VisualBuilder”按钮来部署VisualBuilder。

在VisualBuilder中，插入一列行并将文本模块添加到列中.

在“文本模块设置”的“内容”选项卡中，在“内容”框中输入以下html(确保在“Text”选项卡中工作，而不是在“可视”选项卡中)：

这将作为我们的“花式”字幕为不同的部分。稍后我们将使用自定义CSS对其进行样式化。

就在H2标签下面，您可以添加产品描述文本。我现在用的是“lorem ipsum”。

在当前行下面添加另一列行，并在其中添加另一个文本模块。在TextModuleSettings中，通过在内容部分的Text选项卡中插入以下“Pros&Cons”h2标记，添加另一个html副标题。

这将开始您的产品评审的Pros和Cons部分。

接下来，在前一个行下添加一个一半(两列)行。在左边的列中，添加一个文本模块，并将一个h3标题与文本“pros”放在一起。

现在复制文本模块并将复制的模块拖到右边的列上。将新文本模块中的h3标题更改为“Cons”。

针尖：在VisualBuilder中，您可以简单地单击文本框并键入新标题，而不是打开设置。

接下来，门头沟网站建设将使用blurb模块在Pros和Cons标题下添加一些子项目。

在左列的“Pros”文本模块下，添加一个Blurb模块。在BlurbSettings的Content选项卡中，在内容框中添加一行文本(我现在使用的是虚拟文本)。

然后向下滚动并选择“使用图标”。在出现的图标框中，选择加号。

单击“设计”选项卡并更新以下内容：

图标颜色：#ffffff

圆圈图标：是的

圆圈颜色：#5bd999

图像/图标放置：左

保存设置

复制(或复制)该模糊模块，并将其拖动(或粘贴)到“Cons”文本模块下。然后用以下圆圈颜色更新Blurb Settings Design选项卡：#e6567a

保存设置

现在，在每一列中重复BUURB模块几次，因为我们不知道某个产品可能需要多少个模块。

现在转到包含利弊的行设置。在内容选项卡，更新如下：

第1栏背景：#f8f8f8

第2栏背景：#f8f8f8

在设计标签，更新如下：

使用自定义水槽宽度：是

排水沟宽度：1

等分柱高：是

第1栏填充物：20 px(顶部)，20 px(右)，20 px(底部)，20 px(左)

第2栏填充物：20 px(顶部)，20 px(右)，20 px(底部)，20 px(左)

在高级标签，将下列自定义CSS添加到第1列主要元素文本框：

将以下CSS添加到列2主元素文本框：

针尖如果你有一个更新版本的额外，你应该有能力应用新的动画到门头沟网站建设的网站。通过转到“设计”选项卡下的“行设置”并选择所需的动画样式，将动画添加到Pros和Cons行。这将使您的Pros和Cons部分在用户滚动页面时弹出。

保存设置

复制(或复制)包含副标题“Pros&Cons”的第二行，并将其拖动(或粘贴)到我们刚刚完成的行下。然后将H2标题更改为“规范”。

复制包含利弊列表项目的两列行，并将其放在新的文本模块下，标题为“规范”。从列中删除包含标题“Pros”和“Cons”的两个文本模块。

现在，单击左侧列中第一个blurb模块的Blurb设置。

在内容选项卡，将图标更改为复选标记。

在设计标签，将圆圈颜色更改为#222222。

保存设置

现在，删除其他的blurb模块，并将其替换为您刚刚更新的模块，方法是复制并拖动它们到正确的位置。

现在去行设置中的自定义CSS。第1列主要元素文本框和第2列主要元素文本框，其内容如下：

保存设置

现在，我们需要添加到这个帖子布局的最后一件事是一个“购买”按钮。继续创建一个新的一列行，并添加一个按钮模块。然后按如下方式更新按钮模块设置：

在Content选项卡下…

按钮文本：立即购买

按钮URL：[输入URL](很可能这将最终成为第三方网站的附属链接)

URL打开：在新标签中

在“设计”选项卡…下

按钮对齐：中心

文字颜色：深色

为按钮使用自定义样式：是

按钮文本大小：30 px

按钮文本颜色：#222222

按钮Hover文本颜色：#5bd999

按钮Hover背景色：#ffffff

按钮Hover边框颜色：#5bd999

这就是你的产品后版面的内容部分。门头沟网站建设确保你保存页面。保存页面后，退出可视化构建器，从WordPress仪表板中编辑文章。

将评论添加到您的帖子中

向下滚动到POST编辑器页面的底部，并找到标题为“检查框内容”.

这种聪明的额外添加允许您将产品评等添加到您的帖子中。评级系统设计为有一个或多个故障。细分是构成整体评级的一个组成部分。例如，如果要对相机进行评级，则示例故障将包括设计、性能、电池寿命等…。这些是相机的组件，您可以在其中添加单独的评等百分比。External将根据这些组件计算总体评等百分比，并将其显示在“评审”框中。“评审”框还为评审框标题、摘要和摘要标题提供了有用的输入区域。

若要添加考核，请使用以下内容更新“考核框”内容：

评审框标题：[输入评审框的标题](我建议“产品评审”或“编辑评审”)

摘要：[输入摘要]

摘要标题：[为摘要输入标题](我只是使用“摘要”来保持简单)

接下来，添加四个具有标题和评级百分比的细分，如下所示：

击穿#0

标题：设计

评级：85%

故障#1

标题：业绩

评级：90%

故障#2

标题：电池寿命

评级：70%

故障#3

标题：特色

评级：85%

既然你的评级已经到位，那么在我们发表之前，让我们对我们的文章做一些最后的修改吧。

将类别分配给您的职位

通过单击类别旁边的复选框，确保您为POST/产品分配了正确的类别。在这种情况下，由于这篇文章是为一个健身跟踪器，我将选择类别“健康和健身”。此外，取消复选框的“未分类”。

以下是我正在使用的产品及其类别的细目：

· 服装

· 鞋子

· 观看，注视

· 酷袜子

· 厨房

· 菜刀

· 混合器

· 切割板

· 健康与健康

· 健身追踪器

· 权数

· 跑步机

· 电子学

· 照相机

· 耳机

· 膝上型计算机

在页面的不远处，您将找到“额外设置”框。这些控件允许您重写此特定帖子的默认主题设置。当然，您可以任意自定义此选项，但对于本例，我将选中以下框：

FeaturePost(这允许将产品作为特定类别模块上的特写文章)。

藏书箱

最后，添加您的特色形象。确保它是至少1280 px宽，因为我们将使用全宽度0ne列布局的特色图像。

发表你的文章。

继续保存这个模板，以便您可以在所有产品/帖子中复制此过程。若要保存模板，请单击页面底部的“可视化构建器”菜单中的“保存到库”图标，输入模板名称并单击“保存到库”。

现在，当您添加其余的文章时，您可以从库中加载这个模板，并填写新产品评审的内容。然后，这个过程变得更快了。

添加自定义CSS

我们快完成了。我们需要添加一些自定义CSS到我们的主题，以样式的一些元素的文章。为此，在WordPress仪表板上，转到主题定制器>附加CSS并输入以下内容：

保存和发布

现在让我们来看看我们的结果。

用户评分系统

请注意，在文章的底部，您有一个用户星级配给门头沟网站建设系统。

在这里，您的访问者可以提交任何产品的开始评级，只需停留在星型图标上，并点击他们选择的明星级别。

总体用户评等将显示在后摘录的元数据中。

您可以在“额外设置”框中始终选择禁用此功能。

就这样。我希望你喜欢这个系列的第二部分。

接下来：构建类别布局以显示您的产品

在第3部分中，我将向您展示如何构建主页和所有类别页面的类别布局。确保使用新的POST模板为本系列第3部分的每个类别添加至少3种产品。您将需要这些填充类别模块将显示您的产品。

下面是您可以在第3部分中期望构建的内容：

请随意在门头沟网站建设下面提交问题或评论。我期待着收到你的来信。