会员是每个网站重要的组成部分，很多网站都会想尽一切办法让网友开通会员，会员也是增加网站收入的一个重要的内容，今天分享一个在首页增加一个会员开通引导模块，喜欢的自己下载折腾，本次教程分享的是B2主题美化

20240223155733760-27c4deee8ec3c68be78eef33d52ab61d0b740155053772ca49510b5bf673030f.0

使用教程

第一步

在你的首页模块header.php合适位置添加，或者b2主题设置模块管理，首页模块中添加自定义模块，加如下代码

<div id="jkindex_vip" class="j-modules-inner jktjvip">
<section class="litheme-section litheme-modules modules-pricing-table" id="modules-48">
<ul class="pricing-table pt-style-2 cols-3">

<li class="pt-item pt-item-1 active">
<div class="vip_tj" style="background:;"></div> 
<div class="pt-header">
<h3 class="pt-title">体验会员</h3>
<span class="pt-desc"></span>
<div class="pt-price-wrap">
<span class="pt-sign">￥</span>
<span class="pt-price">6.6</span>
<span class="pt-unit">欢迎加入</span>
</div>
</div>
<div class="pt-content">
<p style="text-align: center;">特权服务</p>
<ul>
<li>设计尊贵会员标识</li>
<li>获得(5次/天)下载网站资源</li>
<li>设计无推广返利</li>
<li>设计商店无折扣</li>
</ul>
</div>
<div class="pt-box">
<a class="btn btn-lg pt-btn" href="/vips" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >立即赞助</a>
<div class="b2tooltip" id="b2tooltip">一款带有复古气息的免贵可商用中文黑体</div>
</div>
</li>
<li class="pt-item pt-item-1 active">
<div class="vip_tj" style="background:#00c18e;"> 花 醉 推 荐</div> 
<div class="pt-header">
<h3 class="pt-title">青铜会员</h3>
<span class="pt-desc"></span>
<div class="pt-price-wrap">
<span class="pt-sign">￥</span>
<span class="pt-price">39</span>
<span class="pt-unit">欢迎加入</span>
</div>
</div>
<div class="pt-content">
<p style="text-align: center;">特权服务</p>
<ul>
<li>设计尊贵会员标识</li>
<li>获得(10次/天)下载网站资源</li>
<li>设计推广返利使者</li>
<li>可享受设计商店95折扣</li>
</ul>
</div>
<div class="pt-box">
<a class="btn btn-lg pt-btn" href="/vips" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >立即赞助</a>
<div class="b2tooltip" id="b2tooltip">一款带有复古气息的免贵可商用中文黑体</div>
</div>
</li>
<li class="pt-item pt-item-1 active">
<div class="vip_tj" style="background:;"></div> 
<div class="pt-header">
<h3 class="pt-title">黄金会员</h3>
<span class="pt-desc"></span>
<div class="pt-price-wrap">
<span class="pt-sign">￥</span>
<span class="pt-price">99</span>
<span class="pt-unit">欢迎加入</span>
</div>
</div>
<div class="pt-content">
<p style="text-align: center;">特权服务</p>
<ul>
<li>设计尊贵会员标识</li>
<li>获得(20次/天)下载网站资源</li>
<li>设计推广返利使者</li>
<li>可享受设计商店95折扣</li>
</ul>
</div>
<div class="pt-box">
<a class="btn btn-lg pt-btn" href="/vips" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >立即赞助</a>
<div class="b2tooltip" id="b2tooltip">一款带有复古气息的免贵可商用中文黑体</div>
</div>
</li>
<li class="pt-item pt-item-1 active">
<div class="vip_tj" style="background:;"></div> 
<div class="pt-header">
<h3 class="pt-title">设计会员</h3>
<span class="pt-desc"></span>
<div class="pt-price-wrap">
<span class="pt-sign">￥</span>
<span class="pt-price">299</span>
<span class="pt-unit">欢迎加入</span>
</div>
</div>
<div class="pt-content">
<p style="text-align: center;">特权服务</p>
<ul>
<li>设计尊贵会员标识</li>
<li>获得无限下载网站资源</li>
<li>设计推广返利使者</li>
<li>可享受设计商店8折扣</li>
</ul>
</div>
<div class="pt-box">
<a class="btn btn-lg pt-btn" href="/vips" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >立即赞助</a>
</div>
</li>
</ul>
</section>
</div>

第二步

在自定义css中添加以下样式

<div id="jkindex_vip" class="j-modules-inner jktjvip">
<section class="litheme-section litheme-modules modules-pricing-table" id="modules-48">
<ul class="pricing-table pt-style-2 cols-3">

<li class="pt-item pt-item-1 active">
<div class="vip_tj" style="background:;"></div> 
<div class="pt-header">
<h3 class="pt-title">体验会员</h3>
<span class="pt-desc"></span>
<div class="pt-price-wrap">
<span class="pt-sign">￥</span>
<span class="pt-price">6.6</span>
<span class="pt-unit">欢迎加入</span>
</div>
</div>
<div class="pt-content">
<p style="text-align: center;">特权服务</p>
<ul>
<li>设计尊贵会员标识</li>
<li>获得(5次/天)下载网站资源</li>
<li>设计无推广返利</li>
<li>设计商店无折扣</li>
</ul>
</div>
<div class="pt-box">
<a class="btn btn-lg pt-btn" href="/vips" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >立即赞助</a>
<div class="b2tooltip" id="b2tooltip">一款带有复古气息的免贵可商用中文黑体</div>
</div>
</li>
<li class="pt-item pt-item-1 active">
<div class="vip_tj" style="background:#00c18e;"> 花 醉 推 荐</div> 
<div class="pt-header">
<h3 class="pt-title">青铜会员</h3>
<span class="pt-desc"></span>
<div class="pt-price-wrap">
<span class="pt-sign">￥</span>
<span class="pt-price">39</span>
<span class="pt-unit">欢迎加入</span>
</div>
</div>
<div class="pt-content">
<p style="text-align: center;">特权服务</p>
<ul>
<li>设计尊贵会员标识</li>
<li>获得(10次/天)下载网站资源</li>
<li>设计推广返利使者</li>
<li>可享受设计商店95折扣</li>
</ul>
</div>
<div class="pt-box">
<a class="btn btn-lg pt-btn" href="/vips" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >立即赞助</a>
<div class="b2tooltip" id="b2tooltip">一款带有复古气息的免贵可商用中文黑体</div>
</div>
</li>
<li class="pt-item pt-item-1 active">
<div class="vip_tj" style="background:;"></div> 
<div class="pt-header">
<h3 class="pt-title">黄金会员</h3>
<span class="pt-desc"></span>
<div class="pt-price-wrap">
<span class="pt-sign">￥</span>
<span class="pt-price">99</span>
<span class="pt-unit">欢迎加入</span>
</div>
</div>
<div class="pt-content">
<p style="text-align: center;">特权服务</p>
<ul>
<li>设计尊贵会员标识</li>
<li>获得(20次/天)下载网站资源</li>
<li>设计推广返利使者</li>
<li>可享受设计商店95折扣</li>
</ul>
</div>
<div class="pt-box">
<a class="btn btn-lg pt-btn" href="/vips" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >立即赞助</a>
<div class="b2tooltip" id="b2tooltip">一款带有复古气息的免贵可商用中文黑体</div>
</div>
</li>
<li class="pt-item pt-item-1 active">
<div class="vip_tj" style="background:;"></div> 
<div class="pt-header">
<h3 class="pt-title">设计会员</h3>
<span class="pt-desc"></span>
<div class="pt-price-wrap">
<span class="pt-sign">￥</span>
<span class="pt-price">299</span>
<span class="pt-unit">欢迎加入</span>
</div>
</div>
<div class="pt-content">
<p style="text-align: center;">特权服务</p>
<ul>
<li>设计尊贵会员标识</li>
<li>获得无限下载网站资源</li>
<li>设计推广返利使者</li>
<li>可享受设计商店8折扣</li>
</ul>
</div>
<div class="pt-box">
<a class="btn btn-lg pt-btn" href="/vips" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >立即赞助</a>
</div>
</li>
</ul>
</section>
</div>

最后强制刷新浏览器以查看效果，部分样式自行调整

文章版权归作者所有，未经允许请勿转载。

THE END