Учебник Divi: как использовать модуль поиска
06.09.2018
Divi: самая простая тема WordPress для использования
Вот лучшие инструменты для монетизации вашего блога
Используя модуль поиска, вы можете разместить форма где угодно на вашем сайте. Эта форма поиска позволит вашим посетителям находить все содержимое вашего сайта, включая все страницы и сообщения в блогах. Это дает вам функциональность виджета WordPress с гибкостью, которая предлагает Дива Builder. Вы можете не только контролировать расположение поисковых форм на странице, но и олицетворять его дизайн.
Как добавить модуль поиска на свою страницу
Прежде чем вы сможете добавить модуль поиска на свою страницу, вы должны сначала перейти к Divi Builder. После того, как тема Divi установлена на вашем веб-сайте, вы заметите кнопку Использовать Divi Builder над издателем каждый раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать на кнопку Использовать Visual Builder когда вы просматриваете свой сайт на переднем плане, если вы подключены к панели инструментов WordPress.
После того, как вы вошли в Visual Builder, вы можете нажать кнопку «серый плюс», чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы запустите новую страницу, не забудьте сначала добавить строку на свою страницу.
Найдите модуль поиска в списке модулей и нажмите на него, чтобы добавить его на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «поиск», затем нажмите «Ввод», чтобы выполнить поиск и автоматически добавить модуль поиска! После добавления модуля вы будете приветствоваться списком параметров модуля. Эти параметры разделены на три основные группы: Содержание ,Дизайн и Передовой ,
Пример использования примера: добавление модуля пользовательского поиска в полнотекстовую страницу блога
В этом примере я покажу вам, как добавить модуль поиска в главный вызов к действию в верхней части страницы блога. Это позволяет пользователям легко искать содержимое вашего блога без каких-либо помех.
На этой странице есть заголовок полной ширины вверху с помощью модуля поиска непосредственно под ним. Под поисковым модулем находится модуль блога с использованием макета сетки.
Используя Visual Builder, добавьте новый стандартный раздел на страницу блога с колонкой fullwidth (1). Затем вставьте поисковый модуль в строку.
WPML, лучший плагин для перевода вашего сайта
Обновите настройки модуля поиска следующим образом:
Параметры содержимого
Зарезервированный текст:Поиск в нашем блоге ...
Скрыть кнопку: ДАВарианты дизайна
Цвет фона поля ввода: # f8f8f8
Цвет заполнитель: # 888888 Размер входного шрифта: 16px Цвет текста ввода: # 888888 Высота входной линии: 1em Custom Padding: 20px Top, 20px Bottom
Сохранить настройки
Теперь вернитесь, чтобы изменить ширину строки, содержащей ваш модуль поиска. На вкладке «Настройка параметров линии» установите линию на пользовательскую ширину 300 px. Это позволит сохранить модуль поиска компактным и центрированным на странице.
Вот так!
Параметры контента для поиска
На вкладке «Содержание» вы найдете все элементы содержимого модуля, такие как текст, изображения и значки. Все, что контролируеткакиев вашем модуле всегда будет отображаться на этой вкладке.
Текст заполнителя
Введите текст, который вы хотите использовать в качестве заполнителя для поля поиска.
PEARL: тема WordPress для бизнеса
Скрыть кнопку
Если вы включите эту опцию, кнопка «Поиск» будет скрыта.
Исключить страницы
Если вы включите эту опцию, страницы будут исключены из результатов поиска.
Исключить пункты
Включение этого параметра исключает сообщения из результатов поиска.
Исключить категории
Выберите категории, которые вы хотите исключить из результатов поиска.
Значок администратора
Это облегчит идентификацию модуля в конструкторе. Когда вы используете представление 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, разделенные точкой с запятой.
видимость
Эта опция позволяет вам управлять устройствами, на которых отображается ваш модуль. Вы можете отключить свой модуль на планшетах, смартфонах или настольных компьютерах по отдельности. Это полезно, если вы хотите использовать разные модули на разных устройствах, или если вы хотите упростить мобильный дизайн, исключив некоторые элементы страницы.
Вы ищете лучшие темы и плагины WordPress?
Пользователи BlogPasCher рекомендуют следующие категории: