您可以使用可过滤图库小部件做什么
完全控制的类别过滤
启用过滤栏,访问者可以看到图库上方的类别按钮:“All”、“品牌”、“摄影”、“网页设计”,无论您设置什么标签。重命名 “All”选项卡,将栏左、中、右对齐,并将活动选项卡与单独的颜色、背景和边框对齐,以便人们始终知道他们选择了什么。
- Filter Label 字段将每个图像分配给一个类别。多个类别的逗号分隔。
- 主动状态造型使所选选项卡从其他选项卡中脱颖而出。
- 过滤栏上的版式和间距是完全可定制的。
画廊布局和 3D 效果
选择列数,启用 Masonry 进行 Pinterest 风格的交错网格,并通过 Gutter 设置控制间距。然后对交互效果进行分层:悬停比例使项目在鼠标悬停上放大,倾斜效果添加了 3D 视角,跟随光标并可选眩光。正是这种细节使画廊感觉得到考虑而不是默认。
- 砖石布局可实现动态、不均匀的图像高度。
- 3D倾斜,可调节视角,速度和眩光强度。
- 具有可配置过渡速度的悬停比例。
- 响应式列在移动设备上干净地堆叠。
样式文本覆盖和双 CTA
Gallery item都可以显示标题、副标题、类别标签,每个标签都有独立的排版和颜色,在悬停时,一个叠加颜色会淡入,出现两个按钮:“Details”和“Demo”(或者你写的任何文本),两个按钮都有完整的普通和悬停状态控制,用于背景、文本颜色、边框、半径和阴影。
- 单独的标题样式、字幕样式和类别样式部分。
- 每件商品有两个按钮,每个按钮独立设计。
- 悬停图标尺寸和颜色以匹配您的品牌。
- 图像覆盖颜色,过渡平滑。
- 想要在单个图像上添加更多悬停动画吗?尝试一下 图像悬停效果 小部件。
可过滤图库示例和用例
- 作品集:让参观者按项目类型、品牌、网络、摄影、插图进行过滤。
- 产品目录:“All”、“新来”、“Sale”、“Best Sellers”的类别选项卡。
- 餐厅菜单:通过"“Starters”、“Mains”、“Desserts”、“Drinks”过滤。
- 房地产列表:“公寓”、“房屋”、“商业”、“土地”。
- 婚纱摄影:“仪式”、“接待”、“肖像”、“详情”。
- 代理案例研究:按客户行业或服务类型过滤。
Elementor 中如何创建可过滤的图库
- 掉小部件。 Elementor 中,在主插件下搜索“可过滤图像库”并将其拖入您的部分。
- 添加画廊项目。 击 + 每张图片添加项目上传图片,写标题和副标题,设置过滤标签(类别名称),需要时添加按钮文本和链接。
- 启用过滤栏。 打开"显示过滤器导航",设置列数,选择砖石或常规网格,并调整排水沟间距。启用悬停比例和倾斜效果以实现交互性。
- 风格一切。 Style标签中,设计过滤栏、项目卡、文本叠加、按钮和悬停状态。完成后发布。
可过滤图像库的常见问题
什么是可过滤图像库小部件?
Elementor独立小部件,它将任何图像网格变成一个经过类别过滤的图库,访问者点击过滤选项卡仅显示相关项目,每个项目可以显示一个标题、字幕和两个风格化的号召性用语按钮。
可过滤图像库小部件免费吗?
是的。它附带免费的 Master Addons 插件,因此您无需 Elementor Pro 或 Master Addons Pro 许可证即可构建可过滤图库。您可以根据需要添加任意数量的图库项目。
如何将项目分配给过滤类别?
在"图库内容部分中的每个项目,找到"过滤标签字段,输入类别名称(“技术”、“品牌”、“摄影”),在一个过滤按钮下所有具有相同标签组的逗号分离,以将一个项目分配给多个类别。
访客可以在灯箱中打开图像吗?
是每个按钮都可以链接到灯箱弹出窗口、外部 URL 或您网站上的页面。在图库内容部分设置每个项目的链接目的地。
画廊在移动设备上响应灵敏吗?
Yes。Columns 自动堆叠,四列在较小的屏幕上变成两列或一列。过滤按钮包裹以适合。使用 Elementor 的响应模式专门调整 Gutter 和字体大小以适应移动设备。
