比较图像元素

关于图像比较元素

此 图像比较 元素允许您通过在同一帧内对比前后图像来突出产品或服务的优势。此元素的操作方式与之前版本中的“前后图像”元素类似。

示例用例：

使用图像比较来突出您的产品的影响力并与客户建立信任：

• 产品演示：展示前后的改善效果（例如，护肤、清洁效果）。
• 生活方式视觉效果：比较实际使用情况与不使用情况。
• 设计展示：显示重新设计、升级或转换。

如何向您的页面添加图像比较元素？ 

图像比较是一个灵活的元素，可以按照以下步骤在页面的任何位置使用：

第三步： 访问 GemPages 仪表板  > 前往，然后点击目标页面来找到编辑器。

第三步： 在左侧边栏中搜索“比较”， 然后 将其拖放到所需的部分。

第三步： 单击元素以打开其“设置”面板并开始自定义。

配置设置选项卡

在下面 设置选项卡，您可以调整以下选项：

布局

选择两幅图像在比较框中的显示方式：

• 水平： 图像从左到右进行比较。

• 垂直： 图像从上到下进行比较。

图片

上传并调整您想要比较的图像。

第一张图片： 上传或选择第一张图片。

第二张图片： 然后，选择第二张图片进行比较。

规模：

• 填充图像： 拉伸图像以适应容器。长宽比可能会失真。
• 适合图像： 调整图像以适合容器，同时保持其纵横比。
  

滑块

决定访问者如何与比较滑块进行交互。

行为：

• 拖动移动： 访问者手动拖动滑块。

• 悬停移动： 滑块悬停时会自动移动。

默认比例： 设置初始分流比（以 % 为单位）。

徽章

启用 徽章 功能可以帮助访问者清楚地识别两张比较的图像。

然后，您可以按照自己的方式自定义文本徽章，包括：

第一和第二篇文本： 为第一张和第二张图片添加标签。例如，“旧” vs. “新” 或 “之前” vs. “之后”。

文字样式： 调整字体以匹配您的商店设计。您可以：

• 从可用的文本样式（标题、段落等）中选择。
• 选择字体系列。
• 更改字体大小。
• 应用粗体、斜体和下划线。
• 选择字体颜色。
• 控制行高和字母间距。
• 应用文本转换（大写、小写、大写）。

填充： 定义徽章内的间距以控制文本周围的空间量。

背景： 设置徽章的背景颜色以提高可见性（例如，白色文本采用深色背景）。

边界： 自定义边框的粗细、样式和颜色。

角： 决定徽章的边角是尖角、圆角还是药丸形。输入半径即可完全控制。

阴影： 使用阴影效果增加深度。调整阴影大小、模糊度、颜色和距离。

位置： 选择徽章出现的位置（例如，左上角、右上角、左下角、右下角）。

尺寸

调整元素的框架和宽度。

外框： 从下拉菜单中选择框架的纵横比（例如，16：9、4：3）。

宽度： 默认情况下，宽度设置为 100%（全屏）。如果您愿意，可以在框中输入具体数字来更改宽度。

形状

自定义比较框架的整体外观。

• 边境：您可以更改边框颜色、粗细和描边。
• 角落：部分角可以是方形、圆形或药丸形。此外，您还可以输入精确的半径来自定义元素的角。
• 阴影：您可以添加阴影并调整其显示（大小、颜色、模糊度和距离）。

优化 LCP

此设置有助于改善您页面的 最大含量的涂料（LCP） 分数，这是性能和 SEO 的关键核心网络生命力指标。

预载： 如果图像出现在折叠上方并且是页面上的主要视觉元素之一，请启用此选项。

• 如果预加载 = 是： 图像预加载以提高速度。
• 如果预载 = 否： 图像加载正常。

质量： 选择正确的图像压缩级别以平衡清晰度和加载速度：

• 最好的： 质量最高，文件较大。
• 高（默认）： 均衡的质量和性能。
• 适用介质： 加载速度更快，但图像较多的页面的质量略有下降。
• 自定义： 定义压缩设置以进行高级控制。

SEO

通过提供图片信息，帮助您提高页面排名。添加 替代文字 金益辉 图片标题 对于每个图像。

对齐

调整容器内元素的对齐方式：左对齐、居中对齐或右对齐。

注意： 如果宽度设置为 100% 或更大，则不支持对齐。

配置高级选项卡

如需更多高级定制，请导航至 高级选项卡 并按照中的说明进行操作 本文.

常见问题

1. 我可以在图像比较元素中添加两张以上的图像吗？

不可以。图像比较元素仅用于比较 一次两幅图像 （之前与之后）。如果您想显示更多比较，您可以在页面上复制该元素。

2. 图像比较元素在移动设备上有效吗？

是的。滑块完全响应式设计，可在桌面设备和移动设备上使用。访客可以在移动设备上用手指拖动滑块。

3. 我可以调整滑块手柄样式吗？

是的。您可以在 滑块 部分。

4. 如何确保图像看起来不被拉伸？

使用 适合图像 选项下 扩展 保留图像的原始纵横比。

5. 我可以添加“之前”和“之后”之类的文本标签吗？

是的。切换到 徽章 为每个图像添加可自定义标签的选项。