Divi 5 Эксклюзивные функции (пока)

Опубликовано: 2025-06-09

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

Divi 5 готов к использованию на новых сайтах.

Оглавление
  • 1 8 включает в себя эксклюзив для Divi 5 (и как они работают)
    • 1.1 1. Настраиваемые точки останова
    • 1.2 2. Опционные пресеты
    • 1.3 3. Усовершенствованные подразделения
    • 1.4 4. Проектные переменные
    • 1,5 5. Вложенные ряды
    • 1.6 6.
    • 1.7 7. Менеджер атрибутов
    • 1.8 8. Настройки Поиск и фильтрация
  • 2 Как Divi 5 складывается против популярных вариантов
    • 2.1 Что это значит для ваших проектов
  • 3 Что будет дальше?
    • 3.1 макеты Flexbox
    • 3.2 Builder и обновления Woocommerce
    • 3.3 Расширенные цвета
    • 3.4 Планирование бета -версии и миграции
  • 4 Готовы попробовать Divi 5? Вот как начать

8 Особенности эксклюзивные для Divi 5 (и как они работают)

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

1. Настраиваемые точки останова

Функция, выпущенная 6 февраля 2025 года

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

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

За пределами стандартного трио

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

С Divi 5 вы можете установить точки останова для:

  • Телефон (<767px)
  • Телефон широкий (<860px) - идеально подходит для ландшафтного мобильного просмотра
  • Планшет (<980px)
  • Широкая таблетка (<1024px) - выводит большие таблетки и аналогичные устройства
  • Настольный компьютер (> 981px)
  • Широкоэкранный (> 1280px)
  • Ультра широкий (> 1440px)

Другие строители страниц WordPress предлагают некоторое управление точкой останова, но ни один из них не соответствует точке и простоте использования Divi 5. Система остается интуитивной, с теми же знакомыми элементами управления Divi, применяемыми во всех точках останова.

Визуальная обработка точки останова

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

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

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

Узнать больше

2. Опциональные пресеты

Функция, выпущенная 11 марта 2025 года

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

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

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

Почему это важно для вашего рабочего процесса

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

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

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

Узнать больше

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

Функция, выпущенная 19 марта 2025 года

Divi 5 улучшила свою обработку подразделений CSS, облегчая адаптивную дизайн.

Теперь вы можете получить доступ к всему ассортименту подразделений CSS, необходимых для сегодняшнего веб -дизайна непосредственно внутри строителя. Это означает, что вы можете использовать пиксели (PX), проценты (%), EMS (EM), корневые EMS (REM), единицы ViewPort (VW, VH, Vmin, Vmax) и еще более продвинутый выбор, такие как ширина символов (CH) или дробные единицы (FR) для сетки.

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

Divi 5 Advanced Units

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

Когда вы строите сайты, которые вы хотите хорошо выглядеть на телефонах, планшетах и ​​настольных компьютерах, использование только пикселей может создавать головные боли. Элемент шириной 300PX отлично смотрится на рабочем столе, но может сломать ваш макет на мобильном телефоне.

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

Теперь комбинируйте единицы с функциями CSS, такими как Calc (), min (), max () и clamp () и увидите реальную магию. Divi 5 поддерживает все это, позволяя вам создавать действительно плавные макеты, которые адаптируются к любому размеру экрана.

Например, вы можете установить высоту участка для расчета (80vh - 60px), чтобы он забрал большую часть экрана, оставляя место для заголовка. Или используйте зажим (16px, 4VW, 22px) для текста, который растет с экраном, но остается в чтении.

Гибкость зажима ()

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

Вам может понадобиться заголовки, которые растут с размером экрана, но остаются читаемыми. В модуле заголовка вы можете установить размер текста для зажима (36px, 5VW, 72px). Заголовок не будет меньше 36px или больше 72px, но между этими размерами он будет масштабироваться на 5% от ширины просмотра.

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

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

  • Для текста, единицы REM держат все пропорционально. Если вы установите текст вашего тела на 1Rem и заголовки на 2.5Rem, изменение базового размера шрифта обновляет все пропорционально.
  • Для макетов вы можете попробовать смешать фиксированные и жидкие единицы. Боковая панель может работать лучше всего при 300PX, в то время как основной контент может использовать Calc (100% - 350px) для заполнения оставшегося пространства.
  • Для расстояния единицы EM создают набивку, которая масштабируется с размером текста. Это сохраняет ваши пропорции дизайна в соответствии, даже при изменении размеров текста.

Также хорошо играет с другими обсуждаемыми функциями

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

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

  • Создать числовую переменную, такую ​​как размер заголовка: зажим (26px, 5VW, 82px); Для ваших заголовков H1. Примените эту переменную к своему предустановке текста. Ваши заголовки теперь будут плавно масштабироваться между 26 пикселей на мобильных устройствах и 82PX на рабочем столе, с расчеты жидкости 5 ВВт между этими размерами.
  • Установив числовую переменную для зажима (20px, 5VW, 80px), а затем используя ее в качестве поля, у вас есть плотное расстояние на мобильной и щедрой передышке на рабочем столе, с плавным переходом между ними.
  • Установите расстояние между базовым интервалом, используя числовую переменную пространство: 20px и используйте его с помощью Calc () в ваших предустановлениях макета. Например, примените Calc (var (–space-Unit) * 2) для больших зазоров и Calc (var (–space-unit) / 2) для более тесных пространств. Когда вы обновляете базовое значение, все производные интервалы настраиваются пропорционально.

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

Узнать больше

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

Функция, выпущенная 3 апреля 2025 года

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

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

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

Идеальная совпада с пресетами

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

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

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

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

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

Как это помогает в создании поддерживаемого дизайна

Давайте посмотрим на несколько практических примеров переменных дизайна в действии:

  • Держите свой бренд везде везде: настраивайте переменные для ваших цветов, шрифтов и расстояния. Используйте их в пресемах на вашем сайте для последовательного взгляда.
  • Запустите праздничную распродажу: создайте переменные изображения для графики кампании и текстовые переменные для рекламной копии. Когда сезон заканчивается, обновите их один раз, чтобы обновить весь ваш сайт.
  • Пограничные стили: Создайте числовую переменную для радиуса границы, например, 10px, и примените ее ко всем пресетам кнопок, модулям изображений и картам. Если ваше направление дизайна меняется, одно обновление влияет на все округлые углы на протяжении всего сайта.
  • Сделайте обновления клиентов легкими: при создании сайтов для клиентов, которым нужно будет делать обновления, сияют переменные дизайна. Установите переменные для контента, который они часто меняют, например, контактная информация или рабочее время. Они могут обновить их, не касаясь настройки дизайна.

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

Узнать больше

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

Функция, выпущенная 17 апреля 2025 года

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

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

Здание с глубиной

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

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

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

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

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

Просто первый шаг

Вложенные ряды - это только начало эволюции макета Divi 5. Команда работает над полной системой макетов на основе Flexbox, чтобы сделать Divi еще более гибкой.

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

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

Узнать больше

6. Модульные группы

Функция, выпущенная 1 мая 2025 года

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

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

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

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

Группы модулей открывают возможности, с которыми обычно не могут обрабатывать отдельные модули. Создайте сервисную карту, где вам нужно фоновое изображение, наложенный значок, заголовок, описание и две кнопки действий: «Узнайте больше» и «Get Quote».

С группами модулей вы накладываете эти элементы именно так, как вы хотите. Это становится полезным для контента, который не соответствует стандартным шаблонам.

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

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

Ключевым преимуществом является сочетание управления макетом строительства с нуля с удобством обработки нескольких элементов как одного куска.

Построение многоразовых компонентов библиотеки

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

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

Примите легкость интеграции Divi Cloud. С помощью этого инструмента компоненты могут легко перейти от проекта к проекту. Допустим, вы разрабатываете надежный набор групп модулей для конкретного клиентского сайта; Теперь вы можете использовать их в качестве основы для предстоящих заданий. Таким образом, каждый проект получает преимущество предыдущих решений, но сохраняет свою отдельную эстетику.

Бесплано работает с системой проектирования Divi 5

Группы модулей становятся действительно интересными, когда вы используете их с переменными дизайна и предустановки групп опционов. Скажем, вы создаете группу отзывов: цитата, название автора, компания и фото.

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

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

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

Узнать больше

7. Атрибут Менеджер

Функция, выпущенная 16 мая 2025 года

Вы создали кнопку в модуле Action To Action. Цвета работают, и эффекты наклонения выглядят хорошо. Теперь вам нужны те же стили кнопок в контактной форме, но не хотите заголовок CTA или фона.

Регулярное копирование вставки здесь не сработает: вы получите все или ничего. Divi 5 позволяет копировать только части кнопок благодаря функции управления атрибутами. Щелкните правой кнопкой мыши CTA, выберите, что скопировать,

Затем вставьте только эти стили кнопок в контактную форму.

Выберите, что путешествует

Divi 5 разбивает каждый элемент на разные типы атрибутов. Вы выбираете, какие из них копируют:

  • Все атрибуты - все копируется
  • Дизайн -атрибуты - цвета, расстояние, пресеты, но без текста или изображений
  • Атрибуты стиля - только ваши индивидуальные изменения
  • Атрибуты контента - только текстовые и изображения
  • ПРЕДУПРЕТЫ - только предустановленные задания

Скажите, что вам нужен стиль кнопки, но не ее текст. Копировать атрибуты дизайна. Хотите предварительную настройку в секции, но не заполнение? Копировать только пресеты.

Работает между разными модулями

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

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

Ярлыки на уровне группы

Система атрибутов углубляется с селективным управлением групп. Пропустите панели настроек полностью. Щелкните правой кнопкой мыши и примените конкретные группы атрибутов непосредственно из контекстного меню.

Вы скопировали модуль с идеальной кнопкой Preset? Вы можете вставить только эту кнопку предустановку в другие элементы через селективное меню. Там нет охоты на вкладках, и нет дайвинга.

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

Скорость через ярлыки

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

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

Хорошо играет с вашей системой дизайна

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

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

Узнать больше

8. Настройки поиска и фильтрации

Функция, выпущенная 29 мая 2025 года

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

Вы получаете панель поиска прямо в верхней части каждой панели настроек. Введите то, что вам нужно, и Divi показывает только параметры сопоставления. Ищете «границу»? Каждая связанная с границей настройка появляется, в то время как все остальное исчезает. Нужно настроить «прокладку»? Все элементы управления интервалом появляются мгновенно.

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

Фильтрую по тому, что вы изменили

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

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

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

Параметры интеллектуальной фильтрации

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

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

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

Узнать больше

Как Divi 5 складывается против популярных вариантов

Рынок Builder сайта переполнен вариантами, но Divi 5 выделяется благодаря некоторым действительно новым функциям. Вот посмотрите, что отличает Divi 5:

Divi 5 Divi 4 Элементар Гутенберг Кирпич -строитель
Отзывчивые точки останова 7 настраиваемых точек перерыва с масштабированием холста 3 фиксированные точки останова (настольный компьютер, планшет, мобильный) 6 точек останова с настраиваемыми значениями. Нет масштабирования холста. Нет управления визуальной точкой перерыва - требует пользовательских CSS 4 По умолчанию + неограниченные пользовательские точки останова. Нет масштабирования холста.
Проектные переменные Цвета, шрифты, числа, изображения, текст и URL Только глобальные цвета Только глобальные цвета Ограниченные варианты глобальных цветов Поддержка переменных CSS (может потребовать обширной настройки или CSS -структуры)
Предустановленная система Престаты элементов + группы опционов Группа (совместимость с перекрестными элементами) Только предварительные настройки элементов Глобальные стили для некоторых элементов (глобальные классы в настоящее время находятся в ограниченной альфа) Блок -схемы и многоразовые блоки Система глобальных классов (может потребовать обширной настройки или CSS -структуры)
Усовершенствованные единицы CSS Полная поддержка блока CSS: clamp (), calc (), min (), max () через визуальный интерфейс Основные единицы: PX, %, Em. Возможность использовать пользовательские единицы, такие как VH и VW Основные единицы в собственном интерфейсе Ограниченная поддержка подразделения Полная поддержка CSS
Система макета Вложенные ряды с бесконечным гнездованием Фиксированная конструкция с разрезом-концертом Вложенные элементы поддержка Блок с групповыми блоками Glexbox и CSS GRID
Управление атрибутами Выборочная копия/вставка - выберите конкретные атрибуты для передачи Базовая копия/вставка для полных модулей Передача стиля между теми же типами элементов Блок копировать/вставить только Глобальные классы для обмена стилями
Модульные группы Нативные группы модулей для объединения нескольких модулей в многоразовые единицы Нет возможности группировки модулей В гнездовых контейнерах Групповые блоки для объединения нескольких блоков в виде отдельных единиц. Очень простые и часто неуклюжие Раздел, контейнер, блок, элементы Div + компоненты (в настоящее время экспериментальные многоразовые элементы)
Интерфейс строителя Сквоиздные панели, многопанельное рабочее пространство, световой/темный режим Плавающие модалы Интерфейс боковой панели Редактор блоков в области содержания Боковые панели с видом на конструкцию

Что это значит для ваших проектов

Комбинация функций Divi 5 создает систему дизайна, с которой другие строители не могут совпадать. Опционные группы PRESETS и MODULE ONY GURIPLE ставят DIVI 5 опередить конкурентов.

Когда переменные дизайна работают с пресетами и группами модулей, вы получаете что -то универсальное. Справочные переменные внутри предустановки, примените их к сгруппированным элементам, а изменение значений автоматически обновляет каждый элемент на вашем сайте. Добавьте к миксу предстоящие функции Flexbox и Lop Builder, и вы обнаружите, что создаете любой веб -сайт без необходимости пользовательского кодирования.

Что будет дальше?

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

График сгибания

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

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

Loop Builder и Woocommerce

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

Модули Woocommerce будут восстановлены с нуля с использованием архитектуры Divi 5. Текущие модули будут работать через обратную совместимость, но не будут взаимодействовать с пресетами или переменными. Новые модули продукта будут завершены в течение нескольких недель, что приведет к бета -версии WooCommerce.

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

Относительные цвета с поддержкой оттенка, насыщения и легкостью (HSL) позволяют вам построить математические цветные отношения. Установите свой основной цвет один раз, затем автоматически генерируйте вариации: «Первичный синий, но на 20% легче» или дополнительные оттенки, которые обновляются при изменении базы.

HSL

Бета и планирование миграции

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

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

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

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

Готовы попробовать Divi 5? Вот как начать

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

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

Как только WordPress установлен, загрузите Divi 5, так как вы загрузили обычную тему: Внешний вид> Темы> Добавить новую> тему загрузки. Активируйте тему, войдите в систему со своими учетными данными и постройте! Ваша первая сборка покажет вам, почему мы перестроили все с нуля.

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

Скачать Divi 5 Узнайте больше о Divi 5