WordPress divi主题

Divi 插件亮点:Divi 上传图标

by | May 13, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

Divi Upload Icons 是 Divi 的第三方插件,可以轻松地将更多图标添加到 Divi Builder。 与仅集成 Font Awesome 和 Material Icons 的其他图标插件不同,此插件可让您添加所需的任何图标集。 它必须是兼容的文件类型,并且恰好使用五种最流行的文件类型。

google广告开户

该插件将上传器添加到您的 WordPress 安装中,您可以在其中拖放图标文件。 然后将图标添加到显示图标的任何 Divi 模块中。 就像标准的 Divi 图标一样,您上传的任何图标集都可以使用 Divi Builder 进行样式设置。 在这个 Divi 插件亮点中,我们将看看 Divi 上传图标,看看它是多么容易使用。

安装和激活 Divi 上传图标

正常上传并激活插件,然后转到 设置 > Divi 上传图标 在仪表板菜单中输入您的激活密钥。

使用 Divi 上传图标上传图标

设置屏幕中还有上传功能。 在这里,您将上传您的图标。 图标必须为 .eot、.svg、.ttf、.woff、.woff2 和 .css 格式。 您可以从任何您想要的来源下载图标并将它们与 Divi 上传图标一起使用,只要它们采用这些格式并包含 CSS 文件。 要安装图标,请将它们拖放到上传窗口中。 上传区域中提供了说明,并且有一个简短的视频演示了如何使用它。

图标有时包括多种格式。 您必须将 CSS 文件与图标一起上传,并且图标必须是受支持的文件。 在这个例子中,我上传了几组。 它们包括多种文件类型和 CSS 文件。 上图中带有橙色图标的那些文件丢失了。

此示例中的文件是正确的。 我已经上传了支持的文件类型及其 CSS 文件。 我现在有超过 2500 个新图标。 我从 iconfont、Dripicons、Foundation Icon Fonts 和 Map Icons 下载了它们。 开发人员维护已测试的图标列表,您可以与 Divi Upload Icons 一起使用。 当然,您可以使用更多图标。

WordPress divi主题

为了比较,这是我上传新图标之前的 Divi 简介模块。 Divi 包括 360 度图标。 您可以通过查看窗口中条的长度来了解有多少。

这张图片包含了我上传的所有 2500 个图标。 我现在有更多图标可供选择,并且窗口栏要小得多。 您可以在 Visual Builder 中看到图标,但它不包括新的过滤器和搜索工具。

Divi 上传图标过滤和搜索

如果您使用经典构建器,则会添加一个新的过滤器工具。 您可以打开或关闭过滤器。 在这个例子中它是关闭的。

点击 过滤器图标 查看您已安装的图标系列和搜索功能。 单击任何图标系列以查看该系列。 您还可以查看所有族或关闭过滤器和搜索选项。 过滤器工作得很快。 单击图标系列或搜索图标几乎可以立即显示图标,即使使用我的 2500 个图标也是如此。 我敢肯定,这部分取决于您安装了多少图标,因此您的体验可能会有所不同。

在这个例子中,我选择了 地图图标 我上传的。 这个图标系列中有近 200 个图标。

fiverr建站WordPress程序员

这里有 基础图标. 它还有近 200 个图标。

这里有 图标字体. 这个图标系列添加了 2000 多个图标。

独立站选品工具

您可以按关键字或图标系列名称进行搜索。 结果包括来自您上传的所有图标系列的图标以及 Divi 中已经可用的图标。

如果过滤器在搜索后工作以便按图标系列查看结果,那将会很有趣。 当您将鼠标悬停在每个图标上时,它会显示带有图标系列的名称。 在上图中,我将鼠标悬停在右侧的第二个图标上。 这很有帮助,因此搜索过滤器并不是真正的高优先级。

Divi 上传图标示例

当然,使用图标的优点之一是能够使用 Divi Builder 调整大小、颜色、添加圆圈、边框等。 插件和图标可以与 Visual Builder 一起使用,但它不会在实时视图中显示图标。 此示例显示模块图标选择中的图标,但实时预览不起作用。

高质量外链购买

这些图标在已发布的页面或帖子上显示得很好。 您仍然可以使用 Visual Builder 自定义大小和颜色,只是不会在实时预览中看到它们。 在自定义颜色和大小时,我更喜欢 Visual Builder,但我将在其余示例中使用 Classic Builder。 这是 Mortgage 布局包中的登录页面。

图标看起来很棒,可以像标准 Divi 图标一样进行自定义。 我使用搜索功能找到了所有这些图标。 这是默认设置。

JasperAI 10000字免费额度试用

我更改了颜色以匹配布局,就像布局使用的原始图像一样。

对于这个,我选择使用图标的字体大小并将其调整为 32px。 它开始看起来更类似于原始设计,但带有我的图标。

在这个中,我为每个图标添加了一个圆圈。 我改变了圆圈和图标的颜色,并在左起第二个和第四个添加了边框。 我选择不同的颜色只是为了展示它们的外观。

WordPress备份工具updrafplus

以下是图标放置在文本左侧的样子。

在这一个中,我用图标替换了 Golf Course 布局中的图像。 我使用了布局中的颜色并将它们的大小设置为 48 像素。

对于这个例子,我禁用了图标的字体大小调整。 这是默认大小,为 96 像素。 它们与布局的设计很好地融合在一起。

使用圆形图标设置时,它们看起来也很棒。 我将图标颜色更改为白色,并使用布局中的棕褐色作为圆圈的颜色。 图标仍为 48 像素。

对于这个,我使用了布局中的一种绿色阴影。 Divi Builder 的自定义有很多可能性。

Divi 上传图标价格

Divi 上传图标是 24.97 美元。 它具有无限的使用和更新。 您可以在市场上购买 Divi 上传图标。

结束的想法

Divi Upload Icons 可以轻松地从任何字体库上传您想要的确切图标。 该插件背后的想法不是安装数千个您不需要的图标,而是可以安装您想要与 Divi 网站一起使用的确切图标和图标系列。

由于您将图标上传到 Divi Builder,因此它们存储在您的服务器上。 我上传了超过 2500 个图标,并且 Divi Builder 或我的网站没有速度问题。

请记住,它确实需要带有字体文件和 CSS 文件的字体。 错误地上传字体很容易(猜猜我是怎么知道的)。 确保您完全按照说明进行操作,否则字体将是空方块。 此外,它不适用于 Font Awesome 5,但它适用于 4.7。

我喜欢使用 Divi 上传图标。 我想将它与 Visual Builder 一起使用,但它与经典 builder 一起使用效果很好。 确实需要额外尝试以确保我拥有正确的文件,但考虑到 Internet 上有多少图标系列,花时间查找具有正确文件的图标是非常值得的。 图标不难找到,开发人员提供了很多他已经测试过的图标的链接。

如果您有兴趣将自己的图标添加到 Divi Builder,Divi Upload Icons 值得一看。

我们希望收到你的来信。 您是否尝试过 Divi 上传图标? 在评论中让我们知道您对此的看法。

特色图片来自 hanss / shutterstock.com

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题