你想在你的WordPress网站的主页上添加一个漂亮的图标功能框？ 这些功能框显示您的产品和服务的重要卖点。 它被证明是向新客户呈现特征的高度吸引人的技术。 在本文中，我们将向您展示如何在WordPress站点中轻松添加带有图标的功能框。
什么是功能框与图标？
大多数人访问网站时并没有真正阅读。 作为人类，我们正在成为专业的扫描仪。
这意味着作为企业主，您需要以易于扫描和高度参与的形式呈现重要信息。
这就是为什么大多数流行的商业网站通常都有一个大的图像或一个滑块在顶部的呼叫行动按钮。
在这之下，您可以使用功能框，让您展示产品或服务的重要功能。 每个功能框都可以有自己的号召性用语，可以引导用户了解更多信息。
以下是我们的OptinMonster网站的一个例子：
在您的WordPress主页上添加带有图标的功能框
首先你需要做的是安装和激活高级WP列插件。 激活后，您需要访问 设置»高级WP列 配置插件。
只需向下滚动到“Column class”选项，然后输入 mycolumns 在它的旁边。 不要忘记点击保存更改按钮来存储您的设置。
接下来，您将需要一个插件将美丽的SVG图标插入到您的功能框中。 安装并激活WP SVG图标插件。
您现在准备好创建您的功能框。
首先编辑要添加功能框的页面。
您将在帖子编辑器屏幕上看到两个新按钮。 第一个是位于编辑器上方的添加图标按钮。 第二个按钮位于可视化编辑器菜单中的最后一个项目。
如果你的可视化编辑器只显示一行按钮，那么你需要点击切换工具栏按钮来展开它。
首先，你需要点击高级WP列按钮。 这将弹出一个你需要点击的弹出窗口 空 然后选择要添加的列数。
之后，你需要点击每一列添加一些文字。 如果您现在不添加一些文本，那么在帖子编辑器中很难看到这些列。 一旦完成，点击底部的添加列按钮。
您现在将在您的文章编辑器中看到这些列。 下一步是在文本上方添加图标。
将鼠标移到第一列文本区域的开头，然后单击输入按钮。 这将文本向下移动，并给予空间来插入您的图标。
现在你需要点击添加图标按钮，这将带来一个像这样的漂亮的弹出窗口：
从那里，你可以通过点击选择你想要使用的图标。 接下来，你需要点击跨度按钮，所以你的图标被包裹在里面 元件。
最后，点击插入按钮。 您现在将在您的文章编辑器中看到SVG图标的简码。 根据您选择的图标的名称，它将看起来像这样：
[wp-svg-icons icon =“rocket”wrap =“span”]
重复该过程以在其他功能框中添加图标。
一旦你完成，只需点击“更新”按钮来保存你的页面。
你快完成了，但是如果你预览了你的页面，那么你会注意到图标太小，而你的功能框几乎不显眼。
您将需要添加一点CSS来解决这个问题。 只需将此CSS代码片段添加到主题或子主题的样式表中即可。
span.wp-svg-rocket.rocket {
字体大小：100像素;
}
span.wp-svg-cloud.cloud {
字体大小：100像素;
}
span.wp-svg-headphones.headphones {
字体大小：100像素;
}
.mycolumns {
border：1px solid #eee;
最小高度：250像素;
padding-top：20px！important;
}
不要忘记调整CSS来匹配你正在使用的图标的名称。
我们希望这篇文章能够帮助您在您的主页上添加一个漂亮的功能框部分