Divi 5: анализ новой эпохи Divi и что это значит для владельцев сайтов и разработчиков

Эта статья доступная на языке: Українська

Введение

Напомню: Divi - это флагманская тема для WordPress от компании Elegant Themes с визуальным графическим конструктором страниц сайта. Тема Divi позволяет создавать современные сайты без программирования.

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

В этой статье рассмотрим:

• чем Divi 5 принципиально отличается от предыдущей версии Divi 4,
• какие технические и практические последствия это имеет,
• и главное – насколько перспективно строить сайты на Divi 5 в 2026+ годах.

Divi 4: пределы эволюционного подхода

Divi 4 годами развивался эволюционно: добавлялись новые модули, расширялся Visual Builder, появлялись пресеты, глобальные стили и Theme Builder.

Но фундамент Divi 4 оставался прежним: Divi 4 с самого начала строился на PHP-шорткодах. Каждая секция, строка и модуль хранились шорткодом прямо в контенте страницы:

[et_pb_section]...[/et_pb_section ]

Это обеспечивало определенную гибкость, но имело серьезные побочные эффекты:

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

На малых сайтах это было почти незаметно, но на больших лендингах, маркетинговых сайтах, образовательных платформах, магазинах с WooCommerce Divi 4 начинал “тяжелеть”: становился более медленный билдер, становилась более сложная поддержка страницы, нужно было больше компромиссов в быстродействии.

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

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

1. Отказ от шорткодов (shortcodes)

Отказ от шорткодов, наверно, это самое ключевое улучшение темы. Divi 5 отказывается от шорткодов (shortcodes) и переходит на block-подобный формат хранения, который концептуально ближе к архитектуре WordPress блоков Gutenberg.

Это сделано ради лучшей вложенности модулей (вплоть до «бесконечной»), для большей стабильности работы, лучшей совместимости с WordPress и более быстрого и простого парсинга страниц.

Divi 5 имеет мигратор, который конвертирует шорткоды Divi 4 в формат Divi 5. Также разработчиками заявлен режим "backward compatibility" (обратная совместимостт): контент на шорткодах может временно работать в Divi 5, но с меньшей производительностью, пока не выполнена миграция и не обновлены сторонние модули.

2. Рост производительности Builder + Frontend

Почему Divi 5 быстрее?

1. Работа Без шорткодов, следовательно меньше PHP-обработки
2. Lazy loading ( отложеная загрузка) скриптов и стилей: загружается только необходимое на странице
3. Оптимизированная архитектура, следовательно меньше «пустых» операций
4. REST API лучше использует современные браузерные API

Если вы часто работаете с большими сайтами и страницами (100+ модулей на странице) - эта разница будет огромной.

Visual Builder Divi 5 существенно быстрее в работе: меньше ошибок на больших страницах, быстрее открытие настроек, более плавная работа с макетами,

По данным Elegant Themes серверный рендеринг Divi 5 более чем в 2 раза быстрее, а потребление памяти в 2 раза меньше, чем у Divi 4. Это напрямую влияет на TTFB страниц сайтв, Core Web Vitals и стабильность сайта на shared/VPS-хостингах.

3. Дизайн-система нового уровня

Divi 5 движется в сторону полноценной дизайн-системы, а не просто набора опций.

Основные инструменты:

• Design Variables (глобальные переменные цветов, шрифтов, отступов) как отдельная сущность в билдере.
• Option Group Presets (продвинутые пресеты),
• Option Group Presets (продвинутые пресеты) + в целом переосмысленное управление пресетами/классами для быстрого применения стилей и массовых изменений (массовое управление стилями),

Что это значит? В Divi 5 вы можете определить переменную один раз (например, основной цвет #3A6351) и использовать ее везде. Меняете цвет — меняется на всем сайте мгновенно. Меньше ручной работы — больше системности.

Это особенно важно для:

• агентских сайтов,
• многоязычных проектов,
• сайтов с десятками страниц.

4. Семантические элементы: контроль над HTML-структурой

Это важнейшая новая возможность для SEO и доступности. Ранее в Divi 4 каждая секция рендерилась как обычный <div>. Теперь в Divi 5 вы можете изменить элемент на:

<section>
<header>
<nav>
<article>
<footer>
<button>

Пример: Кастомная навигация

Вы построили собственное меню из модулей текст + иконки. В Divi 4 поисковые системы рассматривали этот код как «просто div'ы». Теперь в Divi 5 оберните меню контейнером, установите его Element Type на «nav» и поисковій бот будут понимать это как навигацию.

Раньше в Divi 4 если вам нужна была кастомна HTML-обёртка вокруг модуля - то вам приходилось:

• Писать пользовательский код PHP в дочрной теме
• Использовать сторонние плагины
• Жертвовать функционалом

Divi 5 решает эту проблему просто - два новых поля в HTML Option Group: HTML Before Element вставляет HTML перед модулем, HTML After Element вставляет HTML после модуля.

5. Адаптивность без ограничений

Divi 4 имеет 3 точки брейкпойнта: настольный компьютер, планшет, мобильный. Это базовый подход, который допускает неточности на средних устройствах.

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

• Вложенные строки (Nested Rows) — можно создавать сложные вложенные макеты
• CSS Flexbox контроль — больше гибкости в позиционировании элементов
• Advanced Units : гибкие единиці измерений — поддержка em, rem, vw, vh, calc(), clamp()

Это сближает Divi 5 с современными CSS-подходами и профессиональным front-end и позвляет точнее подстраивать дизайн под реальные девайсы.

6. Интерфейс конструктора страниц : от «тяжелого» до «сдержанного»

Divi 4 часто критиковали за:

• Медленную загрузку конструктора на сложных страницах
• Хаотичные вкладки и меню
• Отсутствие темной темы для вечерней работы

Divi 5 переработал весь UX и теперь конструктор значительно более удобен в повседневной работе:

• breadcrumbs ("хлебные" крошки) для навигации и легкой ориентациим во вложенной структуре объектов,
• dockable panels (элементы интерфейса, которые можно перемещать, закреплять (пристыковывать) к краям окна, откреплять в свободное плавание или группировать между собой),
• поиск и фильтрация настроек,
• светлая/темная тема,
• быстрое редактирование в один клик.

Это снижает когнитивную нагрузку при работе и ускоряет саму работу.

7. Новые возможности и правила для разработчиков

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

Divi 5 вводит новый, модульный API:

• Легче писать кастомные модули
• Лучшая документация для разработчиков
• Больше хуков и фильтров
• REST API-first подход (проектирование интерфейса взаимодействия стоит на первом месте, предшествуя написанию кода)

Для разработчиков это означает:

Сравнительная таблица Divi 4 и Divi 5: итог

Выводы: стоит ли создавать сайты на Divi 5?

Оставайтесь на Divi 4, если:

• У вас уже есть крупные сайты, построенные на Divi 4
• Вы зависимы от сторонних плагинов, которые еще не адаптированы к Divi 5
• Требуется 100%-гарантированная стабильность (альфа-фаза несет риски)
• Не нужны новые функции
• нет staging-среды для тестирования вашего сайта с Divi 5.

Переходите на Divi 5, если:

• Начинаете новый проект — нет причин не пользоваться современной версией
• Нужна высокая производительность — разница будет заметна
• нужна дизайн-система, а не «набор настроек».
• Разрабатываете кастомные модули/плагины — новый API позволяет больше
• Нужен контроль над HTML-структурой (SEO, доступность)
• Готовы быть early adopter'ом и давать фидбек

Перспективность Divi 5

Divi 5 — это:

• отход от устаревших shortcodes,
• современная архитектура,
• ставка на производительность,
• стратегическая совместимость с будущим WordPress.

Divi5 перестает быть просто «визуальным билдером» и становится полноценной платформой для построения сложных сайтов.

Если Divi 4 был «комбайном для дизайна», то Divi5 — это инженерный фундамент, на котором можно без страха строить долгосрочные проекты.