WordPress区块主题–悬浮客服工具的设置

WordPress区块主题教程

更自由个个性化的定制,悬浮客服工具现在使用菜单制作

相比之前的悬浮客服工具是固定内容,固定数量的缺点,现在悬浮侧边我们采用了菜单的设计,这样不仅可以自己决定悬浮侧栏的数量,也可以任意自己设置客服的内容,完全不受制于任何限制了。

悬浮客服菜单支持2个层级,这样就可以让多个QQ、电话、旺旺之类的选项弹出,而且完全不受数量和内容的限制,

并且所有的弹出内容均可以独立设置图标

弹出的内容也可以设置图片。

 

客服菜单的制作

菜单中新建菜单,或者选择导入数据已经创建好了的菜单,菜单结构如下:

WordPress区块主题–悬浮客服工具的设置

 

第一层级的制作,第一层级是指上图右侧悬浮客服菜单的6个按钮

WordPress区块主题–悬浮客服工具的设置

 

依次解释内容:

URL: 如果你的一级图标不是直接点击跳转链接,那么一般这里设置#为空连接即可,如果需要跳转连接,也可以放入菜单其他的内容,如:页面、分类、文章等。

导航标签: 图标的名称,一般来说,名称要简洁,英文的话尽量可使用缩写,中文不要超过4个字

title属性:  这里是设置图标的颜色色值,填写色值代码即可。

新表标签打开窗口: 这个是跳转链接有效的

css类: 放图图标css名称即可显示图标

连接关系: 如果你放入了站外连接跳转,或者是本站不希望被搜索引擎抓取的内容,这里可填写nofollow

内容描述: 这里可以上传图片,但是第一层级不要上传哦,这是给第二层级上传二维码和头部客服图片所使用的

 

第二层级的制作

第二层级主要包含几种内容

1.QQ客服类,包含阿里旺旺、WhatsApp等。

2.纯图片内容,包括微信二维码、头部装饰客服图片等

3.纯文字内容,包括提示客服在线时间等内容

4.回到顶部(URL填写: #top   即可点击回到顶部)

示例:

WordPress区块主题–悬浮客服工具的设置

 

客户服务

是一张纯图片,是qq客服上面的一个装饰图片,这里不需要超链接可以填写# ,也可以填入链接到客服中心页面或者联系我们之类的页面内容

QQ客服

这是包含了qq图标和点击对话的内容,因此URL填写的是QQ提供的链接:http://wpa.qq.com/msgrd?v=3&uin=你的qq号码&site=qq&menu=yes

css类 填写了qq图标的类名称 title属性没有填写,所以qq的图标是默认的蓝色

 

其余的内容参考此方式即可制作完成。

 

悬浮客服输出到前端界面以及pc页面的高度差隐藏悬浮设置

悬浮客服可选pc和移动端独立输出,可以两者公用,也可以分别设置。

输出在外观–自定义中可以找到这两个选项:

WordPress区块主题–悬浮客服工具的设置

 

PC端悬浮客服可以设置滚动到一定高度再展开,回到顶部缩起的设定

这个设定是因为如果悬浮客服一直是显示的话,一些区块,比如幻灯片区块的左右滑动按钮就会被挡住,这样我们就有了如下的设置:

WordPress区块主题–悬浮客服工具的设置

 

底部提示区域的 图标、提示文字和颜色都可以进行设置,当然如果你也可以关闭这个选项,让悬浮客服选项一直出现不隐藏。

上一篇:

下一篇:

文章评论

您好!请登录

取消回复
    展开更多