Поиск

Elementor не отправляет виджет поиска в своей бесплатной версии, поэтому большинство сайтов в конечном итоге застревают в любом окне поиска, которое предоставляет тема. The Поиск виджет в Мастер-аддоны для 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 панель поиска, которой он не хватает: всплывающее окно формы или значка, которое вы можете разместить где угодно, и стиль, соответствующий дизайну, с результатами, которые обслуживает сам WordPress. Он хорошо сочетается с Внехолстовый контент виджет, когда вы создаете собственный заголовок. Просмотрите полную коллекцию Виджеты и расширения Master Addgets для большего.