b2、柒比贰7b2主题首页四格模块美化版_wordpress

这个模块是从RiPro主题美化包中获取的,经过修改已经适配b2主题b2主题布局模块化,所以加入下方首页四格模块美化版十分简单,只需要在主题设置—模块管理—首页模块里面添加一个广告模块即可。其它wordpress主题同样可以使用,知识修改方法不一样,下面就会介绍b2主题及其他主题如何使用该四格模块。

首页四格模块预览图

b2柒比贰7b2主题开始教程

我们已经在后台设置添加了一个广告模块,接下来将下面的代码替换原来广告模块里面的默认代码。

<div class="section">
<div class="home-first">
<div class="container hide_sm">
<div class="col-1-4">
<div class="hf-widget hf-widget-1 hf-widget-software">
<h3 class="hf-widget-title">
<i class="fa fa-cloud"></i>
<a href="#" target="_blank">云产品</a>
<span>云服务器等云产品推荐</span>
</h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li>
<a href="#" rel="external nofollow" target="_blank">
<i class="thumb " style="background-image:url(https://www.cmboke.cn/imgs/b2/01.png)"></i>
<span>阿里云</span></a>
</li>
<li>
<a href="#" target="_blank">
<i class="thumb " style="background-image:url(https://www.cmboke.cn/imgs/b2/02.png)"></i>
<span>腾讯云</span></a>
</li>
<li>
<a href="#" target="_blank">
<i class="thumb " style="background-image:url(https://www.cmboke.cn/imgs/b2/03.png)"></i>
<span>企业云</span></a>
</li>
<li>
<a href="#" target="_blank">
<i class="thumb " style="background-image:url(https://www.cmboke.cn/imgs/b2/04.png)"></i>
<span>香港云</span></a>
</li>
</div>
</div>
</div>
</div>
<div class="col-1-4 sxweb">
<div class="hf-widget hf-widget-2">
<h3 class="hf-widget-title">
<i class="fa fa-tint"></i>
<a href="#" target="_blank">看热门</a>
<span>主题模板库精品推荐</span></h3>
<div class="hf-widget-content">
<div class="no-scroll hf-tags">
<a class="style_orange" href="#" target="_blank">
<span>RiPro美化</span></a>
<a class="" href="#" target="_blank">
<span>wordpress教程</span></a>
<a class="" href="#" target="_blank">
<span>源码</span></a>
<a class="" href="#" target="_blank">
<span>样机</span></a>
<a class="" href="#" target="_blank">
<span>配色神器</span></a>
<a class="" href="#" target="_blank">
<span>本站服务</span></a>
<a class="" href="#" target="_blank">
<span>服务器特惠</span></a>
</div>
</div>
</div>
</div>
<div class="col-1-4 sxweb">
<div class="hf-widget hf-widget-1 hf-widget-hot-cats">
<h3 class="hf-widget-title">
<i class="fa fa-dropbox"></i>
<a href="#" target="_blank">热门专区</a>
<span>推荐设计热点</span></h3>
<div class="hf-widget-content">
<div class="icon-b">
<ul>
<li>
<a href="#" target="_blank">
<i class="fa fa-bookmark"></i>
<span>设计软件</span></a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-paint-brush"></i>
<span>素材专题</span></a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-graduation-cap"></i>
<span>设计教程</span></a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-pencil-square-o"></i>
<span>设计自检</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-1-4 sxweb">
<div class="hf-widget hf-widget-4">
<h3 class="hf-widget-title">
<i class="fa fa-book"></i>
<a href="#" target="_blank">最新活动</a>
<span>免费会员享福利</span>
</h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li>
<h3>
<a href="#" target="_blank">
<i class="icon-time"></i>
<span>RiPro美化服务火热售卖中</span>
<em>网站美化</em></a>
</h3>
</li>
<li>
<h3>
<a href="#" target="_blank">
<i class="icon-time"></i>
<span>关于本站积分付费阅读获取内容说明</span>
<em>积分说明</em></a>
</h3>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

然后就是把四格模块对应的CSS代码加在上述代码的后面即可,CSS代码在下方会给出,继续介绍其他主题如何使用首页四个模块美化版。

引入图片中的文字图标

<script src="https://use.fontawesome.com/865314f53c.js"></script>

b2主题直接将该代码加在常规设置—综合设置里面的头部HTML标签框内即可。其他主题就加在自定义代码里面就可以了,也可以直接去代码处修改。

其他wordpress主题开始教程

  • 因为有些主题没有进行布局模块化,所以我们只能修改主题代码,我们去主题编辑器或者服务器管理主题,找到index.php文件,再把上面的代码放置在你想要在首页显示的位置即可。
  • 注意:修改前防止出现意外错误,建议备份,重要的事情说三遍:备份、备份、一定要备份!
  • 然后就去该主题的style.css文件中加入下述CSS代码:
隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
WordPress教程

wordpress实现插入文章中的音乐自动播放

2020-4-3 15:56:21

WordPress教程

加一个炫酷的首页波纹动态背景卡片_wordpress博客

2020-4-13 21:47:20

重要说明

本站资源大多来自网络,如有侵犯你的权益请联系管理员Mankey 或给邮箱发送邮件l.0.h#foxmail.com 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip(点击下载),zip、rar解压,建议下载WinRAR(点击下载)

15 条回复 A文章作者 M管理员
  1. 非常棒的~~~~~~~~

  2. 在其它地方也看到了,显示不正确,这个有点不同,试一下

    • 这个有用的 我之前试过 你可以试试看

  3. 酷酷酷 ✗酷酷的✗ ✗酷酷的✗

个人中心
今日签到
有新私信 私信列表
搜索