WordPress建站教程:制作按扭弹窗表单,无需Woocommerce

科技2周前发布 iowen
6 0 0
Wordpress建站教程:制作按扭弹窗表单,无需Woocommerce

继续分享wordpress建站教程。大多数情况下我们需要的只是b2b 产品展示型网站,我接到的大多数wordpress外贸建站项目都是这种,网站的核心功能产品询盘其实就是一个表单。而很多B2B产品展示型网站教程都是针对woocommerce来讲的,很多询盘插件也是专门配合woocommerce用的。如果你的主机或服务器配置不错,那么使用woocommerce确实很不错,也建议如此,因为这样网站后期还可以比较方便的扩展为在线商城;如果你的主机或服务器配置较差,那么使用woocommerce的体验可能就不是太好了,可能会出现比较明显的卡顿。接下来悦然wordpress建站就给大家分享如何不用woocommerce就可以实现的产品询盘表单功能。

步骤二:安装表单插件

大家可以安装wpforms、Contact Form 7或其它表单插件,都可以。这里我们就以wpforms表单为例吧,安装免费版本就可以,安装之后创建一个表单。

Wordpress建站教程:制作按扭弹窗表单,无需Woocommerce

wpforms表单创建成功之后我们需要复制它对应的短代码,后面要用到。

步骤二:安装弹窗插件

想要现实弹窗询盘表单的效果,我们接下来得安装一个弹窗插件,或者是使用带弹窗功能的主题。

使用插件

弹窗插件

https://www.zsxxfx.com/31878.html

悦然wordpress建站之前已经给大家分享过3个简单实用的wordpress弹窗插件,大家安装任意一个都可以实现类似的效果。这里我就以Popup Maker这个插件为例。

Wordpress建站教程:制作按扭弹窗表单,无需Woocommerce

Popup Maker可以直接在wordpress建站后台下载安装,基础功能免费。安装之后我们添加一个弹窗,设置一个标题,然后把前面复制的短代码添加进来,也可以直接点【添加表单】,然后选择我们刚才创建的就可以了。

Wordpress建站教程:制作按扭弹窗表单,无需Woocommerce

接下来我们设置弹窗的触发条件。点【Triggers】,点【Add New Triggers】添加一个条件 选【Click Open】。

Wordpress建站教程:制作按扭弹窗表单,无需Woocommerce

然后我们点开这个触发条件,上面提供了多种设置方式,我们就用最简单的添加链接即可。如上图所示,复制上面的【popmake-702】,接下来我们只需要给询盘按扭添加这个ID链接就可以了。

带弹窗功能的主题

如果你使用的是付费版本的Astra、Blocksy等主题,那么也可以直接使用主题附带的内容定制功能,里面就包含了弹窗的制作。这里悦然wordpress建站就以Blocksy pro为例,方法如下:

Wordpress建站教程:制作按扭弹窗表单,无需Woocommerce

如上图所示,选第2个,添加一个弹窗内容模板。

Wordpress建站教程:制作按扭弹窗表单,无需Woocommerce

然后会打开古腾堡编辑器,这里可以使用古腾堡区块制作更漂亮的样式,也可以直接插入表单。如上图所示,设置好后设置触发条件为【None】,显示条件为整站。

Wordpress建站教程:制作按扭弹窗表单,无需Woocommerce

然后在Content Blocks内容列表中可以看到内容的ID。如上图所示,我们把【#ct-popup-833】复制来来。

步骤三:添加按扭链接

在需要的页面添加一个按扭,然后添加链接,链接填写我们之前复制的弹窗ID即可。

Wordpress建站教程:制作按扭弹窗表单,无需Woocommerce
Popup Maker弹窗链接


Wordpress建站教程:制作按扭弹窗表单,无需Woocommerce
BLCOKSY 弹窗链接

如上图所示,弹窗链接添加好后更发布更新页面即可。

Wordpress建站教程:制作按扭弹窗表单,无需Woocommerce

最终效果如上图所示。

总结

通过上面的分享,大家在做B2B产品展示型wordpress外贸建站时可以多一种选择。如果你的主机或服务器配置足够,那么悦然wordpress建站还是建议使用woocommerce来做,因为这样可扩展性更高;如果你的主机和服务器配置较低,那么使用今天分享的方法更好。

推荐阅读


Siteground如何使用PAYPAL支付?

Wordpress建站教程:制作按扭弹窗表单,无需Woocommerce

悦然插件分享:产品图库展示插件,无需Woocommerce

Wordpress建站教程:制作按扭弹窗表单,无需Woocommerce

WordPress建站教程:同一个区块怎么调整局部字体大小?


如果觉得我分享的内容对您有所帮助

😘请帮忙分享点赞在看 谢谢啦😘

© 版权声明

相关文章

暂无评论

暂无评论...