悬停图像和智能效果
创建即时“前后”比较或简单的悬停显示。上传主图像,然后启用悬停图像上传第二张图片。当访客悬停时,图像无缝切换。添加一层精致的倾斜效果,这使得图像随着鼠标移动在其上方而轻微倾斜,增加微妙的 3D 感觉。为了获得额外的深度,启用彩色阴影在图像后面放置柔和的彩色阴影,使其弹出页面。
- 交互式比较:非常适合在产品前后或物业的日/夜视图中展示产品。
- 吸引倾斜效果:添加现代交互层,响应光标运动。
- 视觉深度:使用彩色阴影创建分离和聚焦,无需额外的设计元素。
可定制丝带和标签
用专业丝带让您的图像脱颖而出 启用丝带功能可添加像“NEW DESIGN,”“BESTESLER,”或“SOLD OUT。”这样的标签 从不同的丝带样式(如角或十字或简单)中进行选择,并设置位置(顶部/底部、左侧/右侧) 完全定制丝带的颜色、排版和厚度,以确保它与您的形象和品牌完美互补。
- 突出显示关键信息:直接在图像上即时传达状态、促销或类别。
- 灵活定位:将丝带放置在任何角落,以避免覆盖图片的重要部分。
- 完整的样式控制:将丝带的背景、文本颜色和字体与您网站的设计语言相匹配。
添加链接和灯箱集成
每个图像都可以是网关。将图像直接链接到 URL,例如产品页面或定价计划。或者,启用 Lightbox 可以让观众在漂亮的全屏弹出窗口中聚焦图像。从不同的 Lightbox 图标中进行选择(例如加号按钮)并控制其对齐性能,请使用预加载图像选项以确保快速加载,特别是悬停效果。
- 直接呼叫操作:将图像链接到重要页面,将视觉兴趣转化为直接流量。
- 增强的画廊体验:让用户使用优雅的灯箱详细查看图像。
- 优化性能:预加载悬停图像以防止第一次交互时出现延迟或“闪烁”。
详细的造型和尺寸控制
获得对图像演示的完整设计控制。设置精确的最大宽度和最大高度。将边框半径单独应用到每个角落以获得独特的形状。将 Normal 和 Hover 状态与边框、背景和框阴影分开设置。这确保了您的图像在每个上下文和每次交互过程中看起来都很完美。
- 响应式大小:精确控制图像的尺寸,而不依赖于不可预测的自动大小。
- 自定义形状:创建圆形图像、圆形矩形或唯一的不对称边框。
- 特定于状态的造型:仅在悬停时添加边框或阴影,以视觉方式指示图像是交互式的。
高级图像常见问题
Hover Image 效果与移动触摸屏兼容吗?
是的,但工作方式有点不同。在触摸设备上,如果您没有启用灯箱,则第一次点击通常会触发悬停效果(交换图像)。但如果您启用灯箱,则灯箱将获得更多优先级,并且点击第一个图像将在灯箱中打开。
使用倾斜效果和彩色阴影会减慢我的页面速度吗?
CSS这些效果,一般来说都是轻量级的,但是,在单个页面上非常大量的图像上使用它们(比如在密集的网格和100 + 张图像中),可能有助于在用户设备上更重的关键图像上选择性地使用它们,以获得最佳的性能和影响。
这与 Elementor 的基本图像小部件有何不同?
Elementor的基本小部件,您可以添加图像,链接,标题和一些简单的造型高级图像元素添加了一套专业功能:悬停图像交换,丝带/标签,倾斜效果,彩色阴影,单独的正常/悬停状态造型,以及更颗粒化的灯箱控制,它旨在创建更具吸引力的交互式图像演示。
我可以使用带状功能而不使用悬停图像或其他效果吗?
Absolutely!每个功能都是独立的,你可以只拥有一个带带的图像,或者只拥有一个倾斜效果的图像,你可以随心所欲地混合和匹配功能,只启用你特定设计目标所需的功能。
的'预加载图像'设置有何最佳用途?
用「悬停影像」功能时启用「预载影像」(设定为「开启」),这会迫使浏览器在页面加载时,即使是隐藏的,也要加载第二张影像,这样可以防止用户第一次悬停在影像上时出现明显的延迟或空白闪烁,确保用户体验流畅。
