如何在 Elementor 中免费添加搜索栏
您需要 Elementor 和 WordPress。org 的免费主插件。
- 检查搜索是否已打开 主插件、小部件.
- 在 Elementor 编辑器中,搜索主插件 搜索 widget,然后将其拖入您的标头、侧边栏或部分。
- 选择类型:搜索栏的表格或图标的图标弹出窗口。
- Form,选择一个图标或文本提交按钮,对于图标弹出窗口,设置占位符和描述。
- "样式"选项卡中的表单、输入、按钮和图标进行样式。
- 发布、运行测试搜索并检查主题的搜索结果页面。
每个设置都包含在 搜索小部件设置 指南。
搜索栏或图标弹出窗口
套 类型 到表单或图标弹出窗口。与表单, 提交按钮类型 是图标或按钮,带有自己的按钮文本。通过图标弹出窗口,小部件仅显示图标,单击它会在页面上打开一个大搜索字段。 弹出设置 让您设置输入文本占位符和描述行(例如 “Hit 输入搜索或单击 X 关闭”)。
- 从元素图标库中选择任何图标。
- WordPress上搜索,因此结果使用您主题的搜索模板。
- 在侧边栏或 404 页面中使用表单,并在拥挤的标头中使用弹出窗口。
表单、输入和按钮造型
的 形式 style 版块设置背景颜色、宽度、边距、填充、边框和边框半径,再加上排版和文本颜色 输入选项涵盖宽度、边距、填充、输入背景颜色、边框和半径。的 按钮 部分设置提交控件的背景颜色、颜色、填充、页边距和排版。
- 带有彩色按钮的圆形药丸搜索栏。
- 黑暗英雄部分的无边框输入。
- 没有单独的焦点或悬停颜色设置,因此如果您需要,请添加自定义 CSS。
搜索图标样式
的 图标 样式部分设置图标大小、图标颜色、边框、图标填充和图标页边距。这会为 Icon Popup 的触发图标和 Form 模式下的图标按钮进行样式设计。
- 将图标颜色与标头中的菜单链接相匹配。
- 添加圆形图标按钮的边框和填充。
- 保持弹出式描述短,以便在手机上读取良好。
Elementor Pro 搜索与主插件搜索
Elementor Pro 有自己的搜索小部件,并附有实时结果,以下是免费的 Master Addons 小部件的比较方法。
| 特点 | Elementor 专业搜索 | 主插件搜索 |
|---|---|---|
| 价格 | 需要 Elementor Pro | 免费的 |
| 布局 | 使用可选的提交按钮搜索输入 | 表单或打开全屏搜索的图标弹出窗口 |
| 输入时实时结果 | 是的,使用循环模板 | 否 |
| 查询控制 | 按术语、作者和日期包含或排除 | 标准 WordPress 搜索 |
| 结果页 | Live结果面板,或者搜索结果页面 | Your 主题的搜索结果页面 |
| 造型 | 正常和悬停颜色,过渡持续时间 | 表单、输入、按钮和图标颜色、边框和间距 |
Elementor Pro 是更好的选择,如果您需要实时结果或控制哪些帖子被搜索。主插件搜索是一种在免费 Elementor 上添加样式搜索栏或标头弹出的免费方式。对于滑出标头面板,请参阅 画布外内容 (专业版)。
搜索常见问题
主插件搜索小部件免费吗?
是的。搜索是免费 Master Addons 插件的一部分,可与免费 Elementor 一起使用,因此您不需要 Elementor Pro 来获取样式搜索栏。
它会显示您输入时的实时搜索结果吗?
No。它提交到标准的WordPress搜索,结果显示在您主题的搜索结果模板上,对于实时结果,Elementor Pro的搜索小部件是选项。
我可以只搜索产品或一种帖子类型吗?
Not from widget 设置,它使用默认的 WordPress 搜索,它涵盖了公共帖子和页面,您的主题、WooCommerce 或搜索插件决定结果包括哪些内容。
我可以使用侧边栏中的表单和标头中的图标弹出窗口吗?
是的,您可以在多个设置不同的地方添加小部件。测试您使用多个图标弹出窗口的页面,因为每个弹出窗口都需要自己的触发器才能打开。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
