更新日期: 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