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

预览

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

下面小编将这个代码展示出来,对于B2主题用户来说,使用非常简单。只需要在主题设置-首页模块-新增一个HTML模板,位置可以自由选择。

HTML代码

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

css代码

<code class="language-none">.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;}}
</code>

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

WordPress教程

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

2021-5-2 4:55:55

WordPress教程

WordPress 上传图片自动压缩教程

2021-5-6 0:24:50

无法充值请加客服QQ3635339338人工充值
24小时自助充值教程QQ3635339338人工充值
版权声明 本站所发布的一切与破解相关的文章仅限用于学习和研究目的,请在下载后的24个小时之内,从您的电脑中彻底删除。所有资源均来自于网络,不得用于商业或者非法用途,否则一切后果请用户自负。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索