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

Как добавить поисковый модуль на свою страницу

Прежде чем вы сможете добавить модуль поиска на свою страницу, вы должны сначала перейти в Divi Builder. Однажды Диви тема установлен на вашем сайте, вы увидите кнопку Использовать Divi Builder над редактором сообщений всякий раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите на кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать кнопку Использовать Visual Builder когда вы просматриваете свой веб-сайт на переднем плане, если вы подключены к своей панели управления WordPress.

После входа в Visual Builder вы можете нажать серую кнопку «плюс», чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы начинаете новую страницу, не забудьте сначала добавить строку на свою страницу.

Найдите модуль поиска в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «поиск», а затем нажать Enter для поиска и автоматического добавления модуля поиска! После добавления модуля вы увидите список опций модуля. Эти параметры разделены на три основные группы: Содержание , Дизайн et Передовой .

Пример использования: добавление модуля пользовательского поиска на полноразмерную страницу блога

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

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

Используя Visual Builder, добавьте на страницу блога новый стандартный раздел со строкой в ​​полную ширину (1 столбец). Затем вставьте модуль поиска в строку.

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

Параметры содержимого

Зарезервированный текст: Искать в нашем блоге ...
Скрыть кнопку: ДА

Варианты дизайна

Цвет фона поля ввода: # f8f8f8
Цвет заполнителя: # 888888
Размер шрифта ввода: 16 пикселей
Цвет входящего текста: # 888888
Высота строки входа: 1em
Пользовательские отступы: 20px Top, 20px Bottom

Сохранить настройки

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

Вот так!

Параметры контента для поиска

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

Текст-заполнитель

Введите текст, который вы хотите использовать в качестве заполнителя для поля поиска.

Скрыть кнопку

Если вы включите эту опцию, кнопка поиска будет скрыта.

Исключить страницы

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

Исключить пункты

Включение этой опции исключит сообщения из результатов поиска.

Исключить категории

Выберите категории, которые вы хотите исключить из результатов поиска.

Значок администратора

Это изменит метку модуля в конструкторе для упрощения идентификации. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в модульном блоке интерфейса Divi Builder.

Параметры дизайна поиска

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

Цвет фона поля ввода

Здесь вы можете изменить цвет фона панели поиска.

Цвет заполнитель

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

Цвет текста

Здесь вы можете выбрать значение вашего текста. Если вы работаете на темном фоне, ваш текст должен быть включен. Если вы работаете со светлым фоном, ваш текст должен быть темным.

Текстовая ориентация

Это контролирует, как ваш текст выравнивается в модуле.

Въездная полиция

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

Размер шрифта ввода

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

Цвет ввода текста

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

Расстояние между буквами

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

Высота линии

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

Цвет кнопки и границы

Это изменит цвет фона и границы кнопки поиска.

Шрифт кнопки

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

Размер шрифта кнопки

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

Цвет текста кнопки

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

Интервал букв кнопки

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

Высота линии кнопки

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

Максимальная ширина

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

Пользовательская маржа

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

Таможенная обивка

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

Расширенные настройки модуля исследований

На вкладке «Дополнительно» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю пользовательские классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.

CSS-идентификатор

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

Класс CSS

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

Пользовательский CSS

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

видимость

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

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" extended "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] СКАЧАТЬ ТЕМУ РАЗДЕЛА [/ vcex_button] [/ width_column] [»vc_column] [» vc_column »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" extended "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] ЗАГРУЗИТЬ ХРАНИЛИЩЕ ЗАГРУЗИТЬ DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Другие учебные пособия Divi

• сайты 5 для использования ресторана Divi темы
• Как добавить текст в продукт Divi WooCommerce
• Как изменить цвет меню между страницами Divi
• Как персонализировать сетки блога с Divi
• Как использовать роль DiVi редактор на WordPress
• Как создать полноэкранный слайдер Divi
• Как изменить цвет меню между страницами Divi
• Особенности, которые вы, вероятно, не знаете о Divi
• Как использовать Divi Builder в WordPress
• Как использовать модуль прокрутки видео Divi
• Как использовать модуль Flip Builder Flip
• Как добавить отзыв модуль на Divi Builder
• Как использовать текстовый модуль Divi
• Как создать слайдер на Divi
• Как редактировать роль пользователя Divi
• Как использовать модуль Divi Social Media
• Как пользоваться магазинным модулем на тему WordPress Divi
• Как использовать боковую панель Divi
• Как использовать модуль таблицы цен Divi
• Как использовать титульный модуль изданий Divi
• Как добавить видео модуль Divi
• Как использовать навигационный модуль статьи
• Как использовать модуль поиска Divi
• Как использовать модуль кошелька Divi
• Как использовать модуль пользователя в Divi Builder
• Как использовать модуль кошелька с фильтром Divi
• Как использовать ползунок полной ширины
• Как использовать модуль изображения Divi Builder
• Как использовать полноразмерный навигационный модуль Divi Builder
• Как использовать модуль галереи изображений
• Как использовать модуль карты полной ширины Divi Builder
• Как использовать модуль Divi Full Width Portfolio
• Как использовать полноразмерный заголовочный модуль Divi
• Как использовать Divi Counter Module
• Как использовать слайдер статей в Divi Builder
• Как использовать модуль Divi Email Optin