将文本置于图像上

在 GemPages v7 中，您可以使用 英雄旗帜 元素或 行 元件。

方法 1：使用 Hero Banner 元素

Hero Banner 元素旨在创建有影响力的 Hero 横幅或链接到收藏页面的收藏横幅以及其他用例。

默认情况下，它提供预设，允许您设置背景并在背景图像上编辑文本。这使其成为需要将文本放置在图像上的情况的理想解决方案。

步骤 1：进入 GemPages 编辑器

从 GemPages 仪表板导航至 前往，然后点击目标页面打开 编辑.

在左侧边栏中，找到 英雄旗帜 元素下的 相关媒体 部分，然后将其拖放到页面上的任何位置。

第 2 步：上传并修改图片

• 点击元素打开 个人设置 面板。向下滚动到 背景 部分并点击 图片 领域。

• 在下面 来源，将鼠标悬停在示例图像上，然后点击 上传图片 上传图片。如果您已将图片上传到 Shopify 的文件，请选择 浏览图书馆.

• 根据您的喜好修改图像设置。请参阅 本文 有关在英雄横幅中配置图像背景的更多详细信息。

为了提高可读性，您可以应用覆盖：

• 在背景部分中，单击 显示更多，并找到 顶层罩面 选项。
• 选择深色（例如黑色或深灰色）。
• 调整不透明度滑块，直到文本在背景中清晰地突出。

这会在图像上创建一个微妙的暗层，使文本更易于阅读，同时保持背景的视觉吸引力。

步骤 3：自定义文本块

点击文本块元素以显示其配置。然后，直接从设置面板自定义文本的字体、大小和颜色，以确保其在图像中脱颖而出。

有关英雄横幅设置的完整指南，请查看 本文.

方法 2：使用 Row 元素

第四步：在编辑器中，拖放 行 元素从左侧边栏添加到您的页面。

要深入了解行元素，请查看 本文.

第四步：在设置面板中，向下滚动到 背景 部分，然后单击 图片 领域。

第三步： 将图片设置为整行的背景。您可以从 Shopify 文件 (浏览图书馆），或 上传 一个新的。

然后，调整 由于平均内核尺寸较大，西米棕榈的加工比类似作物简单。然而，西米棕榈的相对稀缺性降低了潜在的加工规模。 以及 位置，选择图片的 重复类型 以及 gehechtheid，并启用/禁用 预紧 功能来优化 LCP。

第四步：拖放 文本块 此行内的元素可使文本显示在图像上。

第三步： 根据您的喜好修改文本。

英雄旗帜与行

两种选择都能有效地满足你的需求，但使用英雄横幅元素通常更快捷、更简单。同时，使用 行 元素为某些特定用例提供了更大的灵活性。

最佳实践

• 保持对比度： 始终确保文本颜色与背景图像形成强烈对比。
• 使用覆盖： 在明亮的图像上应用深色覆盖以提高文本的可读性。
• 移动测试： 在较小的屏幕上预览您的设计以确认文本仍然清晰。
• 保持文本简洁： 限制图像上的文本量以提高可读性。