Divi 5: Аналіз нової ери Divi та її значення для власників і розробників сайтів

Ця стаття доступна також на мові: Русский

Введення

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

У 2024 році Elegant Themes офіційно оголосила про Divi 5 як найбільше оновлення теми Divi.
Насправді це не просто нова версія з новими функціями, а повний перезапуск архітектури, що змінює підхід до створення сайтів на темі Divi WordPress.

У цій статті ми розглянемо:

• як Divi 5 принципово відрізняється від попередньої версії Divi 4,
• які технічні та практичні наслідки це має,
• і найголовніше – наскільки перспективним є створення сайтів на Divi 5 у 2026+.

Divi 4: Межі еволюційного підходу

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

Але основа Divi 4 залишилася незмінною: Divi 4 з самого початку була побудована на PHP-шорткодах. Кожен розділ, рядок і модуль зберігалися коротким кодом безпосередньо в вмісті сторінки:

[ et_pb_section]... [/et_pb_section ]

Це давало певну гнучкість, але мало серйозні побічні ефекти:

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

На малих сайтах це було майже непомітно, але на великих цільових сторінках, маркетингових сайтах, освітніх платформах, магазинах з WooCommerce, Divi 4 почав «важчати» : конструктор ставав повільнішим, сторінка — складнішою, і потрібні були більше компромісів у швидкості.

Divi 4 з роками еволюціонував із «функціями поверх функцій», що накопичило технічний борг, ускладнило код і зробило Builder важчим на великих сторінках.

Divi 5 — це фреймворк, переписаний з нуля з більш модульною архітектурою. Ідея полягає в тому, що елементи/модулі поводяться більш незалежно, і для роботи модуля витягуються лише необхідні ресурси, а не великий моноліт усього коду. Ця функція безпосередньо інтегрована у масштабування проєкту, майбутні функції та чистішу підтримку

1. Відмова від коротких кодів

Відмова від коротких кодів, мабуть, є найважливішим покращенням цієї теми. Divi 5 відмовляється від коротких кодів і переходить на блочний формат зберігання, який концептуально ближчий до архітектури блоків Gutenberg WordPress.

Це робиться для кращого вкладення модулів (до «нескінченності»), більшої стабільності, кращої сумісності з WordPress та швидшого й простішого парсингу сторінок.

Divi 5 має мігратор, який конвертує короткі коди Divi 4 у формат Divi 5. Розробники також оголосили режим «зворотної сумісності»: контент на shortcode може тимчасово працювати в Divi 5, але з нижчою продуктивністю, доки не буде виконано міграцію та оновлення сторонніх модулів.

2. Підвищення продуктивності Билдера + фронтенду

Чому 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 та стабільність сайту на спільному/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 пошукові системи розглядали цей код як «просто divs». Тепер у Divi 5 обгорніть меню контейнером, встановіть його тип елемента на "nav", і пошуковий бот зрозуміє це як навігацію.

Раніше, у Divi 4, якщо потрібен був власний HTML-обгортка навколо модуля, потрібно було:

• Напишіть власний PHP-код у дочірній темі
• Використовуйте сторонні плагіни
• Жертвування функціональністю

Divi 5 вирішує цю проблему просто — два нові поля в групі опцій HTML: HTML Before Element вставляє HTML перед модулем, HTML After Element вставляє HTML після модуля.

5. Адаптивність без обмежень

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

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

• Вкладені рядки — можна створювати складні вкладені макети
• CSS Flexbox Control – більша гнучкість у позиціонуванні елементів
• Advanced Units: гнучкі одиниці вимірювання — підтримка em, rem, vw, vh, calcul(), clamp()

Це наближає Divi5 до сучасних CSS-підходів і професійного фронтенду, а також дозволяє точніше адаптувати дизайн до реальних пристроїв.

6. Інтерфейс конструктора сторінок: від «важкого» до «непомітного»

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

• Повільне завантаження конструктора на складних сторінках
• Хаотичні вкладки та меню
• Відсутність темної теми для вечірньої роботи

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

• «хлібні крихти» для навігації та легкої орієнтації в структурі вкладених об'єктів,
• 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% гарантованої стабільності (альфа-фаза несе ризики)
• Нові функції не потрібні
• немає середовища для тестування вашого майданчика з Divi 5.

Оновіть до Divi 5, якщо:

• Коли починаєте новий проєкт, немає причин не використовувати сучасну версію
• Якщо потрібна висока продуктивність, різниця буде помітною
• Вам потрібна система дизайну, а не «набір налаштувань».
• Розробка власних модулів/плагінів — новий API дозволяє робити більше
• Вам потрібен контроль над HTML-структурою (SEO, доступність)
• Готовий бути раннім користувачем і давати зворотний зв'язок

Divi 5 Майбутнє

Divi 5:

• Відходить від застарілих коротких кодів (шорткодів),
• Сучасна архітектура,
• Зосередження на результатах,
• стратегічна сумісність із майбутнім WordPress.

Divi5 перестає бути просто «візуальним конструктором», він стає повноцінною платформою для створення складних сайтів.

Якщо Divi 4 був «конструкторським комбайном», то Divi5 — це інженерна основа для будівництва довгострокових проєктів без страху.