图像元素

关于图像元素

此 图片 GemPages 中的元素允许您在页面上显示单个图像，非常适合展示产品、横幅、品牌视觉效果、促销或信任徽章。

无论您是想强调产品亮点、展示品牌美感还是在各个部分之间创建视觉分隔，图像元素都可以让您完全控制图像在各个设备上的显示方式。

您可以轻松上传新图像、重复使用 Shopify 文件中的现有图像，并且无需编码即可自定义大小、位置、边框和动画。

如何向页面添加图像元素？

第三步： 登录到您的 Shopify 管理员 > GemPages 仪表板 > 前往.

第三步： 您可以在这里查看所有使用 GemPages 构建的页面。点击目标页面 打开编辑器。

如果您希望创建新页面，请点击 建立新页面 从头开始构建您的页面，或从预先设计的模板中进行选择。

第三步： 从左侧边栏输入 图片 在搜索栏中，然后将图像元素拖放到您喜欢的位置。

配置设置选项卡

图像元素提供灵活的 图像设置 因此您可以轻松控制尺寸、形状和响应能力。

样式

选择图像的视觉样式：

• 长方形： 默认矩形
• 圈： 自动将图像裁剪成完美的圆形

来源

上传或选择图片文件。您可以：

• 点击 上传图片，粘贴图片网址，或点击 浏览图库 从您的媒体中进行选择。
• 上传后，图片网址将显示在下方，以供参考或编辑

尺寸

控制图像在布局和响应方面的显示方式：

车架：选择预定义的纵横比或使用自定义纵横比：

• 广场
• 垂直
• 横
• 原版 （保持图像的原始尺寸）
• 定制化 （手动设置宽度和高度）

宽度/高度:

• 在设置 像素 （px）或 百分比 （％）
• 切换 锁图标 保持或打破宽高比

形状

使用视觉增强功能来设计图像容器，以更好地匹配您的设计：

边境：在图像周围添加边框。自定义：

• 颜色：选择任意十六进制颜色
• 厚度：设置像素值
• 描边样式：实线、虚线或点线

角落：通过调整边框半径使图片的角变圆。您可以：

• 对所有角应用相同的半径
• 解锁值以单独设置每个角的样式

阴影：添加阴影效果，以增加深度或与背景的分离。配置：

• 类型：外部、内部或居中
• 方向性：控制阴影角度
• 颜色
• 距离, 模糊和 尺寸

链接

通过切换为 ON 使图像可点击，然后选择点击图像后要添加的操作，包括：

SEO

提高图像可访问性和搜索引擎性能：

• 替代文字：描述图像（屏幕阅读器和搜索引擎使用）
• 图片标题：可选标题，可能显示为工具提示文本

优化 LCP

帮助优化加载以获得更好的性能分数：

品质：选择压缩级别：

• 最好的 （最高品质）
• 高 （默认，平衡）
• 中 （适用于性能要求高的页面）
• 定制化 （高级压缩设置）

预紧：如果图像位于首屏且有助于最大内容绘制 (LCP)，则启用

对齐

将图像在其容器内对齐：左、中或右。

配置高级选项卡

如需更多高级定制，请导航至 先进的 选项卡并按照 本文.

故障排除：页面上不显示图像

如果您上传的图片没有显示在编辑器或实时页面上，请尝试以下检查：

常见原因及解决方法

图片元素最佳实践

在图像上添加文字

如果您有兴趣在图片上创建带有文本叠加的横幅，我们为您准备了一个视频教程。观看下面的视频，获取分步指导。

让你的图片可点击

使图片可点击或可交互可以增强用户体验和参与度。

了解更多： 使文本或图像可点击

关于 Image Element 的常见问题解答

1. 如何阻止图像自动缩放？

如果您不想让图像缩放，请转到 尺寸 在“图像设置”部分中，将宽度和高度设置为像素 (px)，而不是百分比 (%)。这会将图像在所有设备上锁定为固定大小。

2. 在 GemPages 中哪里可以找到图片设置？

只需单击编辑器内的图像，然后 设置选项卡 将显示在左侧边栏中。在这里，您可以调整所有图片设置，包括大小、框架、边框、阴影和链接选项。

3. 我可以将图片设置为可点击吗？

是的。在“设置”选项卡中，向下滚动到 链接 并将其切换为“开启”。您可以将图片链接到页面、外部 URL、版块锚点、弹出窗口、电子邮件，甚至是电话号码。

4.如何为图片添加替代文本以促进 SEO？

在 SEO 在图片设置部分，输入描述性替代文本。这可以提高屏幕阅读器的可访问性，并帮助搜索引擎理解您的图片。

5. 为什么我的图片上传后看起来很模糊？

如果您的图像看起来模糊，请检查 品质 优化 LCP 下的设置。切换到 最好的 质量通常可以解决问题，但请确保您上传的源文件是高分辨率的。

6. 我可以直接在图片上叠加文字吗？

图像元素本身不支持直接文本叠加。为此，请使用 英雄旗帜元素，它允许您将文本、按钮或其他元素放置在图像之上。

7. 如何在 GemPages 中向您的页面添加图片？

要将图像添加到模板，请将 图像元素 添加到编辑器中的页面布局中。您可以上传新文件、从 Shopify 媒体库中选择一个文件，或粘贴图片 URL。这样您就可以直观地自定义任何产品、产品系列或落地页模板。

8. 发布页面后如何更新图片？

只需点击编辑器内的图像即可。在 来源 部分中，您可以上传新图片、将其替换为媒体库中的图片，或调整其设置。更新后，点击 已保存 以及 发布 在您的商店中实时应用更改。

9. 当我将点击后的操作设置为“打开页面”时，“跟随链接”是什么意思？

“跟踪链接：是/否”设置控制搜索引擎是否允许跟踪附加到您的图像的超链接。

• 是： 搜索引擎（例如 Google）可以通过此链接访问目标页面。如果链接指向您希望被搜索引擎收录的重要页面（例如产品页面或系列页面），请使用此方法。
• 没有： 添加一个 rel="nofollow" 给链接添加标签。这会告诉搜索引擎。 不会 跟踪链接或传递链接权限。

10. 如何使用图像元素链接 WhatsApp？

您可以将任何图像（例如 WhatsApp 图标）转换为聊天按钮。只需添加图像元素，上传您的 WhatsApp 徽标，然后启用该功能即可。 链接 选项。

请使用以下格式创建您的 WhatsApp 链接： https://wa.me/<your-number>。 例如： https://wa.me/15551234567.

当客户点击图片时，将打开一个与您的号码进行 WhatsApp 聊天。

11. 为什么我在 GemPages 中上传图片失败？