如何将按钮放置在图像上？

为什么要将按钮放在图像上？

在图片上放置按钮，有助于创建清晰的行动号召 (CTA)，而不会打断设计流程。它能让页面更具吸引力，并引导访客立即进行下一步操作。

常见用例包括：

• 拥有一个 “立即购买” 产品或系列横幅上的按钮。
• 关注 季节性促销或折扣.
• 直接链接到 特定的登陆页面或重点部分.
• 创建 更清晰的布局 而不是将图像和按钮分开。

提示： 选择与背景图像形成对比的按钮颜色，以确保其脱颖而出，尤其是在移动设备上。

要在 GemPages 中实现这一点，您可以按照下面解释的两种简单方法进行操作。

如何在 GemPages 中将按钮放在图像上？

方法 1：使用英雄横幅元素

通常，您可以使用英雄横幅元素上传该图片。然后，英雄横幅允许在其上添加其他元素，包括按钮。请按以下步骤操作：

第三步： 去 GemPages 构建器 应用> 前往。然后，单击您想要在图像上放置按钮的页面以打开编辑器。

第三步： 在左侧边栏中，搜索“英雄旗帜”。将首选布局拖放到页面上的任意位置。

第三步： 删除文本元素并仅保留按钮元素。

第三步： 点击 英雄旗帜 元素以显示其设置。向下滚动到 背景 部分，然后选择 图片 领域。

第三步： 上传您的图像或从库中选择一张图片作为背景图像。

第三步： 调整 背景图片 根据你喜欢的。

第三步： 点击 按键 元素以打开其设置。在这里，您可以按照自己的方式自定义按钮，例如：

• 改变颜色、形状和大小。
• 添加图标或悬停效果。
• 将按钮链接到新页面或页面上的目标部分。

请参阅 本文 更多说明。

第三步： 保存更改并点击 发布.

方法 2：使用按钮位置的相对选项

为了确保按钮在页面设计中正确放置在图像上，您可以设置 按钮位置 至 相对的。

按着这些次序：

• 单击按钮元素打开其设置并导航至 先进的 标签。
• 向下滚动到 职务 部分。
• 点击 亲属 下拉菜单中的选项。

通过以下方式了解有关所有配置的更多信息 本文.