心晴 WordPress Avada主题实现 Contact Form 7弹窗功能？
今天简单介绍下，使用Avada主题怎么制作弹窗功能……
这个功能的实现是用到了Avada的一个shortcodes——Modal popup，查看Demo站的展示页请点传送门：Modal Popup展示页。
这个功能实现的效果就是，如果你点击设置好这个功能的button，不会被跳转到别的页上去，会有个弹窗跳出来……
弹窗里的内容可以是图片，可以是文字，可以是混排的各种元素的内容，也可以是一串代码……就看你想折腾啥了……
OK，话不多说，以制作一个contact us的CTA弹窗为例，动手……
第一步：添加button
这个不用多说，在你想让button出现的问题设置一个button，做好你的设计，这个随意……
Button URL的选项不要写（因为弹窗是不会跳转到某一页去滴……）
Button’s Text的就写成Contact Us……（CTA的文字怎么设计会对转化率更有帮助，就看大家自己的测试分析结果了……）
第二步：添加Modal
这个元素藏在了这儿……很多同学因为搞不清楚它是何方妖孽，就一直没怎么调戏过，今天我们我调戏的就是它啦……
这个就是modal popup的元素，弹窗的内容要通过个这元素来设置……
点击添加Modal元素就可以了，位置没有很大的局限性，因为这个东西加了，在前台是看不出来的……只要和button在一页上就可以调用到……
第三步：设置modal
设置modal最为重要的就是Name of Modal，这个按设置说明的要求来说，其名字是唯一的（当前设置页内）……
我们命名为contact-us……
这里注意命名的方式哦，contactus或者contact-us是可以接受的命名方式，但contact us就不行……
Modal Heading是指弹窗出现后的标题，如果你的内容已经有设计或者不需要标题，这里就不用搭理他了……
Size of Modal的设置，如果这些用的是表单的话，推荐选择Large……
Footer貌似没啥用，就是在弹窗的最下面有个关闭按钮，因为弹窗的右上角已经有了如下图的关闭叉叉，用户点击弹窗已外的区域也是能直接取消弹窗的，所以这个功能可以不用管它，我直接选no了……
下面就是contents of modal了……这个部分就是插入你的弹窗内容的地方……
编辑这部分的内容和平时大家编辑post的方式是一样儿一样儿的……当时，因为这里木有了Avada的page builder功能，单用shortcodes进行编辑对我和很多同学还是有难度的，所以我一般都是在一个空白页编辑好了内容发布并且查看前台OK的情况下，切换到代码模式，把代码复制过来……
记得代码一定要在这个模式下复制和粘贴哦，不然都会有问题的……
由于我使用的是wufoo的表单，所以这个地方直接在text模式下插入wufoo的嵌入代码就可以了……如图：
第四步：设置button调用的modal
回到button的设置项，做最关键的一步，就是把要点击的button和带内容的弹窗关联起来……
在button的设置项里找到modal window anchor……填写上刚才在modal设置项里填写的modal的名字：contact-us……
当前，如果你对这个步骤够熟悉的话，在button的设置中就可以把modal的名字填写好了，就不用跳回来再设置了……
这样一系列设置目的就是告诉button不跳转的某页，而且调用modal弹窗的内容，并且在modal弹窗内添加上需要显示的内容……
NOTE：
1. 现在modal不需要必须和调用它的button放在相同的内容编辑区里了，所以放在footer里有个cta神马的，也能调用，这样footer如果是全站有的话，调用就方便多了……
2. Avada弹窗默认有两个size，一大一小，但不一定与你的内容合适，调整Avada弹窗大小的方法，欢迎去点赞……
如果你的首页像RamboTech一样，有N个contact us的CTA，你也都想把它们设置成弹窗表单填写，那么在设置好这些button的同时，只需要设置一个名为contact-us的modal弹窗就可以了……
心晴客栈 » WordPress Avada主题实现 Contact Form 7弹窗功能？
