【WP教程】RiPro主题美化-WordPress主题侧边栏添加加群小工具美化

教程开始 

 1、找到wp-content/themes/ripro/Assets/css/DIY.css并将附件内的diy.css内容整体复制进去并保存  

2、找到wp-content/themes/ripro/assets/images并将images附件内的图片上传进去  

【WP教程】RiPro主题美化-WordPress主题侧边栏添加加群小工具美化  WP教程 RiPro主题美化 侧边栏添加加群小工具 WordPress 后台 H5 第1张

保存图片 修改图片名称为 qun_bg.png

3、找到后台-外观-小工具-自定义HTML并将下方自定义HTML内容整体复制进去并保存,标题可自定义 

4、已经适配了手机端,尽情造吧。

diy代码

/*加群小工具*/
.caozhuti-jiaqun H5 {
    font-size: 16px;
    line-height: 1.4;
}
.caozhuti-jiaqun-small {
    padding: 15px;
}
.caozhuti-jiaqun p {
    max-width: 80%;
}
.caozhuti-jiaqun {
    letter-spacing: .5px;
}
.caozhuti-jiaqun .btn {
    font-size: 13px;
}
.caozhuti-jiaqun .btn i {
    margin-right: 3px;
}
.caozhuti-jiaqun .helper-thumb {
    position: absolute;
    right: 0;
    bottom: 0;
}
.caozhuti-jiaqun-btn-on {
    color: #fff;
    background: #2c63ff!important;
    box-shadow: 0 3px 10px -1px #2c63ff!important;
    border: 0;
}
.widget-area .widget .widget-title {
    font-size: 15px;
    letter-spacing: .5px;
    line-height: 1;
    margin-bottom: 10px;
    text-transform: uppercase;
    border: none;
    border-left: 4px solid #0056ff;
    padding-left: 10px;
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
}
/*加群小工具*/

自定义HTML代码内容

<section class="caozhuti-jiaqun">
		<div class="caozhuti-jiaqun-small">
			<p>分享最新WordPress教程<br> 共同学习,共同进步,共同成长!</p>
			<a href="#" class="btn mobanweb-jiaqun-btn-on" uk-toggle=""><i class="iconfont icon-qq"></i>QQ交流群</a>
			<div class="helper-thumb"><img src="/wp-content/themes/ripro/assets/images/qun_bg.png" alt="操主题"> </div>
		</div>
	</section>

效果图

【WP教程】RiPro主题美化-WordPress主题侧边栏添加加群小工具美化  WP教程 RiPro主题美化 侧边栏添加加群小工具 WordPress 后台 H5 第2张

① 本网站名称及网址:操主题 | CAOZHUTI.COM。
② 本网站资源来源于网络收集,如有侵权,请联系caozhuti.cc@qq.com进行删除处理。
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
④ 如果你也有好源码或者教程,可以联系小编,有钻石奖励和额外收入。
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
⑦ 本站资源大多存储在云盘,如发现链接失效 点击反馈 我们会第一时间更新。
操主题 » 【WP教程】RiPro主题美化-WordPress主题侧边栏添加加群小工具美化

发表评论

欢迎 访客 发表评论