这是一个会员开通引导模块样式，并且优化了一些地方，这里的按钮这里改成了跳转的形式，而不是直接调用子比的modal会员弹窗，搭配一下VIP页面即可了，话不多说喜欢的自行部署吧！文章源自奇客源码-https://www.qkget.cn/6021.html

文章源自奇客源码-https://www.qkget.cn/6021.html

代码部署

一共有两个部分，首先我们要引入我们的css，然后我们再放我们的小工具里面即可！
[wechat2 key=dmhdzh reply=卡密]
1.定位：WP后台–>>外观–>>小工具–>>自定义HTML，将下面的代码放里面即可！文章源自奇客源码-https://www.qkget.cn/6021.html

<style>
.tengfei-vip-box{position:relative;width:100%;height:130px;background:#e0f2fe;margin:0 auto;border-radius:10px;overflow:hidden;box-sizing:border-box}.tengfei-vip-box::after{position:absolute;top:0;left:0;transform:translate(-50%,-50%);content:"";width:100px;height:100px;border-radius:50%;background:#0284c7;z-index:1;opacity:0.15}.tengfei-vip-box::before{position:absolute;bottom:0;right:0;transform:translate(50%,50%);content:"";width:180px;height:180px;border-radius:50%;background:#0284c7;z-index:1;opacity:0.15}.tengfei-vip-box > .tengfei-vip-left-icon > i{position:absolute;font-size:100px;z-index:1;color:#0284c7;top:50%;transform:translateY(-50%);left:50px}.tengfei-vip-box > .tengfei-vip-left-text{position:absolute;left:180px;height:100%}.tengfei-vip-box > .tengfei-vip-left-text h2{color:#0284c7;font-size:23px;margin-top:30px;font-weight:400}.tengfei-vip-box > .tengfei-vip-left-text ul{margin:0;padding:0;margin-top:12px}.tengfei-vip-box > .tengfei-vip-left-text ul li{display:inline-block;list-style:none;padding:0 5px;color:#0284c7;transform:translateX(-7px)}.tengfei-vip-box > .tengfei-vip-left-text ul li i{margin-right:8px}.tengfei-vip-box > .tengfei-vip-right-btn{position:absolute;height:35px;width:130px;line-height:33px;text-align:center;text-decoration:none;font-style:normal;background-color:#0284c7;color:#fff;right:100px;top:50%;transform:translateY(-50%);border-radius:30px}.tengfei-vip-box > .tengfei-vip-right-btn span{font-size:18px;text-align:center}.tengfei-vip-box > .tengfei-vip-right-btn i{font-size:20px;margin-left:3px}.tengfei-vip-box > .tengfei-vip-icons li{list-style:none;color:#0284c7;opacity:0.3;position:absolute}.tengfei-vip-box > .tengfei-vip-icons li:nth-child(1){top:10%;left:45%;font-size:24px;transform:rotate(-20deg)}.tengfei-vip-box > .tengfei-vip-icons li:nth-child(2){top:60%;left:55%;font-size:24px;transform:rotate(10deg)}.tengfei-vip-box > .tengfei-vip-icons li:nth-child(3){top:30%;left:70%;font-size:20px;transform:rotate(35deg)}@media screen and (max-width:768px){.tengfei-vip-box{height:180px;padding:0}.tengfei-vip-box > .tengfei-vip-left-icon > i{top:-3px;transform:translateX(-50%);left:50%;font-size:50px}.tengfei-vip-box > .tengfei-vip-left-text{top:30px;transform:translateX(-50%);left:50%;width:100%;text-align:center}.tengfei-vip-box > .tengfei-vip-left-text h2{font-size:20px;text-align:center}.tengfei-vip-box > .tengfei-vip-left-text ul{margin-top:5px}.tengfei-vip-box > .tengfei-vip-left-text li{font-size:13px;text-align:center}.tengfei-vip-box > .tengfei-vip-right-btn{top:130px;right:50%;transform:translateX(50%)}.tengfei-vip-box > .tengfei-vip-right-btn{top:130px;height:28px;line-height:26px;width:100px;text-align:center}.tengfei-vip-box > .tengfei-vip-right-btn i{font-size:15px;margin-left:0px}.tengfei-vip-box > .tengfei-vip-right-btn span{font-size:15px}}

    </style>
<div class="tengfei-vip-box">
    <div class="tengfei-vip-left-icon">
        <i class="iconfont icon-f-vip">
        </i>
    </div>
    <div class="tengfei-vip-left-text">
        <h2>
            开通会员，享更多权益
        </h2>
        <ul>
            <li>
                <i class="iconfont icon-Gc_115_face-Star">
                </i>
                专享内容
            </li>
            <li>
                <i class="iconfont icon-lightningbshandian">
                </i>
                优先支持
            </li>
            <li>
                <i class="iconfont icon-gouwuche1">
                </i>
                会员折扣
            </li>
        </ul>
    </div>
    <a class="tengfei-vip-right-btn" href="/vips">
        <span>
            开通会员
        </span>
        <i class="iconfont icon-jiantou_youshang">
        </i>
    </a>
    <ul class="tengfei-vip-icons">
        <li>
            <i class="iconfont icon-VIP">
            </i>
        </li>
        <li>
            <i class="iconfont icon-f-vip">
            </i>
        </li>
        <li>
            <i class="iconfont icon-rocket">
            </i>
        </li>
    </ul>
</div>

2.定位：子比主题–>>自定义代码–>>自定义底部HTML代码，将下面的代码丢里面即可，这个是引入图标文章源自奇客源码-https://www.qkget.cn/6021.html

<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/c/font_4999726_z99pbxx21p9.css">

备份文章源自奇客源码-https://www.qkget.cn/6021.html

@font-face {
  font-family: "iconfont"; /* Project id 4999726 */
  src: url('//at.alicdn.com/t/c/font_4999726_z99pbxx21p9.woff2?t=1755608102723') format('woff2'),
       url('//at.alicdn.com/t/c/font_4999726_z99pbxx21p9.woff?t=1755608102723') format('woff'),
       url('//at.alicdn.com/t/c/font_4999726_z99pbxx21p9.ttf?t=1755608102723') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-lightningbshandian:before {
  content: "\e6b9";
}

.icon-rocket:before {
  content: "\e7d9";
}

.icon-gouwuche1:before {
  content: "\e600";
}

.icon-jiantou_youshang:before {
  content: "\eb0b";
}

.icon-VIP:before {
  content: "\e601";
}

.icon-f-vip:before {
  content: "\e76b";
}

.icon-Gc_115_face-Star:before {
  content: "\e617";
}

.icon-time:before {
  content: "\e6ce";
}

.icon-eye:before {
  content: "\e636";
}

.icon-shuaxin:before {
  content: "\e624";
}

.icon-hot-for-atmosphere:before {
  content: "\e83d";
}

[/wechat2]文章源自奇客源码-https://www.qkget.cn/6021.html