wordpress美化:小工具引导卡片[wordpress美化教程]

盾给网

5年前

wordpress美化:小工具引导卡片[wordpress美化教程]

这款引导卡片继承前者优秀的配色，依然是自适应展示，按钮由两枚减少为一枚，文字的排版布局也进行了精简，相比前者，这次带来的wordpress美化教程更适合在一些狭窄的地方展示引导内容，比如小工具，当然，还有更多有趣的玩法带你发现。

代码依然由HTML和CSS写成，方便引入。代码在保持简洁的同时充分考虑了浏览器兼容和自适应等问题，让您的内容以最为优雅舒适的方式展现在您的客户面前。

推荐使用方法：

先将下载的代码改成自己的内容。

请将1处的链接为您自己的链接，将2、3处的白色文字修改为自己的文字即可。

在wordpress后台中的外观中选择小工具，在适宜的侧边栏上添加自定义HTML小工具，将下载的压缩包中代码填充进小工具，如下图：

考虑到颜色可能太过显眼，做了个低调的黑白版，效果如下：

鼠标触碰按钮时，按钮会变成黑色的底，字会变成白色。

<style>
.widget-ssr{font-size: 14px;background-color: #fff;}
a:visited {text-decoration: none;}
.btn-outline {line-height: 36px;color: #fff;background-color: transparent;border: 1px solid #fff;display: inline-block;font-weight: 400;text-align: center;vertical-align: top;user-select: none;padding: 0 36px;line-height: 38px;font-size: 14px;border-radius: 100px;outline: 0;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.asr{border-radius: 10px;display:block;padding:40px 15px;text-align:center;color:#fff !important;background:#fe3d7d;background-image:linear-gradient(to right,#fe3d7d 0,#fe5b34 50%,#fe3d7d 100%)}
.asr h4{margin:0;font-size:22px;font-weight:700}
.asr h5{margin:10px 0 0;font-size:14px;font-weight:700}
.asr .btn{margin-top:20px;font-weight:700}
.asr .btn:hover{color:#fe3d7d}
.widget-ssr{overflow:hidden;padding:0}
.btn-outline:hover{background-color: #fff;}
 </style>



<div class="aliyun-add"><div class="widget widget-ssr"><a class="asr" href="https://jq.qq.com/?_wv=1027&k=50y0L7A" target="_blank"><h4>盾给网官方QQ群</h4><h5>经验交流，站长互助，资源分享更及时</h5><span class="btn btn-outline">立即加入</span></a></div></div>

感觉这款wordpress引导卡片太简单了？那你也可以试试这款引导卡片呀。