图库滑块设置

画廊滑块将大型预览图像与一组可点击的缩略图配对,以便访问者可以直接跳转到他们想要的照片,而不是一次点击一张滑块。 画廊滑块小部件 在 硕士插件专业版 几分钟内构建此布局。您选择图像,选择缩略图网格或旋转木马,并从 Elementor 面板中对每个部分进行样式设计。

本指南将浏览每个环境,以便您可以构建一个 元素画廊滑块 不猜每个控件的作用。

画廊滑块小部件的作用 #

Widget显示一个大型预览幻灯片旁边的网格或转盘的缩略图,单击缩略图或箭头会改变预览,标题,自动播放,无限循环,淡入淡出或幻灯片过渡,以及预览和缩略图的单独悬停状态都内置在适合投资组合,产品照片,房地产列表,活动相册,或任何页面访问者需要快速浏览一组图像。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。需要帮助吗?看到 安装指南.
• 甲 硕士插件专业版 许可证,因为 Gallery Slider 是 Pro 小部件。
• 一组图像上传到您的媒体库,理想情况下具有相似的宽高比。

如何添加 Elementor Gallery 滑块小部件 #

打开 Elementor 编辑器并搜索 画廊滑块 elements面板中,或者向下滚动到主插件部分,每个主插件小部件都带有一个小ma徽章,当你安装了几个插件包时,这会帮助将小部件拖入你的部分。

在内容选项卡中添加图像 #

画廊 #

小部件开始为空。在 内容 选项卡,打开 画廊 "部分 ", 然后单击下面的"加号"按钮 添加图像.

WordPress 媒体窗口打开 创建画廊 screen。slider 中选择你想要的图片,然后点击通过插入图库,在这里花一分钟为每个图片填写 alt 文本和说明文字,说明文字字段比看起来更重要:小部件稍后可以在预览图片下打印,如果前端缺少说明文字,则该屏幕是第一个检查的地方。

Gallery插入后,编辑器马上显示完整的布局:左边的大预览图带有导航箭头,右边是缩略图网格,所选图像也出现在Gallery部分内部,您可以在其中重新排序或删除它们。

缩略图 #

的 缩略图 部分控制预览旁边的小图像。

• 缩略图: 完全显示或隐藏缩略图区域。
• 旋转木马/网格: 在静态网格和滚动转盘之间切换。
• 图像分辨率: wordpress的大小用于缩略图缩略图(150 x 150)保持页面光线。
• 列: 1 ~ 12列进行格子选择,从2 ~ 3列移动,格子由高窄变为更紧密的块。
• 订购: 保留默认顺序或随机洗牌图像。
• 标题: 在缩略图上显示标题,或将其保留为"无"。

切换到 旋转木马 mode 用一条缩略图替换网格, 并添加自己的设置组: 方向 (水平或垂直), 每个视图的幻灯片,一个 箭 用一个切换 箭头位置 下拉,加上 自动播放, 无限循环、和 方向 只为缩略图条进行控制。网格对于十几个或更少的图像效果更好;过去,旋转木马节省了大量的垂直空间。

预览 #

的 预览 section 管理大幻灯片及其行为方式。

• 图像分辨率: size 供大图使用, 饱满看起来最好, 但重量最大, 所以压缩您的原件。
• 链接: URL 或媒体文件链接预览图片, 或将其保持为无。链接到媒体文件可让您打开灯箱。
• 标题: 在预览下方显示图像标题。
• 方向: 从左向右或从右向左滑动。
• 无限循环: 返回上一张幻灯片之后的第一张幻灯片。
• 自动高度: 让滑块根据每个图像调整其高度。对于混合比率很方便,尽管随着幻灯片的变化,页面会稍微移动。
• 自动播放: 自动提前幻灯片。单击编辑图标进行调整。
• 效果: 幻灯片、淡入淡出、立方体、翻转或覆盖流。随着淡入淡出,a 肯·伯恩斯 option 添加了具有比例、变换原点、持续时间和缓和的慢速缩放。
• 速(毫秒): transition 持续多久。默认值为 1000。
• 箭头: 显示或隐藏导航箭头,然后选择它们 位置的,比如左上。

"样式"选项卡中设计滑块 #

布局 #

的 布局 部分决定预览相对于缩略图的位置。 预览位置 提供顶部、右侧、底部和左侧。使用顶部或底部,缩略图在预览下方或上方排列,并且 a 水平对齐 控制显示为 旋转木马宽度 滑块。用左或右,你得到一个 预览宽度 (%) 而是滑块。

• 叠加: 选择垂直堆叠布局的时间,例如平板电脑和移动设备。
• 预览宽度 (%): 预览需要多少水平空间。 60% 到 70% 之间的某个地方很好地坐落在三柱网格旁边。
• 间距: 预览和缩略图之间的间隙。

预览 #

的风格选项卡 预览 部分设计了大幻灯片容器。

• 自定义高度: 超越自动高度。
• 背景颜色: 填充图像后面的区域。
• 边框类型: 默认、无、实、双、点、虚或凹槽,活动时具有宽度和颜色控制。
• 边框半径和框阴影: 绕过角落并将幻灯片从页面上移开。
• 箭头: 一个专门的团体 尺寸, 填充, 边界半径, 过渡的,而且分开 默认, 悬停、和 残疾 states,每个都有自己的颜色和背景颜色。

预览字幕 #

如果您在"内容"选项卡中启用标题,则此部分将定位并调整它们。 垂直对齐 将标题放置在幻灯片的顶部、中间或底部,以及 水平对齐 offer 左中右 合理化 你也得 版式, 填充, 保证金, 边框类型、和 边界半径 控制。

预览悬停效果 #

预览悬停效果 当访客悬停在幻灯片上时,将标题动画化。选择一个 效果,设置 过渡然后风格 默认 並 悬停 具有颜色、背景类型、不透明度和文本阴影的状态。

缩略图 #

的风格选项卡 缩略图 部分处理小图像: 垂直对齐 为整个街区, 水平间距 並 垂直间距 缩略图之间,加上 边框类型 並 边界半径.

缩略图悬停效果 #

本节将缩略图分为三个状态: 默认, 悬停、和 活跃 (与当前幻灯片匹配的缩略图)。 图像 组封面背景颜色, 不透明度, 规模, 盒子阴影、和 CSS 过滤器.开箱即用,不活动的缩略图位于 0.65 的不透明度,因此活跃的缩略图脱颖而出。 叠加 group 添加了颜色或渐变层 混合模式, 保证金, 不透明度和边境管制。

还有一个 图案 style 选项卡底部的带有现成样式预设的部分。同一部分出现在许多主插件小部件中。

查看实时结果 #

单击眼睛图标预览页面 访问者可以看到大预览旁边的缩略图网格,单击缩略图可以立即交换预览,箭头按顺序穿过幻灯片,标题跟随每个图像。

常见用例 #

• 作品集展示: 一张大型英雄图像,只需点击一下即可完成该项目的其余部分。
• 产品页面: 经典的商店布局配有缩放预览和缩略图选择器。
• 房地产列表: 让买家在不离开页面的情况下翻阅房间。
• 活动或婚礼专辑: 突出显示一张照片,同时保持全套照片可见。

更好的画廊滑块的提示 #

• 匹配图像宽高比。 Auto Height可以防止裁剪惊喜,但一致的比率看起来更干净,并阻止布局跳跃。
• 服务于正确的决议。 完整预览,图格缩略图 (150 x 150)。上传前压缩;请参阅我们的指南 最佳 WordPress 图像优化器插件.
• 在媒体库中写标题 在插入画廊之前,每张幻灯片都准备好了。
• 保持自动播放速度合理。 给访问者时间实际查看每张图像。
• 用活动状态。 非活动缩略图上的默认 0.65 不透明度已经引导眼睛;活动缩略图上的边框或轻微刻度使其更加清晰。

视频教程 #

更喜欢观看设置?该视频涵盖了整个过程,从将小部件拖入到实时页面上完成的滑块:

常见问题 #

包裹起来 #

主插件 画廊滑块 小部件 (Pro) 涵盖了整个预览加缩略图模式:网格或旋转木马缩略图、任何一侧的预览、标题和每个状态的样式,所有这些都来自一个面板,没有自定义代码。

有关更多显示图像的方法,请检查 图片旋转木马, 可过滤图库、和 高级图像 docs,或者在我们的中比较选项 元素图像转盘指南。要查看插件中的其他所有内容,请浏览 主插件小部件和扩展 收藏或 定价计划.