网站中的搜索功能有助于提升内容可访问性。Kadence Blocks 插件中的 Search (Adv) 高级搜索块,支持插入至页面、文章、小工具区域、页眉模块等位置,并具备较强的自定义能力。
Search (Adv) 区块功能介绍
Search (Adv) 区块适用于 Gutenberg 编辑器环境,兼容 Kadence 高级页眉、侧边栏等区域。
常见使用场景包括:
页面顶部的搜索输入框
产品页面的关键词检索
折叠菜单中的模态搜索弹窗
搜索样式可切换为标准或模态样式,在不同布局中具有更高的灵活性。
搜索样式设置
标准搜索样式
搜索框始终可见,适合放置在页面主区域或导航栏
模态搜索样式
点击按钮后弹出搜索窗口,适合在空间有限的位置使用
两种样式下均可启用搜索按钮,支持自定义按钮文字与样式。
可设置搜索范围是否包含商品内容,适合 WooCommerce 网站限定搜索类型。
按钮与图标自定义
提交按钮为高级按钮区块
支持更换图标(内置图标或自定义 SVG)
可调整颜色、边框、圆角、字体等外观样式
支持独立为正常与悬停状态设置颜色和尺寸
输入框样式设置
输入框支持字体、颜色、边距等多种视觉控制选项:
设置最大和最小宽度
自定义占位符文本颜色与大小
调整字体族、字号、行高、字距
添加图标,设定图标大小与线条宽度
设置圆角与内边距数值,优化排版效果
模态样式设置
启用模态搜索后,搜索框将隐藏在按钮之后,点击后弹出显示:
背景可设置为纯色或渐变色
支持关闭图标样式调整
控制模态窗口的边距与最大尺寸
这种样式适合在移动端页面中展示精简界面。
进阶选项
搜索块支持以下附加设置:
添加上下边距
指定锚点 ID,便于跳转定位
填写 ARIA 标签,用于提升无障碍浏览支持
添加 CSS 类名,便于样式拓展或 JS 操作
保存当前设置为默认,方便未来快速复用
总结
Kadence Blocks 的 Search (Adv) 模块提供了更灵活的搜索构建方式,可满足页面排版、美观展示与功能组合等多方面需求。借助标准输入样式与模态弹窗形式,不同终端下的访问方式得以兼容。搭配主题与高级布局工具使用,有助于构建结构清晰的内容入口。
如需进一步细化搜索范围、图标样式或视觉布局,可结合网站实际设计进行调配。