给大家介绍一款免费弹窗工具插件,主要的使用场景包括:营销活动、营销报告下载、优惠活动等,这些常见的使用场景都可以使用,其他的可以自己慢慢体验。当然,该工具的目的主要是将网站流量进一步做转化。
大家好,我是飞小优,今天给大家介绍一款免费弹窗工具插件,主要的使用场景包括:营销活动、营销报告下载、优惠活动等,这些常见的使用场景都可以使用,其他的可以自己慢慢体验。当然,该工具的目的主要是将网站流量进一步做转化。

如何安装
登录仪表盘-插件
搜索popup maker
,由于已经安装了,所以步骤略,装好之后就直接开启。

Popup maker界面构成介绍
打开插件入口,我先介绍几个比较重要的菜单。

All popups
所有弹窗,也就是后续新建之后的弹窗列表
Create popup
新建弹窗
Popup theme
弹窗主题,这是预设模式,里面包含8种,这也是需要核心介绍的。

以默认风为例介绍

Overlay 图层覆盖,2个操作组件,颜色配置
和透明度设置
,确定右侧背景图的颜色及整体透明度。

Container 容器,也就是弹窗布局大小,可以自定义配置,一般可以默认设置

Title 标题,可以选择字体及大小与阴影,可以默认配置

Content 内容 同样可以自定义配置,控制文字背景颜色及字重和大小,右侧部分是预览效果。

Close 最后一个是关闭设置,这里有一个重点是 支持iconfont,需要填写css类,当然这个已经集成了FontAwesome
因此可以使用图标文字,输入fas fa-camera
就会显示x
。
好了,基本的构成就是这样,接下来主要介绍如何应用到网页中。
Popup maker如何应用到网页
假设一个场景,现在新推出一个报告需要应用到首页,促进更多用户进行查看点击。
新建Popup弹窗
点击create popup,新建一个弹窗,按照demo填好信息


定义一个css类,方便后期调用,这会直接输出弹出效果,确定好后发布即可。
如何输出到页面中
例如,我想将这个新的活动在导航栏菜单中输出,则需要添加导航菜单,然后填写css类,如

最后前端就会出现你要的弹窗效果了
