搜索表单和图标弹出窗口
并非每个设计都有空间容纳完整的搜索栏。这就是为什么我们为您提供两种不同的类型。选择 “Form” 表示传统的、始终可见的输入字段和按钮。非常适合侧边栏或英雄下方。或者,选择 “Icon” 表示光滑、节省空间的放大镜,单击时可打开优雅的弹出搜索覆盖层。这可以保持您的设计清洁,直到用户需要为止。您控制表格的按钮文本和弹出触发器的确切图标。
- 表单类型:带有可自定义提交按钮(作为文本或图标)的标准、始终可见的搜索表单。
- 图标/弹出窗口类型:时尚的图标按钮,可触发完整的弹出窗口搜索表单,从而节省关键的标头空间。
- 图标库:从巨大的图标库中选择任何放大镜图标,以匹配您网站的风格。
完整的表格和输入字段造型
使搜索表单成为您布局的自然部分 设计整个表单容器:设置其背景、宽度、边距、填充,并赋予其边框半径和框阴影 然后,对输入字段本身进行样式设计 控制其字体、颜色、背景、边框和内部填充 您甚至可以设计不同边框颜色的焦点状态(当用户单击时) 这可以确保您的搜索栏的外观和感觉都很高级,而不是像浏览器默认的。
- 容器设计:将表单的盒子与背景、填充、边框和阴影一起设计。
- 输入字段控制:自定义文本框的颜色、字体、宽度和边框半径。
- 先进国家:为重点国家定义独特的边框颜色,突出显示活跃领域。
图标设计和弹出消息传递
Icon/Popup 类型,图标本身就是一个按钮,将其风格化到完美,调整其大小、颜色以及周围的填充和页边距,然后,设计出现的弹出窗口 自定义输入文本占位符(如 “开始输入...”),最重要的是,添加一个有用的描述(例如,“Hit enter 搜索或 ESC 关闭”)。此文本指导用户,提高可用性并创建精美、专业的交互体验。
- 图标造型:更改图标颜色和尺寸,并使用图标边缘和填充调整其周围空间。
- Smart Popup 文本:在弹出的搜索字段内设置用户友好的占位符文本。
- 弹出窗口说明:在输入下方添加描述行以解释如何使用弹出窗口(搜索/关闭)。
搜索常见问题
此搜索是否适用于我的主题的默认搜索结果页面?
Yes, it should。this元素提供了前端搜索表单,当用户提交查询时,它会使用你的WordPress(或WooCommerce)默认搜索功能,并在你的主题搜索。php模板页面上显示结果,它不会取代搜索逻辑,只是让输入表单看起来很神奇。
我可以在侧边栏中同时进行表单搜索,也可以在标头中进行图标搜索吗?
Absolutely。search元素可以在同一页面或站点上使用多个,每个都是独立配置和样式的。因此,您可以在博客侧边栏中拥有一个大表单,在头部中拥有一个最小的图标,每个都有自己的设置。
搜索弹出窗口适合移动设备吗?
是弹出窗口设计为响应式,它通常会作为覆盖大部分移动屏幕的居中覆盖层打开,输入字段和描述可清晰读取,图标触发器还适合触摸设备扩展。
我可以将放大镜图标更改为其他图标,例如"Q"作为报价吗?
(如 FontAwesome)集成图标库中任意选择图标, 虽然放大镜是标准配置, 但从技术上讲, 您可以使用不同的图标, 但是,为了普遍的用户理解, 我们强烈建议坚持使用公认的搜索符号(放大镜)。
