Пропустить

Как использовать модуль кода в Divi Builder

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

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

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

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

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

Прежде чем вы сможете добавить модуль кода на свою страницу, вы должны сначала получить доступ к Divi Builder. Как только тема Divi будет установлена ​​на вашем сайте, вы увидите кнопку Использовать 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 содержит много кода, имеет смысл загружать его только на нужную мне страницу.

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

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

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

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

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

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

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

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

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

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

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

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

Анимация кнопки конструктора 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 ID для этого модуля. Идентификатор можно использовать для создания собственного стиля CSS или для создания ссылок на определенные разделы вашей страницы.

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

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

Класс CSS

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

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

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

видимость

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

Вот для этого урока.

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

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

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

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

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