Модуль Поиска Divi

Как добавить, настроить и адаптировать под свои требования модуль Divi — Искать.

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

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

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

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

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

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

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

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

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

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

Вкладка Контент

Заполнитель ввода: Поиск по блогу
Кнопка подписки: Да

Вкладка Дизайн

Поле цвет фона: #f8f8f8
Поле размер текста: 16px
Поле цвет текста: #888888
Поле высота строки: 1em
Расстояние: Внутренний отступ 20px Вверху, 20px Низ

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

Теперь вернитесь к редактированию ширины строки, содержащей ваш поисковый модуль. На вкладке «Дизайн» в настройках строки задайте ширину строки 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 ID

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

Класс CSS

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

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

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

Отключить на:

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