在部件中使用视差效果

在本文中,您将了解到如何创建具有视差效果的部分,以增强页面的视觉体验。

  • 首先,选择添加元素 > 布局 > 将全宽部件拖到页面。
  • 选择部分后,转到元素检视板 > 样式选项卡。

  • 背景部分>背景样式中,选择 视差 >图像来源中图像
  • 单击更多设置按钮,然后视差速度设置为标准。
  • 在图片的样式选项卡中调整内边距外边距

重要提示:在“全部”视图中为内外边距设置固定值后,它将应用于所有其他视图(平板电脑和移动设备),不再是响应式的了。 接下来的内容展示如何解决此问题。

点击保存,查看页面。

优化移动设备设计

  • 切换到移动设备视图
  • 选择部件 > 样式选项卡 > 间距 > 设置底部内边距为0px,以使该区域不会占用整个移动屏幕降低移动体验。

use the parallax effect pagefly

  • 点击 保存&发布,查看在页面上视差效果。

use the parallax effect

如果您想在一节中获得有关如何使用视差效果的视频教程,则可以查阅此视频。

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

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

I got it!
Languages