Поиск
Каждый посетитель - потенциальный клиент, ищущий что-то. слабая, скрытая или уродливая строка поиска прерывает это путешествие. Главный элемент поиска дополнений дает вам два мощных способа интегрировать поиск: классическая встроенная форма или всплывающее окно с значком "нажми-открой". Поместите его в любое место (главная, боковая панель, раздел героя — и затем создайте каждый пиксель. Стиль формы, кнопки, значка и даже сообщения всплывающего окна.
Форма поиска и всплывающее окно значка
Не в каждом дизайне есть место для полной строки поиска. вот почему мы даем вам два различных Типа. Выберите “Form” для традиционного, всегда видимого поля ввода и кнопки.Идеально подходит для боковых панелей или под героем. Или выберите “Icon” для гладкого, экономящего пространство лупы, которая при нажатии открывает элегантное всплывающее наложение поиска. Это сохраняет ваш дизайн чистым, пока он не понадобится пользователю. Вы управляете текстом кнопки для форм и точным значком для всплывающего триггера.
- Тип формы: стандартная, всегда видимая форма поиска с настраиваемой кнопкой отправки (в виде текста или значка).
- Тип значка/попапа: стильная кнопка значка, которая запускает полную всплывающую форму поиска, экономя решающее пространство заголовка.
- Библиотека значков: выберите любой значок увеличительного стекла из обширной библиотеки значков, чтобы он соответствовал стилю вашего сайта.
Полный стиль формы и поля ввода
Сделайте поиск естественной частью вашего макета. спроектируйте весь контейнер формы: установите его фон, ширину, маржу, заполнение и придайте ему радиус границы и тень коробки. Затем создайте стиль самого поля ввода. Контролируйте его типографику, цвет, фон, границу и внутреннюю заполнение. Вы даже можете спроектировать состояние фокуса (когда пользователь нажимает) с другим цветом границы. Это гарантирует, что ваша панель поиска выглядит и ощущается премиально, а не по умолчанию в браузере.
- Дизайн контейнера: выведите коробку формы с фоном, набивкой, границами и тенью.
- Входной полевой контроль: настройте цвет текстового поля, типографику, ширину и радиус границы.
- Расширенные состояния: определите уникальный цвет границы для сфокусированного состояния, выделив активное поле.
Дизайн значков и всплывающие сообщения
Для типа Icon/Popup, значок сам является кнопкой. стилизовать его до совершенства. отрегулируйте его Размер, Цвет, и Padding & Маржа вокруг него. Затем, дизайн всплывающего окна, которое появляется. Настройте заполнитель Входного текста (как “Начать typing...”) и, что особенно важно, добавить полезное Описание (например, “Hit enter to search или ESC to close”).Этот текст направляет пользователей, улучшая удобство использования и создавая отточенный, профессиональный интерактивный опыт.
- Стиль значков: измените цвет и размер значка и отрегулируйте окружающее пространство с помощью поля значка и подкладки.
- Умный всплывающий текст: установите удобный текст-заполнитель внутри поля поиска всплывающего окна.
- Инструкции по всплывающему окну: добавьте строку описания под входом, чтобы объяснить, как использовать всплывающее окно (поиск/закрытие).
Часто задаваемые вопросы для поиска
Работает ли этот поиск со страницей результатов поиска по умолчанию моей темы?
Да, должно. этот элемент предоставляет форму внешнего поиска. когда пользователь отправляет запрос, он будет использовать вашу функцию поиска по умолчанию WordPress (или WooCommerce) и показывать результаты на странице шаблона search.php вашей темы. Он не заменяет логику поиска, просто делает форму ввода потрясающей.
Могу ли я выполнить поиск формы на боковой панели и поиск значков в заголовке?
Абсолютно. можно использовать несколько элементов Поиска на одной странице или сайте. каждый из них настроен и стилизован независимо. таким образом, вы можете иметь большую форму на боковой панели блога и минимальный значок в вашем заголовке, каждый со своими настройками.
Является ли всплывающее окно поиска удобным для мобильных устройств?
Да. всплывающее окно предназначено для реагирования. Обычно оно открывается как центрированное наложение, которое покрывает большую часть мобильного экрана, с полем ввода и описанием, хорошо читаемым. триггер значка также масштабируется соответствующим образом для сенсорных устройств.
Могу ли я изменить значок лупы на что-нибудь другое, например, на букву "Q" для цитаты?
Вы можете выбрать любой значок из интегрированной библиотеки значков (например, FontAwesome).В то время как увеличительное стекло является стандартным, вы можете технически использовать другой значок. Однако для всеобщего понимания пользователем мы настоятельно рекомендуем придерживаться признанного символа поиска (увеличительное стекло).
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
Дубликатор сообщений/страниц
