Модуль Кода Divi

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

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

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

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

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

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

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

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

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

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

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

В настройках модуля кнопок на вкладке «Дополнительно» введите два класса «анимированный» и «отскок» в текстовое поле «Класс CSS».

Теперь кнопка будет подпрыгивать при загрузке страницы.

Вот еще несколько примеров использования модуля кода:

1. Добавьте блоки кода javascript или библиотеки, которые применимы только к вашей странице.
2. Интегрируйте сторонние плагины, такие как слайдер Revolution.
3. Вы можете использовать модуль кода полной ширины, чтобы встроить Typeform для более интерактивных анкет, контактных форм и т. Д.
4. Добавить плавающее меню действий
5. Создайте слайд-объявление на верхней панели.
6. Добавьте кнопку с плавающим действием.

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

Вкладка Контент модуля Код

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

Код

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

Метка администратора

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

Вкладка дизайн модуля Код

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

Максимальная ширина

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

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

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