Elementor自己的搜索小部件需要Elementor Pro,因此大多数网站最终都会卡住主题提供的任何搜索框。免费的 搜索小部件 在 Elementor 的主插件 fills that gap。drop it anywhere on a page or in a header, then pick a classic search form or an icon popup that expands on click。input and button are styled from Elementor panel, no CSS involved。
以下是这两种布局的方式 元素搜索小部件 工作、逐个设置,以及访问者在实时页面上实际看到的内容。
搜索小部件的作用 #
WordPress 搜索表单作为 Elementor 元素输出小部件,访问者键入查询,回车或单击提交控件,并登陆您网站的标准搜索结果页面,因此结果来自 WordPress 本身,通过主题渲染表单的外观,您可以选择:带有图标或文本按钮的完整输入字段,或扩展为弹出搜索屏幕的孤独搜索图标。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。需要帮助吗?看到 安装指南.
- Master Addons 仪表板中启用的搜索元素,如果您之前已关闭小部件。
如何添加 Elementor 搜索小部件 #
打开 Elementor 编辑器并搜索 搜索 elements面板中,或者滚动到master Addons部分(查找MA徽章)。将小部件拖到您的页面上。立即出现一个工作搜索表单,其中有一个放大镜图标作为提交控件。
置内容选项卡 #
的 内容 tab 包含一个主要决策以及从中得出的几个字段。 类型 两种布局之间的下拉开关: 形式 並 图标弹出窗口.
类型:形式 #
Form是经典的布局,一个输入字段,右边有一个提交控件。 提交按钮类型 dropdown 决定该控件是什么:
- 图标: 显示图标按钮。从下面的库中选择图标;默认的放大镜几乎适用于所有设计。
- 按钮: 显示文本按钮。 A. 按钮文本 字段出现在您键入标签的位置,例如搜索或点击输入。
类型:图标弹出窗口 #
Icon Popup 只渲染一个搜索图标,当访问者点击它时,搜索屏幕会在页面上打开,输入字段很大,按钮关闭,这是头部和导航栏中使用的布局,其中一个完整的搜索字段会挤满菜单。
选择图标弹出窗口显示 弹出设置 有两个字段的部分:
- 输入文本: popup 搜索字段内的占位符,“默认搜索...”。
- 描述: 字段下方的帮助行,例如 “Hit 输入搜索或单击 X 关闭。”
"样式"选项卡中的"样式"小部件 #
的 风格 tab 有两个部分: 形式 对于输入区域和 按钮 为提交控制。
形式 #
表单部分对包装纸和输入字段进行样式:
- 背景: 形式后面的一种颜色。
- 宽度: form 的宽度(以像素为单位)。当小部件位于宽列中并且您想要更紧的搜索框时,它很方便。
- 表格页边和表单填充: 包装纸外部和内部的间距。
- 边界类型和边界半径: 形状周围的框架及其角的圆度。
- 版式和颜色: 输入的字体和文本颜色。
- 表格输入颜色: 输入字段本身的背景颜色。
按钮 #
Button 部分为提交控件进行样式设计, 无论是图标还是文本按钮:
- 背景颜色: 按钮后面的填充。
- 颜色: 图标或文本颜色。
- 填充和边缘: 按钮的内间距和外间距。
- 版式: 按钮文本的字体系列、大小和重量。
一个尺寸说明:按钮高度遵循表单,因此如果字体大小更改后按钮文本看起来很局促,请在表单侧添加一点垂直填充,而不是单独对抗按钮填充。
查看实时结果 #
Publish页面并尝试表单,点击进入字段,键入查询,然后回车或点击提交按钮。
WordPress从那里接管, 并显示匹配的帖子和页面在您的主题的搜索结果模板:
常见用例 #
- 标题搜索: 使用导航菜单旁边的图标弹出窗口,因此只需一键搜索即可,无需吃菜单空间。
- 博客侧边栏或存档页面: 表格类型的搜索框可以帮助读者挖掘较旧的帖子。
- 404 页: 搜索表单是您可以放在"“未找到”页面上的最有用的东西
- 文档和知识库: 在前面和中间放置一个宽搜索表单,以便用户在滚动之前进行搜索。
更好的搜索栏提示 #
- 将按钮颜色与主题的重音颜色相匹配。 看起来像网站上的所有其他按钮的搜索按钮会得到更多使用。
- 保持占位符短。 “搜索...”打败了在手机上被切断的完整句子。
- 在紧密布局中使用图标弹出窗口。 挤入标题列的完整搜索表单往往会以平板电脑宽度尴尬地包装。
- 测试结果页面。 WordPress的小部件上把查询,因此在您推广搜索框之前,请检查主题的搜索结果模板是否看起来可呈现。
视频教程 #
Search 小部件在操作中, 则此视频将通过全套设置, 从第一个拖动到实时页面上的搜索结果:
常见问题 #
如何在 Elementor 中添加搜索栏?
Elementor 安装主插件,然后将 Elements 面板中的搜索小部件拖到您的页面上,它会立即呈现一个可用的 WordPress 搜索表单,您可以在完整表单和从内容选项卡中的类型下拉弹出的图标之间切换。
我可以在弹出窗口中打开搜索吗?
是在内容选项卡中设置类型为图标弹出窗口,然后小部件仅显示一个搜索图标,单击它会打开一个搜索屏幕,其中包含一个大的输入字段、一个自定义占位符以及您从弹出窗口设置中控制的描述行。
我可以更改搜索按钮文本吗?
是的。将"类型"设置为"表单"后,将"提交按钮类型"更改为"按钮",并在"按钮文本"字段中键入标签。您还可以通过在"图标"上留下"提交按钮类型"并从库中选择任何图标来保留图标。
搜索结果从哪里来?
WordPress 标准搜索提交小部件, 因此结果包含您的帖子和页面, 并在主题搜索结果模板上显示, 不需要单独的结果页面设置。
主插件搜索小部件免费吗?
是。搜索小部件包含在免费版本的Master Addons中,与免费Elementor一起工作,它在打字时不显示实时结果;它使用标准的WordPress搜索。
包裹起来 #
主插件 搜索 widget 给 Elementor 提供了它缺少的搜索栏:一个表单或图标弹出窗口,您可以放置在任何位置和样式以匹配设计,结果由 WordPress 本身提供。它与。 画布外内容 widget 当你正在构建自定义头。浏览完整集合的 主插件小部件和扩展或者看看 搜索小部件页面 用于演示以及与 Elementor Pro 搜索小部件的比较。
