Project Description

更新日期: 2017-10-30

只用Button做Call to Action觉得太过苍白无力? 试试Tagline Box,一个可以带上两句“广告语”和一个Button的组合样式。

tabs element设置界面

编辑界面

tabs element设置界面

设置选项

General

  • Background Color,设置这个box的背景颜色
  • Shadow,可设置下边框是否有阴影,选择Yes,才会出现Shadow Opacity的设置选项
    • Shadow Opacity,设置阴影的不透明度,0.1~1可选,数值越大,与不透明;数值越小,越透明;
  • Border Size,设置边框粗细,可设置的范围为 0~20,设置>0时,会出现Border Color的设置选项
    • Border Color,设置边框颜色
  • Highlight Border Position,高亮边框的位置,可设置上、下、左、右或者关闭高亮边框
  • Content Alignment,内容的对齐方式,可设置靠左对齐、居中对齐、靠右对齐
  • Button Link,设置Button的链接,这边填入内容之后,才会显示下面7项关于Button的设置选项
    • Button Text,按钮上的文字
    • Link Target,设置链接是在当前窗口or新窗口打开
    • Modal Window Anchor,在Button Link中填入 # ,并新添加一个Modal Element,然后在这个选项填入Name of Modal的值。关于弹出窗口,可参考《如何制作弹出弹出表单窗口》一文。
    • Button Size / Type / Shape / Color,设置Button的大小、类型、形状、颜色,关于Button的相关设置,可参考 《如何设置Button》
  • Tagline Title,设置标题
  • Tagline Description,设置描述
  • Additional Content,设置附加描述内容
  • Margin,设置内容距离边框的距离大小
  • Element Visibility,默认不修改,此选项和适配移动端有关系,可参考《设置移动端适配》
  • CSS Class / CSS ID,默认不需填写内容,需要针对此内容进行单独的样式调整时才考虑使用这2个选项

Animation

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

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

每一种动态效果都提供了一些参数进行调整,比如动画的进入方向、持续时间等。

效果示意

可以试试看,如下的效果这些设置选项分别应该怎么设置,点Button有弹出窗口。

说买就买

Title: 明天就涨价

Description: 限时原价,再不买就涨价了,吓得赶紧买买买
说买就买

Avada版本

适用:Avada5.2.2