Как создать шаблон страницы результатов поиска в Divi

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

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

Давайте начнем.

Sneak Peek

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

Загрузите шаблон (ы) БЕСПЛАТНО

Чтобы получить доступ к шаблону страницы результатов поиска из этого руководства, вам сначала необходимо загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и добавьте один из json-файлов в Divi Theme Builder, используя опцию «Переносимость Theme Builder».

Давайте перейдем к руководству, ладно?

Что вам нужно для начала

Для начала вам необходимо установить и активировать тему Divi. Убедитесь, что у вас установлена ​​последняя версия Divi.

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

После этого все готово.

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

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

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

Как создать шаблон страницы результатов поиска в Divi

Создать новый шаблон

Чтобы начать, перейдите в панель управления WordPress и перейдите в Divi> Theme Builder. Затем щелкните область «Добавить новый шаблон».

В настройках шаблона назначьте шаблон Результаты поиска.

Затем щелкните область «Добавить пользовательское тело» нового шаблона и выберите «Создать пользовательское тело».

Выберите «Создать макет с нуля».

Разработка шаблона страницы результатов поиска с помощью редактора макета шаблона

Раздел заголовка для шаблона результатов страницы

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

Акцент на дизайн модуля разделителя

Затем вставьте разделительный модуль. Это послужит дизайнерским акцентом на заголовке нашей страницы.

Обновите стиль разделителя следующим образом:

• Цвет линии: # 3a405a
• Положение строки: Внизу
• Вес разделителя: 5 пикселей
• Z-индекс: -1

Текстовый модуль с заголовком

Под модулем разделителя добавьте новый текстовый модуль со следующим содержимым:

<h1>Search Results</h1>

Обновите дизайн текста следующим образом:

• Цвет фона: #ffffff
• Выравнивание текста: по центру
• Шрифт заголовка: Muli
• Толщина шрифта заголовка: жирный
• Цвет текста заголовка: # 3a405a
• Размер текста заголовка: 70 пикселей (рабочий стол), 40 пикселей (планшет), 22 пикселя (телефон).
• Высота строки заголовка: 80 пикселей
• Макс ширина: 60%
• Выравнивание модуля: по центру
• Мин. Высота: 80 пикселей

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

• Маржа: -75 пикселей

Модуль поиска

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

Добавьте вводимый текст-заполнитель для формы.

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

Затем обновите настройки поиска следующим образом:

• Цвет заполнителя: # 3a405a
• Цвет фона поля: #ffffff
• Шрифт поля: Montserrat
• Размер текста поля: 20 пикселей
• Цвет кнопки и границы: # 3a405a
• Шрифт кнопки: Muli
• Толщина шрифта кнопок: полужирный
• Цвет текста кнопки: #ffffff
• Размер текста кнопки: 18 пикселей
• Ширина: 100%
• Максимальная ширина: 300 пикселей
• Выравнивание модуля: по центру
• Закругленные углы: 8 пикселей

Это по большей части касается нашего заголовочного раздела.

Заполнение строк

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

• Padding: 0px снизу

Создание основной части шаблона результатов поиска

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

Создание нового раздела и строки

Под верхним разделом добавьте в макет новый обычный раздел.

Затем добавьте в раздел строку из одного столбца.

Добавление заголовка публикации / архива как динамического содержимого

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

Сначала добавьте текстовый модуль.

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

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

Затем обновите настройки дизайна для текстового модуля следующим образом:

• Шрифт текста: Muli
• Толщина шрифта текста: толстый
• Цвет текста текста: # d30c7b
• Размер текста текста: 22 пикс.
• Выравнивание текста: по центру
• Стиль анимации: слайд
• Направление анимации: вниз
• Интенсивность анимации: 250%

Добавленная анимация покажет заголовок результата поиска из-под стиля разделителя «облако» (мы добавим это немного позже). Итак, каждый раз, когда пользователь вводит новый поисковый запрос, заголовок будет выпадать для создания классного эффекта.

Добавить новую строку

В модуле «Текст», содержащем элемент заголовка публикации / архива, создайте новую строку из одного столбца.

Добавьте в строку модуль блога. Это отобразит фактические сообщения / содержимое страницы результатов поиска.

Обновите настройки содержимого для модуля блога следующим образом:

• Сообщения для текущей страницы: ДА
• Количество сообщений: 9
• Длина отрывка: 120
• Показать Автор: NO

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

Затем обновите дизайн модуля блога следующим образом:

• Макет: сетка
• Шрифт заголовка: Muli
• Плотность шрифта заголовка: Ультра полужирный
• Цвет текста заголовка: # 3a405a
• Размер текста заголовка: 24 пикс.
• Высота строки заголовка: 1,3 мкм
• Шрифт: Montserrat
• Цвет основного текста: # 3a405a
• Закругленные углы макета сетки: 10 пикселей
• Ширина границы макета сетки: 0 пикселей
• Box Shadow: показать снимок экрана
• Вертикальное положение тени блока: 0 пикселей
• Коробка Shadow Blur Strength 15px
• Сила распространения тени коробки: -5 пикселей

Затем обновите стиль разбивки на страницы следующим образом:

Фон раздела и разделитель

В качестве последнего штриха к дизайну обновите настройки раздела следующим образом:

• Цвет фона: #eeeeee
• Стиль верхнего делителя: см. Снимок экрана
• Цвет разделителя: #ffffff
• Divider Flip: вертикальный
• Расположение разделителей: поверх содержимого раздела
• Отступ: сверху 100 пикселей

Конечный результат

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

Вот дизайн на планшете и телефоне.

А вот пример анимации заголовка результата поиска при использовании формы поиска для дополнительных запросов на странице результатов поиска.

Последние мысли

Страница результатов поиска может быть полезным инструментом для пользователей, поэтому стоит уделить ей должное внимание. С Divi вы можете создать шаблон результатов поиска со всеми необходимыми динамическими элементами, используя Divi Visual Builder при разработке шаблона. Знание кода не требуется. Я надеюсь, что это послужит вам источником вдохновения для создания настраиваемого шаблона страницы результатов поиска для вашего собственного блога или сайта.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!