精致的图标信息引导区块 - wordpress区块

这一款图标信息引导卡片,很适合用在一些需要复杂的可视化展现信息的地方,例如主题介绍、产品特色等地方。这一次和大家分享这款卡片的用法

看过之前分享的“精彩的引导卡片”的站长应该知道,那款卡片的精致和舒适,这一次分享的是同一位作者制作的图标信息引导卡片,很适合用在一些需要复杂的可视化展现信息的地方,例如主题介绍、产品特色等地方。这一次和大家分享这款卡片及其用法。

原版:

精致的图标信息引导区块 - wordpress区块-Npcink

效果展示:

精致的图标信息引导区块 - wordpress区块-Npcink

需要注意的是,仅演示中有6列、3列显示异常,于网站中正常。

如何使用?

点击下方的Demo按钮,即可查看效果图,右击鼠标查看源代码,根据代码注释复制代码到自己需要的地方,一般是页面中,因为这款引导卡片很占宽度,推荐放到页面,当然,因为是自适应设计,理论上放到哪里都可以。,记得看代码注释哦(。・∀・)ノ

个性化

我想换背景色和文本颜色:

参考以下代码:

.theme-feature-container {
    background-color: burlywood;/*背景色*/
    color: rebeccapurple;/*文本色*/
}

需要注意的是,因为图标都是SVG格式,他们会和文本一起改变颜色/

我想换上自己喜欢的图标

细心的你一定观察到了图标排布的规律,核心是这一段:

		<li>
			<div class="item-box">
				<span class="icon">
					SVG图标
				</span>
				<h3>Icp备案</h3>
			</div>
		</li>

打开阿里巴巴矢量图标库,找到喜欢的图标,点击"下载图标",选择自己需要的大小(30),点击“复制SVG”。

精致的图标信息引导区块 - wordpress区块-Npcink

然后将代码粘贴到上面代码展示的"SVG图标"处即可。

如果还有疑问的话,欢迎到评论区留言交流。

文中提到的精彩引导卡片在这篇wordpress美化教程中:

精致的图标信息引导区块 - wordpress区块-Npcink
精致的图标信息引导区块 - wordpress区块-Npcink

精彩的引导卡片 - WordPress区块

这位作者开发的wordpress主题请看这里:

精致的图标信息引导区块 - wordpress区块-Npcink
精致的图标信息引导区块 - wordpress区块-Npcink

Muiteer - 简,极简,极具格调之简

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限
WP区块

精彩的网站信息引导卡片 - wordpress区块

2020-4-5 15:55:10

WP区块

简单的三栏图片布局卡片 - wordpress区块

2020-4-18 23:36:21

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
2 条回复 A文章作者 M管理员
  1. SamuelWalker

    不错不错! ✗微笑✗

  2. SamuelWalker

    不错不错!

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索