怎么样实现Avada主题Modal弹窗效果

Avada主题的Modal弹窗效果在用户体验上面有很好的效果,今天就来讲下怎么样实现Avada主题Modal弹窗效果

前言:Modal这个element必须跟Button或tagline box结合使用才可以,因为如果modal是一辆车的话,button就是车钥匙,车必须有钥匙才可以启动。另外,弹窗也叫Popup

第一种是点击button实现弹窗效果

1. 添加modal和button

在elements里面分别点击Button和modal这两个elements (shortcode),就可以将这两个elements加入到正文中

2. 设置button

button url 留空

Button's Text 填上文字

Modal window anchor  填上小写英文单词,如inquiry, 不要填contact form这种带空格的句子或短语


3. 设置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这种带空格的句子或短语,

3. 插入modal这个element,并填好name of modal并填入弹窗的内容,保存刷新即可实现文字或图片的弹窗效果

Name of modal   填上跟上面一模一样的小写字母单词

size of modal     选择弹窗的大小

content of modal 填的是你的弹窗内容,像表单,图片,视频等,只要把相应的内容放进去,保存即可

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容