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

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

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

Нажав на эту кнопку, вы активируете Divi Builder, который дает вам доступ ко всем модулям Divi Builder. Затем нажмите на кнопку Использовать Visual Builder запустить генератор в визуальном режиме.

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

кнопка divi builder module blog divi

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

Вставьте модуль кода divi

 

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

Используйте вариант, добавив скучную таблицу стилей для анимации контента на отдельной странице

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

Просто добавьте обычный раздел и строку полной ширины (столбец 1) и добавьте модуль кода.

Код конструктора Divi

В текстовом поле содержание, добавьте фрагмент кода.

Добавьте фрагмент animate.css

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

В настройках модуля Button на вкладке Advanced введите два класса «animated» и «bounce» в текстовое поле CSS class.

Добавить класс css animate

Теперь кнопка отскакивает, когда страница загружается.

Анимация кнопки конструктора divi

Совет: Иногда добавление кода с разрывами строки приводит к тому, что код перестает работать. Лучше создать свой код в текстовом редакторе и вставить его в модуль кода.

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

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

Параметры кода конструктора DiviСодержание

Здесь вы можете разместить любой код HTML, CSS или JavaScript, который вы хотите отобразить на странице в текущем месте. Только редакторы и администраторы могут размещать нефильтрованный HTML-код, что означает, что код может быть удален из курса, если он используется автором или участником. Вы также можете разместить шорткоды в модуле. Эти коды курсов (шорткоды) будут отображаться внутри родительского столбца без каких-либо дополнительных оболочек модулей Divi.

Административная этикетка

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

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

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

Вариант конструкции модуля кода divi builderМаксимальная ширина

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

Код Дополнительные параметры Код

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

Раздел продвинутого модуля кода divi builder

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

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

Класс CSS

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

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

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

видимость

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

Это все для этого урока.