如何更改Divi Shop模块的移动列断点
已发表: 2020-01-24默认情况下，一旦您切换到移动设备，商店模块就会变成单列布局。 现在，如果您希望单独突出显示每个产品，那很好，但是随着如今智能手机屏幕尺寸的增加，您可能希望在使用 Shop Module 时允许两个产品彼此相邻显示。 在今天的 Divi 教程中，我们将向您展示如何使用 CSS 更改商店模块的移动断点，从而允许两种产品在大多数现代智能手机上并排显示。 这是一个很棒的教程，如果您将来要建立在线商店，就可以使用它！ 您还可以免费下载设计的 JSON 文件！
让我们开始吧。
预览
在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
移动的
桌面
免费下载商店页面模板
要使用免费商店页面模板，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
1.转到Divi Theme Builder并添加新模板
转到 Divi 主题生成器并添加新模板
首先转到 DIvi 的 Theme Builder 并添加一个新模板。
在商店页面上使用模板
在您网站的商店页面上使用这个新模板。
- 用于：商店
开始构建模板主体
并开始构建商店模板的主体。
2. 开始构建模板主体
部分设置
渐变背景
进入模板编辑器后，您会注意到一个部分。 打开该部分并为其使用以下渐变背景：
- 颜色 1：#32ff3d
- 颜色 2：#29c4a9
- 渐变类型：线性
- 梯度方向：109deg
背景图片
同时上传背景图片。 您可以在本文开头下载的下载文件夹中找到我们在本教程中使用的背景图像。
- 背景图片尺寸：适合
间距
移至该部分的设计选项卡并相应地修改间距值：
- 上边距：50px
- 左边距：50px
- 右边距：50px
- 底部填充：150px
边界
通过添加一些边框半径来完成部分设置。
- 所有角落：20px
添加新行
列结构
继续使用以下列结构向该部分添加新行：
将文本模块添加到列
添加H1内容
使用您选择的一些 H1 内容将文本模块添加到行的列。
H1 文本设置
相应地更改模块的 H1 文本设置：
- 标题字体：Prata
- 标题文本对齐方式：居中
- 标题文字颜色：#ffffff
- 标题文字大小：80 像素（桌面）、60 像素（平板电脑）、40 像素（手机）
添加第 2 节
Z索引
在上一节的正下方添加另一节。 打开部分设置并增加 z 索引。
- Z指数：2
添加新行
列结构
然后，使用以下列结构添加新行：
背景颜色
尚未添加任何模块，打开行设置并添加背景颜色。
- 背景颜色：#ffffff
浆纱
转到模块的设计选项卡并按如下方式修改大小设置：
- 宽度：100%
- 最大宽度：1380px
间距
然后，在不同的屏幕尺寸中添加一些自定义间距值。
- 上边距：200px
- 顶部填充：50 像素（桌面）、20 像素（平板电脑和手机）
- 底部填充：50px（桌面），20px（平板电脑和手机）
- 左填充：100px（桌面），20px（平板电脑和手机）
- 右内边距：100 像素（桌面）、20 像素（平板电脑和手机）
边界
我们还为整行添加了一些边框半径。
- 所有角：25px
盒子阴影
通过添加微妙的框阴影来完成行设置。
- 框阴影模糊强度：50px
- 阴影颜色：rgba(0,0,0,0.1)
将商店模块添加到列
内容
现在，是时候插入我们的 Shop 模块了。 我们使用的是 4 列布局。
- 列布局：4 列
覆盖
转到模块的设计选项卡并更改覆盖颜色。
- 叠加图标颜色：#29c6a6
- 叠加背景颜色：rgba(255,255,255,0.75)
图片
也更改图像设置。
- 所有角：10px
- 框阴影模糊强度：50px
- 阴影颜色：rgba(0,0,0,0.11)
标题文字设置
继续相应地修改标题文本设置：
- 标题字体：普拉塔
- 标题文字大小：30 像素（桌面）、25 像素（平板电脑）、20 像素（手机）
价格文本设置
接下来，对价格文本设置进行一些更改。
- 价格字体：蒙特塞拉特
- 价格字体粗细：中等
- 价格文字大小：18px（桌面）、16px（平板电脑）、14px（手机）
间距
通过添加一些顶部填充来完成模块设置。
- 顶部填充：50px
将代码模块添加到列
完成整个 Shop Module 设计后，就可以使用 CSS 修改 Shop Module 移动列断点了。 我们将把 CSS 代码添加到我们设计中的代码模块中。 继续并在商店模块正下方添加一个新的代码模块。
插入 CSS 代码
我们将一列移动断点减少到 300 像素宽度。 这意味着大多数现代智能手机将显示两种产品并排显示，而不是一种。 为了实现这一点，我们将向代码模块添加以下 CSS 代码行：
<style>
@media (max-width: 479px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 49% !important;
}
}
@media (max-width: 300px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 100% !important;
}
}
</style>
3. 保存所有主题生成器更改和预览结果
完成商店页面设计并添加 CSS 代码以更改移动断点后，您可以保存所有 Theme Builder 更改并在您的商店页面上查看结果！
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
移动的
桌面
最后的想法
在这篇文章中，我们向您展示了如何更改商店模块的移动列断点，这使您可以在当今大多数现代智能手机上显示彼此相邻的两种产品。 这是减少所需的移动滚动并同时向访问者展示更多产品的绝佳方式。 您也可以免费下载 JSON 文件！ 如果您有任何疑问，请随时在下面的评论部分发表评论。
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。