#B2主题美化#网站首页增加一个公众号与网站统计区块

预览

#B2主题美化#网站首页增加一个公众号与网站统计区块

下面小编将这个代码展示出来,对于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。

WordPress教程

#B2主题美化# 美化VIP用户和普通用户等级教程

2021-5-2 4:55:55

WordPress教程

WordPress 上传图片自动压缩教程

2021-5-6 0:24:50

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索