如何在悬停或单击上添加 Elementor 工具提示?

Google Docs 中你到处都见过工具提示,在工具栏图标上悬停,一个小标签告诉你那个按钮的作用,那就是一个工具提示,在 WordPress 中,工具提示让你添加一些简短的提示,当有人悬停(或点击)你的页面上的一个元素时,不会有额外的页面房地产,不会有杂乱的布局。

Elementor 的主插件为您提供了两种添加工具提示的方法: 工具提示元素、一个您掉落到页面上的独立小部件,以及 工具提示扩展的,它将工具提示附加到任何已经存在的 Elementor 小部件、部分或容器上,本指南涵盖了两种方法、何时使用每种方法以及如何样式。

什么是工具提示?为什么它们很重要?

提示(tooltip)是访问者将光标悬停在页面上的特定元素上时出现的短消息, 在WordPress网站上, 工具提示服务于几个实际用途:

• 解释术语而不破坏流量。 如果您的内容使用行话,工具提示可以让读者在悬停时快速定义,而不会中断该段落。
• 将上下文添加到图像和图标。 当您显示产品图标、团队成员照片或功能图标时,工具提示会提供额外的细节,而不会占用视觉空间。
• 保持页面清洁。 工具提示不是将每条信息塞入可见布局中,而是隐藏辅助细节,直到读者真正想要它们。
• 提高参与度。 像工具提示这样的交互元素鼓励访问者探索您的内容邀请交互的页面往往会更长时间地吸引注意力。

你需要什么

• WordPress 已安装在您的网站上
• Elementor 的主插件 安装并激活(免费版作品)
• Elementor 页面构建器(免费或专业版)

Master Addons 是一个 WordPress 插件 80多个小部件和扩展 为 Elementor,包括此处涵盖的两个工具提示功能。

Tooltip Element 与 Tooltip Extension:您应该使用哪一个?

Ta们解决了不同的问题,挑对了,省时。

简短版本:

• 需要将工具提示添加到页面上的标题、按钮或任何小部件?使用 工具提示扩展.
• 需要一个专用内容块,用户可以在特定文本、图像或图标上悬停以查看工具提示内容?使用 工具提示元素.

2个都可以用在同一个页面上,它们之间并不冲突。

方法1:如何使用工具提示元素在Elementor中添加工具提示

的 工具提示元素 是独立的小部件,您将其拖动到您的页面上,用户将鼠标悬停在文本、图像或图标上以显示工具提示消息。

当您想要创建图像工具提示、文本工具提示或图标工具提示作为页面的专用部分时,请使用此功能。

第 1 步:在 Elementor 中打开页面

WordPress仪表板,导航到您要编辑的页面,然后单击 使用元素器编辑.

第 2 步:搜索 Tooltip 小部件

在左侧的 Elementor 小部件面板中,在搜索栏中键入 “Tooltip” MA 工具提示 widget 出现在主插件部分下。将其拖动到您希望工具提示显示的页面上。

3步:选择您的内容类型

单击小部件打开其设置。在 内容 选项卡, 内容类型 option 给您三个选择:

• 文。 访问者将鼠标悬停在您的文本上以查看工具提示消息。
• 图片。 访问者悬停在图像上查看工具提示。
• 图标。 访问者悬停在图标上以显示更多信息。

选择适合您用例的内容类型。

4步:设置工具提示内容

选择内容类型后,配置两个部分:

的触发内容 (访问者在页面上看到的内容):

• 对于文本:输入单词或短语,访问者将悬停在上面
• 对于图像:从 WordPress 媒体库上传图像
• 为图标:从图标库中选择一个图标

的工具提示内容 (悬停上出现什么):

• 去 工具提示设置 部分
• 在内置编辑器中输入您的工具提示文本
• 您可以使用粗体、斜体、链接等格式化文本

5步:配置工具提示方向和速度

"工具提示设置"中, 设置工具提示的显示方式:

• 工具提示方向。 选择工具提示相对于触发器弹出的位置:顶部、底部、左侧或右侧。
• 工具提示速度。 以毫秒为单位设置动画速度,较低的值使其显示得更快。

提示: 300-500ms之间保持工具提示速度,太快感觉突然,太慢感觉无反应。

第 6 步:调整工具提示

切换到 风格 选项卡可自定义 Elementor 工具提示小部件的外观:

• 内容最大宽度。 控制工具提示框的宽度。
• 背景颜色。 设置工具提示背景。
• 文本颜色。 更改工具提示字体颜色。
• 版式。 调整字体系列、大小、重量和间距。
• 盒子影子。 添加具有阴影效果的深度。
• 边界。 添加边框并为圆角设置边框半径。
• 填充。 控制文本和工具提示边缘之间的空间。

您可以设置不同的样式 正常 並 悬停 添加视觉反馈的状态。

一般样式如下 工具提示样式 section 给你控制气泡本身,以像素设置工具提示宽度,挑选背景和文字颜色,调整排版,配置四边填充,选择边框类型,圆角设置边框半径,控制触发器和气泡之间的距离,对齐工具提示内部的文字,并添加框阴影以了解深度。

有关每个设置的完整演练,请检查 工具提示元素文档 或者观看 视频教程.

方法 2:如何使用 Tooltip Extension 将工具提示添加到任何 Elementor 小部件

的 工具提示扩展 与元素的工作方式不同,它不是一个独立的小部件,而是添加了一个 工具提示 elementor 每个元素的高级选项卡的部分,选择页面上已经存在的任何小部件、容器、列或部分,翻转开关,键入文本,访问者在悬停在该元素上时会看到一个小气泡,每个元素都带有自己的工具提示,因此连续三张卡片可以用不同的文本各自解释自己。

扩展名分为两个子选项卡: 设置 为行为(文本、放置、动画、触发、定时)和 风格 观(颜色,宽度,填充,排版)。

步骤 1:启用工具提示扩展

从您的 WordPress 仪表板,转到 主插件 并打开 扩展 选项卡。工具提示位于 动态小部件 group。点击它的切换,这样它就变成紫色,然后点击 保存更改 在顶部等待绿色“设置保存成功”通知。

第 2 步:在 Elementor 中打开页面

导航到您要编辑的页面并单击 使用元素器编辑.

3步:选择任意元素

单击要添加工具提示的任何现有元素。这适用于标题、按钮、图像、图标、定价表、容器、列、部分以及任何 Elementor 小部件或主插件元素。工具提示部分显示在每个元素的高级选项卡上。

4步:转到高级选项卡并启用工具提示

选择元素后,单击 高级 "设置"面板中的选项卡。向下滚动直到找到 工具提示 MA徽章紫色的一节。展开后翻转 工具提示 切换到"是"。设置子选项卡首先打开。

5步:配置工具提示设置

"设置"子选项卡可让您控制工具提示的行为:

• 内容: tooltip文本。键入它,或者如果您想要一个起点,可以使用ai链接写入。
• 放置: 泡沫更喜欢元素的哪一侧:顶部(默认)、底部、左侧或右侧。
• 关注光标: 使工具提示跟踪鼠标而不是静坐对于光标下每个区域都需要自己标签的地图、图表和图表非常有用。
• 动画: 泡泡是如何进入的 七种选择:无、褪色、移位、移位、尺度、视角、填充效果。
• 触发: what打开工具提示默认悬停,或点击触摸屏友好持久提示。
• 持续时间和延迟: 以毫秒为单位的动画速度以及气泡在关闭前持续多长时间。
• X 和 Y 偏移量: 将气泡从默认位置推开特定数量的像素。
• 箭头和箭头类型: 将连接气泡的小指针添加到元素中,具有锐利或圆形样式选项。

第 6 步:调整工具提示的样式

切换到 风格 子选项卡,使气泡与您的设计相匹配,而不是看起来像浏览器默认值。

• 最大宽度: 限制气泡长得有多宽,如此长的文本包裹而不是在屏幕上拉伸。
• 文本、背景和箭头颜色: 全颜色控制,包括指针。
• 填充物、边框类型和边框半径: 泡沫的形状。
• 文本对齐、框阴影和版式: 用您自己的字体和深度完成外观。

7步:检查结果

Save和查看页面 悬停在元素上,工具提示随着你写的文字淡入淡出,使用你设置的动画,颜色和宽度 移动光标,延迟后关闭 重复页面上的其他元素。

有关完整的配置详细信息,请参阅 工具提示扩展文档 或者观看 视频教程.

每种方法的实际用例

何时使用工具提示元素

Tooltip Element 是一个专用的内容块, 当工具提示是部分的主要点时使用它:

• 功能展示页面。 将产品功能显示为带有工具提示描述的图标或图像。
• 术语表部分。 创建一个内联术语表,读者可以在术语上盘旋以查看定义。
• 投资组合项目。 将图像工具提示添加到显示项目详细信息的投资组合缩略图中。
• 团队页面。 将图标或照片与有关团队角色的工具提示详细信息放在一起。
• 教育内容。 让学生在不离开页面的情况下悬停在关键字上查看解释。

何时使用工具提示扩展

Tooltip 扩展程序会为页面上已经存在的元素添加上下文:

• 功能卡。 一句话额外的细节,没有加长卡片。
• 定价表。 解释一下"优先支持"实际上涵盖了什么,就在人们想知道的地方。看看我们的 定价表小部件 为更多。
• 按钮和图标。 仅标记图标控件,因此没有人猜测。
• 团队成员。 每张照片上都悬停着有趣的事实或角色注释。
• 技术术语。 术语的简短定义,比术语表页面便宜。

结合这两种方法

2个都可以在同一页面上使用,例如,使用工具提示元素构建功能比较部分,访问者将鼠标悬停在图标上以了解每个功能,然后使用底部CTA按钮上的工具提示扩展添加“免费14天试用,无需信用卡”工具提示。

2者之间没有冲突,它们服务于不同的目的,可以在任何页面上共存。

WordPress 的工具提示最佳实践

• 保持工具提示文本短。 1-2个句子为目标,如果你需要的更多,信息大概属于页面本身,而不是隐藏在工具提示中。
• 使用一致的定位。 择一个方向(顶部或底部最适合大多数情况),然后将其粘在您的网站上混合位置感觉随机。
• 不要过度使用工具提示。 如果页面上的每个元素都有工具提示,访问者不会费心在其中任何一个上徘徊。将它们用于真正增值的地方。
• 确保工具提示在移动设备上运行。 Hover 在触摸屏上不存在,Tooltip Extension 支持点击触发器,对移动用户来说效果更好,发布前先在手机上测试你的工具提示。
• 匹配您网站的设计。 自定义工具提示颜色、字体和边框以匹配您现有的主题。默认工具提示造型在抛光的站点上可能会显得格格不入。

工具提示元素与工具提示扩展:快速比较

这两个功能均可在 Elementor 的主插件。可以从免费版开始,升级到 专业人士 适用于高级造型选项和附加小部件。

常见问题

开始向 WordPress 网站添加工具提示

使用主插件,您有两种选择: 工具提示元素 用于创建带有文本、图像和图标触发器的专用工具提示内容 工具提示扩展 用于向页面上的任何现有 Elementor 元素添加工具提示。

这两种方法都是开箱即用的。您也可以查看 图片热点小部件 如果您需要固定在图像上特定位置的交互式工具提示。

下载 Elementor 的主插件 开始。