如何使用WordPress的Divi主题中添加商店模块?

word-image-28

在网站中有时候的产品过多时,

需要在页面进行整合、统一放置,

那么可以使用Divi主题中的商店模块,

该商店模块可以在页面上很好的整合产品也可以分类显示最新产品

有助于在网页中能够快速的获取产品类别。

什么是个人商店模块

商店模块是主要用来显示产品的一个整合模块,

可以在网站页面中显示最新产品,

也可以按照特色产品,销售产品,最畅销产品或好评产品进行分类显示。

真实案例需求

我们有一位WordPress建站客户,

她想要在页面中显示将产品放置于一个板块中按照最新产品进行分类,

那么接下来我们将教大家如何使用Divi主题制作商店模块。

模块编辑步骤

这是我们使用商店模块做出来的大概样式 。word-image-28-800x562

首先我们在创建页面前请确保自己正确安装了divi主题。

然后点击页面的灰色按钮找到商城模块将其添加到页面中。

注意:新模块只能添加到行内部。

word-image-29-800x421

添加成功后在弹出的模块设置里进行编辑,

点击【内容/产品视图类型】的右边按钮。

word-image-31-800x421

选择所要展示的商品类型,

提示:选择最新产品,这些产品将按时间顺序显示所有产品,特色产品,销售产品,最畅销产品或好评产品。

word-image-33-800x421

若是选择其他的产品(除最新产品外)

就会显示订购选项,您可以在这里选择所需要产品的排序方式。

word-image-35-800x421

在【内容/产品数量】可以定义要显示的产品数量。

word-image-37-800x421

在【列布局中】可以选择在商店模块中显示多少列。

word-image-39-800x421

在【内容/元素】里可以选择是否需要开启分页

word-image-41-800x421

在模块设置的【设计/覆盖】中可以设置图标和叠加背景颜色

叠加图标颜色:将鼠标悬停在商店模块中的某个项目上时,会出现一个叠加图标。您可以在此设置中使用颜色选择器来调整用于此图标的颜色。

叠加背景颜色:将鼠标悬停在商店模块中的某个项目上时,叠加颜色会在图像顶部和商店标题文本和图标下方逐渐消失。 word-image-43-800x421

【设计/标题文本】里可以设置标题的字体大小、颜色等样式。 word-image-45-800x421

若是有对应的文本信息,可以在对应的设计文本中进行设置。

word-image-47-800x421

在【大小】里可以设置整体商城的大小和对齐方式

word-image-49-800x421

Wp结语

商店模块可以在页面上显示最新产品。也可以设置不同的类别显示,有助于用户在网页中快速浏览最新产品。

本文由 8源码吧 作者:liaolong 发表,其版权均为 8源码吧 所有,文章内容系作者个人观点,不代表 8源码吧 对观点赞同或支持。如需转载,请注明文章来源。

发表评论