图片组件(文档)

标题设计组件-是我们编辑站点的时候，最常用到的组件之一，它的使用功能非常简单，调整下字体大小，和颜色，文本对齐方式即可完成编辑。

点击查看”示例和视频操作” >>

1，如何插入设计组件

只需从左侧的组件控制面板【基础组件】中，选中组件后点击鼠标左键拽住并拖放到编辑面板处即可，如下图所示

了易于理解及操作，下面的操作我们只说明常用的内容和样式设置，因为并不是每一个选项都是我们设计的时候需要用到的。

2，内容选项卡

内容选项卡设置如下图，您可以看到有多个设置选项来控制图片组件的显示属性。

2.1，图片 – 模块，如下图, 点击选项卡后进入设置界面

（1）请选择图片：选择你要加载的图片

（2）源图大小：尺寸类型分为“小图 150×150”，“中图 300×300”，“中大图 765×765”，“大图 1024×1024”，“原图”。当您上传图片时，你的图片会裁剪生成4张小图，以应对不同的场景更快的加载图片。选择说明：当图片宽度大于源图尺寸时会导致图片像素模糊，但源图尺寸过大会影响加载速度，您需要根据您实际要加载的图片宽度选择尺寸。如png图片要使用透明度，请使用原图。

（3）对齐：图片对齐方向：靠左，靠右，居中

（4）宽度：设置宽度后图片会等比例缩放图片，如果宽度过大会导致图片模糊，这时候您应该选择清晰度更高的“源图大小”设置如 2.1(2）.

（5）ALT标题：当鼠标滑动到图片上方时候，给出的提示语，也可以告知搜索引擎图片的含义，通常情况下我们保留空值。

下面我们将用一个新的章节来讲解下图片剪裁

2.2, 裁剪图片，这是个很让人感到惊讶的一个功能，你能快速的裁剪出你想要的图片宽度，或高度。

（1）裁剪图片：当开启裁剪图片后，设置选项会由（图1）过渡（图2），选项卡多出了，“高度”，“平铺图片”，“图片焦点”等选项。当“平铺图片”被启用后图片焦点由（图3）过渡到（图4）。

（2）高度：如果图片宽度不赋值，仅设置高度。图片会等比例缩放根据图片高度显示；如果已设置图片宽度，此时图片将根据您设定的宽x高对图片进行裁剪。

默认情况下你可以设置图片的焦点来调节你想要展示图片的中心位置。

（3）图片焦点：用来聚焦裁剪后图片的中心位置，请参考下图

下图是裁剪图片的效果

2.3， 点击跳转 – 模块，此处可以给图片设置“单个链接” 或 “多个链接”。

（1）跳转类型：默认情况下是“无连接”状态，您可以设置“单个URL链接” ， “多个URL链接”，“弹出图片”，参考下图。

（2）跳转链接：当选择单链接的时候，如下图所示，选择要跳转的页面即可。

2.4，多链接跳转，应用场景在有时候，一个复杂的界面排版用网站现有功能我们难于去完成排版的时候，我们通常会选择导入一张较大的图片来代替网站页面去完成UI的设计工作。降低前端的设计难度。想像一下，双十一购物节是不是又很多淘宝店铺上面，挂满了满目琳琅的产品。产品的位置可能不是固定的而是随意在图片海报中显示的。为了让图片上的产品，地点，人物，活动中心，能链接到我们想要的页面。这个时候我们就要使用到“一图多链接”的功能啦

（1）排序方向: 多链接功能的设置其实很简单，就是用链接网格将所在位置的图片铺满，并给对应的序号位置设置上链接地址，通常你可以根据海报的排版来选择链接网格的布局类型，如下图可以选择“横向分布网格”也可以选择 “纵向分布网格”。总之只要网格把我们想要链接的地方覆盖到。我们就算完工啦。

（2）多链接内容：每添加一个或多个项目，你需要手动点击下方“点击同步数据”按钮，对应的右边编辑栏处才会显示新创建的项目栏，接着设置“区域的宽度”和“区域高度”使它可以覆盖到链接的位置

设置“区域的宽度”和“区域高度”使它可以覆盖到链接的位置,直到覆盖满我们需要链接的位置。

当然也不是每一块区域都需要设置链接的如下图，

(1) 区域1，8，11 链接都为空。不做跳转处理在网格中国它们所为“占位区域”存在。

(2) 区域 2，3，4，5，6，9，10 ,链接到指定的页面，

您可以看到在网格设置中，我们并不需要将整张铺满图片，当然如果你有严重的强迫症，也可以再添加一个新区域去覆盖剩余的部分。

3，样式选项卡

3.1，图片-样式设置模块在此处完成图片样式基本设置，可以看到有两个选项卡 “标准”与”鼠标悬停” ，默认情况下我们只编辑“标准”状态下的图片样式设置即可。

（1）透明度：图片透明度

（2）样式滤镜：给图片增加滤镜效果，非专业UI设计用户可以忽略此选项

（3）边框类型：给图片添加边框，可设置边框颜色粗细。

（4）边框圆角：给图片设置圆角，利用图边框圆角您可以把你的图片圆角设计成任意角度的扁平化的形状。通常图1正方形是最长用到的。图2，设置成圆形的条件是图片形状需要时正方形（你可以用裁剪功能将图片等宽高），然后将边框圆角设置成100%。至于图3，图4 ，你就自由发挥吧，30%，10%，80%，90%。的来调试。总有一个效果适合你。