如何在 Elementor 中添加悬停图像交换
您需要 Elementor 和 WordPress。org 的免费主插件。
- 检查高级图像是否在下面打开 主插件、小部件.
- 在 Elementor 编辑器中,搜索 高级图像 并将其拖到页面上。
- 如果需要,请选择主图像和图像链接。
- 打开 显示悬停图像 并选择第二张图像,理想情况下大小相同。
- Content 和设置部分添加色带、灯箱、倾斜或着色阴影,着色阴影不与悬停图像协同工作。
- "样式"选项卡中的"样式"正常状态和"悬停"状态。
每个设置都包含在 高级图像小部件设置.
悬停图像和智能效果
创建即时“前后”比较或简单的悬停显示。上传主图像,然后启用悬停图像上传第二张图片。当访客悬停时,图像无缝切换。添加一层精致的倾斜效果,这使得图像随着鼠标移动在其上方而轻微倾斜,增加微妙的 3D 感觉。为了获得额外的深度,启用彩色阴影在图像后面放置柔和的彩色阴影,使其弹出页面。
- 交互式比较:非常适合在产品前后或物业的日/夜视图中展示产品。
- 吸引倾斜效果:添加现代交互层,响应光标运动。
- 视觉深度:使用彩色阴影创建分离和聚焦,无需额外的设计元素。
可定制丝带和标签
用专业丝带让您的图像脱颖而出 启用丝带功能可添加像“NEW DESIGN,”“BESTESLER,”或“SOLD OUT。”这样的标签 从不同的丝带样式(如角或十字或简单)中进行选择,并设置位置(顶部/底部、左侧/右侧) 完全定制丝带的颜色、排版和厚度,以确保它与您的形象和品牌完美互补。
- 突出显示关键信息:直接在图像上即时传达状态、促销或类别。
- 灵活定位:将丝带放置在任何角落,以避免覆盖图片的重要部分。
- 完整的样式控制:将丝带的背景、文本颜色和字体与您网站的设计语言相匹配。
添加链接和灯箱集成
添加一个 图片链接 将访问者发送到产品或页面,或打开 在灯箱中打开 因此,单击显示图像的全尺寸。 图标按钮 option 在图片上加一个加号图标。打开 预加载图像 在图像加载时显示占位符:模糊预览、进度框或蓝色、浅色或深色旋转器。
- 链接到产品页面或打开全尺寸灯箱。
- 其列中的左、中或右对齐。
- 大型图像的加载放置器。
详细的造型和尺寸控制
获得对图像演示的完整设计控制。设置精确的最大宽度和最大高度。将边框半径单独应用到每个角落以获得独特的形状。将 Normal 和 Hover 状态与边框、背景和框阴影分开设置。这确保了您的图像在每个上下文和每次交互过程中看起来都很完美。
- 响应式大小:精确控制图像的尺寸,而不依赖于不可预测的自动大小。
- 自定义形状:创建圆形图像、圆形矩形或唯一的不对称边框。
- 特定于状态的造型:仅在悬停时添加边框或阴影,以视觉方式指示图像是交互式的。
高级图像常见问题
Hover Image 效果与移动触摸屏兼容吗?
是的,但工作方式有点不同。在触摸设备上,如果您没有启用灯箱,则第一次点击通常会触发悬停效果(交换图像)。但如果您启用灯箱,则灯箱将获得更多优先级,并且点击第一个图像将在灯箱中打开。
高级图像小部件免费吗?
是。Advanced Image 是免费的 Master Addons 插件的一部分,包含悬停图像、色带、灯箱、倾斜、彩色阴影和所有造型选项。
这与 Elementor 的基本图像小部件有何不同?
Elementor的基本小部件,您可以添加图像,链接,标题和一些简单的造型高级图像元素添加了一套专业功能:悬停图像交换,丝带/标签,倾斜效果,彩色阴影,单独的正常/悬停状态造型,以及更颗粒化的灯箱控制,它旨在创建更具吸引力的交互式图像演示。
我可以使用带状功能而不使用悬停图像或其他效果吗?
Absolutely!每个功能都是独立的,你可以只拥有一个带带的图像,或者只拥有一个倾斜效果的图像,你可以随心所欲地混合和匹配功能,只启用你特定设计目标所需的功能。
预加载图像设置是做什么的?
Preload 图像在图像加载时显示占位符,因此访客不会看到空白的空间,选择空白、模糊的占位符图像、正在进行的框动画或蓝色、浅色或深色的加载旋转器,对于大型图像最有用。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
