图片元素

图片是将想法传达给网站的观众的最有用的视觉工具之一。在本文中,您将了解如何使用图片元素以及与网站页面上有关图片的一些常见问题。

关于图片元素

图片元素允许您将图片添加到页面中以提高转化率。您可以使用此元素为页面制作横幅图,为页面上正在谈论的内容添加其他视觉证明或仅用来装饰页面。

pagefly image element 1

在最新更新中,图片元素只有一个设计选项,但您可使用“常规”和“样式”选项更精细化地自定义此元素。

将变体拖动到布局中,然后查看如何设置。

图片元素配置

图片元素带有许多设置参数,您可调整这些参数来微调内容和外观以达到最佳转化率。

在布局中选中元素,以查看其参数。

pagefly image element 2

“常规”和“样式”选项中的参数为此元素的特定参数。

常规选项参数

常规选项参数
1. 内容上传图片的3种途径:
  • 本地电脑
  • 互联网(网络链接)
  • 图片管理器

您可 在此点击阅读更多有关如何使用图片管理器上传图片。

2. 操作除了5个点击操作和其他元素一样 (点击 此处阅读更多)之外,图片元素还有一个开灯的特殊点击操作,可让用户显示完整尺寸的屏幕图片。

3. 追踪在此处设置:
  • 在主账号添加谷歌分析活动(Google Analytics event)。 您可 在此了解如何设置。. 
  • 当客户点击此元素时添加脸书像素(Facebook Pixe)。 您可 在此了解更多。. 

PageFly活动: 您可在此添加追踪ID(Tracking ID)来衡量分析功能的转化率。 您可在此了解更多。

4. 属性 你可以在这里阅读更多。
5. 能见度 你可以在这里阅读更多。
6. 动画效果 你可以在这里阅读更多。

重要提示 1: 所有设备只需使用一张图片

从PageFly 2.8.0版本开始,只能在不同设备上使用一个图片。要更改图像,您需要转到“所有设备”,然后在内容参数中重新选择所需的图片。

pagefly image element 2

如是在使用2.8.0之前的PageFly版本创建的页面中使用旧的图片元素,则您仍可根据需要更改其他设备的图片。

您只需要切换到每个设备视图,然后在“常规”选项卡的“内容”参数中重新选择图片。

重要提示 2: 使用 ‘隐藏’ 功能来在不同的设备上显示图片

如您需不同的设备显示不同的图片,请按照以下步骤操作:

  • 在“所有设备”视图中,添加要在其他设备上显示的图片。
  • 选择每个图片,在“常规”选项卡找到到“可见性”参数。
  • 要将选中图片显示在特定设备上,只需设置在其他设备上隐藏该图片即可。
  • 单击保存和发布按钮,您将在每台设备上看到不同的图片。

参看下的示范案例:

这是在笔记本电脑设备上的外观:


这就是在手机(移动设备)上的外观:

样式选项参数

样式选项参数
您可在样式预设里选择图片样式,共有4种变体
1. 整体您可以在此处了解所有这些参数。
2. 边距您可以在此处了解所有这些参数。
3. 排版印刷您可以在此处了解所有这些参数。
4. 背景您可以在此处了解所有这些参数。
5. 边框您可以在此处了解所有这些参数。
6. 显示您可以在此处了解所有这些参数。
7. 自定义CSS您可以在此处了解所有这些参数。

图片常见问题

图片在手机(移动设备)上不是全屏显示

在许多情况下,当您在页面上添加图像并在电脑上看到全屏图像时,在手机上查看时,图像变小而不是全屏/全角。

此问题是因为移动设备上的图片“所有设备”上的左侧填充或右侧填充,并且未设置“全宽-100%”选项。

要解决此问题,您需切换到移动设备来检查图像的填充,并在“样式”选项中将当前填充替换为0px,或在“常规”选项中将其设置为“全宽-100%”选项,如下图所示:

记住要发布并转到实时视图查看效果:

如果您尝试以上方法,但图片仍无法全屏显示,请立即通过“实时聊天”窗口与我们联系,以便我们立即为您提供帮助。

有些图片在Safari浏览器中不能显示

在许多情况下,页面上的图片不会在Safari浏览器上显示,但可在Chrome浏览器上显示。

最常见的原因之一是您使用的图片格式是webp格式。Safari不支持此格式。

例如下图:

但是,如果您在Chrome浏览器上查看,则会显示该图片:

如果您要在Safari上显示图像,这时则需要将图像转换为JPG或PNG格式。 下图,图片已转换为JPG,并且可以在Safari上运行:

我们强烈建议您使用Chrome浏览器以获得最佳体验。 您可以查看本文以了解PageFly与最新版本的 Google Chrome浏览器配合使用效果最佳。

如需在Safari上显示图像,请确保不使用webp格式。 如您已将图片转换为JPG,但问题仍然存在,请立即通过“实时聊天”窗口与我们联系,以便我们帮助您解决问题。

如果想在图像上覆盖文字

如果您想让文字覆盖图片,请使用文字覆盖图片的元素(预制模块):

在 此处阅读了解更多详细信息。

Navigate this category

PreviousPrevious article

Do you want to get more sales from the same amount of traffic?

PageFly can help you. We are the best page builder app to give you the freedom to customize your page, build trust and gain more sales.

Explore PageFly
PageFly Languagues

PageFly Help Center is now available in French, Portuguese and Chinese. Please check the flags on the page header.

I got it!