图标列表-构建带有图标的文字列表-wordpress古藤堡区块

wordpress古藤堡区块介绍

图标列表区块-输出一个带有图标的文字列表菜单

图标列表区块可以制作几种我们常用的文字亦或图标的列表内容,这些内容通常可以用于挂载在导航的区块模板或者网站的底部内容中。

一下三种形式的列表都是可以使用图标列表区块制作的:

图标列表-构建带有图标的文字列表-wordpress古藤堡区块

可以看到上图的第一个块,这是使用标题+不同的图标制作的联系方式,输出了联系地址、电话、邮箱等内容

第二个和第三个块是图标+文字链接的模式,可以输出我们想要的文字链接内容。

第四个块是纯图标模式,鼠标经过图标会弹出文字,可以设置超链接,从而输出关注的社交媒体和付款支持的图标。

我们可以通过下图看到英文版本的底部,实际上也是使用图标列表区块进行制作的,图标可以使用不同的图标,也可以使用完全一致的图标。

图标列表-构建带有图标的文字列表-wordpress古藤堡区块

 

图标列表区块的使用说明

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

图标列表-构建带有图标的文字列表-wordpress古藤堡区块

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

图标列表-构建带有图标的文字列表-wordpress古藤堡区块

输入好标题以及增加了一定数量的列表内容之后,可以再右侧看到控制内容的选项增多了

现在可以设置列表的内容以及图标和样式了,如这样:

图标列表-构建带有图标的文字列表-wordpress古藤堡区块

可以看到我们设置了第一个列的图标和颜色,如果是一组列表都是公用一个图标,那么其他的只需要设置文字就可以了,下面的内容会自动继承第一个图标

其他的图标也可以进行设置,单独设置的图标会单独显示。

如果你开启了标签模式,也就是单显示图标模式,那么你要选择一下文字颜色,这样可以控制图标的背景色:

图标列表-构建带有图标的文字列表-wordpress古藤堡区块

 

这样就可以得到不同形式的图标列表内容了,修改和创建都是比较简单的,区块的风格样式也十分的灵活,可以设置字体大小和颜色。

 

上一篇:

下一篇:

文章评论

您好!请登录

取消回复
    展开更多