请参阅正在运行的过滤器选项卡
This grid是widget本身,而不是截图,四个类别和一个All标签页坐在其上方,点击一个类别隐藏了每一个不带有该标签的项目,这里的每张卡片还显示了一个标题和一个从自己的字段中拉出的字幕。
- 所有列表
- 公寓
- 别墅
- 联排别墅
- 办公室
海湾街阁楼
2张床 · 1个浴缸 · 940平方英尺—2,450美元/月
8B 码头点
1张床 · 1个浴缸 · 680平方英尺—1890美元/月
里奇韦别墅
4张床 · 3个浴缸 · 游泳池—$1.24M
榆树上的温室
3张床 · 2个浴缸 · 2,100平方英尺—98万美元
布里克兰街 12 号
3张床 · 2个浴缸 · 车库—$720,000
市法院 4
2张床 · 2个浴缸 · 围墙花园— $645,000
3 楼海港工程
4,200平方英尺 · 38张办公桌—6,400美元/月
码头工作室
1,800平方英尺 · 16张办公桌—2,950美元/月您可以使用可过滤图库小部件做什么
完全控制的类别过滤
启用过滤栏,访问者可以看到图库上方的类别按钮:“All”、“品牌”、“摄影”、“网页设计”,无论您设置什么标签。重命名 “All”选项卡,将栏左、中、右对齐,并将活动选项卡与单独的颜色、背景和边框对齐,以便人们始终知道他们选择了什么。
- Filter Label 字段将每个图像分配给一个类别。多个类别的逗号分隔。
- 主动状态造型使所选选项卡从其他选项卡中脱颖而出。
- 过滤栏上的版式和间距是完全可定制的。
画廊布局和 3D 效果
选择列数,启用 Masonry 进行 Pinterest 风格的交错网格,并通过 Gutter 设置控制间距。然后对交互效果进行分层:悬停比例使项目在鼠标悬停上放大,倾斜效果添加了 3D 视角,跟随光标并可选眩光。正是这种细节使画廊感觉得到考虑而不是默认。
- 砖石布局可实现动态、不均匀的图像高度。
- 3D倾斜,可调节视角,速度和眩光强度。
- 具有可配置过渡速度的悬停比例。
- 响应式列在移动设备上干净地堆叠。
样式文本覆盖和双 CTA
Gallery item都可以显示标题、副标题、类别标签,每个标签都有独立的排版和颜色,在悬停时,一个叠加颜色会淡入,出现两个按钮:“Details”和“Demo”(或者你写的任何文本),两个按钮都有完整的普通和悬停状态控制,用于背景、文本颜色、边框、半径和阴影。
- 单独的标题样式、字幕样式和类别样式部分。
- 每件商品有两个按钮,每个按钮独立设计。
- 悬停图标尺寸和颜色以匹配您的品牌。
- 图像覆盖颜色,过渡平滑。
- 想要在单个图像上添加更多悬停动画吗?尝试一下 图像悬停效果 小部件。
Elementor 中构建一个可过滤的投资组合
Elementor自己的Portfolio小部件需要Pro。这个网格运行在Master Addons上,因此过滤栏工作在一个免费的Elementor安装上。每个项目都带有项目标题,类别或年份的字幕,以及两个按钮字段,这就是投资组合卡可以同时指向实时站点和案例研究的按钮。下面的按钮进入演示页面。
Elementor 中的可过滤图库,不带 Pro
Elementor 的免费 Image Gallery 是一个带有灯箱的网格,整个控制列表是图像、列、间隙、标题、链接和灯箱,因此其中没有过滤栏,也没有砖石。Elementor 在 Pro 列表中保留了更丰富的 Gallery 小部件,这是许可证的来源。此小部件在免费的 Elementor 安装上添加了过滤栏。
| 特点 | 元素图像库(免费) | 主插件可过滤图像库 |
|---|---|---|
| 类别过滤器选项卡 | 否 | 是的,来自每个项目的过滤标签 |
| “全”选项卡 | 否 | 是的,有你自己的标签 |
| 砌体 | 否 | 是的 |
| 列 | 是的 | 是的,1 到 6 |
| 灯箱 | 是的 | 是的 |
| 标题 | 的附件标题 | 您为每个项目输入的标题、副标题和类别 |
| 项目上的按钮 | 否 | 两个,每个都有自己的 URL |
| 丝带徽章 | 否 | 是的 |
| 3D倾斜悬停 | 否 | 是的,带着眩光 |
| 需要 Elementor Pro | 否 | 否 |
Widget 执行和不执行的操作
Widget面板里勾选了下面所有内容,后半部分和前半部分一样重要:如果需要分页或者搜索框,这是错误的小部件,现在最好知道。
| 设置 | 支持 |
|---|---|
| 类别过滤器选项卡 | 是的,每个项目一个过滤标签,逗号分隔多个 |
| “全”选项卡 | 是的,您可以将其重命名 |
| 砌体 | 是的 |
| 图像纵横比锁定 | 是的 |
| 列 | 1到6,每个屏幕尺寸都有一个值 |
| 灯箱弹出窗口 | 是的 |
| 链接而不是弹出窗口 | 是的 |
| 每件物品的按钮 | 两个,每个都有自己的 URL |
| 丝带徽章 | 是的,12 个预设加上一个折扣字段 |
| 标题、副标题和类别标签 | 是的,每个都有自己的排版 |
| 项目的工具提示 | 是的 |
| 叠加 | 在悬停时,总是、永远、永远或隐藏在悬停时 |
| 3D倾斜与眩光 | 是的 |
| 参赛动画 | 是的 |
| 加载更多按钮 | 否 |
| 分页 | 否 |
| 搜索框 | 否 |
| 视频项目 | 否 |
| 以帖子或产品为来源 | 不,画廊是您填写的中继器 |
可过滤图库示例和用例
- 作品集:让参观者按项目类型、品牌、网络、摄影、插图进行过滤。
- 产品目录:“All”、“新来”、“Sale”、“Best Sellers”的类别选项卡。
- 餐厅菜单:通过"“Starters”、“Mains”、“Desserts”、“Drinks”过滤。
- 房地产列表:“公寓”、“房屋”、“商业”、“土地”。
- 婚纱摄影:“仪式”、“接待”、“肖像”、“详情”。
- 代理案例研究:按客户行业或服务类型过滤。
Elementor 中如何创建可过滤的图库
- 掉小部件。 Elementor 中,在主插件下搜索“可过滤图像库”并将其拖入您的部分。
- 添加画廊项目。 击 + 每张图片添加项目上传图片,写标题和副标题,设置过滤标签(类别名称),需要时添加按钮文本和链接。
- 启用过滤栏。 打开"显示过滤器导航",设置列数,选择砖石或常规网格,并调整排水沟间距。启用悬停比例和倾斜效果以实现交互性。
- 风格一切。 Style标签中,设计过滤栏、项目卡、文本叠加、按钮和悬停状态。完成后发布。
可过滤图像库的常见问题
什么是可过滤图像库小部件?
Elementor独立小部件,它将任何图像网格变成一个经过类别过滤的图库,访问者点击过滤选项卡仅显示相关项目,每个项目可以显示一个标题、字幕和两个风格化的号召性用语按钮。
可过滤图像库小部件免费吗?
是的。它附带免费的 Master Addons 插件,因此您无需 Elementor Pro 或 Master Addons Pro 许可证即可构建可过滤图库。您可以根据需要添加任意数量的图库项目。
如何将项目分配给过滤类别?
在"图库内容部分中的每个项目,找到"过滤标签字段,输入类别名称(“技术”、“品牌”、“摄影”),在一个过滤按钮下所有具有相同标签组的逗号分离,以将一个项目分配给多个类别。
Elementor 有可过滤的画廊吗?
Elementor 免费的图片库是一个普通网格,因此它没有过滤栏,Gallery 小部件 Elementor 与 Pro 一起发货是付费路线,此小部件在免费的 Elementor 安装上添加了类别选项卡。
我可以使用这个小部件构建投资组合吗?
是。每项都采用项目标题、类别或年份的副标题以及两个带有自己网址的按钮,因此一张卡片可以指向实时网站和案例研究。
访客可以在灯箱中打开图像吗?
是每个按钮都可以链接到灯箱弹出窗口、外部 URL 或您网站上的页面。在图库内容部分设置每个项目的链接目的地。
画廊在移动设备上响应灵敏吗?
Yes。Columns 自动堆叠,四列在较小的屏幕上变成两列或一列。过滤按钮包裹以适合。使用 Elementor 的响应模式专门调整 Gutter 和字体大小以适应移动设备。
这与普通图像旋转木马或画廊滑块有何不同?
画廊有更多负载还是分页?
No。repeater 中的每个项目都加载页面,因此 40 个图像组合一次性将所有 40 个。将非常大的集合分割在页面上,或者保持图像文件的亮度。
为什么我的过滤选项卡没有显示?
3个要检查的东西: 显示过滤器导航在设置选项卡中打开,每个项目都有一个过滤器标签,并且页面缓存在您编辑后被清除,一个带有空标签的项目永远不会加入某个类别。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
