Project Description

更新日期: 2017-10-26

编辑界面

Image Frame用于上传并设置图片格式、效果。

设置选项

General

  • Image,上传图片
  • Frame Style Type,可以设置图片外框的样式(Glow / Drop Shadow / Bottom Shadow)
  • Hover Type,设置图片的hover效果,鼠标移到图片上后的动态效果,个人比较喜欢Lift up的效果,选择了相应的Hover Type之后,下面还会出来一个Style Color的设置;
  • Border Size,设置图片外边框
  • Border Radius,设置图片圆角,数值越大,图片圆角程度越大
  • Align,对齐方式
  • Image lightbox,点击图片后弹出的高清大图
  • Image Alt Text,图片alt标签,准确描述图片,有利于SEO
  • Picture Link URL,点击图片后跳转的链接地址
  • Element Visibility,默认不修改,此选项和适配移动端有关系,可参考《设置移动端适配》
  • CSS Class / CSS ID,默认不需填写内容,需要针对此内容进行单独的样式调整时才考虑使用这2个选项;

Animation

图片的动态效果,提供7种可选:

  • Bounce
  • Fade
  • Flash
  • Rubberband
  • Shake
  • Slide
  • Zoom

每一种动态效果都提供了一些参数进行调整,比如动画的进入方向、持续时间等,一般情况下,避免使用过多的不同形式的动画。

效果示意

注意下下面的动图示意:

  • 动图中的示例是用image frame实现的效果;
  • 本身看到的这个动图我也是使用image frame这个元素插入到文章中的,设置了Drop Shadow、lift up效果、style color、图片边框圆角(5px)、还有动画效果选择了Zoom(缩放)。(备注:若未看到Zoom效果,在看到当前位置的时候,刷新页面,可以看到Zoom的效果)
image frame element demo

Avada版本

适用:Avada5.2.2