WordPress Avada主题实现 Contact Form 7弹窗功能?

建站教程 心晴客栈 244次浏览 0个评论 扫描二维码

今天简单介绍下,使用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
这个元素藏在了这儿……很多同学因为搞不清楚它是何方妖孽,就一直没怎么调戏过,今天我们我调戏的就是它啦……

Wordpress Avada主题实现 Contact Form 7弹窗功能?

这个就是modal popup的元素,弹窗的内容要通过个这元素来设置……
点击添加Modal元素就可以了,位置没有很大的局限性,因为这个东西加了,在前台是看不出来的……只要和button在一页上就可以调用到……

Wordpress Avada主题实现 Contact Form 7弹窗功能?

第三步:设置modal

设置modal最为重要的就是Name of Modal,这个按设置说明的要求来说,其名字是唯一的(当前设置页内)……
我们命名为contact-us……
这里注意命名的方式哦,contactus或者contact-us是可以接受的命名方式,但contact us就不行……

Wordpress Avada主题实现 Contact Form 7弹窗功能?

Modal Heading是指弹窗出现后的标题,如果你的内容已经有设计或者不需要标题,这里就不用搭理他了……
Size of Modal的设置,如果这些用的是表单的话,推荐选择Large……
Footer貌似没啥用,就是在弹窗的最下面有个关闭按钮,因为弹窗的右上角已经有了如下图的关闭叉叉,用户点击弹窗已外的区域也是能直接取消弹窗的,所以这个功能可以不用管它,我直接选no了……

Wordpress Avada主题实现 Contact Form 7弹窗功能?

下面就是contents of modal了……这个部分就是插入你的弹窗内容的地方……
编辑这部分的内容和平时大家编辑post的方式是一样儿一样儿的……当时,因为这里木有了Avada的page builder功能,单用shortcodes进行编辑对我和很多同学还是有难度的,所以我一般都是在一个空白页编辑好了内容发布并且查看前台OK的情况下,切换到代码模式,把代码复制过来……
记得代码一定要在这个模式下复制和粘贴哦,不然都会有问题的……

Wordpress Avada主题实现 Contact Form 7弹窗功能?

由于我使用的是wufoo的表单,所以这个地方直接在text模式下插入wufoo的嵌入代码就可以了……如图:

Wordpress Avada主题实现 Contact Form 7弹窗功能?

第四步:设置button调用的modal
回到button的设置项,做最关键的一步,就是把要点击的button和带内容的弹窗关联起来……
在button的设置项里找到modal window anchor……填写上刚才在modal设置项里填写的modal的名字:contact-us……

Wordpress Avada主题实现 Contact Form 7弹窗功能?

当前,如果你对这个步骤够熟悉的话,在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弹窗就可以了……

支持博主

心晴客栈 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明WordPress Avada主题实现 Contact Form 7弹窗功能?
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址