如何创建带有行或轮播元素的 5 列网格

为什么要在页面上创建 5 列网格？

简洁且引人入胜的布局对于展示产品和推动转化至关重要。

5 列网格为您提供了更大的灵活性，特别是当您想要：

• 最大化产品可见性：在一行上显示多个产品、功能或类别，以获得更广泛的概览。
• 增强用户体验：允许顾客一次查看更多商品，帮助他们更快地做出购买决定。

最新更新于 GemPages v7，您现在可以更轻松地设置 5 列网格，并获得更好的自定义选项。

如何在 GemPages 中创建 5 列网格？

在 GemPages v7 中，使用 行 元素 或 圆盘传送带 元素.

首先，您需要找到编辑器：

• 从 Shopify 管理员处，导航至 GemPages 构建器 下的应用程序 应用 部分。
• 在MyCAD中点击 软件更新 前往，您可以在其中找到使用 GemPages 构建的所有页面。
• 点击目标页面，进入编辑器。

如果您希望设计新模板，请点击 建立新页面.

请参阅 本文 有关使用 GemPages 创建新页面的更多说明。

方法 1：使用行元素

按照以下步骤使用 GemPages 的 Row 元素创建 5 列网格布局。

第三步： 从左侧边栏拖放 行元素 到您页面上的任意位置。

第三步： 点击元素打开其设置面板。在 布局 部分，选择 5 列布局。

第三步： 根据你的喜好自定义布局。你可以：

• 在每一列内放置一个元素
• 调整列间距
• 更改网格背景颜色
• 修改元素的形状

提示： 为您的产品使用一致的产品图像尺寸，以保持 5 列网格的视觉平衡。

方法 2：使用轮播元素

虽然 行元素 虽然很简单，但它可能并不总是最有效的解决方案，尤其是在移动设备上，因为 5 列网格会占用太多的垂直空间。

此 轮播元素 提供更动态、更节省空间的产品展示选项。设置方法如下：

第三步： 拖放 旋转木马元素 到您希望网格出现的页面上。

第三步： 在下面 每张幻灯片的项目数 部分中，选择 5 项网格。

第三步： 现在，设计 5 列网格轮播以适合您的品牌。

您也可以启用 自动播放, 导航箭头 或 滑动手势 以获得更流畅的移动设备浏览体验。

常见问题

1. 我可以创建超过 5 列（例如 6 列或 7 列）吗？

目前，GemPages 支持 最高可达6 Row 元素中的列。对于需要更多项目的布局，建议使用 Carousel 元素。

2. 五列网格在移动设备上响应吗？

是的。布局会在移动设备上自动调整。但是，为了提高可读性，每行可能会显示较少的项目（例如 2-3 列），具体取决于屏幕尺寸。

3. 我应该使用哪个元素：行还是轮播？

使用 Row 元素来实现静态的 5 列布局。如果您想要节省空间、可滚动的设计（非常适合移动设备），那么 Carousel 元素是更好的选择。

4. 我可以在五列网格内混合不同的元素吗？

是的。您可以将产品元素、图片或任何其他元素放入每列。