Avada主题的Modal弹窗效果在用户体验上面有很好的效果,今天就来讲下怎么样实现Avada主题Modal弹窗效果
前言:Modal这个element必须跟Button或tagline box结合使用才可以,因为如果modal是一辆车的话,button就是车钥匙,车必须有钥匙才可以启动。另外,弹窗也叫Popup
第一种是点击button实现弹窗效果
1. 在Avada的页面中添加并设置button
你可以在avada网站中page,post或portfolio这几种页面后台,点击+element,然后点击Button
button url 留空
Button’s Text 填上文字
Modal window anchor 填上小写英文单词,如inquiry, 不要填contact form这种带空格的句子或短语
填好之后保存。
2. 添加Modal并设置
还是在页面中点击+element,然后搜索modal,就可以快速找到modal这个功能,再点击Modal
然后设置
Name of modal 填上跟上面button的Modal window anchor一模一样的小写字母单词
size of modal 选择弹窗的大小
content of modal 填的是你的弹窗内容,像表单代码,图片,视频等,只要把相应的内容放进去,保存即可
其他的框都可以留空
询盘表单弹窗效果如下:
视频的弹窗效果如下:
第二种是点击文字或图片实现弹窗效果
1.在element里面选择modal text link这一个,并插入到页面中
2.在name of modal中输入inquiry,不要填contact form这种带空格的句子或短语,并在text or html code中输入文字,如果想做成图片弹窗就输入图片的html代码<img src=”#” /> ,并在#处填上图片的链接
3. 插入modal这个element,并填好name of modal并填入弹窗的内容,保存刷新即可实现文字或图片的弹窗效果
Name of modal 填上跟上面一模一样的小写字母单词
size of modal 选择弹窗的大小
content of modal 填的是你的弹窗内容,像表单,图片,视频等,只要把相应的内容放进去,保存即可