如何在 Elementor 网站中添加工具提示

您是否正在寻找一种向 Elementor 网站添加工具提示的方法？ 如果是这种情况，那么您已经登陆了正确的页面。

工具提示也称为屏幕提示或信息提示，它显示在将鼠标悬停在任何图像或特定文本上时出现的文本片段。 这些工具提示在 Internet 或您的桌面上随处可见，作为替代文本、标签或标题文本。

每当您打开互联网时，您可能会看到任何图像、图标或标题； 如果您将鼠标指针悬停在这些字段上，您将看到一个作为工具提示的文本标签。

同样，使用工具提示功能，您可以在您的网站上执行相同的操作。

在本文中，我们将指导您使用 Elementor 和 PowerPack Addons 添加工具提示并自定义其外观。

所以事不宜迟，让我们继续吧。

什么是工具提示？

工具提示基本上是用户在使用互联网浏览器、应用程序、桌面屏幕等时遇到的一个微小的 UI 元素。

让我们尝试通过名称本身来理解工具提示。

看，顾名思义，它是一个工具给出提示每当有触发器时，向用户提供有关元素或字段的信息。 此触发器可以是悬停或单击，在编码时是结构化的。

这些工具提示是包含简短描述或标题的小文本框，指示特定元素、字段或工具。 例如，参考您的桌面屏幕并查看工具栏或 Windows 开始菜单上的图标。

如您所见，“ windows 开始菜单”上的应用程序会显示一个小文本框，指示有关该应用程序的信息。 现在，这就是工具提示的样子，您可以在系统或网站的任何位置找到它。

因此，如果您希望这些工具提示显示在您的网站上，您需要添加它们。

工具提示如何改善您网站上的用户体验

让我们看看这些工具提示如何帮助您改善网站上的用户体验。

工具提示可以添加到您网站上的此类区域，例如：

• 可点击的元素，例如图像、图标等。
• 标题悬停文本或可点击链接。
• 图像热点。
• 电子商务产品（如果您运行 WooCommerce 网站。）

好的，想想看，如果您在网站的所有这些区域中使用这些工具提示，对于所有浏览您网站的用户来说，这将是多么容易和有用。

是的，消费者会觉得它很方便，这是因为这些工具提示通过在您网站上的任何位置提供相关文本的指示来帮助用户，这将改善他们的用户体验。

如何使用 PowerPack 在 Elementor 中添加工具提示？

在工具提示的帮助下，您可以通过文本向用户展示重要消息，以获得更好的用户体验。

为了向您的网站添加工具提示，您需要安装并激活 Elementor 和 PowerPack 插件。

PowerPack Addons for Elementor 有 80 多个方便且富有创意的小部件、300 多个预先设计的模板和有用的扩展，以增强您网站的整体外观和感觉。 其中一个扩展是工具提示，您可以使用它在您的网站上显示工具提示文本。

因此，让我们看看如何使用 Elementor 和 PowerPack 向您的网站添加工具提示。

启用工具提示扩展

要将工具提示添加到您的网站，请首先启用工具提示扩展。

接下来，转到您的 WordPress 仪表板，导航到 Elementor，然后单击PowerPack。

接下来，导航到扩展部分并启用工具提示功能。

完成后，点击保存更改按钮。

在 Elementor 中启用工具提示功能

要将工具提示添加到 Elementor 网站上的任何特定小部件/部分，请在 Elementor 编辑器中打开您的页面。 选择要显示工具提示的元素，然后转到Advanced Tab > PowerPack ； 现在启用“工具提示”功能。

最后，工具提示功能已成功启用，可以显示在您的网站页面上。

自定义工具提示功能

现在您已经启用了工具提示功能，让我们看看您可以自定义以显示有吸引力的工具提示文本的功能。

启用工具提示功能后，将显示所有自定义选项，您可以使用它们来增强其整体外观。

让我们看看您将使用此功能获得的所有工具提示设置：

• 工具提示内容：添加要在工具提示上显示的内容。
• 目标：使用此选项，您可以选择目标作为当前元素或自定义选择器。
• 触发器：从可用选项中选择您想要的触发器，例如悬停或单击。
• 工具提示位置：选择工具提示位置为top 、 bottom 、 left或right 。
• 显示箭头：选择是否显示箭头的选项。
• 动画：使用此功能，您可以将动画从可用选项（例如淡出、下降、增长、滑动或摆动）应用到工具提示。
• 距离：此选项可以调整热点和工具提示之间的距离。
• Z-Index：使用此选项，您可以调整工具提示的 Z-index 值。

现在您已经自定义了所有工具提示设置，让我们进入下一步。

让我们看看工具提示功能可用的所有样式选项：

• 背景颜色：使用此选项自定义工具提示的背景颜色。
• 文本颜色：此功能可用于自定义工具提示文本颜色。
• 版式：可以使用此选项自定义工具提示版式文本。
• 盒子阴影：您可以使用此选项启用盒子阴影功能以增强其外观。
• 边框类型：如果要为工具提示添加边框，可以使用此选项。 从可用选项中选择一种边框类型，例如实线、点线、虚线、双线和凹槽。
• 边框半径：如果您已将边框应用于工具提示，则可以使用此选项调整其半径。
• 填充：您可以调整工具提示的填充； 这将允许工具提示文本和边框之间的间距。
• 宽度：您还可以使用此选项调整工具提示宽度。

自定义所有这些功能后，我们刚刚创建的工具提示将如下所示。

包起来！

正如我们所讨论的，使用 PowerPack Addons 在 Elementor 网站中添加工具提示的整个过程。 但是，这也可以通过编码来完成； 如果你是专业的编码员。

我们希望本教程能帮助您向 Elementor 网站添加工具提示。 单击此处获取 PowerPack Elementor 插件，以在您的 Elementor 网站上创建令人惊叹的工具提示和许多其他部分。

如果您正在设计 Elementor 页面并寻找添加自定义字体的方法，如何向 Elementor 网站添加自定义字体文章将指导您。

如果您遇到任何问题，请随时在评论部分提出您的疑问。

在 Twitter、Facebook 和 YouTube 上加入我们。