画廊滑块将大型预览图像与一组可点击的缩略图配对,以便访问者可以直接跳转到他们想要的照片,而不是一次点击一张滑块。 画廊滑块 小部件在 Elementor 的主插件 几分钟内构建此布局。您选择图像,选择缩略图网格或旋转木马,并从 Elementor 面板中对每个部分进行样式设计。
本指南将浏览每个环境,以便您可以构建一个 元素画廊滑块 不猜每个控件的作用。
画廊滑块小部件的作用 #
Widget显示一个大型预览幻灯片旁边的网格或转盘的缩略图,单击缩略图或箭头会改变预览,标题,自动播放,无限循环,淡入淡出或幻灯片过渡,以及预览和缩略图的单独悬停状态都内置在适合投资组合,产品照片,房地产列表,活动相册,或任何页面访问者需要快速浏览一组图像。
在开始之前 #
如何添加 Elementor Gallery 滑块小部件 #
打开 Elementor 编辑器并搜索 画廊滑块 elements面板中,或者向下滚动到主插件部分,每个主插件小部件都带有一个小ma徽章,当你安装了几个插件包时,这会帮助将小部件拖入你的部分。
在内容选项卡中添加图像 #
画廊 #
小部件开始为空。在 内容 选项卡,打开 画廊 "部分 ", 然后单击下面的"加号"按钮 添加图像.
WordPress 媒体窗口打开 创建画廊 screen。slider 中选择你想要的图片,然后点击通过插入图库,在这里花一分钟为每个图片填写 alt 文本和说明文字,说明文字字段比看起来更重要:小部件稍后可以在预览图片下打印,如果前端缺少说明文字,则该屏幕是第一个检查的地方。
Gallery插入后,编辑器马上显示完整的布局:左边的大预览图带有导航箭头,右边是缩略图网格,所选图像也出现在Gallery部分内部,您可以在其中重新排序或删除它们。
缩略图 #
的 缩略图 部分控制预览旁边的小图像。
- 缩略图: 完全显示或隐藏缩略图区域。
- 旋转木马/网格: 在静态网格和滚动转盘之间切换。
- 图像分辨率: wordpress的大小用于缩略图缩略图(150 x 150)保持页面光线。
- 列: 1 ~ 12列进行格子选择,从2 ~ 3列移动,格子由高窄变为更紧密的块。
- 订购: 保留默认顺序或更改图像的排序方式。
- 标题: 在缩略图上显示标题,或将其保留为"无"。
切换到 旋转木马 mode 用一条缩略图替换网格, 并添加自己的设置组: 方向 (水平或垂直), 每个视图的幻灯片,一个 箭 用一个切换 箭头位置 下拉,加上 自动播放, 无限循环、和 方向 只为缩略图条进行控制。网格对于十几个或更少的图像效果更好;过去,旋转木马节省了大量的垂直空间。
预览 #
的 预览 section 管理大幻灯片及其行为方式。
- 图像分辨率: size 供大图使用, 饱满看起来最好, 但重量最大, 所以压缩您的原件。
- 链接: URL 或媒体文件中链接预览图像, 或将其保留为无。
- 标题: 在预览下方显示图像标题。
- 方向: 从左向右或从右向左滑动。
- 无限循环: 返回上一张幻灯片之后的第一张幻灯片。
- 自动高度: 让滑块根据每个图像调整其高度。对于混合比率很方便,尽管随着幻灯片的变化,页面会稍微移动。
- 自动播放: 自动提前幻灯片。单击编辑图标进行调整。
- 效果: 选择幻灯片或淡入淡出过渡。
- 速(毫秒): transition 持续多久。默认值为 1000。
- 箭头: 显示或隐藏导航箭头,然后选择它们 位置的,比如左上。
"样式"选项卡中设计滑块 #
布局 #
的 布局 部分决定预览相对于缩略图的位置。 预览位置 提供顶部、右侧、底部和左侧。使用顶部或底部,缩略图在预览下方或上方排列,并且 a 水平对齐 控制显示为 旋转木马宽度 滑块。用左或右,你得到一个 预览宽度 (%) 而是滑块。
- 叠加: 选择垂直堆叠布局的时间,例如平板电脑和移动设备。
- 预览宽度 (%): 预览需要多少水平空间。 60% 到 70% 之间的某个地方很好地坐落在三柱网格旁边。
- 间距: 预览和缩略图之间的间隙。
预览 #
的风格选项卡 预览 部分设计了大幻灯片容器。
- 自定义高度: 超越自动高度。
- 背景颜色: 填充图像后面的区域。
- 边框类型: 默认、无、实、双、点、虚或凹槽,活动时具有宽度和颜色控制。
- 边框半径和框阴影: 绕过角落并将幻灯片从页面上移开。
- 箭头: 一个专门的团体 尺寸, 填充, 边界半径, 过渡的,而且分开 默认, 悬停、和 残疾 states,每个都有自己的颜色和背景颜色。
预览字幕 #
如果您在"内容"选项卡中启用标题,则此部分将定位并调整它们。 垂直对齐 将标题放置在幻灯片的顶部、中间或底部,以及 水平对齐 offer 左中右 合理化 你也得 版式, 填充, 保证金, 边框类型、和 边界半径 控制。
预览悬停效果 #
预览悬停效果 当访客悬停在幻灯片上时,将标题动画化。选择一个 效果,设置 过渡然后风格 默认 並 悬停 具有颜色、背景类型、不透明度和文本阴影的状态。
缩略图 #
的风格选项卡 缩略图 部分处理小图像: 垂直对齐 为整个街区, 水平间距 並 垂直间距 缩略图之间,加上 边框类型 並 边界半径.
缩略图悬停效果 #
本节将缩略图分为三个状态: 默认, 悬停、和 活跃 (与当前幻灯片匹配的缩略图)。 图像 组封面背景颜色, 不透明度, 规模, 盒子阴影、和 CSS 过滤器.开箱即用,不活动的缩略图位于 0.65 的不透明度,因此活跃的缩略图脱颖而出。 叠加 group 添加了颜色或渐变层 混合模式, 保证金, 不透明度和边境管制。
还有一个 图案 style 选项卡底部的带有现成样式预设的部分。同一部分出现在许多主插件小部件中。
查看实时结果 #
单击眼睛图标预览页面 访问者可以看到大预览旁边的缩略图网格,单击缩略图可以立即交换预览,箭头按顺序穿过幻灯片,标题跟随每个图像。
常见用例 #
- 作品集展示: 一张大型英雄图像,只需点击一下即可完成该项目的其余部分。
- 产品页面: 经典的商店布局配有缩放预览和缩略图选择器。
- 房地产列表: 让买家在不离开页面的情况下翻阅房间。
- 活动或婚礼专辑: 突出显示一张照片,同时保持全套照片可见。
更好的画廊滑块的提示 #
- 匹配图像宽高比。 Auto Height可以防止裁剪惊喜,但一致的比率看起来更干净,并阻止布局跳跃。
- 服务于正确的决议。 完整预览,图格缩略图 (150 x 150)。上传前压缩;请参阅我们的指南 最佳 WordPress 图像优化器插件.
- 在媒体库中写标题 在插入画廊之前,每张幻灯片都准备好了。
- 保持自动播放速度合理。 给访问者时间实际查看每张图像。
- 用活动状态。 非活动缩略图上的默认 0.65 不透明度已经引导眼睛;活动缩略图上的边框或轻微刻度使其更加清晰。
视频教程 #
更喜欢观看设置?该视频涵盖了整个过程,从将小部件拖入到实时页面上完成的滑块:
常见问题 #
如何在 Elementor 中创建图库滑块?
Elementor 安装主插件, 将图库滑块小部件拖到您的页面, 然后点击图库部分中的添加图片, 在媒体窗口中选择您的图片, 插入图库, 带有预览和缩略图的滑块立即出现。
我可以将缩略图显示为旋转木马而不是网格吗?
是。在内容选项卡的缩略图部分,将旋转木马/网格控件切换到旋转木马。然后您将获得缩略图条的方向、每个视图的幻灯片、箭头、自动播放和无限循环设置。
我可以更改预览图像显示的位置吗?
是在"布局下的"样式选项卡中,将"预览位置设置为顶部、右侧、底部或左侧。通过左侧或右侧布局,您可以控制预览宽度;通过顶部或底部,您可以控制转盘宽度和对齐方式。
Gallery Slider 支持自动播放吗?
是。在内容选项卡的预览部分打开自动播放,您可以将其与无限循环结合,选择幻灯片或淡入淡出效果,并以毫秒为单位设置转换速度。
如何在滑块上显示图像说明文字?
WordPress媒体库中为您的图像添加字幕,然后在预览部分设置从标题到标题样式,并将文本从预览标题部分定位在样式选项卡中。
包裹起来 #
主插件 画廊滑块 小部件涵盖了整个预览加缩略图模式:网格或旋转木马缩略图、任何一侧的预览、标题和每个状态的样式,所有这些都来自一个面板,没有自定义代码。
有关更多显示图像的方法,请检查 图片旋转木马, 可过滤图库、和 高级图像 docs,或者在我们的中比较选项 元素图像转盘指南。要查看插件中的其他所有内容,请浏览 主插件小部件和扩展 收藏或 定价计划.
