Пропустить

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

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

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

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

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

Как добавить модуль виджета Zonde из Divi

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

divi builder

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

боковая панель divi plugin wordpress.png

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

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

Модуль боковой панели позволяет вам вставить боковую панель (и все ее встроенные виджеты) в любом месте вашей страницы. Фактически, вы можете добавить любую область виджетов, используя модуль боковой панели. В этом примере я покажу вам, как вставить настраиваемую боковую панель на страницу вашего блога, используя специальный раздел для отображения виджета «Поиск» и «Последние сообщения» в WordPress.

боковая панель для статьи на WordPress.jpg

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

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

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

боковая панель виджета wordpress.png

Затем разверните Visual Builder, чтобы отредактировать страницу блога. Добавьте на свою страницу специальный раздел (чуть ниже заголовка) со следующим макетом:

создать пользовательский раздел divi.png

вставить столбцы divi.png

После того, как вы добавили на страницу специализированный раздел, вы заметите, что в области (слева) есть кнопка «Добавить модуль». В этом примере сюда был добавлен модуль Блог с макетом сетки для отображения сообщений блога.
пример статьи блога layout grid.png

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

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

Другой (справа) имеет кнопку «Вставить строку». Область «Вставить модуль» представляет собой вертикальную боковую панель. Здесь вы войдете в модуль боковой панели. Вы можете добавить сюда любое количество модулей в одну строку, и они будут охватывать вертикальную ширину секции, рядом со структурой столбцов, которую вы строите рядом с ней. Фактически, для этого примера на странице блога уже есть модуль Email Optin и модуль Person в этой области вертикальной боковой панели макета Specialty.

Теперь добавьте модуль боковой панели к вершине других модулей в вашей области вертикальной боковой панели.

добавить модули в sidebar.jpg

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

Контент

Область виджетов: выберите боковую панель

Закладка

Ориентация: справа (потому что боковая панель справа)
Удалить разделитель границ: ДА
Цвет текста:
Размер шрифта темного заголовка: 26 пикселей
Интервал букв
header: 3px Высота строки заголовка: 1.1em

Вкладка "Дополнительно"

В разделе Custom CSS добавьте следующий CSS в текстовое поле Widget. Это позволит согласовать дизайн виджетов боковой панели с дизайном сайта:

background: #fff; padding: 20px; -webkit-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1) -moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1); box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1);

создать divi.jpg боковую панель

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

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

пример боковой панели divi.jpg

Параметры содержимого для боковой панели

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

Настройки sidebar.png

Область виджета

Модуль боковой панели использует блоки создания виджетов, которые вы можете создать на вкладке «Внешний вид»> «Виджеты». Вы можете выбрать одну из ваших пользовательских областей виджетов из этого раскрывающегося меню.

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

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

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

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

Варианты дизайна боковой панели

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

варианты дизайна divi.png

ориентация

Здесь вы можете выбрать, на какой стороне страницы будет отображаться ваша боковая панель. Этот параметр управляет ориентацией текста и положением границы.

Удалить разделитель границ

Здесь вы можете удалить тонкую серую рамку, которая отделяет вашу боковую панель от содержимого вашей страницы.

Цвет текста

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

Шрифт заголовка

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

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

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

Расширенные возможности боковой панели

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

предварительная боковая панель divi.png

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

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

Класс CSS

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

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

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

видимость

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

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

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

  1. привет
    В отличие от вас, я пытаюсь удалить боковую панель на страницах статей в моем блоге, и я не знаю, как это сделать в новой версии Divi 4.
    У вас есть совет?
    мерси
    Орели

  2. Здравствуйте и спасибо за эти уроки.

    В этом примере вы начали со страницы во всю ширину или с шаблона с исходной боковой панелью?

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

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
14 акции
доля8
чирикать2
Регистрация4