简单的图像网格使访问者无法按主题浏览。 可过滤图像库 小部件在 Elementor 的主插件 fixes that。it将类别过滤器,悬停覆盖层,色带和灯箱链接添加到标准图库,因此您无需编写任何代码即可构建可过滤产品组合或产品展示。
以下是每个选项卡和设置的工作原理,因此您可以设置一个 元素器可过滤画廊 不猜切换器的作用。
可过滤图像库小部件的作用 #
Widget 显示一个图片网格,并让访客按类别进行筛选,每个图库项目支持一个标题、字幕、色带、悬停图标和两个操作按钮,布局、间距、叠加动画和排版均由 Elementor 面板控制,因此同一个 widget 适用于作品集、电子商务 Lookbook、旅行图库和团队照片墙。
在开始之前 #
如何添加 Elementor 可过滤图库小部件 #
打开 Elementor 编辑器并搜索 可过滤图库 在元素面板中,或者向下滚动到主插件部分。将小部件拖到您的页面上。它加载了占位符图库项目,因此您可以在屏幕上立即使用某些内容。
在"内容选项卡中构建您的图库 #
的 内容 tab 是添加图像、分配过滤器类别以及设置色带和链接的地方。
画廊内容 #
的 画廊内容 section是一个中继器,每一项代表一张图像卡片,点击 添加项目 创建更多卡片,或使用重复和删除图标来管理它们。
每个项目都有相同的字段:
- 过滤器标签: 访客用来过滤的类别示例:技术、自然、建筑。
- 图片: 击打开媒体选择器,选择此卡的图片,可以一次选择几个。
- 标题: 图像下方或上方显示的主标题。
- 副标题: 标题下方有一条较小的线。
- 显示丝带?: 切换以添加角或内联徽章。
- 丝带: 徽章文本,例如流行或新。
- 弹出窗口还是链接?: 选择卡是打开灯箱弹出窗口还是链接到 URL。
- 按钮一 文本/网址: 第一个操作按钮的标签和目的地。
- 按钮二 文本/网址: 第二个操作按钮的标签和目的地。
图像分辨率和列 #
在中继器下方,设置 图像分辨率 WordPress 应该提供服务和数量 列。六列给你小缩略图;当你想要更大的卡片时,标题可读,下降到三。选择接近实际显示大小的分辨率,否则你将全尺寸图像加载到小卡片中,页面就会支付费用。
设置 #
的 设置 部分控制整个画廊行为。
- 显示过滤导航?: 在网格上方显示类别过滤器按钮。
- 显示 “全”过滤器选项卡: 添加"全部"按钮,以便访问者可以重置过滤器。
- 所有类别文本: 重置按钮的标签,通常是全部。
- 显示工具提示?: 在过滤器按钮上启用工具提示。
- 图像宽度比: 强制每个图像具有一致的比率。
- 排水沟: 网格项目之间的空间。
- 砖石: 将网格切换到砖石布局,以获得不均匀的图像高度。
- 悬停刻度: 将图像稍微放大悬停。
- 比例值: 图像缩放多少,例如 1.1。
- 倾斜效果: 添加跟随光标的 3D 倾斜。
覆盖设置 #
的 覆盖设置 部分决定访客悬停在物品上时出现的内容。
- 显示标题?: 在悬停上显示项目标题。
- 显示字幕?: 在悬停时显示字幕。
- 显示类别?: 显示过滤器类别标签。
- 悬停图标?: 添加出现在悬停上的图标,例如放大镜或链接符号。
- 覆盖类型: 择覆盖出现的时间,在悬停是最常见的。
- 标题: 切换图像下方的标题区域。
- 悬停方向: 实现定向悬停效果。
样式选项卡中的画廊样式 #
的 风格 tab覆盖卡片容器、图像、覆盖层、按钮。
项目风格 #
项目风格 controls 卡片包装器,这里设置填充、边距、边框类型、边框宽度、边框颜色、边框半径,半径小的薄边框是将卡片与浅色背景分离的快速方法。
图像风格 #
图像风格 调整图片本身及其悬停状态的风格。
- 图像风格: 选择默认或悬停覆盖外观。
- 悬停覆盖颜色: 悬停时覆盖图像的色调。
- 标题风格: 项目标题的颜色和排版。
- 字幕字幕样式: 字幕的颜色和排版。
- 图标样式: 悬停图标的图标大小和颜色。
叠加 #
的 叠加 section 挑选悬停动画,选项包括淡入、从左滑动、从上滑动、从下掩模、旋转入、放大入和放大,淡入是安全默认值;滑动和旋转变体会让更多人关注自身,你可能想要也可能不想要投资组合。
按钮一和二样式 #
分别设置操作按钮。每个按钮都有普通状态和悬停状态,并带有排版、填充、文本颜色、背景颜色、边框、边框半径和框阴影的控制。
查看实时结果 #
Publish 或 preview 页面, 查看最终图库 访客可以悬停在某个项目上查看覆盖层、标题和图标, 或者点击打开灯箱或链接, 如果启用过滤器导航, 也可以点击类别按钮, 只显示匹配的图像。
1件事要检查:如果过滤器按钮在实时页面上没有响应,但在编辑器中工作正常,那么你的缓存或优化插件很可能是推迟或组合图库的JavaScript。JS优化中排除Master Addons脚本,并清除缓存。
常见用例 #
- 作品集页面: 让客户通过品牌、网页设计或摄影进行过滤。
- 产品目录: 按类别、颜色或集合对项目进行分组。
- 旅行或房地产画廊: 按位置或属性类型过滤。
- 团队或活动专辑: 按部门或会议组织照片。
获得更好的可过滤画廊的提示 #
- 使用一致的图像大小。 它保持网格整洁,尤其是在砖石关闭时。
- 保持过滤器标签短。 一两个词最适合过滤栏。
- 启用图像宽高比 如果您的源图像具有不同的尺寸。
- 选择一个强悬停效果 不是堆叠比例、倾斜和繁忙的覆盖。
- 上传前压缩图像。 充满未压缩照片的图库是页面缓慢的最常见原因之一。
视频教程 #
如果您想查看可过滤图库小部件的运行情况,此视频将完成整个设置,从将图库项目添加到实时页面上过滤后的网格:
常见问题 #
如何在 Elementor 中创建可过滤图库?
Elementor 安装主插件, 添加可过滤图库小部件, 创建图库项目, 为每个项目分配一个过滤标签, 并在设置部分启用显示过滤导航, 访问者随后可以单击类别按钮过滤网格。
主插件可过滤图库是免费的吗?
Master Addons 的免费版本包含一大组小部件。检查 定价页面 看看filterable Gallery是免费计划还是需要Pro。
我可以在图库图像中添加灯箱吗?
是。为每个图库项目设置弹出窗口或链接选项到弹出窗口。然后访问者可以单击图像在灯箱中打开它。
小部件支持砖石布局吗?
是。在设置部分打开砌体切换,以高低不平的 Pinterest 风格布局显示图像。
我可以在画廊物品上添加丝带或徽章吗?
是在图库项目中打开显示色带,输入色带文字,如热门或特卖,色带出现在图像卡上。
包裹起来 #
主插件 可过滤图像库 widget 将静态图像网格变成基于类别的图库访问者实际上可以浏览,过滤导航、悬停覆盖、色带和灯箱支持都内置,因此大多数项目不需要单独的图库插件。
有关更多图像工具,请探索 高级图像小部件, 图片旋转木马、和 画廊滑块。您还可以阅读我们的综述 Elementor 可过滤图库插件 或者浏览完整内容 主插件小部件和扩展 收藏。
