高级图像小部件设置

Elementor 默认图像小部件显示图片并将其链接到某个地方。免费 高级图像小部件 在 Elementor 的主插件 does more:它会切换到悬停的第二张图像,在顶部掉落角带,在灯箱中打开,并添加3D倾斜或彩色阴影,所有这些都不会触摸CSS。

Elementor面板上设置主图像、可选的悬停图像、色带和少量效果,这使其非常适合产品拍摄、产品组合缩略图或任何需要标签或一点运动的图像,本指南会浏览每个选项卡和设置。

喜欢先看?本简短教程从头到尾浏览高级图像小部件:

高级图像小部件的作用 #

它的核心显示一张图像,但它在上面分层额外。当光标位于其上方时,悬停图像会互换,一条丝带会呼出像 “NEW,” 这样的标签,设置选项卡会添加一个灯箱、倾斜效果和彩色阴影。一切都是从面板配置的,因此相同的图像可以比普通图像做很多事情。

该小部件有四个选项卡:图像和色带的内容、灯箱和倾斜等行为的设置、尺寸和颜色的样式以及常用元素间隔和可见性选项的高级选项卡。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• 要显示一张图像,如果您想要悬停交换,则需要显示第二张图像。

如何添加高级图像小部件 #

在 Elementor 编辑器中,打开 元素 面板和搜索 高级图像的,或者滚动到主插件部分,拖到你的页面上,它从占位符开始,所以第一步是选择图像。

设置图像 #

在 内容 选项卡, 图像 section 保存基础,点击图片框从媒体库中挑选一个,设置 图像分辨率 WordPress 应该服务,并添加一个 图片链接 如果图片应该链接到某个地方。

添加悬停图像 #

的 悬停图像 section 是小部件赢得其名称的地方。打开 显示悬停图像 he挑选第二张图片,在live页面上,小部件显示第一张图片,并在有人悬停时交叉淡入淡出到第二张,这对于产品正面和背面或前后拍摄来说很方便。

添加丝带 #

的 丝带 section 在图片上方添加一个角落横幅。打开 显示丝带的,设置文本,然后选择它的外观。

• 文: 该标签,如 NEW 或 SALE。
• 丝带风格: 简单、角落或十字架。
• 丝带位置: 将其放置在任何角落,例如右上角或左下角。
• 丝带厚度和宽度: 调整带子的大小以适应文本。

设置:灯箱、倾斜和阴影 #

的 设置 tab是行为所处的位置,这些是将小部件与普通图像区分开来的额外内容。

• 在灯箱中打开: 单击图像以在弹出窗口中打开其全尺寸。打开它会在图像上添加一个图标按钮选项(如加号图标)。
• 对齐: 其块内的左侧、中心或右侧。
• 预加载图像: 在图像加载时显示占位符,例如模糊预览、进度框动画或加载旋转器。
• 倾斜效果: 添加跟随光标进行一点运动的 3D 倾斜。
• 彩色阴影: drops 从图像自身颜色着色的阴影。注意,在悬停图像处于活动状态时,它不可用。

风格图像和丝带 #

的 风格 选项卡处理尺寸和颜色。 图像 部分设置图片本身的外观。

• 最大宽度和最大高度: 盖上图像大小。
• 边界半径: 绕过角落。
• 正常状态和悬停状态: 分别设置盒子阴影、边框和背景,用于休息和悬停。

的 丝带 style 部分控制横幅的外观:背景颜色、文字颜色、排版、阴影、位置偏移和边框半径。

页面上的结果 #

发布或预览图像渲染,将丝带固定到位,效果实时:悬停以交换图像,悬停以获得倾斜,或单击以打开灯箱,具体取决于您打开的内容。

常见用例 #

• 产品镜头 从前到后或交替角度进行悬停交换。
• 投资组合缩略图 打开灯箱中的全尺寸。
• 促销图片 角落里有一条新丝带或 SALE 丝带。
• 特色图形 具有微妙的移动倾斜。
• 英雄形象 使用彩色阴影进行深度。

使用高级图像小部件的提示 #

• 使用匹配的尺寸进行悬停交换。 相同大小的图像可以防止交叉淡入淡出。
• 选择正确的图像分辨率。 将全尺寸文件放入小插槽会减慢页面速度;中等或大尺寸通常就足够了。
• 保持丝带文字短。 一个词可以干净地适应角带。
• 使用悬停交换时跳过彩色阴影。 两者不一起运行,因此每张图像选择一张。
• 轻松倾斜。 一点动作吸引眼球;感觉太花哨了。

常见问题 #

包裹起来 #

Advanced Image 小部件拍摄单个图片,并添加通常采用自定义代码的触摸:悬停交换、色带、灯箱、倾斜和彩色阴影。设置图像,打开您想要的效果,并从面板中对结果进行样式设置。更多图像工具请参阅 图像悬停效果 並 图片旋转木马 小部件,浏览完整内容 主插件小部件和扩展,并看到 高级图像小部件页面 为演示。