Divi 插件亮点：WP 和 Divi 图标

WP 和 Divi Icons 是 WordPress 的第三方插件，可与任何 WordPress 主题配合使用并集成到 Divi Builder 中。 为了与 Divi 一起使用，它包括您可以在项目中使用的专有布局。 这些图标在 WordPress 编辑器和任何允许您选择图标的 Divi 模块中可用。 在本文中，我们将看看 WP 和 Divi Icons，看看是什么让它与众不同。

WP 和 Divi Icons 为 WordPress 添加了 2500 多个图标。 它包括 Font Awesome 图标、材质图标和 450 个自定义设计的图标，其中包括 48 个多色图标。 它有免费版和专业版。 我正在测试专业版。

安装 WP 和 Divi 图标

正常上传并激活插件。 我将 1.1.0 版与 Divi 3.17 版和 WordPress 4.9.8 一起使用。

接下来，您需要激活您的许可证。 您可以导航到激活屏幕或单击屏幕顶部显示的消息。 不过，知道如何在那里导航仍然很有帮助，因为一旦您输入许可证密钥，此页面将成为选项屏幕。

无论您使用什么主题，都要进入屏幕，单击插件列表中插件描述中的说明链接。 如果您使用的是 Divi，则会在仪表板中的 Divi 菜单中添加一个名为 WP 和 Divi 图标的新菜单项。 单击此按钮并输入您的许可证密钥。

自定义多色图标

输入您的许可证密钥后，它会打开带有说明的屏幕、48 个多色图标的列表以及为这些图标创建您自己的配色方案的工具。

您可以控制三种颜色。 调整颜色控件并等待几秒钟以查看结果。 单击删除将删除配色方案。 这些颜色添加了一点阴影效果，从而为每种颜色创建了较暗的版本，看起来很神奇。

单击添加配色方案会创建一组新的多色图标，您可以对其进行调整。

根据需要添加尽可能多的配色方案。 这极大地扩展了您可以使用图标执行的操作。 控件很直观。 事实证明，我发现这有点让人上瘾。

在任何主题的 WordPress 中使用 WP 和 Divi 图标

要使用任何主题的图标，请选择添加到 WordPress 编辑器的新图标。

这将打开编辑器，您可以在其中选择图标、通过在颜色字段中键入或使用颜色选择器来编辑颜色、通过输入以像素为单位的数字或使用滑块更改大小、添加标题和添加类。 您还可以搜索图标。

您所做的任何更改都会实时显示。 在这个例子中，我输入了我想要的颜色，将大小更改为 106 像素，并将名称更改为 Green Leaf。

单击确定将图标添加到您的内容中。

双击图标打开编辑器并进行更改。

单击“确定” ，更改将反映到内容中的图标上。

此编辑器不编辑多色图标。 您必须在我上面演示的主设置屏幕中编辑它们。 您仍然可以从此编辑器中选择它们、更改它们的大小、添加标题、添加类以及从此处将它们插入到您的内容中。

图标在内容中看起来很棒。

在 Divi Builder 中使用 WP 和 Divi 图标

Divi Builder 中添加了许多新图标，可以从允许您选择图标的任何模块访问这些图标。 添加了一个新的搜索功能，图标更大，更容易看到（这表明这个插件可能是由像我这样的老家伙设计的。我既能理解也能欣赏这个功能）。

我希望添加一个过滤器，以便我可以在 Font Awesome、Material 或自定义图标之间进行选择。 通过这种方式，如果我想要与其他人不同的东西，或者只使用 Font Awesome 或 Material Icons 构建，或者有选择地混合我的图标，我可以轻松地看到自定义图标并忽略 Font Awesome 和 Material 图标。

它包括单色和多色图标。

从前端实时搜索和更改图标。

它们就像任何 Divi 图标一样可调节。

您还可以从前端构建器添加多色图标。 您不能在此处调整图标的颜色（这是在多色图标编辑器中完成的），但您可以从模块的设置中添加一个圆圈、添加一个边框、调整它们的颜色以及调整图标的大小。

在这个例子中，我添加了一个带边框的圆。

您可以从前端和后端使用它们。

Divi 文本模块中也提供了 WordPress 图标编辑器。 该编辑器的工作原理与任何 WordPress 主题完全相同。

WP 和 Divi 图标布局

该插件适用于任何主题，但它确实具有仅适用于 Divi 的特殊功能。 将它与 Divi 一起使用的最大优势之一是独家自定义布局。 它们是使用 WP 和 Divi Icons 定制设计的，下载链接仅在插件中可用。 它们可供任何拥有插件的人下载，并可用于任何项目。 它们是具有许多样式模块的完整布局。

已经有几个可用的，还有几个在路上。 以下是对每个图标的介绍，重点介绍他们如何使用图标。 您可以在开发人员的演示页面上看到它们。

电商布局

此布局包括带有气泡的样式标题，以显示公司使用的支付网关和运输合作伙伴的类型。 多色图标显示所提供的服务。 它的工作原理显示在选项卡中。 它还包括定价表、推荐信、FAQ 的时事通讯注册和页脚。

创意机构布局

这包括一个风格化的标题、一个关于你提供的服务类型的区域、一个投资组合、一个涵盖你的工作方式和你采取的步骤的滑块、推荐、奖项、关于你的团队、联系人和页脚。 它使用了许多斜角和深阴影效果。 彩色图标显示服务。

商业布局深色

这个有一个两列标题，一侧是图像，另一侧是文本。 显示您提供的服务的部分使用多色图标，并在页面下方交替显示图像和文本。 其他部分使用大背景文本并显示公司的历史、覆盖层中带有彩色图标的团队成员、联系表格、联系信息和页脚。

商业布局灯

这是与业务布局深色相同的布局，但颜色较浅。

非营利布局

这显示了一个全屏图像滑块，右侧有一个垂直菜单，并使用社交关注按钮的图标。 下面的一个细长部分显示了捐赠 CTA。 它还包括关于部分、您支持的原因、事件部分、项目、带有图标的简介、赞助商和页脚。

许可证和文件

价格范围从限量版免费、单个站点 39 美元、3 个站点 59 美元和无限制站点 79 美元不等。 您可以在开发者的网站上购买该插件。

它包括高级支持和 3 年更新。 开发人员的网站上提供了文档。

结束的想法

WP 和 Divi Icons 易于使用。 当我在 Divi 模块中单击它们时，加载图标确实需要几秒钟的时间。 我敢肯定，这主要是由于我的“欢迎来到乡村生活”互联网连接速度较慢。 我希望看到添加到 Divi 模块的过滤器。 搜索功能有助于根据关键字查找图标。

我喜欢它添加了 Font Awesome 和 Material Icons，但我最喜欢的是自定义图标——尤其是多色图标。 编辑器使用起来很简单有趣。 我认为即使没有 Divi，它也是一个很棒的插件，但由于免费布局，Divi 甚至更好。

我们希望听到您的意见。 您是否尝试过 WP 和 Divi 图标？ 请在评论中告诉我们您对此的看法。

特色图片来自 VectorsMarket/shutterstock.com