Виджет Поиск самого Elementor нуждается в Elementor Pro, поэтому большинство сайтов в конечном итоге застревают с любым окном поиска, которое предоставляет тема. Бесплатно Виджет поиска в Мастер-аддоны для Elementor заполняет этот пробел. Бросьте его в любом месте на странице или в заголовке, затем выберите классическую форму поиска или всплывающее окно со значком, которое расширяется при щелчке. ввод и кнопка стилизованы с панели Элементор, без участия CSS.
Вот как обе схемы Виджет поиска Elementor работа, настройка по настройке, а также то, что посетители действительно видят на странице в реальном времени.
Что делает виджет Поиск #
Виджет выводит форму поиска WordPress в качестве элемента Elementor Посетители набирают запрос, нажимают Enter или нажимают элемент управления отправкой и попадают на страницу стандартных результатов поиска вашего сайта, поэтому результаты поступают от самого WordPress и отображаются через вашу тему Вы выбираете, как выглядит форма: полное поле ввода со значком или текстовой кнопкой или одиночный значок поиска, который расширяется во всплывающий экран поиска.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Нужна помощь? Видеть руководство установки.
- Элемент Поиск включен в панели управления Master Addons, если вы ранее отключили виджеты.
Как добавить виджет Elementor Search #
Откройте редактор Elementor и найдите Поиск на панели Элементы, или прокрутите в раздел Главные дополнения (ищите значок МА) Перетащите виджет на свою страницу. сразу появляется рабочая форма поиска со значком лупы в качестве элемента управления отправкой.
Настройте вкладку Содержимое #
The Содержание вкладка содержит одно основное решение плюс несколько полей, которые следуют из него.The Тип выпадающие переключатели между двумя макетами: Форма и Всплывающее окно значка.
Тип: Форма #
Форма - это классический макет, поле ввода с элементом управления отправкой справа. The Отправить тип кнопки dropdown решает, что это за контроль:
- Значок: показывает кнопку значка. выберите значок из библиотеки ниже; лупа по умолчанию работает почти для каждого дизайна.
- Кнопка: показывает текстовую кнопку вместо. А Текст кнопки поле появляется там, где вы вводите метку, например "Поиск" или "Нажмите Enter".
Тип: всплывающее окно значка #
Значок всплывающее окно отображает только значок поиска Когда посетитель нажимает на него, над страницей открывается экран поиска с большим полем ввода и кнопкой закрытия Это макет, который можно использовать в заголовках и строках навигации, где полное поле поиска заполнило бы меню.
Выбор всплывающего окна значка показывает Всплывающие настройки раздел с двумя полями:
- Входной текст: заполнитель внутри поля поиска всплывающего окна, “Search ...” по умолчанию.
- Описание: вспомогательная линия под полем, например “Hit enter to search или click X to close.”
Стиль виджета на вкладке Стиль #
The Стиль вкладка состоит из двух разделов: Форма для области ввода и Кнопка для контроля подачи.
Форма #
В разделе Форма стилизуется обертка и поле ввода:
- Предыстория: цвет за формой.
- Ширина: ширина формы в пикселях Удобно, когда виджет сидит в широкой колонке и хочется более плотного поля поиска.
- Маржа формы и заполнение формы: расстояние снаружи и внутри обертки.
- Тип границы и радиус границы: рамка вокруг формы и насколько закруглены ее углы.
- Типографика и цвет: шрифт и цвет текста ввода.
- Цвет ввода формы: цвет фона самого поля ввода.
Кнопка #
В разделе Кнопка стилизуется элемент управления отправкой, будь то значок или текстовая кнопка:
- Цвет фона: заливка за кнопкой.
- Цвет: цвет значка или текста.
- Набивка и маржа: внутренний и внешний интервал кнопки.
- Типографика: семейство шрифтов, размер и вес текста кнопки.
Одно примечание к размеру: высота кнопки соответствует форме, поэтому, если текст кнопки выглядит тесным после изменения размера шрифта, добавьте немного вертикальной набивки на стороне формы, а не боритесь с набивкой кнопки в одиночку.
Смотрите живой результат #
Опубликуйте страницу и попробуйте форму Нажмите в поле, введите запрос и нажмите Enter или нажмите кнопку отправить.
Оттуда WordPress берет верх и показывает совпадающие посты и страницы в шаблоне результатов поиска вашей темы:
Обычные случаи использования #
- Поиск заголовка: используйте всплывающее окно значка рядом с меню навигации, чтобы поиск находился в одном клике, не съедая места в меню.
- Боковая панель блога или страницы архива: окно поиска типа формы помогает читателям просматривать старые сообщения.
- 404 страницы: форма поиска - это самое полезное, что вы можете разместить на странице, на которой написано “not found.”
- Базы документации и знаний: поместите широкую форму поиска в центр, чтобы пользователи могли осуществлять поиск перед прокруткой.
Советы по улучшению панели поиска #
- Подберите цвет кнопки к цвету акцента вашей темы. Кнопка поиска, похожая на любую другую кнопку на сайте, используется чаще.
- Держите заполнитель коротким. “Search ...” превосходит полное предложение, которое отрезается на мобильном телефоне.
- Используйте всплывающее окно значка в плотных макетах. Полная форма поиска, втиснутая в столбец заголовка, имеет тенденцию неловко обертываться при ширине таблетки.
- Проверьте страницу результатов. Виджет передает запрос в WordPress, поэтому проверьте, выглядит ли шаблон результатов поиска вашей темы презентабельным, прежде чем продвигать поле поиска.
Видео Учебник #
Если вы хотите увидеть виджет Поиск в действии, это видео проходит через полную настройку, от первого перетаскивания до результатов поиска на странице живого выступления:
Часто задаваемые вопросы #
Как добавить строку поиска в Elementor?
Установите главные дополнения для Elementor, затем перетащите виджет поиска с панели "Элементы" на свою страницу. Он сразу отображает рабочую форму поиска WordPress, и вы можете переключаться между полной формой и всплывающим значком из раскрывающегося списка "Тип" на вкладке "Контент".
Могу ли я открыть поиск во всплывающем окне?
Да. установите тип для всплывающего окна значка на вкладке Содержимое. затем виджет показывает только значок поиска, и щелчок по нему открывает экран поиска с большим полем ввода, пользовательским заполнителем и строкой описания, которую вы контролируете из всплывающих настроек.
Могу ли я изменить текст кнопки поиска?
Да. с вводом в форму измените тип кнопки "Отправить" на кнопку и введите метку в поле "Текст кнопки". Вместо этого вы также можете сохранить значок, оставив "Тип кнопки отправки" на значке и выбрав любой значок из библиотеки.
Откуда берутся результаты поиска?
Виджет отправляется в стандартный поиск WordPress, поэтому результаты включают ваши сообщения и страницы и отображаются на шаблоне результатов поиска вашей темы. Отдельная настройка страницы результатов не требуется.
Виджет "Поиск главных дополнений" бесплатен?
Да. виджет Поиск включен в бесплатную версию Мастер-аддонов и работает с бесплатным Elementor. он не показывает живые результаты при наборе текста; он использует стандартный поиск WordPress.
Завершая #
Главные Аддоны Поиск виджет дает Elementor панель поиска, которой он не хватает: всплывающее окно формы или значка, которое вы можете разместить где угодно, и стиль, соответствующий дизайну, с результатами, которые обслуживает сам WordPress. Он хорошо сочетается с Внехолстовый контент виджет, когда вы создаете собственный заголовок. Просмотрите полную коллекцию Виджеты и расширения Master Addgetsили посмотрите Поиск страницы виджета для демо и сравнения с виджетом Elementor Pro Search.
