图片

更新时间:
复制 MD 格式

本文为设计器内图片控件的使用指南。图片中包括单张图片控件、多图轮播(纯图)控件、多图轮播(可加内容)控件、多图列表控件、logo图片控件、二维码控件。

各图片控件区别

  • 单张图片:仅添加一张图片。

  • 多图轮播(纯图):以轮播形式,展示多张图片。当您在此控件上放置一个按钮,实际上是将一个控件放置在另一个控件上层,不论您切换到哪一张图都会显示上面有个按钮。

  • 多图轮播(可加内容):以轮播形式,展示多张图片。每一页内容可单独编辑,比如您在第一页中放置一个按钮,实际上是将按钮放进了容器内,第二页不会自动显示这个按钮。

  • 多图列表:多图轮播与多图列表主要为图片展示形式上的区别。多图轮播(纯图)一页展示一图,而多图列表一页展示多图。

  • logo图片:单张图片的一种。您可使用此控件上传网站logo。

  • 二维码控件:可生成文本、链接、电话的二维码图片。

流程2.1

添加图片控件

单击资源区的内容 > 图片,根据需要选择图片种类及样式,在设计区中单击,即可添加成功。

设置图片控件

在选中该图片控件后,默认展开编辑的面板,单击按钮切换菜单,快速设置图片的样式、编辑、动效、排列。 图片链接支持5种链接类型:页面文章分类链接锚点,并可设置链接的打开方式

  • 样式:可设置图片的填充方式、边框样式及阴影样式。

  • 编辑:可更换图片、美化图片、设置图片标题、设置图片链接。

    说明

    设置图片标题作用:当鼠标停在该图片时,显示此标题名称。 设置图片链接作用:当鼠标单击该图片时,可跳转到此链接地址。

  • 动效:可设置图片的动画效果。

  • 排列:可根据需要调整尺寸和位置。

切换图片样式

单击顶部导航栏中的样式页签,左侧弹出样式切换面板。在常规图片区域可选择方形裁剪或圆形裁剪样式,在动效图片区域可选择悬停放大或悬停抖动效果。右侧面板可设置填充方式(等比缩放、裁剪填充、拉伸填充)和滤镜调节(无、通用色调、商务办公等)。也可单击右上角切换样式按钮打开样式切换面板。

图片遮罩功能

  • 作用:图片遮罩功能可实现遮挡部分图片区域,仅显示特定区域的图像内容。

  • 使用说明:支持图片样式一(矩形图片控件)使用图片遮罩功能。

  • 使用步骤:

    1. 单击下图所示遮罩icon,可进入遮罩编辑模式。截屏2025-05-22 15

    2. 编辑遮罩时:

      • 在编辑区域单击,将图片做为编辑对象。在编辑区域内部拖拽,可移动图片位置;当选中编辑图片tab时,拖拽图片的边框可放大/缩小图片,比例关系继承自外层控件的填充方式;

      • 在编辑区域双击,将遮罩做为编辑对象。当选中编辑遮罩tab时,点击右上角的拖动标识,可拖动遮罩位置;拖拽遮罩的边框可自由调整图片遮罩显示区域。

    3. 结束编辑遮罩:单击编辑区域以外任意区域或“完成”按钮即可退出编辑模式,完成遮罩编辑。

图片编辑

  • 作用:可裁剪、翻转、旋转、涂鸦笔、图标、文字、调整图片。

  • 使用说明:支持编辑图片的控件有图片控件、Logo控件、多图轮播控件、多图轮播(可加内容)控件、多图列表控件、导航容器控件。

    • 选中图片控件或Logo控件后,单击顶部工具栏的编辑标签,或在右侧属性面板中单击编辑图片按钮,即可进入图片编辑功能。图片编辑器底部工具栏提供裁剪翻转旋转画笔形状文字调节魔法棒共 8 个编辑工具,右上角有下载保存按钮。

    • 多图轮播控件、多图轮播(可加内容)控件、多图列表控件、导航容器控件可在更换图片时编辑图片。在我的图片弹窗中,将鼠标悬停在目标图片缩略图上,单击缩略图顶部出现的编辑按钮即可进入图片编辑。

一键删除功能

选中图片控件时,单击像废纸篓一样的图标按钮,可删除此控件。

说明

如需观看相关操作视频请单击图片控件的使用

各类图片的建议尺寸表

图片类型

建议尺寸

icon

32*32px

列表中的图片

400*400px

详情页中的图片

宽度1000px,高度通过固定宽高比生成

电脑端全屏背景图

1920*1080px

电脑端banner

宽度1920px,高度通过固定宽高比生成

手机端全屏背景图

宽高比为9:16

手机端banner

宽度640px或以上