行元素

关于行元素

此 行元素 是创建页面时最重要的组件之一。

通常，您会从 Row 元素开始构建布局基础。您可以自由排列多行，从而根据需要构建页面结构。

对于更高级的网格布局，这有助于确保您的内容在各种屏幕尺寸上井然有序且响应迅速，您可以嵌套 最多 12 列 在一行内。 

一旦设置了框架，您可以轻松地将文本、图像、视频和按钮等元素拖放到行中。 

如何向 GemPages V7 添加行元素？

第三步： 在 GemPages 仪表板，访问 前往 部分，打开现有页面，或创建新页面。您将被引导至 GemPages 编辑器。

第三步： 检查左侧边栏以找到 Row 元素。选择行布局，然后将其拖放到设计区域。

第四步：点击元素，在左侧边栏打开其设置面板，分为 个人设置 金益辉 先进的 标签。

配置设置选项卡

布局

在下面 布局 部分，定义一行中出现多少列。

你可以选择 六种预设布局 （1-6 列），每个预设都会自动将行分成相等的部分。

这些列充当容器，您可以在其中添加不同的元素（例如图像、文本块或按钮）来构建您的内容。

列宽

控制每列在行内占用的空间大小。您可以通过两种方式设置：

• 变化率： 所有列均匀分布。拖动滑块可调整列之间的宽度比例。
• 适合内容： 列宽会自动调整以适应其内容的大小。

这种灵活性可以帮助您设计适应不同内容长度并保持整个页面平衡的布局。

列管理

在此部分下，您可以管理行内列的数量和顺序。将鼠标悬停在列表中的每一列上可以：

• 改编： 更改列的位置。
• 复制： 复制该列及其内容。
• 删除： 移除选定的列。

此部分让您可以轻松地重新组织或复制内容块，而无需从头开始。

列间距

调整 柱间间隙 控制布局的紧凑程度或分散程度。您可以：

• 输入精确的数值，或者
• 拖动 蓝色滑块 从视觉上改变间距。

适当的间距有助于提高可读性并保持列之间的视觉层次。

尺寸

设置 Row 元素的整体大小和内部填充。

• 宽度： 定义行在页面上的宽度。
• 起升高度： 设置行的垂直空间。
• 填充： 控制行边缘与其内容之间的内部间距。

使用这些设置可以在整个布局中保持一致的结构和平衡。

提示：拆分布局时，请匹配列高

当使用多列行时，可能会遇到由于内容长度不同而导致列高不同的情况。

要使行内的所有列显示高度相同：

• 选择行元素。
• 去 个人设置 标签页 → 尺寸 部分。
• 设置 高度 选项 全.

这样一来，左侧内容区域就可以拉伸并与相邻的图像、视频或横幅的高度相匹配，从而在各种设备上创建更加平衡且视觉上一致的布局。

背景

为行添加背景，以创建视觉深度或突出显示特定部分。GemPages 提供三种背景类型，包括：

• 颜色： 使用十六进制代码、颜色选择器或色板选择器选择纯色/渐变背景颜色。

• 图片： 上传新图像或从媒体库中选择一张。

• 视频： 使用 YouTube 或 Shopify 托管的视频来创建动态背景。

形状

在此部分中，您可以通过自定义行来微调行的整体外观 边界, 拐角半径和 阴影效果:

• 边境：添加或修改行周围的边框。您可以定义其 厚度, 样式 （实线、虚线或点线）以及 颜色 以符合您的品牌风格。
• 角落：调整 拐角半径 使轮播的边缘变圆或变尖。例如，值越大，效果越柔和，更具现代感。
• 阴影: 应用一个 阴影 让轮播更具深度感，并与页面背景形成视觉分离。您可以调整阴影的 抵消, 模糊和 颜色 以获得微妙或戏剧性的效果。

对齐列

调整行内所有列的垂直对齐方式。选择：

• 对齐顶部： 将所有内容对齐到行的顶部。
• 垂直中心： 将所有内容垂直居中。
• 对齐底部： 将所有内容对齐到底部。
• 分布垂直间距： 均匀分布列之间的空间。

使用此设置可确保您的内容在不同设备上保持平衡和视觉一致。

配置高级选项卡

如需更多高级自定义，请导航至“高级”选项卡并按照 本文.

行元素的最佳实践

有效利用列

Row 元素非常适合创建多列布局。您还可以在列内嵌套其他行，以创建更复杂的网格设计。

设计内容框

行对于创建推荐部分或类似的内容区域特别有效。您可以使用 Row 元素通过添加背景和填充来制作内容框。对于全宽内容，请考虑使用 Hero Banners 中的背景图像。 

确保间距一致

在一行内，以最大 1200px 的宽度组织您的内容，以确保在所有屏幕尺寸（从小型设备到大型显示器）上的外观统一。

增强响应能力

灵活调整列的位置、顺序和宽度，以适应不同的屏幕尺寸。这可确保您的设计在所有设备上无缝适配，并保持视觉吸引力。

有关使用 GemPages 使您的设计在各种设备上响应的分步说明，请参阅 本文.

常见问题

1. 如何设置列的背景颜色？

目前此功能不可用。要解决此问题，您可以添加自定义 CSS。单击元素，转到“高级”选项卡，然后在 CSS 类框中输入您的 CSS 代码。或者，您可以联系我们的 GemPages 支持团队获取进一步帮助。

2. 如何创建 5 列的行？

您可以通过在行设置中选择 5 列布局来创建 5 列行。或者，您可以使用 轮播元素 为了类似的效果。

3. 如何从一行中删除一列？

要删除 Row 元素中的一列，请按照以下步骤操作：

• 选择包含要删除的列的行。
• 在左侧边栏中，找到列部分。
• 单击要删除的列旁边的垃圾桶图标。

4. 如何复制一行？

您可以通过右键单击行并选择来复制行 复制，或使用键盘快捷键：

• 在 Windows 上：按 按Ctrl + C 复制和 按Ctrl + V 粘贴。
• 在 macOS 上：按 命令 + C 复制和 命令 + V 粘贴。

5.如何在一行中添加8列？

目前，该 每行最大列数为 6 在 GemPages V7 中（如图所示 个人设置 面板 > 布局）。如果需要超过 6 个，则可以通过在现有列中嵌套另一个 Row 元素来实现。

6. 我可以给行内的每一列添加边框或内边距吗？

目前，无法单独设置列的边框或内边距。边框样式仅在列级别可用。 行级别 （在下面 形状 部分），并且可以在该部分应用内边距。 行级别 以及。

如果您需要针对特定​​列进行样式设置，请联系我们的 GemPages 支持团队以获取更多帮助。

7. 如何向页面添加更多行？

要添加更多行，请打开 GemPages 编辑器，然后将“行”元素从左侧边栏拖到设计区域。

请注意，您可以添加的行数可能受版块限制的影响。更多详情，请参阅这篇文章： Shopify 部分限制.