图像上的元素文本:25 种以上悬停效果(免费小部件教程)

Elementor中在图像上添加文本听起来像是两分钟的工作,然后你用默认的小部件尝试一下,最终会与负边距、绝对定位以及堆叠在移动设备上中断的背景图像上的标题小部件进行角力,有一种更快的免费 来自主插件的图像悬停效果小部件 30个悬停动画中的一个,其中8个是免费的,在任何图像之上都放一个标题和描述,并揭示它们。你永远不会触摸CSS。

在本教程中,您将从头开始设置 Elementor 文本图像部分:上传图像、从下拉中选择悬停效果、对覆盖进行样式设计,并决定有人单击时会发生什么。下面的每个屏幕截图都直接来自 Elementor 编辑器,因此您可以点击点击。

本指南涵盖的内容:

• 为什么图像上的文本需要小部件
• 图像悬停效果小部件一目了然
• 如何在图像上添加文本(一步一步)
• 叠层造型:颜色、不透明度、形状
• 标题和描述的版式
• 单击操作:打开弹出窗口或链接图像
• 保持文本可读性的设计技巧
• 用于图像效果的其他主插件小部件
• 免费与专业人士:您实际需要什么
• 常见问题

为什么图像上的文本需要小部件(不是 CSS 黑客)

Elementor 自己的文档建议 图像上文本的两种解决方法:将图像设置为剖面背景,并在内部掉落一个标题小部件,或者向上推一个带有负边距的标题。两者都适用于静态标题。既不给您悬停显示,也不给您动画覆盖,也不给您点击操作,并且负边距技巧往往会在平板电脑和移动断点处崩溃。

专用小部件在一个地方解决所有这些问题:

• 内置悬停显示。 图像保持干净,直到访客悬停,然后标题和描述就会动画化。
• 一个设置面板。 图像、文本、叠加颜色和排版都生活在一个小部件中,而不是三个堆叠的小部件中。
• 默认情况下响应。 覆盖层与图像一起缩放,因此在较小的屏幕上没有任何东西会偏离位置。
• 单击操作。 整个图像可以打开链接或弹出窗口。投资组合网格和服务卡取决于此。

这就是为什么图像上的文本布局随处可见:显示项目名称的投资组合图块、在悬停上显示简介的团队卡片、博客类别横幅以及标题会使设计变得混乱的画廊网格。

图像悬停一目了然地影响小部件

图像悬停效果 在免费版本的 Master Addons 中发货,a 80多个小部件和扩展的库 30,000多个活跃的wordpress网站上运行, 以下是您在这一个小部件中得到的内容:

• 30个命名悬停效果,每个都有一个不同的揭示动画。八个是免费的(莉莉,萨迪,罗克西,布巴,罗密欧,莱拉,蜂蜜和奥斯卡),而奇科,马利,鲁比和其他19个需要Pro
• HTML标签(H1到H6)可选的标题字段,因此您的叠加文本可以保持SEO正确
• 短支撑线的描述字段
• 覆盖背景颜色、图像不透明度和悬停不透明度控制
• 边框半径、填充 (Pro)、框阴影以及标题和描述的单独排版
• 三个点击行为:无、关注链接或打开弹出窗口(弹出内容需要 Pro)

小部件、八个免费效果、文本字段和链接点击所有无需 Pro 许可证的工作,如果您想要完整的设置参考, 图像悬停效果文档 涵盖每个控件。

如何在 Elementor 中在图像上添加文本(一步一步)

1步:安装主插件

在您的 WordPress 仪表板中,转到 插件 > 添加新内容 并搜索“master Addons”。安装并激活 wordpress。org 的免费插件。如果有什么事情绊倒你, 安装指南 穿过它。您也需要 Elementor active,但免费版本就足够了。

第 2 步:将图像悬停效果小部件拖到您的页面中

Elementor打开任何页面,在小部件面板中搜索“图像悬停效果”, 您会将其在高级图像、图像热点和图像比较等其他带有MA标记的小部件中拖动到您的部分。

第 3 步:上传您的图像

内容选项卡以打开 效果与图像 节。点击 上传图像 并从您的媒体库中选择一些东西。两个设置位于其正下方:

• 图像大小 控制渲染的尺寸。默认适用于大多数布局。
• 图像分辨率 pick wordpress生成的大小加载哪些。“满”给出了最清晰的结果。在有八个或十个这样的图块的页面上, 下降到“大”代替;没有人看到网格大小和页面加载明显更快的差异。

第 4 步:选择悬停效果

这是有趣的部分。打开 悬停效果 dropdown,你就得到了命名效果的完整列表:莉莉,萨迪,罗克西,布巴,罗密欧,莱拉,哈尼,奥斯卡,马利,鲁比,米洛,德克斯特,莎拉,佐伊,奇科,朱莉娅,歌利亚,赫拉,温斯顿,赛琳娜,特里,菲比,阿波罗,基拉,史蒂夫,摩西,爵士,明,莱克西,杜克前八个是免费的,其余的在免费插件中带有pro标签。

每个名字都是叠加动画和文本揭示的不同组合,Sadie 从底部向上滑动一个渐变,Marley 将标题用下划线放入。Chico 将图像稍微缩小,并用细边框框住文本。编辑器预览实时更新,因此单击几个并在图像上悬停以进行测试。这里是 Chico(专业效果)中悬停:

快速分组可让您点击所有这些内容:

• 微妙的褪色: Lily,萨迪,莱拉,佐伊。投资组合的良好默认选择。
• 定向幻灯片: 亲爱的,奥斯卡,罗密欧,莎拉。文字从边缘推入。
• 缩放和缩放: 奇科、布巴、米洛、朱莉娅。图像移动,吸引了人们的目光。
• 玩耍又大胆: Marley, Ruby, 德克斯特, 歌利亚, 阿波罗。更强的运动, 最适合创意网站。

第 5 步:添加您的标题

打开 标题 节。键入标题并选择一个 HTML 标签。这比看起来更重要:如果图像位于服务网格中,H3通常比默认的H2更适合您的页面层次结构。搜索引擎像页面上的任何其他标题一样读取此标签。

第 6 步:编写说明

的 描述 section 添加了 hover 上标题下出现的较小行,保持在一两个短句上,长段落在较小的图像上被切断,并击败干净覆盖的点。

叠加的造型:颜色、不透明度和形状

切换到 风格 选项卡。 图像 panel 控制覆盖层的外观:

• 背景颜色 调色悬停上出现的覆盖层。从您的品牌调色板中选择颜色;像#DD5555这样的 HEXA 值,并减少 alpha,使照片在下面可见。
• 图像不透明度 设置静止状态,并且 悬停不透明度 set 覆盖出现时图像暗淡多少,两者之间的差距(比如说 0.5 休息,0.7 悬停)让显露感觉刻意。
• 图像过滤器 並 悬停图像过滤器 为前后情绪添加灰度或模糊等 CSS 过滤器。

在那之下, 边界半径 整块重塑。匹配值为您提供柔和的圆角;不对称值(100 个左上角、0 个右上角、100 个右下角、0 个左下角)创建您在许多现代代理网站上看到的叶子形状。

标题和描述的版式

仍在样式选项卡中, 标题 並 描述 panels各有自己的颜色、排版和间距控件,字体族、大小、重量、变换、行高和字母间距都在这里,加上一个文字阴影选项,用于描述如果您的图像是浅色,请将标题颜色切换为深色值,这样文本在两种状态下都保持可读性。

1条值得保留的可读性规则:旨在使文本和它后面的任何东西形成清晰的对比 如果照片很忙,则依靠上一步的叠加颜色和不透明度,而不是仅用字体权重来对抗它。

单击操作:打开弹出窗口或链接整个图像

返回内容选项卡, 链接还是弹出窗口? control决定点击做什么,三个选项坐落在小图标切换后面:无,弹出和外部链接。

弹出窗口 (Pro)打开一个覆盖窗口,其中包含您选择的任何内容选择一个内容类型,要么直接在所见即所得编辑器中编写内容,要么加载已保存的Elementor模板,投资组合网格会不断使用此功能:每个图块无需离开页面即可打开案例研究。

链接 将整个图像变成可点击的卡片。将 URL 粘贴到 Link URL 字段中,整个悬停区域指向那里,这会击败移动设备上轻点目标的小文本链接。

如果您想要超出此小部件的更多弹出模式(退出意图、滚动触发器、定时弹出窗口),请参阅如何操作 在 Elementor 中免费添加弹出窗口.

完成的结果

Hit预览并悬停在您的图像上, 覆盖层淡入, 标题和描述随您选择的效果而显示, 光标发出单击操作信号:

总构建时间约为五分钟。由于每个选择都生活在小部件设置中,因此您可以在下个月交换效果或重新着色覆盖层,而无需重建任何内容。

保持文本图像可读的设计技巧

• 每个网格一个效果。 6个图块组合,给每个图块同样的悬停效果,混合效果读作偶然。
• 首先对比一下。 白色文本需要深色覆盖层;深色文本需要浅色图像或浅色覆盖色调。
• 简短的描述。 10个字或更少,叠加的是预告片,不是段落。
• 触摸测试。 在手机上,第一个点击会显示覆盖层,第二个点击会启动点击操作,因此请确保显示的状态在小屏幕上看起来完整。
• 匹配您的边框半径 到页面的其余部分。尖角卡片旁边的一个100px的叶子形状看起来很糟糕。

对于更广泛的运动设计指南,我们的指南是 元素动画效果 悬停、滚动和入口动画时的封面各自赢得了自己的位置,并且 Master Addons 动画功能 page 显示插件还能动画化什么。

用于图像效果的其他主插件小部件

Image Hover Effects 是文本显示的正确工具, 但一些兄弟小部件涵盖了相邻的用例:

• 高级图像 3D倾斜,丝带和徽章添加到单个图像中,没有覆盖文本。
• 的 翻转框小部件 将卡片翻转到完全设计的背面,当您需要处于显示状态的按钮或图标时效果更好。
• 图片热点 将交互式工具提示标记固定到一张图像上的特定点,非常适合产品呼叫。
• 的 图片旋转木马 当一个悬停图块不够时,处理多图像滑块。
• 图像比较 在两个版本的镜头上放置可拖动的滑块前后。

免费 vs Pro:您真正需要什么?

1个基本文字over图片部分,免费插件就够了,包含小部件、8个悬停效果(莉莉、萨迪、罗克西、布巴、罗密欧、蕾拉、哈妮和奥斯卡)、标题和描述字段、图片过滤器和链接点击Pro解锁其他22个效果、弹出内容以及填充和圆角控件。 硕士插件专业版 widget Builder那样添加更宽的高级小部件集、模板套件和附加功能,因此,一旦您正在构建整个站点而不是一个部分,就值得一看,如果您尝试并改变主意,则有14天的退款保证。

喜欢观看吗?以下是《元素》中的快速攻略:

常见问题

包裹起来

Elementor 文本 over 图像部分需要五分钟, 右侧小部件: 掉入图像悬停效果, 上传您的照片, 按名称选择效果, 并对覆盖层进行样式以匹配您的品牌。定位和响应行为已经为您处理, 免费版本涵盖了本指南中的基础知识。

获取免费插件,浏览其余部分 小部件和扩展库并且如果你被困住了 小部件文档 绘制出每个设置。

相关阅读: 元素动画效果, 元素器翻转框小部件、和 在 Elementor 中免费添加弹出窗口.