您想在 WordPress 网站的主页上添加带有漂亮图标的功能框吗？这些功能框显示了您的产品和服务的重要卖点。事实证明，它是一种向新客户展示功能的高度有吸引力的技术。在本文中，我们将向您展示如何在 WordPress 网站中轻松添加带有图标的功能框。
您想在 WordPress 网站的主页添加一个带有漂亮图标的功能框吗？这些功能框展示了产品和服务的重要卖点。在向新客户展示功能时，事实证明这是一项极具吸引力的技术。在本文中，我们将向您展示如何轻松地将带有图标的功能框添加到您的 WordPress 网站。
什么是带有图标的功能框？ （What is Feature Boxes With Icons?）
大多数人在访问网站时实际上并没有阅读它们。作为人类，我们正在成为专业的扫描仪。
大多数人在访问网站时实际上并没有阅读网站。作为人类，我们正在成为专家扫描仪。
这意味着作为企业主，您需要以易于扫描且高度吸引人的格式呈现重要信息。
这意味着作为企业主，您需要以易于浏览且高度吸引人的格式呈现重要信息。
That’s why most popular business websites usually have a large image or a 滑块 on top with a call to action button.
这就是为什么大多数流行的商业网站通常在顶部都有大图像或顶部带有一个号召性用语按钮的滑块 。
就在其下方，您可以使用功能框来展示产品或服务的重要功能。每个功能框都可以有自己的号召性用语，可以引导用户了解更多信息。
在其下方，您可以使用功能框，它可以让您展示产品或服务的重要功能。每个功能框都有自己的号召性用语，可以让用户了解更多信息。
Here’s an example from our 选择怪物 website:
这是来自选择怪物网站的示例：
影片教学 （Video Tutorial）
如果您不喜欢该视频或需要更多说明，请继续阅读。
如果您不喜欢该视频或需要更多说明，请继续阅读。
在WordPress主页上添加带有图标的功能框 （Adding Feature Boxes with Icons on Your WordPress Homepage）
First thing you need to do is install and activate the 高级 WP 色谱柱 plugin. Upon activation you need to visit 设置 » 高级 WP 列 to configure the plugin.
您需要做的第一件事是安装并激活高级 WP 色谱柱插件。 激活后，您需要访问设置 » 高级 WP 列以配置插件。
Simply scroll down to the option ‘Column class’ and enter 菌柱 next to it. Don’t forget to click on the save changes button to store your settings.
只需向下滚动到“列类”选项，然后在其旁边输入菌柱 。 不要忘记单击“保存更改”按钮来存储您的设置。
Next, you will need a plugin to insert beautiful SVG icons into your feature boxes. Install and activate WP SVG 图标 plugin.
接下来，您将需要一个插件来将漂亮的SVG图标插入功能框。 安装并激活WP SVG 图标插件。
您现在已准备好创建功能框。
现在您可以创建功能框。
首先编辑要添加功能框的页面。
首先编辑要添加功能框的页面。
您会注意到帖子编辑器屏幕上有两个新按钮。第一个是位于编辑器上方的“添加图标”按钮。第二个按钮位于可视化编辑器菜单中的最后一项。
您会注意到帖子编辑器屏幕上有两个新按钮。第一个是位于编辑器上方的“添加图标”按钮。第二个按钮是可视化编辑器菜单中的最后一项。
If your 可视化编辑器 is only showing one row of buttons, then you need to click on the toggle toolbar button to expand it.
如果可视化编辑器仅显示一行按钮，则需要单击切换工具栏按钮以将其展开。
First, you need to click on the Advanced WP Columns button. This will bring up a popup where you need to click on 空的 and then select the number of columns you want to add.
首先，您需要单击“高级WP列”按钮。 这将弹出一个弹出窗口，您需要单击“ 空白的” ，然后选择要添加的列数。
之后，您需要单击每一列来添加一些文本。如果您现在不添加一些文本，那么将很难在帖子编辑器中看到这些列。完成后，单击底部的添加列按钮。
之后，您需要单击每一列来添加一些文本。如果您现在不添加一些文本，则将很难在帖子编辑器中看到这些列。完成后，单击底部的“添加列”按钮。
您现在将在帖子编辑器中看到这些列。下一步是在文本上方添加图标。
您现在将在帖子编辑器中看到这些列。下一步是在文本上方添加图标。
将鼠标移至第一列文本区域的开头，然后单击 Enter 按钮。这会将文本向下移动并留出空间来插入图标。
将鼠标移至第一列文本区域的开头，然后单击 Enter 按钮。这会将文本向下移动并留出空间来插入图标。
现在您需要单击“添加”图标按钮，这将弹出一个漂亮的弹出窗口，如下所示：
现在，您需要单击“添加”图标按钮，这将弹出一个漂亮的弹出窗口，如下所示：
从那里，您可以通过单击选择要使用的图标。接下来，您需要单击 span 按钮，以便您的图标包含在 <span> 元素内。
从那里，您可以通过单击来选择要使用的图标。接下来，您需要单击 span 按钮，因此您的图标将被包装在 <span> 元素内。
Finally, click on the insert button. You will now see the 短代码 for the SVG icon in your post editor. Depending on the name of the icon you selected, it will look something like this:
最后，单击插入按钮。 现在，您将在帖子编辑器中看到SVG图标的短代码 。 根据您选择的图标的名称，它看起来像这样：
[wp-svg-icons icon="rocket" wrap="span"]
[wp-svg-icons icon="rocket" wrap="span"]
重复此过程以在其他功能框中添加图标。
重复此过程以将图标添加到其他功能框。
完成后，只需单击“更新”按钮即可保存页面。
完成后，只需单击“更新”按钮即可保存页面。
您即将完成，但如果您预览页面，您会发现图标太小，并且功能框几乎不引人注目。
您即将完成，但如果您预览页面，您会发现图标太小并且功能框几乎不可见。
You will need to add a little CSS to solve this problem. Simply add this CSS snippet into your theme or 儿童主题‘s stylesheet.
您将需要添加一些CSS来解决此问题。 只需将此CSS代码段添加到主题或副主题的样式表中即可。
span.wp-svg-rocket.rocket {
font-size:100px;
}
span.wp-svg-cloud.cloud {
font-size:100px;
}
span.wp-svg-headphones.headphones {
font-size:100px;
}
.mycolumns {
border:1px solid #eee;
min-height:250px;
padding-top:20px !important;
}
不要忘记调整 CSS 以匹配您正在使用的图标的名称。
不要忘记调整 CSS 以匹配您使用的图标名称。
We hope this article helped you add a beautiful features boxes section on your homepage. You may also want to see our guide on 5 个最佳拖放 WordPress 页面构建器 because a lot of those page builders have this feature box functionality built into them.
我们希望本文能帮助您在首页上添加漂亮的功能框部分。 您可能还想查看有关5 个最佳拖放式 WordPress 页面构建器指南，因为其中很多页面构建器都内置了此功能框功能。
If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and Facebook.
如果您喜欢这篇文章，请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特和Facebook上找到我们。
翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-add-feature-boxes-with-icons-in-wordpress/