Как создать страницу результатов пользовательского поиска в Elementor

Хорошо спроектированная страница результатов поиска играет решающую роль в улучшении пользовательского опыта. Это позволяет посетителям быстро перейти к соответствующему контенту, который они ищут. Это не только экономит время при навигации по контенту, но и побуждает их исследовать дальше.

Elementor — популярный конструктор страниц для миллионов веб-сайтов WordPress. Он предоставляет конструктор тем и полезные виджеты, с помощью которых вы можете легко создать страницу результатов поиска. В этом учебном посте мы объясним вам, как создать собственную страницу результатов поиска в Elementor.

Помните, что поле поиска является основным элементом любой страницы результатов поиска. Здесь люди вводят ключевые слова, чтобы найти соответствующие публикации и продукты. Итак, сначала мы создадим динамическое окно поиска с помощью Elementor. Затем мы завершим страницу, добавив виджет архива, сделав ее страницей архива блога.

Что такое страница результатов пользовательского поиска в Elementor?

Страница результатов поиска — это специальная веб-страница, которая позволяет пользователям и посетителям быстро переходить к определенным типам контента, таким как сообщения в блогах, продукты электронной коммерции и элементы портфолио. Такие страницы обязательны для веб-сайтов с большим содержанием.

Настраиваемая страница результатов поиска позволяет включать различные элементы, такие как избранные изображения, пользовательские заголовки, фильтры и т. д., по вашему желанию, чтобы страница выглядела хорошо. Это не только улучшает пользовательский опыт, но и помогает повысить конверсию.

Варианты использования страниц результатов пользовательского поиска в WordPress

Прежде чем перейти к руководству, давайте рассмотрим некоторые варианты использования пользовательских страниц результатов поиска в WordPress. Просмотрите список ниже.

• Веб-сайты электронной коммерции

Отображение страницы результатов поиска продуктов с фильтрами. Посетители могут использовать панель поиска, чтобы найти точный продукт, или фильтры, чтобы отсортировать их по ценам, рейтингам и категориям.

• Блог-сайты

Сообщения в блогах и статьи отображаются на основе тегов и категорий. Пользователи могут сортировать их по автору, дате и другим запросам.

• Страница базы знаний

Страницы базы знаний обычно содержат руководства по документации «Сделай сам» и полезные ресурсы. Функция поиска обязательна на этих страницах, чтобы быстро изучить полезный контент.

• Сервисный бизнес

Пользователи могут сортировать желаемые услуги на основе рейтингов, ценовых диапазонов, предложений и других соответствующих деталей перед бронированием или заполнением контактной формы.

• Образовательные сайты

Расширенные возможности поиска и фильтрации позволяют искать курсы, уроки и учебные материалы, чтобы учащиеся и учащиеся могли легко найти нужный им контент.

Как создать страницу результатов пользовательского поиска в Elementor

Теоретическая часть окончена. В этом разделе мы рассмотрим обучающую часть о том, как создать собственную страницу результатов поиска в Elementor. Убедитесь, что на вашем сайте доступны следующие плагины.

• Элементор
• Элементор Про

Как только они появятся на вашем сайте, следуйте инструкциям, описанным ниже.

Шаг 01. Перейдите в конструктор тем Elementor.

Войдите в свою панель управления WordPress. Затем перейдите в «Шаблоны» > «Конструктор тем» .

Выберите параметр «Результаты поиска» в разделе «Части сайта». Затем нажмите кнопку + Добавить новый .

Откроется холст Elementor, куда вы сможете добавить любой виджет, который хотите создать настраиваемую страницу результатов поиска.

Шаг 02. Создайте новый раздел для добавления виджета поиска.

Щелкните значок плюса (+) на холсте. Затем выберите нужную структуру столбцов .

Вам необходимо написать название раздела. Это полезно для SEO.

Итак, перетащите виджет «Заголовок» в раздел. Это позволит вам написать название раздела.

Перейдите на вкладку Стили . Вы получите возможность изменить цвет, типографику, размер шрифта, выравнивание и многое другое в тексте заголовка. Сделай это сам.

Аналогичным образом перетащите виджет «Текстовый редактор» в раздел под текстом заголовка. Затем напишите желаемый текст и настройте его, как показано выше.

Шаг 03. Добавьте виджет поиска в раздел.

Найдите виджет «Поиск» . Перетащите его в раздел под виджетом «Текстовый редактор» так же, как показано выше.

Шаг 04. Настройте виджет поиска

По умолчанию виджет поиска будет отображаться по всей ширине холста. Перейдите на вкладку «Дополнительно», чтобы уменьшить ее ширину.

Вы увидите раздел «Маржа» . Поместите нужные значения в поля разделов справа и слева. Вы увидите, что ширина виджета поиска уменьшилась.

Далее перейдите на вкладку «Стиль» . Вы получите возможность изменить типографику текста заполнителя, цвет фона окна поиска, тип границы и многое другое. Сделайте это самостоятельно в соответствии с требованиями дизайна вашего сайта.

Здесь мы добавили значение радиуса в поле поиска. Мы поместили значения в верхнее и левое поля под радиусом границы.

Аналогичным образом мы добавили радиус к кнопке поиска. Для этого разверните раздел «Кнопка отправки» на вкладке «Стиль». Поместите значения в поля «Справа» и «Снизу» в разделе «Радиус».

Вы сразу увидите изменения. Если вы хотите добавить эффект наведения, цвет фона, тень блока и т. д., изучите доступные варианты.

Узнайте, как создать шаблон сообщения в блоге с помощью Elementor.

Шаг 05: Настройте параметр результатов

Надеемся, вы имеете представление о функции поиска Ajax. Всякий раз, когда пользователь начинает что-то вводить в него, прямо под полем поиска мгновенно отображаются несколько результатов.

Параметр «Результаты» виджета поиска позволяет вам включить эту функцию и настроить общее количество мгновенных результатов, которые вы хотите отображать под окном поиска.

Перейдите на вкладку «Содержимое» . Затем разверните раздел «Результаты» .

Включите опцию «Результаты в реальном времени» . Теперь эта функция включена.

Шаг 06: Создайте шаблон для живых результатов

Elementor позволяет вам создать шаблон живых результатов, с помощью которого вы можете указать, как контент будет отображаться всякий раз, когда пользователь вводит текст в поле поиска.

Нажмите кнопку «Создать шаблон» в разделе «Результаты».

Это приведет вас к новому холсту. Здесь вам необходимо создать макет для результатов живого поиска и сохранить его как шаблон.

Выберите структуру столбцов по своему усмотрению. Мы выбрали Направленный ряд . Он будет продолжать отображаться справа по мере добавления в этот раздел.

Мы хотим использовать это окно поиска для демонстрации сообщений в блоге. Таким образом, всякий раз, когда кто-то вводит тему блога, в окне поиска должен отображаться список соответствующих сообщений в блоге. Для этого нам нужно добавить рекомендуемые виджеты публикаций.

Перетащите виджет «Избранное изображение» в раздел.

По умолчанию изображение будет большого размера. Сначала в разделе «Разрешение изображения» выберите «Средний размер» .

Затем перейдите на вкладку «Стиль» . Используя такие параметры, как выравнивание, ширина и радиус, вы можете еще больше уменьшить размер избранного изображения, как показано на скриншоте, прикрепленном ниже.

Таким же образом поместите виджет «Заголовок сообщения» рядом с избранным изображением.

Вы можете видеть, что мы уменьшили размер шрифта и изменили его цвет.

Примечание. На этом этапе сохраните шаблон . При желании вы можете добавить в него дополнительные элементы.

Узнайте, как создать сайт-резюме с помощью Elementor.

Шаг 07: Добавьте шаблон к результату

Перейдите на главную страницу того, что мы проектировали. Щелкнув значок раскрывающегося списка в разделе «Результаты», выберите шаблон, который вы разработали совсем недавно.

После выбора шаблона под ним появится несколько новых опций. С их помощью вы можете настроить общее количество элементов, которые будут отображаться под полем поиска.

Шаг 08. Стилизация макета живых результатов

Снова перейдите на вкладку «Стиль» и разверните раздел «Результаты». Вы можете стилизовать тип фона, тип границы, радиус, отступы, расстояние от поля поиска, высоту и ширину столбца, а также промежуток между строками и столбцами.

Предварительный просмотр результатов в реальном времени

Теперь введите что-нибудь в поле поиска. Ниже вы увидите список из трех элементов, относящихся к введенной теме.

Это гарантирует, что виджет поиска работает идеально.

Примечание. Ваш виджет поиска готов и полностью функционален. Таким же образом вы можете создавать поля поиска в любом месте вашего веб-сайта, например, в верхнем, нижнем колонтитуле и на страницах. Такие окна поиска обычно размещаются в шапке и на страницах архива постов.

Шаг 09: Добавьте виджет «Архив сообщений»

Создайте новый раздел под разделом окна поиска. Затем перетащите виджет «Архив сообщений» в новый раздел.

Это отобразит все сообщения в блоге в формате сетки, который вы опубликовали на своем веб-сайте.

Шаг 10: Настройте параметры виджета «Архив сообщений»

Теперь пришло время настроить виджет «Архив сообщений» и настроить его макет по своему усмотрению. Виджет имеет множество возможностей настройки. Сначала настройте основные параметры. Перейдите на вкладку «Содержимое» и разверните раздел «Макет» .

Выберите количество столбцов, положение изображения и разрешение изображения . Мы выбрали 2 столбца, установили положение изображения вверху и полное разрешение.

После этого включите параметры «Заголовок», «Выдержка», «Метаданные» и «Читать далее» . Но если вам не нужен какой-либо вариант, оставьте его выключенным.

Чтобы определить длину отрывка, установите количество символов рядом с ним. Кроме того, укажите тип метаданных, которые вы хотите отображать. Мы выбрали параметры метаданных «Данные» и «Комментарии» для виджета.

Пагинация делит ваши сообщения на несколько страниц. Расширение раздела нумерации страниц позволяет настроить тип нумерации страниц, выравнивание, ограничение количества страниц и сокращение файлов .

Узнайте, как создать контактную форму с помощью Elementor.

Шаг 11. Стилизация виджета «Архив сообщений»

Перейдите на вкладку Стили . Здесь вы найдете несколько вариантов. Сначала разверните раздел «Макет» .

Вы можете настроить разрыв столбцов, разрыв строк и выравнивание .

Развернув раздел «Изображение», вы сможете установить радиус границы и расстояние между изображениями и другими элементами.

Таким же образом, развернув раздел «Содержимое» , вы можете стилизовать типографику, цвет и интервал для текстов «Заголовок», «Мета», «Выдержка» и «Подробнее».

Наконец, разверните раздел «Нумерация страниц» . Это позволит вам настроить типографику, цвета, эффекты наведения и пространство для элементов нумерации страниц.

Примечание. Действительно, для каждого виджета Elementor существует гораздо больше опций, включая виджет «Архив сообщений». В приведенном выше руководстве мы постарались дать вам общее представление о настройках, которые вы можете выполнить для виджета «Архив сообщений». Надеюсь, вы сможете изучить и использовать другие варианты, кроме этих.

Шаг 12. Сохраните и просмотрите страницу результатов поиска.

Теперь перейдите в режим предварительного просмотра страницы. Введите что-нибудь в поле и нажмите кнопку «Поиск» . Ниже вы увидите соответствующие записи блога в формате сетки.

Любая ошибка? Страница результатов поиска кажется неработающей!

После нажатия кнопки поиска вы можете испугаться, если увидите соответствующие сообщения в блоге, как на изображении ниже. У вас может возникнуть ощущение, что страница сломана.

Не волнуйся! Решить проблему очень легко.

Вам просто нужно создать страницу архива в конструкторе тем Elementor. То, как вы создадите страницу архива, повлияет на то, как соответствующие сообщения в блоге будут отображаться после нажатия кнопки «Поиск».

Если вы хотите, чтобы мы создали отдельный обучающий пост о том, как создать страницу архива с помощью Elementor, сообщите нам об этом в разделе комментариев. Мы рассмотрим возможность создания такой страницы на основе ваших ожиданий.

Итак, это конец обучающей части поста. Таким образом, вы можете создать страницу результатов поиска с помощью Elementor на WordPress.

Бонусный балл: используйте HappyAddons, чтобы получить больше виджетов для Elementor

HappyAddons — известный аддон с великолепной коллекцией мощных виджетов для Elementor. Если вы когда-нибудь почувствуете, что доступных виджетов Elementor недостаточно и вам нужно больше, вы можете попробовать плагин HappyAddons.

HappyAddons включает более 120 виджетов и десятки функций, которые могут вывести ваш сайт Elementor на новый уровень. Плагин имеет как бесплатную, так и премиум-версию. Вы можете сначала попробовать бесплатную версию. Если вас все устраивает, вы можете в любое время перейти на премиум-версию и сделать что-то великолепное.

Загрузите плагин, нажав кнопки, прикрепленные ниже.

Заключение

Создание страницы результатов поиска сегодня не является роскошью, но является обязательным условием для улучшения пользовательского опыта. Это поможет вам поддержать привлекательность и ценность бренда вашего веб-сайта. Если ваш сайт в основном предназначен для продуктов электронной коммерции, партнерского маркетинга и ведения блогов, без страницы результатов поиска никогда не будет достаточно.

Надеемся, что, следуя приведенному выше руководству, вы сможете создать потрясающие страницы результатов поиска на своем сайте Elementor. Однако не забудьте оптимизировать виджет поиска для планшетов и мобильных устройств, чтобы этот элемент могли использовать все типы людей.