如何在 Elementor 中添加带有缩略图的图库滑块
该小部件需要 Master Addons Pro,并且图像来自您的媒体库。
- 主 Addons Pro 处于活动状态,请检查一下 画廊滑块 在主插件小部件设置中打开。
- 使用 Elementor 编辑您的页面,搜索 画廊滑块 并拖进去。
- 在 画廊,点击 添加图像 并选择您的照片。如果您想显示媒体窗口中的标题。
- 在 缩略图的,选择 网格 和列计数,或者 旋转木马 具有水平或垂直方向。
- 在 预览、设置效果、自动播放、箭头以及图像是否打开灯箱。
- 在"样式"选项卡中,打开 布局,挑选 预览位置 和宽度,然后更新页面。
如需更长的演练,包括视频库案例,请阅读我们的内容 画廊滑块指南.
分割布局:在任何一侧预览
在样式选项卡中, 布局 设置 预览位置 到顶部、右侧、底部或左侧,默认使用左侧。使用左侧或右侧,您设置 预览宽度 (%)默认情况下为 70,使用 Top 或 Bottom 可以设置转盘宽度和对齐方式。 堆叠起来 在平板电脑和移动设备或仅移动设备上切换到垂直布局。
- 缩略图网格: 1至12列,横纵间距。
- 缩略图旋转木马: 水平或垂直,每次视图 1 至 12 张幻灯片,有自己的箭头、自动播放、循环和方向。
- 间距: 预览和缩略图之间的间隙,默认情况下为 24。
预览和缩略图的造型
的 预览 样式部分具有自定义高度、图像拟合(封面或包含)、背景颜色、边框、边框半径和框阴影,以及箭头尺寸、填充和默认、悬停和禁用颜色。 缩略图悬停效果 在默认、悬停和活动状态下为每个缩略图设置背景颜色、不透明度(默认为 0.65)、比例和 CSS 过滤器,并添加覆盖层。
- 活动缩略图: 为当前图像提供边框或完全不透明,以便访问者查看它们在哪里。
- 标题: 预览和缩略图的单独标题样式,包括垂直和水平位置。
- 覆盖: 缩略图上的颜色或渐变层具有混合模式。
幻灯片效果、肯·伯恩斯和标题悬停效果
效果 设置预览如何移动到下一张图像:幻灯片、淡入淡出、立方体、翻转或覆盖流 速(毫秒) 1000 默认情况下。当效果淡化时, a 肯·伯恩斯 option 添加了慢速缩放,其中包含比例、转换原点(默认、随机或自定义锚点)、持续时间和缓和。 预览悬停效果 当访客悬停时,会为字幕制作动画,效果包括淡入、从上到左。
- 五种效果: 幻灯片、淡入淡出、立方体、翻转和覆盖流。
- 肯·伯恩斯: 仅适用于褪色效果。
- 标题悬停: 将标题淡入或淡出,或从侧面滑入。
自动播放、箭头、链接和灯箱
预览有 自动播放 (默认情况下, 每5000毫秒), 暂停悬停, 禁用交互, 无限循环 並 自动高度. 箭 可以坐在七个位置。 链接到 使用可选的灯箱或自定义 URL 打开媒体文件。 订购 可以随机洗牌图像。
- 图像分辨率: 预览版(默认情况下为完整)和缩略图(默认情况下为缩略图)的单独大小。
- 标题: 媒体库中的标题、标题或描述,单独设置预览和缩略图。
Elementor Pro Media 旋转木马与 Master Addons 画廊滑块
Elementor Pro 的媒体转盘有一个带有缩略图的幻灯片皮肤(在带有 Pro 的 Elementor 4.2。4 上选中)。免费 Elementor 中的图像转盘没有缩略图。
画廊滑块的常见问题
图库滑块小部件免费吗?
No。 Gallery Slider 是 Master Addons Pro 的一部分。免费的 图片旋转木马 widget 覆盖简单的图像滑块,没有缩略图面板。
我可以让缩略图显示在网格中而不是单行中吗?
是在缩略图部分设置旋转木马/网格到网格,并选择1到12列,对于单个滚动行或垂直条形切换到旋转木马。
Ken Burns 效果是否应用于所有图像?
Effect 设置为淡入淡出时才适用,开启 Ken Burns,然后设置比例、转换原点、持续时间和缓和,缩略图不受影响。
许多高分辨率图像如何执行此操作?
可以使用较小的文件。当预览比 1024px 窄时,将预览图像分辨率设置为大而不是全,将缩略图保留为缩略图大小,并在上传前压缩图像。
我可以将此用于在线商店的产品图片库吗?
Shi,对于自己手挑的图片,小部件不会自行拉取WooCommerce产品图片,所以自己把照片加到图库中。
"Stack on"功能在移动设备上会发生什么?
当并排布局垂直时,请堆叠在设备上:在默认的 Tablet & Mobile 上,或在 Mobile Only 上。然后,预览和缩略图会堆叠,以便两者都保持足够大,可以在触摸屏上使用。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
