Как вставить модули или строки Divi в другие модули Divi (без плагина)

Если вы какое-то время были пользователем Divi, то, возможно, вам пришла в голову мысль о том, чтобы вставить модуль (или строку) Divi в другой модуль. В большинстве случаев, если вы знаете, как профессионально использовать Divi, в этом нет необходимости. Модули Divi - это уже мощные элементы, наполненные функциями и встроенными настройками дизайна. Но иногда было бы неплохо улучшить эти функции, спроектировав два модуля с помощью Divi, а затем вставив один в другой. Хорошим примером этого может быть вставка модуля (например, контактной формы) в модуль переключения, чтобы форма отображалась при нажатии на переключатель.

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

Давайте начнем!

Sneak Peek

Вот краткий обзор примеров, которые мы построим в этом руководстве.

Контактная форма внутри модуля переключения

Модуль переключения и модуль кнопок внутри модуля Blurb (правый столбец)

Строка Divi внутри модуля Toggle

Скачайте макет БЕСПЛАТНО

Чтобы ознакомиться с макетом из этого руководства, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Подпишитесь на наш канал Youtube

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки со своего компьютера.

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

О чем нужно помнить

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

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

Вы можете вставлять только модули или строки внутри модуля, у которого есть возможность добавлять текст / html.

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

Часть 1: Как вставить модули Divi в другой модуль

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

Пример 1: Вставка модуля контактной формы внутрь модуля переключения

Добавить новую строку

Для начала добавьте в раздел новую строку из одного столбца.

Добавить модуль переключения (целевой модуль)

Внутри столбца добавьте модуль переключения.

В этом примере мы хотим вставить модуль в этот Toggle Module, который мы можем назвать нашим целевым модулем. Технически фактическое место назначения будет внутри содержимого тела Toggle Module (где вы можете добавить текст / HTML). Чтобы указать место назначения, нам нужно вставить новый div с необходимым классом CSS, который будет служить целевым местоположением для нашего переносного модуля (модуля, который мы хотим вставить).

На вкладке содержимого настроек переключателя добавьте в тело следующий HTML-код. Обязательно перейдите на вкладку «Текст» перед вставкой HTML.

<div class="divi-module-destination"></div>

Добавьте модуль контактной формы (переносной модуль)

Затем нам нужно добавить модуль, который мы хотим вставить в Toggle Module. В этом примере мы собираемся вставить модуль формы контракта в тело модуля Toggle. Важно добавить новый «переносной» модуль в тот же столбец, что и целевой модуль.

Для этого добавьте новый модуль контактной формы прямо под модулем переключения.

Перейдите на вкладку «Дополнительно» под настройками контактной формы (любого модуля, который вы хотите вставить) и добавьте следующий класс CSS:

• Класс CSS: переносимый модуль divi

Добавить класс столбца

Затем нам нужно добавить настраиваемый класс в столбец, содержащий оба модуля. Откройте настройки столбца и добавьте следующий класс CSS:

• Класс CSS: родительский столбец

Добавить код

Код, необходимый для этой работы, довольно короткий и простой. По сути, мы хотим использовать JQuery, чтобы найти каждый модуль с классом «divi-portable-module» с родительским столбцом (тот, который имеет класс «parent-column») и добавить каждый из этих модулей внутри div с классом « divi-module-destination ».

Код также включает фрагмент для вставки модуля кнопки в другой модуль и фрагмент для вставки строк Divi в модуль.

Чтобы добавить код, добавьте новый модуль кода под модулем контактной формы.

Перед тем, как вставить необходимый код, добавьте теги скрипта, необходимые для встраивания JS в HTML, внутри поля Код:

Затем вставьте следующий код между тегами скрипта :

(function ($) {
  $(document).ready(function () {

    // Option #1: Move Divi Module(s) into a Module
    // Limit: One Instance per Column
    // Use following code if you want to move 
    // a module inside another module. Each column with the
    // class 'parent-column' will append any module(s)
    // with the class 'divi-portable-module' to the div
    // with the class 'divi-module-destination'.
    // Only one instance of 'divi-module-destination' should
    // be added per column.
    $('.divi-portable-module').each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });
    
    // Buttons: Insert Button Module(s) into a Module
    // Adding a custom CSS class to a button module
    // is applied to the 'a' tag which is a child element
    // of the module wrapper. This code makes sure to append
    // the entire button module wrapper (the parent element)
    // as well. This functionality is the same as option #3 above.
    // Siimply use the class 'divi-portable-button' on a button module
    // instead of 'divi-portable-module'.
    $('.divi-portable-button').parent().each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });

    // Option #2: Move Divi Row(s) into a Module
    // Limit: One Instance per Section
    // Use the following code if you want to move 
    // a row inside a module on more than one section
    // of a page. Each section with the
    // class 'parent-section' will append any row(s)
    // with the class 'divi-portable-row' to the div
    // with the class 'divi-row-destination'.
    // Only one instance of 'divi-row-destination' should
    // be added per section.
    $('.divi-portable-row').each(function () {
      $(this).closest('.parent-section').find('.divi-row-destination').append($(this));
    });

  });
})(jQuery);

Понимание функциональности

Внутри Divi Builder на бэкэнде модули останутся отдельными. Однако, если вы просмотрите результаты на действующей странице во внешнем интерфейсе, вы увидите, что контактная форма была вставлена ​​в модуль Toggle.

Если вы проверите код на действующей странице, вы увидите, что модуль контактной формы был успешно вставлен в div с классом «divi-module-destination».

Стилизация модулей

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

ПРИМЕЧАНИЕ. В некоторых случаях стили целевого модуля (теперь родительский модуль) могут быть применены к вставленному модулю. В этом случае вы сможете переопределить этот стиль, обновив настройки вставленного модуля.

Результат

Вот окончательный результат при просмотре живой страницы.

Пример 2: Вставка модуля переключения внутри модуля Blurb

В нашем следующем примере мы собираемся вставить модуль переключения внутри модуля Blurb. Процесс такой же, как и раньше. Фрагмент кода ограничивает использование одного модуля назначения для каждого столбца. Другими словами, у вас может быть несколько переносных модулей с классом «divi-portable-module», которые можно добавить в целевой модуль, но у вас может быть только один экземпляр div с классом «divi-module-destination» на каждый столбец.

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

Добавить новый столбец в строку

Сначала добавьте новый столбец к существующей строке.

Добавить класс столбца

Дайте новому столбцу следующий класс CSS, как мы сделали в первом столбце:

• Класс CSS: родительский столбец

Добавить модуль Blurb (целевой модуль)

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

Внутри основной части рекламного объявления вставьте следующий HTML-код, который включает тот же div с классом «divi-module-destination», куда вы хотите вставить переносимый модуль (модули) (в данном случае под псевдотекстом основного текста):

<div class="divi-module-destination"></div>

Добавить модуль переключения (переносной модуль)

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

Затем добавьте следующий класс CSS в модуль Toggle, чтобы обозначить его как модуль, который мы хотим переместить / вставить в рекламное объявление:

• Класс CSS: переносимый модуль divi

Результат

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

Пример 3: Вставка модуля кнопок внутри модуля Blurb

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

Добавить кнопочный модуль (портативный модуль №2)

Для этого добавьте новый модуль кнопок под модулем переключения, который уже вставлен в рекламное объявление.

Затем добавьте следующий класс CSS в модуль кнопки:

• Класс CSS: divi-portable-button

Результат

Теперь проверьте результат на живой странице. Модуль Blurb теперь содержит модуль переключения и модуль кнопок.

А вот соответствующий фрагмент кода, используемый для вставки модуля кнопки внутрь модуля с div «назначения». Основное отличие этого фрагмента кода заключается в том, что мы ориентируемся на родительский элемент ( скрытый за кулисами div- оболочку кнопки) класса кнопки «divi-portable-button».

Часть 2: Как вставить строки Divi в модуль

Если вы хотите вставить целую строку (или строки) внутри модуля, процесс очень похож на вставку модуля в другой модуль. Нам нужно добавить класс «parent-section» в раздел, содержащий целевой модуль и переносимые строки, которые мы хотим вставить. Нам нужно добавить div с классом «divi-row-destination» в модуль назначения. И нам нужно добавить класс «divi-portable-row» к строкам, которые мы хотим вставить в целевой модуль.

Вот как это сделать.

Добавить раздел

Сначала добавьте на страницу новый обычный раздел.

На расширенной вкладке настроек раздела добавьте следующий класс CSS:

• Класс CSS: родительский раздел

Добавить строку для модуля назначения

Добавьте новую строку из одного столбца для размещения модуля назначения.

Добавить модуль переключения (модуль назначения строки)

В этом примере мы собираемся вставить строку внутри модуля Toggle. Поэтому добавьте в строку новый модуль переключения.

Поскольку модуль Toggle является нашим целевым модулем, откройте настройки для переключателя и добавьте следующий HTML-код к содержимому тела:

<div class="divi-row-destination"></div>

Создать переносимую строку

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

Заполнить строку содержимым

На этом этапе вы можете заполнить строку любым содержимым / модулями, которые хотите, с помощью Divi Builder. Имейте в виду, что все, что находится в строке, в конечном итоге будет вставлено в модуль переключения, поскольку оно находится внутри строки.

Добавить класс в строку

Затем откройте настройки строки и обозначьте ее как строку, которую вы хотите вставить в модуль Toggle, присвоив ей следующий класс CSS:

• Класс CSS: divi-portable-row

Как это работает

Напоминаем, что строка останется отдельной от модуля при редактировании макета с помощью Divi Builder на бэкэнде. Но есть возможность вставить строку внутри модуля Toggle.

Результат

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

А вот соответствующий фрагмент кода, который делает это возможным. Обратите внимание на используемые классы.

Вставка нескольких строк внутри модуля

Пока вы сохраняете один экземпляр модуля назначения (т. Е. Div с классом «divi-row-destination») для каждого раздела, вы можете вставить несколько строк в это место назначения, просто присвоив ему тот же класс «divi-portable-row». ».

Например, вы можете добавить еще одну строку с модулем галереи над строкой с ранее созданными пунктами меню. Затем присвойте строке тот же класс «divi-portable-row».

Обе строки с классом «divi-portable-row» будут вставлены в модуль Toggle.

Использование плагина / шорткода

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

Последние мысли

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

Плюс подумайте обо всех возможных приложениях!

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!