Хотите узнать, как создать страницу результатов поиска с помощью Elementor?

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

В WordPress внешний вид (макет) страницы результатов поиска контролируется шаблоном используемой вами темы (файл search.php в большинстве случаев). Если макет по умолчанию вам не подходит, вы можете создать собственный шаблон для его замены.

Если у вас нет навыков PHP, вы можете использовать Elementor (или другие плагины для построения страниц, которые имеют функциональные возможности построителя тем, например Divi Builder et WPBakery) для создания настраиваемого шаблона страницы результатов поиска в WordPress.

Чтобы иметь возможность создавать шаблон страницы результатов поиска с помощью Elementor, вы должны использовать профессиональную версию Elementor, поскольку функция Theme Builder доступна только в Elementor Pro.

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

Когда вы создаете настраиваемую страницу результатов поиска с помощью Elementor, вы можете добавить любой элемент, который вам нравится, при создании страницы. Вы можете добавить более 90 элементов (называемых виджетами).

Читайте также: Как управлять отправкой форм в Elementor

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

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

Мы собираемся использовать два раздела для создания указанной выше страницы результатов поиска:

  • Раздел 1: Разместить заголовок (описание результатов поиска)
  • Секция 2 : Для размещения формы поиска и результатов поиска

Перед тем как начать, убедитесь, что вы обновили свою версию Elementor до профессиональной версии, если вы еще этого не сделали. Когда вы будете готовы, перейдите к Шаблоны -> Конструктор тем на панели управления WordPress.

Смотрите также: Как использовать Elementor: полное руководство

Нажмите кнопку добавлять для создания нового шаблона (или вы можете нажать кнопку Попробуй это сейчас попробовать Elementor's Themes Builder).

Установите тип модели на Результаты поиска, дайте своей модели имя и нажмите кнопку СОЗДАТЬ МОДЕЛЬ чтобы приступить к созданию последнего.

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

Читайте также: Как добавить точечный эффект к столбцу в Elementor

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

Раздел 1

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

Перейдите на левую панель. В блоке Название под вкладкой Содержание, щелкните значок базы данных в поле Название и выберите Заголовок архива.

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

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

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

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

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

Раздел 2

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

Затем вы можете получить доступ к панели настроек, чтобы выполнить настройки. В блоке Форма поиска под вкладка Content, вы можете определить скин, заполнитель, значок, размер значка и т. д.

Чтобы настроить форму, вы можете открыть вкладку Стиль. Вы можете открыть два блока параметров: вход et Button. Из блока Вход, вы можете установить типографику, цвет текста, цвет фона, цвет границы, размер границы и радиус границы.

Из блока Кнопка, вы можете установить цвет текста кнопки, цвет фона, типографику, размер значка и ширину кнопки.

После того, как стиль виджета «Форма поиска» настроен, вы можете добавить виджет «Архив сообщений». Вы можете разместить его прямо под виджетом формы поиска.

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

На блоке пейджинг, вы можете установить тип пагинации, ограничение страницы и выравнивание.

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

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

  • Планировка

Вы можете открыть этот блок, чтобы определить выравнивание текстового содержимого сообщений (заголовок сообщения и мета). Вы также можете определить промежуток между столбцами и строками.

  • Фото товара

Вы можете открыть этот блок, чтобы установить радиус границы миниатюр постов. Вы также можете установить интервал и применить фильтры CSS.

  • Содержание

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

  • Нумерация страниц

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

  • Сообщение ничего не найдено

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

Вы можете добавить больше виджетов, если они вам нужны. Когда вы закончите редактировать страницу, вы можете нажать кнопку ПУБЛИКАЦИЯ ИЛИ ОБНОВЛЕНИЕ внизу панели настроек.

Если вам будет предложено добавить условие отображения, просто добавьте его, нажав кнопку ДОБАВИТЬ УСЛОВИЕ. Поскольку вы создаете страницу результатов поиска, установите для условия отображения значение результаты поиска, Нажмите кнопку СОХРАНИТЬ И ЗАКРЫТЬ чтобы применить изменение.

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

И вуаля !

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

Если у вас нет навыков PHP, вы можете использовать Elementor для создания настраиваемой страницы результатов поиска на своем веб-сайте WordPress. Все перетаскивается. Нет необходимости манипулировать кодом PHP.

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

Получите Elementor Pro прямо сейчас!

Откройте для себя также несколько премиальных плагинов WordPress  

Вы можете использовать другие WordPress плагины чтобы придать современный вид и оптимизировать обработку вашего блога или веб-сайта.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Автоответчик WooCommerce

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

Автоответчик Woocommerce

Среди функций вы найдете среди прочего: полную интеграцию с WooCommerce, поддержку 9 автоответчиков, отсутствие необходимости в знаниях кодирования, простоту установки и многое другое.

Читайте также: MailChimp учебник на французском языке: полное руководство по созданию информационного бюллетеня

скачать | Демонстрациявеб-хостинг

2. Плагин комментариев комментариев к WordPress

Это о система оценки комментариев. Это позволяет вам позволить пользователям оценивать различные комментарии. Им просто нужно нажать на кнопку предварительного просмотра и прокрутить вниз до раздела комментариев, чтобы увидеть Плагин Wordpress премиум в действии.Как WordPress плагин Рейтинг

В его функциональных возможностях мы находим в основном: простоту использования, поддержку cнастраиваемые инструменты значков, рейтинговые комментарии согласно примечаниям, персонализация тперейти иконки, настраиваемая поддержка CSS, сIP-шифрование (для европейских пользователей), возможность перевести этот плагин и многое другое.

скачать | Демонстрация | веб-хостинг

3. Прогресс на карте

Progress Map - это плагин WordPress, разработанный для геолокации. Цель состоит в том, чтобы помочь пользователям с веб-сайтами, содержащими списки отелей, объявления о недвижимости, списки ресторанов, Предложения о работе, объявления о магазинах и многое другое ... для организации их расположения на Google Map и легко перемещайтесь по карте с помощью карусели.

Карта прогресса плагин для wordpress wordpress

Другими словами, с помощью этого плагина ваши местоположения будут опубликованы как на Google Map (маркеры) и на карусели. Карусель подключена к карте, а это означает, что выбранный в карусели элемент будет нацелен на свое местоположение на карте и наоборот.

Взгляните на Как отобразить местоположение члена вашего сообщества WP на карте Google

Чтобы добавить ваши местоположения, Progress Map предоставляет пространство формы на странице «Добавить новый элемент», позволяющее легко добавлять координаты вашего местоположения.

скачатьДемонстрация | веб-хостинг

Другие рекомендуемые ресурсы

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

Заключение

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

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях

...