Создайте свои собственные модули с группами модулей Divi 5

Вы хотите создавать пользовательские модули Divi, не касаясь строки кода? С помощью новых групп модулей Divi 5 вы теперь можете объединить несколько элементов в единую многоразовую компоновку - все изнутри визуального строителя. Нет JavaScript. Нет php. Просто перетащите, бросайте и дизайн.

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

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

Что такое новые группы модулей Divi?

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

Группы модулей могут быть перемещены по всей вашей странице без проблем и станут особенно полезными, когда будут выпущены Flexbox и функция Clip Builder. После выпуска контурного строителя вы сможете использовать группы для создания пользовательских макетов блога, меню нижнего колонтитула, галерей изображений и многого другого. Таким образом, это полезно сейчас, но через несколько месяцев его будет еще более впечатляющим.

Вложенные ряды были еще одной запрошенной функцией Divi, которую мы добавили в Divi 5. Они позволяют вам помещать ряды в ряды до содержания вашего сердца. Хотя название «группы модулей» может показаться, что вы можете группировать только модули, противоположность верна. На самом деле, вы можете использовать вложенные ряды внутри групп, что открывает возможность построить бесконечно вложенные структуры макета и заставить их стать частью многоразовой группы.

Как создать свои собственные модули Divi

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

1. Создайте свой собственный модуль Blurb

Наш встроенный модуль рекламы

Модуль Blurb является основным продуктом во многих дизайнах Divi. Это модуль, но когда вы его разбиваете, у него есть лишь несколько вещей, которые заставляют его щелкнуть. Это:

Изображение/значок, заголовок/заголовок и содержание тела. Мы можем создать группу модулей и поместить эти модули в нее: изображение или значок, заголовок и текстовый модуль. Вместе эти три модуля могут воспроизводить один и тот же контент, используемый в модуле Blurb.

Анатомия модуля рекламы

Создание собственной группы модулей рекламы

Вот пример модуля BLURD с значком с левой стороны и визуально идентичной репликации модуля Blurb с использованием:

Группа, внутренняя строка, столбец (1) с модулем значков и столбцом (2) с модулем заголовка и текста.

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

Единственное, что особенное с этим расположением - это то, что первый столбец устанавливается на ширину 18%, а второй занимает ширину 82% (параметры размера столбцов новые с обновлением функции вложенных строк).

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

2. Создайте свой собственный модуль ценовых таблиц

Наш встроенный модуль ценообразования

Некоторые модули Divi продолжаются. Это так с модулем таблицы ценообразования. Есть несколько полей на таблицу ценообразования, как вы можете видеть ниже.

Анатомия модуля таблицы ценообразования

Создание собственной группы модулей ценообразования

Если мы воссоздаем модуль таблицы ценообразования, используя группы модулей и отдельные модули, мы получим этот результат.

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

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

3. Создайте свой собственный отзывник

Наш встроенный показатель модуля

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

Создание собственной группы модулей отзывов

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

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

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

Мне также нравится идея, что вы сможете создать пользовательский модуль отзывов, например, приведенный выше, и использовать предстоящий строитель петли, чтобы вытащить отзывы из CPT. Это даст вам свободу дизайна + возможность строить быстрее со структурированными данными и контентом.

Сохраните свой пользовательский модуль как глобальный элемент

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

Модал появится, где вы можете назвать свой модуль для легкого использования позже. Переверните « Save As Global », чтобы хранить его в библиотеке Divi. Любое изменение, которое вы вносите более поздние обновления каждой копии на вашем сайте.

У вашего глобального элемента теперь будет отличный зеленый цвет, чтобы помочь вам заметить, что он глобальный.

Вы можете получить доступ ко всем своим сохраненным глобальным элементам и другими предметами библиотеки на панели управления> Divi> Divi Library . Редактирование глобального элемента здесь обновит его на сайте. Вы также можете редактировать глобальные элементы непосредственно на страницах, на которых они используются (и это будет обновлять по всему сайту).

Нужен модуль на каждом сайте, который вы строите? Переверните « Сохранить в Divi Cloud ». Модуль сейчас находится в вашей облачной библиотеке, готов к любому проекту в любом месте. Библиотечные элементы держат вещи на одном сайте, в то время как Divi Cloud путешествует с вами с сайта на сайт. Используйте как ускорить сборки, так и вступить в большую последовательность.

Получите Divi Cloud

Создайте что -то новое сегодня

Группы модулей вкладывают новую силу в ваши руки. Вы можете формировать макеты, которые являются оригинальными и именно то, что вам нужно. Начните с воссоздания модуля BLURD и посмотрите, как подходит процесс. Когда вы привыкаете использовать Divi таким образом, вы заметите, что создаете еще более сложные проекты, потому что вы можете использовать стандартные модули или создавать свои собственные.

Многое из того, что было покрыто выше, было возможно с Divi до того, как группы упали, но они облегчают ситуацию. Особенно, когда мы запускаем Flex и The Loop Builder, группы станут основным продуктом вашего дизайна с Divi.

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