Все, что вам нужно знать о группах модулей Divi 5

Divi 5 улучшает создание веб -сайтов с помощью новых функций и непревзойденной гибкости. Module Groups является одним из самых последних дополнений к Divi 5. Эта функция позволяет вам организовать несколько элементов в одну управляемую группу, которую вы можете стилировать, перемещаться или дублировать одним щелчком. Эта функция становится особенно полезной, когда выпущены предстоящие функции, такие как Flexbox и The Query Loop Builder.

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

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

Давайте рассмотрим, что возможно с группами модулей.

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

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

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

Почему модульные группы имеют значение

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

1. Они являются частью будущего Divi: модульные группы построены с учетом передовой архитектуры Divi 5. Они готовы к предстоящим функциям, таким как Flexbox и The Query Loop Builder, которые сделают создание динамических макетов на бриз. Инвестирование в группы модулей теперь подгоняет вас на долгосрочный успех, особенно по мере развития Divi 5.
2. Они экономят время: с группами модулей вам не нужно иметь дело с повторяющимися изменениями. Вы можете стиль, перемещать или дублировать сложные макеты в одном действии, значительно сокращая время дизайна. Профиеты для групп модулей делают это дальше, позволяя мгновенно сохранять и применять предопределенные конфигурации.
3. Они способствуют последовательности конструкции: группы модулей позволяют вам гарантировать, что каждый элемент в группе, от кнопок до текста, соответствует тем же правилам стиля. Для тех, кто управляет фирменными сайтами, модульные группы могут поддерживать отточенные и профессиональные проекты на всем вашем сайте.
4. Более творческая свобода: модульные группы позволяют вам экспериментировать без необходимости редактировать каждый элемент индивидуально. Вы можете с легкостью создавать выдающиеся дизайны, даже если вы новичок в Divi. Комбинирование вложенных рядов и групп модулей может помочь вам разблокировать бесконечно гнездящие контейнеры.

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

Как использовать группы модулей в Divi 5

Начать работу с группами модулей легко. Добавьте новую строку на страницу в Divi 5 и выберите 3-колонную макет.

В Divi 5 вы заметите новый групповой модуль . Нажмите, чтобы добавить его в первый столбец.

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

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

Во 2 -м столбце вложенной строки добавьте модуль заголовка и стиль его, как хотите.

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

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

Практические варианты использования для групп модулей

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

1. В случае использования в будущем: публикации и продукты

Группы модулей построены, чтобы сиять с предстоящим строителем Divi 5. Подготовьтесь сейчас, группируя элементы для динамических макетов, например, предварительные просмотры в блоге или списки продуктов WooCommerce. После того, как наступит строитель петли, эти группы будут легко заполнять динамическое содержание, экономя ваше время и обеспечивая безупречные, масштабируемые конструкции.

2. Раздела призыв к действию

Группируйте смелый заголовок, убедительное подзаголовок и яркая кнопка с эффектом падения для создания многоразовых CTA. Нужен один и тот же CTA на нескольких страницах? Дублируйте группу за секунды или сохраните ее в Divi Cloud для мгновенного доступа. Это сокращает время настройки, обеспечивая, чтобы каждый CTA выровнялся с внешним видом вашего бренда.

3. Свидетельские разделы

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

4. Категории продуктов

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

5. Ресторанные меню

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

Группы модулей в контексте Divi 5

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

Вложенные ряды

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

Проектные переменные

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

Продвинутые единицы

Вы можете использовать CSS -единицы REM, EM, VW, VH или других, чтобы создать отзывчивое расстояние и размеры для групп модулей. Это гарантирует, что сгруппированные элементы выглядят потрясающе на каждом устройстве, от рабочих столов до смартфонов.

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

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

1. Планируйте свои макеты: перед группой модулей набросайте структуру вашего раздела или используйте инструмент прототипирования, чтобы помочь вам спланировать элементы, которые вы хотите использовать. Это предварительное планирование предотвращает дополнительную работу и гарантирует, что ваши группы логичны и многоразовые.
2. Используйте Divi Cloud: сохраните ваши любимые группы модулей в Divi Cloud, чтобы превратить их в перекрестные активы. Например, вы можете сохранить полированную группу членов команды и потянуть ее на любой сайт с несколькими щелчками.
3. Отзывчивость теста с точками останова: используйте настраиваемые точки останова Divi 5, чтобы ваши группы модулей выглядели безупречными на каждом устройстве. Регулируйте расстояние между расстоянием или размерами шрифтов для мобильных устройств в настройках группы, чтобы избежать ручных изменений.
4. Используйте переменные дизайна: чтобы добавить сплоченность в свои конструкции, установить переменные дизайна для цветов, текста, шрифтов или правил чисел (например, расчеты Clamp ()), чтобы облегчить небольшие изменения.
5. Получите творческий подход с помощью стиля: экспериментируйте с смелыми эффектами, такими как анимация Hover или синхронизированные переходы в группах модулей. Например, добавьте эффект масштаба в сгруппированную кнопку и изображение для динамического CTA.
6. Экспериментируйте с Divi 5: Public Alpha Divi 5 - это ваша игровая площадка - создайте тестовый сайт для изучения групп модулей. Попробуйте сгруппировать различные комбинации модулей или тестировать новые идеи стиля, чтобы узнать, что возможно.

Дизайн умнее с группами модулей в Divi 5

Группы модулей Divi 5 упрощают ваш рабочий процесс, обеспечивая согласованность дизайна и подготовку вас к будущему динамических макетов. Будь то элементы дизайна в комплекте для многоразового CTA, создавая сплоченные отзывы или экспериментируя с жирным шрифтом, группы модулей позволяют вам работать умнее и быстрее создавать веб -сайты. По мере развития Divi 5 эта функция позволяет вам создавать эффективные и красивые веб -сайты.

Начните экспериментировать с группами модулей в публичной Alpha Divi 5 и испытайте новый способ создания веб -сайтов с Divi. Как отмечалось ранее, Divi 5 готов к новым сайтам, но мы пока не рекомендуем его для существующих сайтов.

Мы призываем вас присоединиться к сообществу Divi, чтобы поделиться вашими созданиями модулей. Разместите свои проекты в группе Divi Facebook или Tag @ElegantThemes на X.

Давайте построим что -то удивительное вместе!