Как добавить поле поиска во вторичное меню Divi

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

Обзор окна поиска Divi

офис

Мобильный телефон

Загрузите и / или измените глобальный заголовок

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

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

В новом модальном окне нажмите на Импорт вкладка и найдите .json файл, который вы скачали. Когда будете готовы, выберите Импорт моделей генераторов из Диви тема чтобы начать загрузку.

На этом этапе вы готовы войти в Глобальный заголовок часть Шаблон сайта по умолчанию. Импорт из .json файл должен автоматически применять халяву в качестве общего заголовка сайта.

Добавить поле поиска во вторичную строку меню

Используя Divi Visual Builder, вы должны увидеть нечто похожее на это как глобальный заголовок.

Первое, что мы хотим сделать, это создать место для окна поиска. Мы хотим убедиться, что поле поиска легкодоступно для всех. посетителей, поэтому мы добавим его во вторичное меню (над Главная / Контакты линия).

Для начала добавим поле поиска с помощью Модуль поиска Divi в третьем столбце первой строки.

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

Поле поиска в третьем столбце нехорошо. Итак, мы хотим войти в Модуль поиска настройки и перейдите в Дизайн язык. Найди это трансформатор варианты, затем перейдите к переводить вкладка (вторая). Затем вы можете перетащить модуль поиска на место, и Divi обработает весь CSS и интервалы для него.

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

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

Стилизация поискового модуля Divi

Хотя у вас не так много вариантов стиля для окна поиска, у вас есть несколько. А именно, цвет текста и самого поля, как когда он неактивен, так и когда пользователь щелкнул по нему. (И, конечно, интервалы, размеры и другие стандартные варианты дизайна Divi.)

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

Когда стиль будет выбран по вашему вкусу, нажмите кнопку «Сохранить».

Проверить настройки видимости

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

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

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

Убедившись, что все видно, вы готовы выложить эту штуку в Интернет!

Сохраните вашу работу

Обязательно нажмите на зеленая кнопка сохранения в правом нижнем углу экрана.

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

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

Осталось только полюбоваться вашей работой на своем сайте!

офис

Мобильный телефон

Вывод с полем поиска Divi

Окна поиска являются фундаментальной частью хорошего взаимодействия с пользователем на вашем сайте. Если вы хотите предоставить наилучший сервис для вашего посетителей, убедитесь, что ваш контент доступен для поиска, и это должно быть одним из ваших главных приоритетов. Я надеюсь, что вы сможете использовать этот быстрый и простой метод и скоро примените его к своему сайту Divi!