在本文中,您将了解到如何创建具有视差效果的部分,以增强页面的视觉体验。
- 首先,选择添加元素 > 布局 > 将全宽部件拖到页面。
- 选择部分后,转到元素检视板 > 样式选项卡。
- 在背景部分>背景样式中,选择 视差 >图像来源中图像
- 单击更多设置按钮,然后视差速度设置为标准。
- 在图片的样式选项卡中调整内边距和外边距。
重要提示:在“全部”视图中为内外边距设置固定值后,它将应用于所有其他视图(平板电脑和移动设备),不再是响应式的了。 接下来的内容展示如何解决此问题。
点击保存,查看页面。
优化移动设备设计
- 切换到移动设备视图
- 选择部件 > 样式选项卡 > 间距 > 设置底部内边距为0px,以使该区域不会占用整个移动屏幕降低移动体验。
- 点击 保存&发布,查看在页面上视差效果。
如果您想在一节中获得有关如何使用视差效果的视频教程,则可以查阅此视频。