这次分享一款简单清新的引导卡片,虽然没有响应式布局,但其恰到好处的动效定会让你和你的访客们眼前一亮,虽然没有图片,但简单直白的文字却能更加精准的传达信息,快速引导您的访客们访问他们需要的页面。这次的wordpress区块教程就分享这张卡片。
- 代码来源:鲸传播
卡片预览:

注意哦,没有响应式,你可以自己用媒体查询让其在移动端隐藏,例如这样:
<style type="text/css">
@media only screen and (max-width: 500px) {
.hide_sm {
display: none;
}
}
</style>
如何使用?
点击下方的Demo按钮,右击鼠标查看源代码,根据代码注释复制代码到自己需要的地方,例如古登堡的HTML区块或是小工具里面的“自定义HTML”,另外,记得看代码注释哦(。・∀・)ノ
同一网站出来的卡片,在以下wordpress美化教程中有分享:
展示效果不错,已经下载应用到网站上。