关注VPS服务器
相关知识分享

Avada主题产品详情页/产品分类页/产品页创建详细图文教程

Avada主题建站时产品详情页使用 portfolio创建,产品分类页和产品页(产品总展示页)都用 page创建。整个创建过程还是需要花一点时间的,老魏会在本文中用图文方式详细讲解整个过程。

安装国外主题前提条件

1、如果你是学习的话,选择 1核2g配置的服务器起步,如果用 avada主题建站要使用 2核4g配置,这样才能运行流畅。
国内服务器:阿里云腾讯云(都有代金券,付款时抵用省钱) 国外服务器:点我登陆 Vultr 主机 不知道如何选择地域、配置请在页面右侧+老魏的联系方式,我们一起研究。

2、如果是学习国外主题,那么也可以不用域名,直接用服务器IP当做网站域名使用。 如果是用来建站,那么就要注册域名了。主要用户是老外的话(外贸网站、B2C/C2C等),建议在国外注册,不要在国内注册。打开namesilo官网,在搜索框里输入要注册的域名,选择好之后注册,付费之前记得使用优惠码省钱。优惠码点击国外域名商Namesilo域名注册教程获取。

3、Avada主题 是themeforest中销量第一的wordpress主题,感兴趣可以点我去看看,那里面有上万个国外主题销售。目前在 themeforest上面这款主题是一次付款终身使用,和别的主题一年一付费的情况相比还是蛮划算的。付费后拿到注册密钥留用。

4、建站面板。老魏在本文中使用了宝塔面板,点我领取宝塔官方赠送 3188元优惠券礼包。新用户可享受0.99元体验1个月专业版,多亏宝塔的可视化操作界面部署avada主题才这么快速。

5、Siteground虚拟主机是 wordpress官方推荐的主机,与 wordpress是天生一对。老魏在实际使用当中发现 siteground虚拟主机上面的 wordpress网站速度、稳定性都很棒,而且在国外测试评分网站的得分也很高,如果你打算长期运行外贸网站,老魏强烈建议选择 siteground虚拟主机。
如果你要做外贸网站,点我打开 siteground去注册一个新账号,开始你的外贸建站之旅吧。
关于 siteground建站:siteground专题

创建产品分类页和产品详情页的思路

  • 产品分类要先创建 portfolio Categories,再添加page页面。也就是说产品分类既要用portfolio Categories创建一次分类,还要用page创建一次分类。 然后在这个 page页中用 Avada Builder 中的 Element 调用前面已有的 Portfolio Category;
  • 每个产品用 Portfolio 创建,并选择好对应的 Portfolio Category;

创建 Portfolio Categories

Wordpress后台的菜单【Portfolio】-【Portfolio Categories】中添加产品类别。

比如添加 product A和 product B两种产品分类,点击【Add New Category】添加上去。

老魏提示:产品分类是为了我讲解方便起的,你要填写具体产品分类。可以二级分类,三级分类或更多分类。

创建 page产品分类页

建立两个Page,分别代表产品分类的 product A和 product B。在这两个page 页面右侧选项中的 parent选择 products这个分类,如果你的产品除了一级分类还有二级分类,那么就在二级分类页的 parent选择对应的一级分类页,这样在 page页列表中就看出层级关系了。

根据前面提到的思路,一个 portfolio产品分类对应一个 page产品分类,所以要先去添加 portfolio categories,接着添加一个完全一样的 page categories。

在 Avada Builder中添加 1/1 的container,点击 +Element 添加 portfolio元素,在弹出的 Portfolio 窗口设置如下:

  • Layout 选择 Grid;
  • Picture Size 选择 Auto或 fixed (产品图片尺寸相同选这两个,不能统一就选 Default,或者根据实际页面情况选择);
  • Columns 选择 3 (后期可以根据实际情况调整);
  • Column Spacing:15,列间距;
  • Posts per Page:24,每页多少产品;
  • Portfolio Title Display:portfolio展示方式选择 Only Title;
  • Categories:选择之前创建好的对应的 Portfolio Categories;
  • Pagination Type: None;
  • Excerpt Length: 0;
  • CSS Class: 添加 portfolio_products;
  • Hide URL Parameter ,设置为 on;
  • Settings > permalinks > Avada portfolio category base 添加 products,这样 page产品分类页调用 portfolio categories之后,网址中就是 /products/ 这种形式,与products 产品总展示页无缝衔接了。

创建 Page 产品总展示页

1、创建 Products 页面,做产品总展示页

Wordpress后台【Page】> 【Add New】创建新页面,标题:Products

点击 Avada Builder 按钮,添加 Container,选择1/1,点击 +Element,在容器中添加 portfolio元素,在弹出的 Portfolio 窗口设置如下:

Categories:选择之前创建好的两个 Portfolio Categories;

其余步骤与上面创建 page产品分类页的设置都一样。

创建 portfolio产品详情页

1、统一设置Portfolio参数

在创建portfolio页之前,为了统一产品详情页的参数设置,我们先去设置两处:

1.1、Avada > Options > Portfolio > General Portfolio > Portfolio Slug,添加 product,不要用 products因为会和产品总展示页重复。

为什么这么做:新创建产品portfolio的链接网址里包含 portfolio-items,这样影响用户体验,我们要让前台网址都不显示 portfolio,只显示 product、products一类的url。

如果这个 URL 打开后变成 404 页面,就要去 wordpress后台的 Setting > Permalink 点击 save changes,这样就正常了。

1.2、Avada > Options > Portfolio > Portfolio Singe Post 这里设置好之后,以后每个新增 portfolio产品详情页都是统一的,免去了挨个设计的麻烦。

按照下面提示设置:

Featured Image Column Size 设为 full width,Featured Image / Video on Single Post Page、First Featured Image和Related Projects设为 on,其余都设为off就可以了(这里偷懒不截图了哈)。

这样再创建新 Portfolio时这些就是默认值,不用每次都去配置 Avada Page Options 中的 Portfolio参数了。

2、创建Portfolio

选择【Portfolio】> 【Add New】,输入产品标题 product 1 details,我这里为了方便随便写,实际你要添加的是具体产品名;

同时在右侧 Portfolio Categories选择所属产品类别,比如product A;

在右下位置的 Featured Image (特色图片)中添加产品图片,默认最多添加 5 张图片。要修改图片多少在 Avada > Options > Slideshows > Posts Slideshow Images,修改这里的数值。
提示:添加多张产品特色图片后,在产品详情页中的Featured Images 会自动带上滑动切图效果。

在编辑区上方点击 Avada Builder按钮,+Container,添加 1/1 的Container并在 Container 点击 +Element,在 Element 中选择 Tabs。大家要记住这一系列操作,以后会经常用到。

Tabs这种展现形式对于大部分产品都比较适合,看参数、性能都挺方便,有规格。

在 Tabs 的编辑页面设置如下:

  • Tab Title:Description;
  • Icon:用不用都行;
  • Tab Content:产品文字详情及图片;

如下图所示在Tabs中依次添加你想要的参数栏目,比如 description,size,application,contact等等,根据你的产品情况酌情添加。

avada主题添加Tabs元素

avada主题添加Tabs元素

3、创建侧边栏

没有侧边栏的话整个页面看起来不协调,接下来给 portfolio添加侧边栏。思路是创建 Portfolio Sidebar侧边栏,在每个protfolio产品详情页面下面的 Avada Page Options 的 Sidebars 选型卡中选择我们创建的侧边栏即可。

3.1、Wordpress后台的【Appearance】>【Widgets】,最上面找到并点击 Add New Widget Section 按钮,新建一个 widget叫 Portfolio Sidebar,方便区分。

接下来是 portfolio sidebar的全局设置,进去【Avada】>【Options】>【Sidebars】>【Portfolio Posts】

如下图所示设置。

  • Global protfolio post sidebar1:选择上面建好的那个;
  • sidebar2:none;
  • Forece Global sidebars For protfolio post:on;
  • Global protfolio sidebars position:right,这里根据个人喜好选择放哪边;
  • 最后记得点击上面的 save changes保存生效。
avada主题portfolio sidebar全局设置

avada主题portfolio sidebar全局设置

3.2、现在我们看到 protfolio sidebar里面空空如也,左侧那么多小工具都可以拖拽进来丰富内容,不过最好放一些相关的内容过来,吸引用户点击,这样才能增加用户粘性。这里添加产品分类及产品详情页是再合适不过了。具体做法如下:

在【Appearance】> 【Menu】 新建菜单 Products Sidebar ,左侧的 Page 列表里把产品 2 个分类页勾选后点击 add to menu添加到菜单中去。保存菜单。

avada主题添加menu菜单

avada主题添加menu菜单

然后到 Widgets 中去,如下图所示在之前创建的 Portfolio Sidebar 中添加 Navigation Menu(Custom Menu换个名而已),找到 protfolio sidebar,点击add widget按钮。去右侧给 Title起个名再选择新建菜单 Products Sidebar,save保存。这样就实现了portfolio产品详情页的侧边栏内容展示。

avada主题添加自定义widget

avada主题添加自定义widget

为了避免侧边栏内容少显得很单薄,有以下几种情况供参考:

  • 如果产品层级分类是【产品】【一级分类】【二级分类】,那么可以在 Sidebar Product Menu菜单中把 二级产品类别 Page 添加并设置好层级,这样最后产品详情页展示的 Product Category 就不会这么单薄;
  • 如果产品分类只有一级但类别多,显示很多个产品分类也会比较好看;
  • 最怕的是产品少而且分类少还只有一级,比如老魏举例子这个网站,分为 A 、B两个产品分类,产品一共 6个。因为Portfolio无法添加到 menu菜单中,这时候可以用menu菜单中的 custom link添加产品,Link Text 是产品名,URL是产品 Portfolio 页面链接,再设置好分类和产品的层级位置;
avada主题添加custom link

avada主题添加custom link

3.3、下面是设置好的带有侧边栏的产品总展示页,portfolio产品详情页的情况和下图是一样的,虽然产品分类和产品都很少这样看起来也算比较完整和充实了(侧边栏不会看起来太单薄)。

想要带侧边栏效果就要去产品总展示页下面的 Avada Page Options 的 Sidebars 选型卡中选择我们创建的侧边栏即可。

avada主题带侧边栏的产品页

avada主题带侧边栏的产品页

4、修改Related Projects

在 Portfolio产品详情页下面看到 Related Projects但是英文含义不对,目的是修改成 Related Products相关产品,就对了。

  • Related Projects的逻辑是会显示同一类 portfolio category 下的产品,如果只有一个产品就不显示;
  • 不显示 Related Projects的方法在 Avada > Options > Portfolio > Portfolio Singe Post 中的 Related Projects 设为 no;

这个文件的地址 /wp-content/themes/avada/includes/avada-functions.php

在 wordpress后台 Appearance > Editor,右侧 theme files 中点击 includes,接着点击 avada-functions.php,来到左侧代码区点击一下,ctrl+F 搜索 projects定位,接着把 projects修改成 products。

如果提示无法修改那么你可以用 ftp软件把这个文件下载到本地修改后再覆盖服务器上的文件,或者用宝塔面板的文件管理功能修改也行。

avada主题修改Related Projects

avada主题修改Related Projects

5、 禁止收录portfolio categories

还要在 robots.txt 文件添加代码禁止谷歌收录 portfolio categories 链接,这类url是不能给用户访问的,更不要给搜索引擎收录到。

这类网址大概是这样:域名/portfolio_category/产品url,页面打开后排版还比较乱。

在 robots.txt中添加

Disallow: /wp-admin/
Disallow: /portfolio_category/

后期开启搜索引擎抓取后,就不会抓取 portfolio category 这类 url 页面了。

意外收获

在制作本文教程期间遇到了产品分类页 product A和 product B产品布局不对的问题,在 avada builder中反复设置也无果,无意中打开了 avada live实时编辑器,三下五除二就搞定了,而且这边改那边就能直观看到结果,很好用。与朋友沟通后发现他的服务器放在国内就无法顺利运行 avada live,而老魏这台测试服务器放在国外就能够顺利使用了,这也是操作成功的元素。

最后总结

Avada主题创建产品详情页使用 portfolio,产品分类页和产品页(产品总展示页)用 page。文中提到的tabs这种表现形式是 avada主题众多 element元素中的一种,不要拘泥于这一种布局形式,avada主题demo里面就有几十种可以参考的排版。大家可以尽情发挥你的想象力,结合 avada demo演示、参考他人优秀网站这三种方式来做出属于你自己的 avada主题产品展示页面。

这是本专题38篇文章中的第5篇: Avada

赞(1)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《Avada主题产品详情页/产品分类页/产品页创建详细图文教程》
文章链接:https://www.vpsss.net/22619.html
本站资源仅供个人学习交流,转载请保留出处及链接,不允许用于商业用途,否则法律问题自行承担。