WEB主題公園
WordPress原創(chuàng)主題,高端網(wǎng)站模板建站,網(wǎng)站模板建站資源以及開發(fā)知識分享,盡在WEB主題公園
WEB主題公園致力于開發(fā)適合中國人習(xí)慣的中文WordPress網(wǎng)站模板,并提供全程視頻教程,讓您能夠輕松的使用網(wǎng)站模板建立好自己的網(wǎng)站!
圖標列表-構(gòu)建帶有圖標的文字列表-wordpress古藤堡區(qū)塊
图标列表区块-输出一个带有图标的文字列表菜单
图标列表区块可以制作几种我们常用的文字亦或图标的列表内容,这些内容通常可以用于挂载在导航的区块模板或者网站的底部内容中。
一下三种形式的列表都是可以使用图标列表区块制作的:

可以看到上图的第一个块,这是使用标题+不同的图标制作的联系方式,输出了联系地址、电话、邮箱等内容
第二个和第三个块是图标+文字链接的模式,可以输出我们想要的文字链接内容。
第四个块是纯图标模式,鼠标经过图标会弹出文字,可以设置超链接,从而输出关注的社交媒体和付款支持的图标。
我们可以通过下图看到英文版本的底部,实际上也是使用图标列表区块进行制作的,图标可以使用不同的图标,也可以使用完全一致的图标。

图标列表区块的使用说明
插入一个图标列表,在wordpress古藤堡编辑器的区块库中找到图标列表,点击插入,插入之后的效果是这样的:

插入后的状态是只有一行列表 ,没有标题,你可以在右侧的区块设置中展开列表数量增减,增加对应的数量,并且设置好标题,如下:

输入好标题以及增加了一定数量的列表内容之后,可以再右侧看到控制内容的选项增多了
现在可以设置列表的内容以及图标和样式了,如这样:

可以看到我们设置了第一个列的图标和颜色,如果是一组列表都是公用一个图标,那么其他的只需要设置文字就可以了,下面的内容会自动继承第一个图标
其他的图标也可以进行设置,单独设置的图标会单独显示。
如果你开启了标签模式,也就是单显示图标模式,那么你要选择一下文字颜色,这样可以控制图标的背景色:

这样就可以得到不同形式的图标列表内容了,修改和创建都是比较简单的,区块的风格样式也十分的灵活,可以设置字体大小和颜色。
如未標明出處,所有文章均為WEB主題公園原創(chuàng),如需轉(zhuǎn)載,請附上原文地址,感謝您的支持和關(guān)注。
本文地址:http://www.dengyin90.cn/tblb-gjdytbdwzlb-wor.html
推薦閱讀
- 2014年9月4日
- 2018年8月30日
- 2015年10月16日
- 2018年3月2日
- 2015年2月5日
- 2014年7月30日
- 2016年1月11日
- 2013年8月19日
- 2014年4月11日




