灯箱 - 添加图片

每一个灯箱盒子内,需要添加两张图片:缩略图与高清图。

我们会将缩略图添加到灯箱内的「Image 图片」盒子中,而高清图将会在「Settings 设置」面板中进行添加。

由于WebFlow会将我们上传的图片自动生成合适的大小,因此一个灯箱我们只需要准备一张高清图即可。

添加缩略图

双击图片盒子,弹出设置,点击「Choose Image 选择图片」按钮,从你的「Assets 素材库」中选择一张图片。如果素材库为空,或者没有合适的图片,可以点击「Upload 上传」按钮,上传一张你电脑上的图片。

缩略图添加完毕。

接下来给另外两个灯箱组件添加缩略图,方法一模一样。

这时候,会发现一个问题,图片的高度不同。这是由于图片的比例没有统一导致的。因此建议上传图片的时候,优先在图片处理软件中将你的图片比例统一。这个步骤超出本节想要讨论的范畴,我们略过这一步,继续演示灯箱高清图的添加。

这时候如果你点击预览,观看效果,会发现点击灯箱盒子,不会弹出全屏的高清图。

添加高清图后,这个功能就会出现。

添加高清图

选中第一张缩略图,切换到「Settings 设置」面板,找到「Lightbox Settings 灯箱设置」。这里可以选择添加「图片」或者是「视频」。

我们点击「图片」。

在弹出的设置中,选择「Choose Image 选择图片」按钮。在「Assets 素材库」中,选择同一张图片。

每个灯箱可以添加多张高清图。重复同样的步骤,再次点击「Lightbox Settings 灯箱设置」下的「图片」,选择一张新图片,点击保存。这时候会看到新加入了一张图片。

同样,给另外两个灯箱组件添加高清图。

点击预览,观看效果。

现在,点击灯箱,可以看到全屏模式的高清图。在高清图的左下角,可以看到我们添加的图片文字。

results matching ""

    No results matching ""