什么是带图标的功能框？

大多数访问你WordPress网站的人不会阅读每一个单词，尤其是在页面内容过于繁重的时候。相反，访问者会扫描页面寻找他们需要的信息。因此，你需要以一种易于扫描和引人入胜的方式展示重要信息，这也是许多网站使用功能框的原因。

在下图中，你可以看到WPressize Me如何使用功能框突出其插件的主要卖点。

你甚至可以添加一个行动号召按钮，让用户了解更多特定功能的详细信息。下面我们来看看如何在WordPress中添加带图标的功能框。你可以使用快速链接跳转到你想要使用的方法：

• 方法一：使用WordPress块编辑器添加带图标的功能框（无需插件）
• 方法二：使用页面构建插件添加带图标的功能框（推荐）

方法一：使用WordPress块编辑器添加带图标的功能框（无需插件）

你可以使用标准内容编辑器和列块，在WordPress网站中添加带图标的功能框。这意味着你无需安装新的WordPress插件，是一种快速简便的方法。

首先，打开你要添加功能框的页面，然后点击“+”添加块图标。接着，在搜索框中输入“列”。当显示正确的块时，点击将其添加到页面。

WordPress现在会显示所有不同的列块。数字表示每个列在块中占用的空间，例如“50/50”创建两个各占50%宽度的列。我们将选择“33/33/33”列块，因为这给我们三个等宽的列，但你可以使用任何你喜欢的布局。

接下来，你可以向列中添加图标。最简单的方法是使用图标字体，这种可调整大小的符号不会拖慢你的网站速度。我们推荐使用Font Awesome，因为它们有最大的免费图标集合之一。

在你的WordPress主题中添加图标字体后，可以使用短代码将其显示在列中。点击列的“+”图标，输入“Shortcode”。选择正确的块后，点击将其添加到布局。然后，你可以输入以下短代码，但要将“bus”替换为你要使用的图标名称：[icon name=”bus”]。为了查看所有可用图标，前往Font Awesome图标库。

找到你喜欢的图标后，点击查看图标的名称并应用到短代码中。

如果你更喜欢使用WordPress媒体库中的图像，可以添加一个图像块。只需点击第一个列中的“+”图标，然后添加一个“图像”块。选择一个图像或从电脑上传一个新文件。

添加所有图标后，下一步是向功能框中添加文本。点击列块中的“+”按钮，然后添加一个段落块。输入文本到段落块中。

通过重复相同的过程，可以为其他列添加图标和文本。要添加多行功能框，选择列块并点击工具栏中的三点图标，然后选择“复制”。添加内容到第二行。

当你对功能框满意时，可以添加其他内容如产品图片或分类标签。点击“更新”或“发布”按钮使功能框上线。现在访问你的网站、博客或在线商店即可看到功能框。

方法二：使用页面构建插件添加带图标的功能框（推荐）

如果你想创建一个简单的功能框，WordPress块编辑器是一个不错的选择。然而，若你想创建更高级的设计，则需要一个页面构建插件。

SeedProd是最好的WordPress页面构建器，允许你使用拖放编辑器创建自定义页面。它有超过300个专业设计的模板和一个图标库，可以快速添加到功能框中。你首先需要安装并激活SeedProd插件。然后去SeedProd » 设置，输入你的许可证密钥。

选择一个专业设计的模板，开始在SeedProd » 登录页面点击“添加新的登录页面”。在下一个屏幕中选择一个模板，并点击“勾号”图标。给页面命名后点击“保存并开始编辑页面”。在SeedProd的拖放编辑器中打开模板。

选择一个布局，在左侧菜单找到“图标”块，拖放到空列中。选择图标后可以自定义它，包括对齐、大小、颜色等。

在图标下方添加一个文本块，通过拖放将其放置在图标下方，然后在左侧菜单的文本编辑器中输入文本。可以添加链接、更改文本对齐、更改文本颜色等。重复相同步骤自定义其他列。要添加另一行功能框，悬停在部分上方，点击“复制行”按钮。重复上述过程添加新图标和文本。

完成页面设计后点击“保存”。然后选择“发布”使页面上线。

希望这篇文章能帮助你在WordPress中添加带图标的功能框。同时你可能想看看我们的如何创建电子邮件通讯和我们专家推荐的最佳实时聊天软件。