Divi教程：如何使用商店模块

Divi 被设计为兼容 WooCommerce . 集成 WooCommerce ，您必须安装最新版本的 WooCommerce .

WooCommerce 是插件电子商务行业我们推荐它，因为它具有最好的功能集、界面并遵循最佳编码实践。激活插件后，您将看到两个新部分“WooCommerce”和“产品”添加到您的 WordPress 仪表板中。您可以使用这些区域来调整您的电子商务设置并发布新产品。你可以找到文件完成在WooCommerce这里 .

请注意，即使构建器包含各种WooCommerce模块，您也可以单独使用WooCommerce，而无需构建器。您可以为Checkout，购物车等创建标准页面，如其文档所示。您也可以直接链接到woocommerce类别，或使用简码WooCommerce 在Divi文本模块中。它使您可以自由地执行任何操作。

如何在页面上添加商店模块

在您可以将商店模块添加到您的页面之前，您必须首先跳转到 Divi Builder。一旦 Divi主题安装在您的网站上，您会注意到一个按钮 使用Divi Builder 创建新页面时，在帖子编辑器上方。单击此按钮以激活Divi Builder，并访问所有Divi Builder模块。然后点击按钮 使用Visual Builder 以可视模式启动发电机。您也可以点击按钮 使用Visual Builder 如果您已连接到WordPress仪表板，则在前台浏览网站时。

进入Visual Builder后，可以单击灰色加号按钮将新模块添加到页面。新模块只能添加到行内。如果要开始新页面，请记住先向页面添加一行。我们有使用Divi的line和section元素的出色教程。

在模块列表中找到shop模块，然后单击它以将其添加到页面中。模块列表是可搜索的，这意味着您也可以输入单词“ shop”，然后单击Enter以自动搜索并添加shop模块！添加模块后，模块选项列表将为您打招呼。这些选项分为三个主要组： 包装内容 , 概念 et 先进 .

用例示例：使用“商店”模块在首页上展示最新产品

对于此示例，我将使用shop模块在主页上显示最新产品。

这是介绍四种产品的页面。

让我们开始。

使用视觉生成器添加具有全宽度行（一列）的常规部分。更改行参数以使其全角（自定义装订线宽度为1）。

然后在该行中添加一个shop模块。

如下更新模块设置：

内容选项

类型：最新产品
产品数量：4

德观念选项

图标悬停颜色：＃ea1d63
标题警察：没有开放
标题字体大小：24px
警察奖：无营业
价格字体大小：20px

高级选项（自定义CSS）

标题：

text-align：center;
背景：#fff;
margin-top：-10px！显著;

大奖赛：

text-align：center;
背景：#fff;
室内装饰品：15px;

就这样！这是最终结果。

商店内容选项

在内容选项卡中，您将找到模块的所有内容元素，例如文本，图像和图标。所有控制什么出现在模块中的内容将始终在此标签中找到。

Type

选择要在产品Feed中显示的产品类型。您可以从“最新产品”中选择，这些产品将按时间顺序显示所有产品，特色产品，销售产品，最畅销产品或最受好评产品。

产品数量

定义要显示的产品数量。您将需要制造产品才能使任何内容出现在此模块中。

包括类别

选择您要包括的类别。

列数

选择要在商店模块中显示的列数。 4列的行应使用1列。占用行空间的3/3的列应使用4列。第2列应用于占用光源空间1/2的列。一列应用于行空间的1/4列。

重新排列

选择您要如何订购产品。选择默认排序方式，排序，受欢迎程度，评分，日期，价格从低到高，价格从高到低，最旧到最新，最新到最旧。

管理员标签

这将更改构造函数中的模块标签，以便于识别。在Visual Builder中使用WireFrame视图时，这些标签将出现在Divi Builder界面的模块块中。

车间设计方案

在“设计”选项卡中，您将找到所有模块样式选项，例如字体，颜色，大小和间距。这是用于更改模块外观的选项卡。每个Divi模块都有一长串的设计设置，可用于更改任何内容。

叠加图标

当您将鼠标悬停在“商店”模块中的某个项目上时，将显示一个覆盖图标。您可以通过在此设置中使用颜色选择器来调整用于此图标的颜色。

覆盖层的颜色

当您将鼠标悬停在“商店”模块中的某个项目上时，叠加层颜色将显示在图像的顶部以及商店标题文本和图标的下方。默认情况下，使用半透明的白色。如果要使用其他颜色，则可以在此设置中使用颜色选择器调整颜色

选择器图标

在这里，您可以选择一个自定义图标，以在访客将鼠标悬停在模块中的商店项目上时显示。

销售徽章的颜色

出售商品时，销售徽章会出现在产品图片上。使用此设置，您可以调整徽标背景使用的颜色。

标题字体

您可以通过从下拉菜单中选择所需的字体来更改标题文本的字体。 Divi提供了Google字体提供的数十种出色字体。默认情况下，Divi对页面上的所有文本使用Open Sans字体。您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

标题字体大小

您可以在此处调整标题文本的大小。您可以拖动范围滑块以增加或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需文本大小的值。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

标题文字颜色

默认情况下，Divi中的所有文本颜色都显示为白色或深灰色。如果要更改标题的文本颜色，请使用此选项从颜色选择器中选择所需的颜色。

标题字母的间距

字母间距会影响每个字母之间的间距。如果要增加标题文本中每个字母之间的间距，请使用范围滑块调整间距或在滑块右侧的输入字段中输入所需的间距大小。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

标题行的高度

行高会影响标题文本各行之间的间距。如果要增加每行之间的间距，请使用范围滑块调整间距或在输入字段中输入所需的间距大小位于光标右侧。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

价格政策

您可以通过从下拉菜单中选择所需的字体来更改价格文本的字体。 Divi随附了数十种由Google字体支持的出色字体。默认情况下，Divi对页面上的所有文本使用Open Sans字体。您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

价格字体大小

您可以在此处调整价格文字的大小。您可以拖动范围滑块以增大或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需的文本大小值。输入字段支持不同的度量单位，这意味着您可以根据尺寸值输入“ px”或“ em”以更改其单位类型。

价格文字颜色

默认情况下，Divi中的所有文本颜色都显示为白色或深灰色。如果要更改价格文本的颜色，请使用此选项从颜色选择器中选择所需的颜色。

价格信件的间距

字母间距会影响每个字母之间的间距。如果要增加价格文本中每个字母之间的间隔，请使用范围滑块调整间隔，或在滑块右侧的输入字段中输入所需的间隔大小。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

价格线的高度

行高会影响价格文本各行之间的间距如果要增加各行之间的间距，请使用范围滑块调整间距或在输入字段中输入所需的间距大小位于光标右侧。输入字段支持不同的度量单位，这意味着您可以根据尺寸值输入“ px”或“ em”以更改其单位类型。

商店的高级选项

在高级选项卡上，您将找到经验丰富的Web设计人员可能会有用的选项，例如自定义CSS和HTML属性。在这里，您可以将自定义CSS应用于模块的许多元素中的任何一个。您还可以将自定义CSS类和ID应用于模块，该自定义CSS类和ID可用于在子主题的style.css文件中自定义模块。

CSS ID

输入用于此模块的可选CSS ID。 ID可用于创建自定义CSS样式或链接到页面的特定部分。

CSS类

输入用于此模块的可选CSS类。 CSS类可用于创建自定义CSS样式。您可以添加多个类，以空格分隔。这些类可用于Divi子主题或使用Divi主题选项或Divi Builder页面上的设置添加到页面或网站的自定义CSS样式表中。

自定义CSS

自定义CSS也可以应用于模块和任何模块内部。在“自定义CSS”部分中，您将找到一个文本字段，您可以在其中直接将自定义CSS样式表添加到每个元素。这些设置中的CSS条目已经包装在样式标签中。因此，只需输入用分号分隔的CSS规则即可。

能见度

此选项使您可以控制模块所在的设备。您可以选择在平板电脑，智能手机或台式机上分别停用模块。如果要在不同的设备上使用不同的模块，或者要通过从页面中删除某些元素来简化移动设计，这将很有用。

[vc_row center_row =“ yes”] [vc_column宽度=“ 1/2”] [vcex_button target =“空白” layout =“展开” align =“ center” font_family =“ Raleway” font_weight =“ 700”样式=“ flat” custom_background =“＃18b69d” custom_hover_background =“＃118d7a” custom_color =“ #ffffff” custom_hover_color =“ #ffffff” icon_right =“ fa fa-download”]下载主题[/ vcex_button] [/ vc_column] [»vc_column] =» 1/2英寸] [vcex_button url =“ https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target =“ blank” layout =“ expanded” align =“ center” font_family =“ Raleway” font_weight =“ 700”样式=“ flat” custom_background =“＃c4226e” custom_hover_background =“＃8d184f” custom_color =“ #ffffff” custom_hover_color =“ #ffffff” icon_right =“ fa fa-download”]下载模板DIVI [/ vcex_button] [/ vc_column] [/ vc_row]