Пропустить

Учебник Divi: как использовать модуль поиска

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

divi builder

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

Исследовательский модуль divi.png

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

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

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

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

пример блога с формой поиска divi.jpg

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

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

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

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

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

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

divi search configuration content.png

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Конфигурация divi.png ширина

Вот так!

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

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

Поиск модуля divi contenu.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

divi search design.png

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

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Цвет текста

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

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

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

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

Вы можете изменить шрифт вводимого текста, выбрав нужный шрифт в раскрывающемся меню. 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% от ширины родительского столбца.

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

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

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

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

divi расширенный опциональный модуль search.png

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

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

Класс CSS

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

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

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

видимость

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

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

Эта статья содержит комментарии 4

  1. Привет,

    Спасибо за эту статью.
    Есть момент, который вы не рассмотрели (и, к сожалению, это как раз тот момент, который вызывает у меня проблемы ...):

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

    Заранее спасибо за вашу помощь !

  2. Привет, спасибо за статью. У меня вопрос, можно ли использовать форму поиска только для раздела страницы? например, для раздела часто задаваемых вопросов я хотел бы настроить форму поиска, ограниченную только вопросами FAQ (+ 20 вопросов), таким образом, пользователю не нужно читать их все, а находит только благодаря форме поиска те, у которых есть ключевые слова, которые его волнуют. Спасибо заранее за ваш ответ.

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

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

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Вверх