当您为特定产品创建登录页面时，无论是新产品发布还是您正在准备的促销活动，您很有可能会在某个时候使用商店模块。 Divi Shop 模块允许您从插件中动态提取产品 WooCommerce 并使用 Divi 的内置选项设置样式。
现在，默认情况下，shop模块具有一些列结构，这些结构在较小的屏幕尺寸上均转换为两列。 这意味着您选择显示的产品越多，则需要更多的垂直滚动才能到达目标网页的下一部分。
在现代网页设计中，一种经常用于根据您的喜好限制垂直滚动和显示元素的技术。 游客 就是用磁卡。 在本教程中，我们将向您展示如何在不使用插件的情况下将 Divi 商店模块转换为较小屏幕尺寸上的动态产品卡片。
我们将从准备产品部分的各种元素开始，并使用少量 CSS 代码来启用滑动效果。 这是在您的着陆页上展示各种产品的好方法，而不会压倒您的 游客.
可能的结果
在深入学习本教程之前，让我们看一下结果。 我们仅在平板电脑和手机上激活产品的磁卡。 在桌面上，我们保留在Shop模块中确定的列结构。
1.配置WooCommerce和产品页面
在进入本教程的Divi部分之前，插件很重要 WooCommerce 已安装并激活您的 网站Web. 如果您还没有这样做，请添加多个产品，具体取决于您要在商店模块中显示的产品数量。
2.创建一个新页面并下载文具页面布局
建立新页面
产品到位后，在WordPress后端中添加一个新页面。 给页面命名，发布页面并激活Divi Visual Builder。
下载登录页面布局
进入新页面后，导航至预设布局并下载文具登陆页面布局。 尽管我们使用这种特定的布局，但是只要您在该布局内添加或定位商店模块，就可以随意使用任何其他所需的布局。
3.修改商店部分
使用“商店”模块找到该部分
如果向下滚动到使用文具主页布局创建的新页面，我们将遇到一个带有shop模块的区域。 在本教程的后续步骤中，我们将使用本节。
线路设置
自适应大小
首先打开包含Shop模块的行的行设置。 如前所述，我们在桌面上保持相同的设计，我们只会在较小的屏幕尺寸上激活产品的滑动卡。
为了营造轻松的体验，我们将通过更改大小设置的宽度，使该行触摸屏幕的左侧和右侧。
- 使用自定义装订线宽度：1
- 宽度：80％（台式机），100％（平板电脑和手机）
能见度
通过将可见性设置设置为“隐藏”，我们还将确保没有任何东西超出行容器。
- 水平溢出：隐藏
- 垂直溢出：隐藏
商店模块设置
选择产品数量和您选择的办公室栏结构
接下来，我们将打开“商店”模块设置。 我们对CSS代码所做的更改（稍后将添加）将取决于所显示产品的数量。
我们将首先向您展示如何将具有8种产品的商店模块转换为产品卡。 您可以选择桌面所需的任何列布局。
- 产品数量：8
- 列布局：4列
自适应大小
为了增加车间模块的尺寸，我们将在设计选项卡中更改尺寸参数。 请注意，我们仅在平板电脑和手机上执行此操作。
- 宽度：100％（台式机），250％（平板电脑和手机）
- 最大宽度：100％（办公桌），250％（平板电脑和手机）
CSS类
我们还将在我们的shop模块中添加一个CSS类。 稍后，当我们添加CSS代码时，我们可以转换仅包含此CSS类的Shop模块。 换句话说，如果您希望另一个Shop模块以正常状态显示，则省去这个CSS类将使您可以这样做。
- CSS类：产品刷卡
反应性溢出
我们将通过更改不同屏幕尺寸的可见性设置来补充行设置。 正如您在设置中看到的那样，我们只希望在较小的屏幕尺寸上出现滚动效果。
- 水平溢出：隐藏（桌面），滚动（平板电脑和手机）
- 垂直溢出：隐藏
在商店模块下添加代码模块
修改Shop模块后，您可以在下面添加代码模块。
将CSS代码添加到模块
以下CSS代码将自动将我们的8种产品的商店模块转换为电抗磁卡：
<style> @media all and (max-width: 980px) { .product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;} .product-swipe-cards .woocommerce ul.products::before {content: none;display: block;} .product-swipe-cards.et_pb_shop ul.products li.product {width: 100% !important;} .product-swipe-cards .woocommerce {width: 255% !important;margin-left: 5%;} .product-swipe-cards::-webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </style>
匹配不同的产品帐户
现在，如果您要向商店模块中添加更少（或更多）的产品，则代码在两个地方会稍有变化。 这两个位置都必须手动更改以匹配所需的结果。 例如，让我们将商店模块中的产品数量更改为“ 4”。
- 产品数量：4
回到代码后，我们需要进行两项更改。 首先，我们将需要修改网格模板的列。 而不是8，我们使用4（与我们的产品数相同）。 我们还将增加这些产品在产品表中所占的百分比大小（产品越多，空间越小）。
grid-template-columns：重复（4，14％）！
然后，我们还将更改放置产品的容器的宽度。 对于4个产品，这等于150％。 这些值不是固定的，它们是通过播放并找到网格模型的列与容器的宽度之间的和谐来获得的。
为了找到合适的平衡，请切换到Visual Builder中的移动视图并在查看这些更改的结果时仔细调整值。
width: 150%!important;
向滚动添加快照
如果您想在刷卡设计中进一步提升用户体验，您还可以添加滚动捕捉。 滚动捕捉让您 游客 通过固定在新产品的开头来滚动。
这意味着它们的扫描不需要精确，滚动猛击将在某个时刻接管并显示其在侧滚动机构内部的位置调整。
要在产品的滑动卡上启用滚动捕获，请在CSS代码中分别向每个产品添加一行CSS代码（请参见下面的打印屏幕）。
滚动对齐对齐：开始
我们还将通过添加以下CSS代码行来激活shop模块上的滚动捕获：
滚动快照类型：x必选
重复使用工作坊模块以显示其他类别
克隆整行一次
一旦完成了第一套磁卡，就可以克隆整条线。
删除重复行中的代码模块
只要您的商店模块包含与上一个模块相同的CSS类，代码模块就可以。 继续并删除重复行中的代码模块。
尽可能多地复制重复的行
现在，根据您要在目标网页上显示的刷卡集的数量，现在可以根据需要多次克隆重复的行！
4.保存页面更改并在移动设备上查看结果
确保完成添加产品划卡后，在退出Visual Builder之前保存页面并完成操作！
概观
现在我们已经完成了所有步骤，让我们最后看一下它在不同屏幕尺寸下的外观。
最后的想法
在本文中，我们向您展示了如何将集成的Divi Shop模块转换为较小屏幕尺寸的产品磁卡。 在桌面上，我们保留了分配给Shop模块的原始列结构。
使用产品滑动贴图，您可以将无尽的产品添加到水平滑动机制中，而不会压倒垂直滚动的访问者。
这是现代网站设计中经常使用的一种趋势，因为它着重于用户行为，并使得在较小的屏幕上访问各种元素变得更加容易。
您可以在任何页面上使用这些产品表，但是对于您创建的任何产品目标页面而言，它特别方便。 您还可以免费下载布局JSON文件！
如果您有任何疑问或建议，请随时在下面的评论部分中发表评论。
