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

2019.05.24 门头沟网站建设

109

欢迎收看本系列的第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:

01

02

03

04

05

border: none !important;

-webkit-box-shadow: none !important;

-moz-box-shadow: none !important;

box-shadow: none !important;

margin-bottom: 0px !important;

保存设置

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

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

01

02

03

<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,添加弹出表单,并集成您的电子邮件提供商。然后选择在单击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添加到主元素输入框中:

01

02

03

04

05

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标题添加到内容框的“文本”选项卡中:

01

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

在“设计”选项卡…下

文本定位:中心
标题字体: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更新文本模块设置内容:

01

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

保存设置

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

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

保存设置

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

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

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

添加几行自定义CSS

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

01

02

03

04

.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;

}

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

01

02

03

04

05

06

07

08

09

10

.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片段为模块添加了一个稍微暗一些的阴影和一个更高的顶部边框。第二个自定义顶部部分的“立即加入”按钮。

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

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

构建“所有类别”布局

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

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

01

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

保存设置

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

保存设置

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

01

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

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

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

保存设置

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

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

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

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

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

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

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

即将到来

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

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

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

  


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP