可过滤图像库

简单的图像网格使访问者无法按主题浏览。 可过滤图像库 小部件在 Elementor 的主插件 fixes that。it将类别过滤器,悬停覆盖层,色带和灯箱链接添加到标准图库,因此您无需编写任何代码即可构建可过滤产品组合或产品展示。

以下是每个选项卡和设置的工作原理,因此您可以设置一个 元素器可过滤画廊 不猜切换器的作用。

此页面是设置参考。有关实时示例和小部件可以执行操作的概述,请访问 Elementor 可过滤图库小部件 页。

可过滤图像库小部件的作用 #

Widget 显示一个图片网格,并让访客按类别进行筛选,每个图库项目支持一个标题、字幕、色带、悬停图标和两个操作按钮,布局、间距、叠加动画和排版均由 Elementor 面板控制,因此同一个 widget 适用于作品集、电子商务 Lookbook、旅行图库和团队照片墙。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。需要帮助吗?看到 安装指南.
• 图像分为您希望访问者过滤的类别。

如何添加 Elementor 可过滤图库小部件 #

打开 Elementor 编辑器并搜索 可过滤图库 在元素面板中,或者向下滚动到主插件部分。将小部件拖到您的页面上。它加载了占位符图库项目,因此您可以在屏幕上立即使用某些内容。

在"内容选项卡中构建您的图库 #

的 内容 tab 是添加图像、分配过滤器类别以及设置色带和链接的地方。

画廊内容 #

的 画廊内容 section是一个中继器,每一项代表一张图像卡片,点击 添加项目 创建更多卡片,或使用重复和删除图标来管理它们。

每个项目都有相同的字段:

• 过滤器标签: 访客用来过滤的类别示例:技术、自然、建筑。
• 图片: 击打开媒体选择器,选择此卡的图片,可以一次选择几个。
• 标题: 图像下方或上方显示的主标题。
• 副标题: 标题下方有一条较小的线。
• 显示丝带?: 切换以添加角或内联徽章。
• 丝带: 徽章文本,例如流行或新。
• 弹出窗口还是链接?: 选择卡是打开灯箱弹出窗口还是链接到 URL。
• 按钮一 文本/网址: 第一个操作按钮的标签和目的地。
• 按钮二 文本/网址: 第二个操作按钮的标签和目的地。

图像分辨率和列 #

在中继器下方,设置 图像分辨率 WordPress 应该提供服务和数量 列。六列给你小缩略图;当你想要更大的卡片时,标题可读,下降到三。选择接近实际显示大小的分辨率,否则你将全尺寸图像加载到小卡片中,页面就会支付费用。

设置 #

的 设置 部分控制整个画廊行为。

• 显示过滤导航?: 在网格上方显示类别过滤器按钮。
• 显示 “全”过滤器选项卡: 添加"全部"按钮,以便访问者可以重置过滤器。
• 所有类别文本: 重置按钮的标签,通常是全部。
• 显示工具提示?: 在过滤器按钮上启用工具提示。
• 图像宽度比: 强制每个图像具有一致的比率。
• 排水沟: 网格项目之间的空间。
• 砖石: 将网格切换到砖石布局,以获得不均匀的图像高度。
• 悬停刻度: 将图像稍微放大悬停。
• 比例值: 图像缩放多少,例如 1.1。
• 倾斜效果: 添加跟随光标的 3D 倾斜。

覆盖设置 #

的 覆盖设置 部分决定访客悬停在物品上时出现的内容。

• 显示标题?: 在悬停上显示项目标题。
• 显示字幕?: 在悬停时显示字幕。
• 显示类别?: 显示过滤器类别标签。
• 悬停图标?: 添加出现在悬停上的图标,例如放大镜或链接符号。
• 覆盖类型: 择覆盖出现的时间,在悬停是最常见的。
• 标题: 切换图像下方的标题区域。
• 悬停方向: 实现定向悬停效果。

样式选项卡中的画廊样式 #

的 风格 tab覆盖卡片容器、图像、覆盖层、按钮。

项目风格 #

项目风格 controls 卡片包装器,这里设置填充、边距、边框类型、边框宽度、边框颜色、边框半径,半径小的薄边框是将卡片与浅色背景分离的快速方法。

图像风格 #

图像风格 调整图片本身及其悬停状态的风格。

• 图像风格: 选择默认或悬停覆盖外观。
• 悬停覆盖颜色: 悬停时覆盖图像的色调。
• 标题风格: 项目标题的颜色和排版。
• 字幕字幕样式: 字幕的颜色和排版。
• 图标样式: 悬停图标的图标大小和颜色。

叠加 #

的 叠加 section 挑选悬停动画,选项包括淡入、从左滑动、从上滑动、从下掩模、旋转入、放大入和放大,淡入是安全默认值;滑动和旋转变体会让更多人关注自身,你可能想要也可能不想要投资组合。

按钮一和二样式 #

分别设置操作按钮。每个按钮都有普通状态和悬停状态,并带有排版、填充、文本颜色、背景颜色、边框、边框半径和框阴影的控制。

查看实时结果 #

Publish 或 preview 页面, 查看最终图库 访客可以悬停在某个项目上查看覆盖层、标题和图标, 或者点击打开灯箱或链接, 如果启用过滤器导航, 也可以点击类别按钮, 只显示匹配的图像。

1件事要检查:如果过滤器按钮在实时页面上没有响应,但在编辑器中工作正常,那么你的缓存或优化插件很可能是推迟或组合图库的JavaScript。JS优化中排除Master Addons脚本,并清除缓存。

常见用例 #

• 作品集页面: 让客户通过品牌、网页设计或摄影进行过滤。
• 产品目录: 按类别、颜色或集合对项目进行分组。
• 旅行或房地产画廊: 按位置或属性类型过滤。
• 团队或活动专辑: 按部门或会议组织照片。

获得更好的可过滤画廊的提示 #

• 使用一致的图像大小。 它保持网格整洁,尤其是在砖石关闭时。
• 保持过滤器标签短。 一两个词最适合过滤栏。
• 启用图像宽高比 如果您的源图像具有不同的尺寸。
• 选择一个强悬停效果 不是堆叠比例、倾斜和繁忙的覆盖。
• 上传前压缩图像。 充满未压缩照片的图库是页面缓慢的最常见原因之一。

视频教程 #

如果您想查看可过滤图库小部件的运行情况,此视频将完成整个设置,从将图库项目添加到实时页面上过滤后的网格:

常见问题 #

包裹起来 #

主插件 可过滤图像库 widget 将静态图像网格变成基于类别的图库访问者实际上可以浏览,过滤导航、悬停覆盖、色带和灯箱支持都内置了,因此您不需要单独的一个图库插件,大多数项目都可以看到它在工作 可过滤图像库小部件页面.

有关更多图像工具,请探索 高级图像小部件, 图片旋转木马、和 画廊滑块。您还可以阅读我们的综述 Elementor 可过滤图库插件 或者浏览完整内容 主插件小部件和扩展 收藏。