[前端美化]为B2主题首页增加一个公众号与网站统计区块！

小编今天无聊逛了逛B2主题的售后群，发现一枚大佬，这位大佬专门分享各种Wordpress主题以及好看的前端样式。

今天这篇文章就是基于这位大佬创作的，微码盒小编只是在原基础上稍微改动了一些。

预览

下面小编将这个代码展示出来，对于B2主题用户来说，使用非常简单。

只需要在主题设置-首页模块-新增一个HTML模板，位置可以自由选择。

HTML代码

<div class="join-us-area default-padding bg-dark hide_sm">
  <div class="container">
    <div class="row">
      <div class="col-md-6 subscription-content">
        <h2>扫码关注我们的官方微信公众号-微码盒笔记</h2>
        <p>有重大更新以及优惠活动的时候，才会推送公众号消息</p>
        <img src="/diystyle/index_ad.png">
      </div>
      <div class="col-md-6 community-info">
        <div class="fun-fact-items">
          <div class="fun-fact">
            <div class="timer icon-inc" data-to="0" data-speed="200">200</div>
            <span class="medium">公众号关注用户</span>
          </div>
          <div class="fun-fact">
            <div class="timer icon-inc" data-to="7683" data-speed="5000">260</div>
            <span class="medium">网站注册用户</span>
          </div>
          <div class="fun-fact">
            <div class="timer icon-inc" data-to="50000" data-speed="5000">1000</div>
            <span class="medium">网站下载量</span>
          </div>
        </div>
          <a href="/document" rel="external nofollow"  class="btn btn-light border btn-md">帮助中心</a>
          <a href="/shop" rel="external nofollow"  class="btn btn-light border btn-md">商城精选</a>
          <a href="/vips" rel="external nofollow"  class="btn btn-light border btn-md">会员权益</a>
        </div>
    </div>
  </div>
</div>

css代码

.bg-dark {background: #0061a8 none repeat scroll 0 0;}
.default-padding {padding-top: 60px;padding-bottom: 60px;position: relative;}
.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
@media (min-width:768px){.container{width:750px}}
@media (min-width:992px){.container{width:970px}}
@media (min-width:1200px){.container{width:1170px}}
.row {margin-right: -15px;margin-left: -15px;}
.join-us-area .subscription-content {top: -25px;}
.join-us-area .subscription-content h2 {font-weight: 600;color: #ffffff;line-height: 1.2;font-family: 'Poppins', sans-serif;font-size: 25px;margin-bottom: 15px;}
.join-us-area .subscription-content p {color: #ffffff;margin: 0 0 15px;text-transform: none;font-weight: 400;font-size: 12px;}
.join-us-area .subscription-content img {width: 70%;margin-left: 80px;}
.join-us-area .community-info {padding-left: 35px;}
.join-us-area .community-info .fun-fact-items {display: flex;align-items: center;border-bottom: 1px solid rgba(255, 255, 255, 0.3);padding-bottom: 30px;}
.join-us-area .community-info .fun-fact-items .fun-fact {padding-right: 80px;}
.join-us-area .community-info .fun-fact-items .fun-fact:last-child {padding-right: 0;}
.join-us-area .community-info .fun-fact-items .fun-fact .icon-inc {position: relative;display: inline-block;}
.join-us-area .community-info .fun-fact-items .fun-fact .timer {font-family: cursive;font-size: 50px;font-weight: 800;margin-bottom: 15px;line-height: 0.9;color: #ffffff;}
.join-us-area .community-info .fun-fact-items .fun-fact .icon-inc::after {position: absolute;content: "+";font-family: "Font Awesome 5 Free";font-weight: 600;right: -25px;top: 15px;font-size: 20px;}
.join-us-area .community-info .fun-fact-items .fun-fact .medium {font-family: 'Poppins', sans-serif;font-size: 16px;color: #ffffff;display: block;}
.join-us-area .community-info a {margin-top: 40px;}
.btn {display: inline-block;font-family: "Poppins",sans-serif;font-size: 14px;font-weight: 600;line-height: 25px;border-radius: 5px;}
.btn-md {padding: 10px 40px 10px;font-weight: bold;}
.btn.btn-light.border {background: transparent;border: 2px solid #ffffff;color: #ffffff;margin-right: 40px;}
.btn.btn-light.border:hover {background: #ffffff none repeat scroll 0 0 !important;border: 2px solid #ffffff !important;color: #232323 !important;}
@media (min-width: 992px) {.col-md-6 {width: 50%;float: left;}}

需要注意的是，这个区块不是自适应的，无法兼容移动端，所以小编增加了在移动端隐藏此区块的css。

大家也可以去大佬的网站看看原版，这个区块其实是新主题官网的一个展示区块，群友copy了下来，然后小编只是在原基础上处理了一些多余的css，让其更好的展现在微码盒网站上。

[sgbtn_see href='https://www.npc.ink/16619.html']群友原文[/sgbtn_see][sgbtn_see href='https://www.xintheme.com/']新主题原版[/sgbtn_see]