[前端美化]为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" class="btn btn-light border btn-md">帮助中心</a>
          <a href="/shop" class="btn btn-light border btn-md">商城精选</a>
          <a href="/vips" 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,让其更好的展现在微码盒网站上。

群友原文新主题原版

人已赞赏
系统相关

[系统知识]一键ghost硬盘重装系统的详细操作方法

2020-8-25 11:39:31

前端学习

[前端学习]CSS 设置文字只显示一行,多余显示省略号

2020-7-8 11:46:00

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索