WordPress添加小工具-简约客服中心

释放双眼,带上耳机,听听看~!
WordPress小工具是一个表示工具或内容的华丽词藻,您可以在网站或博客的边栏中添加、排列或删除这些工具或内容。使用小工具,您可以轻松自定义设置边栏的内容。
WordPress添加小工具-简约客服中心插图

以下代码复制到WordPress后台-外观-小工具-选择自定义html代码小工具-填入代码即可

<style>
.yxyh-widget-kefu{padding: 10px 15px;position: relative;overflow: hidden;}
.yxyh-widget-kefu .kefua{height: 40px;line-height: 40px;border-bottom: 1px solid #e5e5e5;overflow: hidden;font-size: 16px;font-weight: 100;}
.yxyh-widget-kefu .kefua span a{color: #999; font-size: 20px; font-weight: bold; display: block; height: 40px; line-height: 25px;}
.yxyh-widget-kefu .kefub{height: 60px;padding: 5px 0;color: #cecece;}
.yxyh-widget-kefu .kefub>i{font-size: 50px;transform: scaleX(-1);color: #cecece;}
.yxyh-widget-kefu .kefub>div{display: block;width: 210px;float: right;}
.yxyh-widget-kefu .kefuba{font-size: 24px;height: 30px;line-height: 30px;overflow: hidden;width: 100%;float: left;}
.yxyh-widget-kefu .kefubb{height: 20px;line-height: 20px;font-size: 12px;float: left;padding: 0 5px;}
.yxyh-widget-kefu .kefuc{overflow: hidden;}
.yxyh-widget-kefu .kefuc li{cursor: pointer;width: calc(50% - 10px);float: left;border: 1px solid #e5e5e5;font-size: 14px;height: 30px;line-height: 30px;margin: 5px 15px 5px 0;overflow: hidden;}
.yxyh-widget-kefu .kefuc li a{display: block; color: #999;}
.yxyh-widget-kefu .kefuc li:hover a{color: #ff8b3d;}
.yxyh-widget-kefu .kefuc li:nth-child(2n){margin: 5px 0;}
.yxyh-widget-kefu .kefuc li i{font-size: 16px;padding: 0 5px 0 10px;}
.yxyh-widget-kefu .kefua span{position: relative;float: right;}
</style>
<div class="yxyh-widget-kefu">
<div class="kefua">客服中心<span><a href="#" target="_blank">…</a></span></div>
<div class="kefub">
    <i class="fa fa-whatsapp"></i>
    <div>
    <span class="kefuba">QQ-841566509</span>
    <span class="kefubb">周一至周五20:00-24:00</span>
    </div>
</div>
<div class="kefuc">
    <li><a href="#" target="_blank"><i class="fa fa-qq" style="font-size: 14px;"></i>在线客服</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-weibo"></i>客服微博</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-commenting-o"></i>产品咨询</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-comments-o"></i>售后中心</a></li>
</div>
</div>

人已赞赏
网站建设

B2主题模块添加提示信息框或公告信息

2020-11-1 1:34:36

网站建设

WordPress B2主题页脚美化

2020-11-10 1:09:10

⚠️
二进制笔记上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 service@2binarys.com 或点击右侧 私信:0xCaner 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索