专注WordPress外贸建站实用教程,提供基于WordPress的外贸建站服务!
文章分类
文章标签

Elementor Popups询盘弹出框制作教程详解

文章导航

本文介绍Elementor Popups询盘弹出框制作过程。Elementor 提供Popups模板来制作网站的弹出框,弹出框通常用于营销用途,促成转化。本文将详细介绍实现询盘弹出框的制作过程。

理解弹出框Elementor Popups工作原理之后,你可以轻松制作各种类型的营销弹出框。

Elementor Popups是Elementor的高级功能,需要安装激活Elementor Pro才可以使用,本站提供Elementor Pro官方授权49元/年,如有需要可以联系获取。

在制作询盘弹出框之前你需要制作好询盘表单,我之前已经写过一篇文章《如何使用Elementor制作外贸询盘表单?》你可以惨参考制作自己的询盘表单。

1、创建一个Popup模板

通过网站后台的Templates菜单进入Popups

image - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

创建一个新的Popup

image 1 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

选择默认的模板类型Popup,输入模板名称,点击【Create Template】创建模板

image 2 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

创建之后你可以在弹出模板库中选择模板导入进行修改

image 3 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

也可以关闭模板库,自己手动创建

image 4 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP
image 5 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

2、设置Popup外观显示样式

点击Elementor左下角的设置图标,进入Popup设置

image 6 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

1)Popup布局设置

在Popup Setting设置中的Setting选项卡中的Layout中设置Popup的布局

image 7 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

2)Popup风格设置

在Popup Setting设置中的Style选项卡中设置Popup的风格。

image 8 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

背景覆盖设置,你可以修改背景覆盖的颜色和透明度,或者设置图片。

image 9 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

设置关闭按钮风格,设置按钮的位置,颜色、背景、大小等。

image 10 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

3、添加询盘表单及相关内容到Popup

你可以手动添加From元素到Popup中进行编辑修改

image 11 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

我习惯使用模板来调用我已经做好的询盘表单模板,我之前已经做好了一个【Inquiry From】的询盘表单模板。

你可以阅读了解《如何使用Elementor制作外贸询盘表单?》,里面又详细的询盘表单及模板制作过程/

image 12 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

这么做的目的就是为了方便维护询盘表单,每次需要修改询盘表单只需要修改这个模板里面的询盘表单即可。

向Popup中添加一个Template元素

image 13 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

在模板Template元素设置中选择已经做好的询盘模板模板

image 14 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

选择之后询盘表单会自动展示出来

image 15 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

接下来我们可以在Popup中添加一些其它内容,比如标题等。

我会添加一个标题,再添加一个回复信息的时间等内容。也不建议添加过多的内容干扰客户填写表单。

image 16 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

为了让Popup看上去更加美观,我会给popup中Section设置一下内距

image 17 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

在Section的Advance选项卡中设置padding为50像素,然后整体看上去就会舒服很多。

image 18 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

4、发布Popups询盘弹出框

设置完成之后点击【Publish】发布弹出框

image 19 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

点击之后弹出发布设置,如果你这个弹出框需要用户点击按钮才会显示,发布设置可以全部跳过,直接点击【SAVE & CLOSE】保存即可。

image 21 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

如果你向设置这弹出框自动弹出以及弹出条件,你需要了解一下这里面的设置是什么意思。

5、Popups发布设置详解(针对自动弹出扩展)

如果你想要设置弹出框自动弹出,比如当用户进入网站时就弹出,或者当用户进入某些页面时,浏览了3s之后弹出,就需要详细了解一下Popup的发布设置。

1)Conditions

设置Popup在哪些页面展示,可以对照我之前做的《Elementor Display Condition详解》来理解,是一样的内容。

2)Triggers

触发器设置,用户需要触发什么样的条件才能打开弹出框,有6个选项。

image 22 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP
image 23 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP
image 24 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP
image 25 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP
image 26 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP
image 27 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP
image 28 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

3)Advanced Rules

高级规则,和用户行为无关的触发条件设置,总共8条。

image 29 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP
image 30 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP
image 33 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP
image 32 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP
image 34 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP
image 35 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP
image 36 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP
image 37 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

你可以根据我截图举例来理解选项的意思,需要注意的是,如果你设置了某些条件下隐藏了Popup,那么满足隐藏条件之后的其它任何条件都不再有效,除非触发显示条件之后才会再次生效。

另外所有的触发器设置都是针对你当前在保存发布的Popup模板的,不会对其它Popup模板生效。

5、设置按钮点击弹出Popup

Popup模板制作完成之后,你可以在网站任何地方通过让用户点击按钮来弹出询盘弹出框。

我通常会在产品详情页面添加询盘按钮,并设置点击之后弹出询盘表单。

向页面中添加一个按钮元素

image 38 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

设置按钮的Link的动态标签,在动态标签中选择Popup

image 39 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

点击popup下拉,搜索选择做好的Inquiry Popup

image 40 - Elementor Popups询盘弹出框制作教程详解 - NUTSWP

设置完成之后更新保存。

保存之后进入产品页面点击按钮,查看询盘弹出框效果。

Popups询盘弹出框
文章分类
文章标签

最新文章

专注WordPress外贸建站实用教程,提供基于WordPress的外贸建站服务!
文章导航
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!