使用 Row 构建所需的布局

要深入了解 Row 元素及其功能，请查看我们的 行元素文章.

以下是一些使用行和分步指南的关键布局示例。

设计英雄横幅

英雄横幅是放置在页面顶部的显眼横幅，通常带有背景图片、标题和号召性用语按钮。 

虽然你可以使用预先设计的 英雄旗帜元素 为此，Row 元素为您提供了更大的控制和灵活性。

创建步骤：

第三步： 拖放一个 三列行。这将为您的英雄横幅创建基本布局。

第三步： 在 个人设置 标签。

向下滚动到 背景 并点击旁边的框 图片 为该部分设置图像背景。

您可以浏览图库以选择可用图像或上传新图像。

第三步： 将文本块、标题或任何其他元素（例如按钮元素）拖放到布局中。

通过自定义每个元素 个人设置 金益辉 高级选项卡 进行调整。

第三步： 至 调整背景大小, 单击该部分以打开其配置。

导航到 先进的 选项卡可微调 间距 部分以达到理想的贴合度。

第三步： 切换到移动视图并调整布局以提高响应能力。

设计产品细分部分

分层的产品分解布局非常适合以结构化、视觉吸引力的方式突出显示产品特性或规格。

创建步骤：

第三步： 拖放一个 三列行。这构成了您的产品细分布局的基础。

第三步： 拖拽 图像元素 到左栏并上传您想要的图像。

第四步：要创建与示例类似的带有图标和文本块的细分内容，请将另一个行元素拖放到 到右栏中。

第三步： 将您喜欢的元素添加到列中，例如图标、文本块、标题、项目列表和按钮元素。

然后，您可以按照自己的方式自定义它们 个人设置 标签。

第三步： 切换到移动视图并调整布局以提高响应能力。

设计产品细节

对于详细的产品部分，您可以创建自定义布局来组织产品图像、描述和购买选项。

创建步骤：

第三步： 拖一个 三列行 给你的编辑。

第三步： 放置一个 图片 在左栏中。添加 标题, 文本块, 按钮等，在右栏中。

第三步： 替换占位符文本、上传图片，并按您的方式自定义添加的元素。此外，还可以添加指向您的行动号召 (CTA) 按钮的链接：

在轮播中设计推荐框

设计一个 轮播中的推荐框， 按着这些次序：

第三步： 拖动 轮播元素 到您的页面。

第三步： 在轮播中，添加 三列行。根据您的喜好调整列大小。然后将图像插入左列，将文本插入右列。

第三步： 调整每个元素的外观以适合您的风格。

第三步： 使用 复制/粘贴 复制幻灯片的功能，然后用新内容更新每个幻灯片。

如需更多设计技巧和有关创建优化布局的深入教程，请探索我们的 GemPages 学院.