Огляд конструктора сторінок Divi Builder для WordPress

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

Плюси

• Конструктор тем та бібліотека Divi допоможуть створювати закінчені дизайни веб-сайтів.
• Величезна колекція красиві готові зразки.
• Можна легко налаштувати модулі вмісту, стовпці, рядки та розділи.
• Членство в Elegant Themes пропонує відмінне співвідношення ціни та якості.
• Фантастичне рішення для початківців, середніх та просунутих користувачів.

Мінуси

• Конструктор Divi Builder не можна придбати окремо.
• На відміну від Beaver Builder та Elementor, безкоштовна версія Divi Builder недоступна.
• Бракує кількох модулів контенту, які можна знайти в альтернативних рішеннях.

Divi Builder по праву вважається одним із найкращих на ринку конструкторів сайтів з перетягуванням. Цей популярний плагін WordPress дозволяє створювати складні адаптивні макети веб-сайтів за лічені хвилини без використання коду.

Тому навіть якщо немає досвіду в розробці веб-сайтів, можете створювати красиві веб-сайти за допомогою Divi Builder і додавати до свого контенту мультимедійні матеріали, такі як зображення, стильний текст, відео, форми, таблиці та багато іншого.

У цій статті докладно показано, як використовувати Divi Builder для створення професійних макетів і сторінок веб-сайтів. Це дасть краще розуміння того, чому так багато власників веб-сайтів використовують цю плагін WordPress.

Що пропонує Divi Builder

Наприкінці 2018 року WordPress випустив версію 5.0 свого програмного забезпечення. Це був значний випуск, оскільки замінив старий редактор WYSIWYG (What You See Is What You Get) новим редактором блоків перетягування Gutenberg.

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

Багатьом подобається простота нового редактора блоків WordPress, проте, якщо ви використовували його, зрозумієте, що це базове рішення з безліччю обмежень і кількома параметрами налаштування.

На противагу цьому можливості конструктора безмежні. Його можна використовувати для створення всього, від простих дизайнів блогів до складних інтернет-магазинів та веб-сайтів компаній. Це справді виводить створення сторінок на новий рівень.

Конструктор Divi Builder був запущений у 2015 році як автономне рішення для верстки сторінок, яке працює з будь-якою темою WordPress. Раніше цю функцію можна було використовувати лише у темі Divi WordPress, випущений Elegant Themes на два роки раніше.

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

Добрим прикладом розвитку Divi Builder є візуальний конструктор. У ранніх версіях Divi Builder макети користувача створювалися в редакторі WordPress. Пізніше було додано зручний для користувача Visual Builder, за допомогою якого можна створювати зразки у зовнішньому інтерфейсі вашого веб-сайту.

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

Divi Builder має бібліотечну систему, яка зберігає будь-який створений макет. Потім можна за необхідності завантажувати зразки зі своєї бібліотеки та налаштовувати їх відповідно до сторінки, де вони будуть використовуватися.

Плагін поставляється з більш ніж 1000 чудовими готовими макетами, вони випускаються на офіційній торговому майданчику Divi та сторонніх торгових майданчиках.

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

Справжня перевага Divi Builder – це налаштування.

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

Простіше кажучи, якщо елемент є на сторінці, його можна змінити.

Конструктор Divi Builder має чудову підтримку WooCommerce; Elegant Themes називають цю інтеграцію "WooBuilder".

Використовуючи Divi Builder, можна створювати власні макети для сторінок продуктів та додавати модулі контенту для WooCommerce. Також доступні для інтернет магазинів готові зразки.

Запуск Visual Builder

Як тільки плагін буде активовано, побачите кнопку «Використовувати Divi Builder» у верхній частині записів, сторінок та типів записів, що настроюються.

Доступ до невеликої області налаштувань також можна отримати з редактора WordPress, де можна змінювати ширину контенту.

Якщо увійдете в запис або на сторінку в блозі і натиснете кнопку Divi Builder, то побачите повідомлення, в якому говориться, що цей макет побудований за допомогою Divi.

Тепер потрібно натиснути на цю кнопку, щоб запустити конструктор Divi Builder на зовнішньому інтерфейсі вашого веб-сайту.

Однак майте на увазі, що якщо ви вимкнете параметр візуального редактора на екрані профілю WordPress, Divi Builder не працюватиме.

При створенні нового запису або сторінки в блозі, можна використовувати конструктор Divi Builder або редактор WordPress за замовчуванням.

Крім того, можна запустити Divi Builder безпосередньо із зовнішнього інтерфейсу веб-сайту, з панелі адміністратора WordPress. Посилання «Увімкнути Visual Builder» відображатиметься на веб-сайті, коли увійдете в систему.

Хоча конструктор Divi Builder зазвичай використовується користувачами WordPress як заміна редактора WordPress за умовчанням, він може працювати в гармонії з редактором Гутенберга, використовуючи блок макету Divi.

Layout Block можна вставити в будь-яку область та розміщувати поряд із звичайними блоками редактора WordPress.

У контент можна вставити кілька блоків макету конструктора Divi. Можна створювати нові зразки всередині блоку або завантажувати раніше збережені макети зі своєї бібліотеки Divi.

Як бачите, конструктор Divi Builder неймовірно добре доповнює WordPress, не займаючи весь сайт. Використовуйте Divi Builder тільки тоді, коли вам потрібен.

Дивіться також:

Огляд Elegant тем: кращі WordPress теми та плагіни

Гарні макети Divi

Після запуску конструктора Divi Builder буде запропоновано три варіанти.

Можна створити новий макет із нуля, вибрати готовий зразок або клонувати існуючу сторінку.

Якщо виберете готовий макет, бібліотека Divi завантажить та покаже всі готові дизайни. Не хвилюйтеся, якщо випадково закриєте його, тому що його можна завантажити з головного меню Divi Builder у будь-який час.

На момент написання статті доступно понад 1100 зразків та 149 пакетів макетів. Дизайн розділений на 13 категорій: мистецтво та дизайн, бізнес, громадські та некомерційні організації, освіта, події, мода та краса, їжа та напої, здоров'я та фітнес, стиль життя, інтернет-магазин, послуги, простота та технології.

За бажання просто виконайте пошук у готовій бібліотеці шаблонів. Також можна переглядати збережені макети та існуючі сторінки з цієї області.

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

При натисканні на кнопку демонстрації завантажується попередній перегляд у реальному часі. Якщо натисніть «Використовувати цей макет», конструктор Divi Builder розпочне імпорт шаблону або пакета, про який йдеться.

Як і всі рішення для верстки в WordPress, конструктор вставляє шаблони безпосередньо в область основного вмісту записів, сторінок і типів записів, що настроюються.

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

Після імпортування пакета можна розпочати налаштування дизайну, щоб зробити його унікальним. Будь-які внесені зміни можна зберегти і використовувати повторно.

Макети також можна розділити на категорії, що знадобиться у міру зростання вашої бібліотеки.

У головному адміністративному меню Divi є посилання Theme Builder і Library.

Конструктор тем Divi дозволяє створювати унікальні шаблони сторінок з певним верхнім, основним та нижнім колонтитулами.

Можете призначити будь-який макет своїм шаблонам і точно визначити, які області веб-сайту мають відображатися.

Наприклад, можна створити один шаблон для своєї домашньої сторінки та блогу, один для свого інтернет-магазину, один для 404 і ще один для серії записів, що публікуються в блозі.

Кожен збережений макет відображатиметься на головній сторінці бібліотеки Divi.

З цієї області можна отримати доступ до всіх макетів, змінити категорії, а також імпортувати та експортувати.

Вибравши редагування зразків на головній сторінці макету, він буде відображатися в «Каркасному поданні».

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

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

Без сумніву, система шаблонів Library та Theme Builder є основою Divi Builder і однією з причин того, чому конструктор такий універсальний і чому професійні проекти можна створювати так швидко. Ця функція ще немає в альтернативних рішеннях, таких як редактор блоків WordPress за замовчуванням.

Інтерфейс Visual Builder

Кожен конструктор сайтів WordPress працює по-своєму, тому доведеться згаяти час на ознайомлення з тим, як працює візуальний конструктор Divi Builder.

Основний інтерфейс Divi Builder відображається внизу кожної сторінки. Коли меню згорнуто, відображається лише кнопка з трьома точками.

Натискання кнопки з трьома точками завантажує основний інтерфейс. З'явиться безліч опцій, що відображаються в лівій, середній та правій частині.

Зліва розташовано шість кнопок. Кнопка із трьома вертикальними точками завантажує меню налаштувань візуального конструктора.

Це меню дозволяє додати до трьох додаткових кнопок для режиму наведення, режиму кліка та режиму сітки. У режимі наведення при наведенні курсору на них відображатимуться параметри для різних частин сторінки, тоді як режим кліка вимагає клацнути саме по цій частині. Меню сітки показує все одразу.

Тут є кілька інших варіантів зміни режимів перегляду за замовчуванням та увімкнення/вимкнення основних функцій.

Інші кнопки в лівій частині візуального конструктора призначені для перегляду у вигляді каркаса, збільшення та зменшення масштабу дизайну та перегляду сторінки на настільному комп'ютері, планшеті та мобільних пристроях.

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

Режим каркасного перегляду видаляє з перегляду всі елементи дизайну та показує структуру. Це особливо корисно при переміщенні елементів та зміні їх розташування.

У центрі інтерфейсу візуального конструктора є сім кнопок: три ліворуч, три праворуч та великий хрестик посередині, що закриває меню.

Перша кнопка зліва завантажує бібліотеку Divi, друга зберігає макети у бібліотеку, а третя очищає шаблон.

З іншого боку розташовані кнопки для налаштувань, історії редагування та переносимості.

Поле налаштувань дозволяє змінити заголовок сторінки, уривок, вибране зображення, кольори фону, стиль, спліт-тестування, видимість та багато іншого.

Можливість скасовувати і повторювати зміни означає, що не доведеться турбуватися про помилки, т.к. у будь-який момент можна скасувати зміни та повернутися до попередніх станів поточного зразка та для глобальних макетів.

Кнопка перенесення також корисна, оскільки дозволяє експортувати та імпортувати макет сторінки.

Праворуч від інтерфейсу конструктора розташовані кнопки пошуку, довідки та кнопка для збереження макету. Конструктор дозволяє виконувати пошук за режимами перегляду, налаштуваннями, документацією та багато іншого. Якщо натиснути результат пошуку, функція відразу завантажиться.

Helper неймовірно корисний: у ньому показано кілька відеоуроків та посилання на поєднання клавіш. Їх можна використовувати для прискорення процесу створення макетів: для скасування та повернення змін, збереження, зміни режимів перегляду, копіювання модулів та багато іншого.

У Elegant Themes є докладний посібник з Visual Builder, в якому пояснюється, як усе це працює. Це фантастичний довідник, але коли ви вперше використовуєте конструктор Divi, рекомендуємо завантажити готовий варіант і попрацювати з ним. Це допоможе побачити та зрозуміти, як усе це взаємопов'язано.

Рядки, стовпці та модулі.
Принадність конструкторів у тому, що можна заповнювати кожну частину своєї сторінки безліччю різних типів контенту. Сюди входять карти, таблиці, зображення, відео, віджети та багато іншого.

У деяких конструкторах WordPress ці типи контенту називаються блоками. В інших випадках їх називають елементами.

Divi називає їх модулями.

На жаль, назви Elegant Themes трохи суперечливі. У конструкторі Divi Builder вони називаються модулями, але в їх маркетингових матеріалах та документації побачите багато посилань на блоки замість модулів.

У Divi Builder є більше 40 модулів вмісту, і кожен з них містить десятки параметрів, які допоможуть сформувати те, що відображає модуль.

Модулі потрібно розміщувати всередині стовпців та рядків.

Якщо починаєте верстку з порожнього полотна, побачите зелену кнопку зі знаком плюсу, що відображається на сторінці.

При наведенні вказівника миші з'явиться можливість додати новий рядок. Синій контур, що відображається навколо рядка, називається розділом. Можете додати до розділів стільки рядків і стовпців, скільки захочете.

Іншими словами, модулі розміщуються всередині стовпців, стовпці містяться всередині рядків, а рядки розміщуються усередині розділів.

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

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

При натисканні на три крапки в кінці меню відкриється більше десяти додаткових налаштувань.

Додаючи новий рядок до Divi Builder, необхідно вибрати, яку структуру стовпців хочете використовувати для цього рядка.

Можна легко змінити кількість стовпців, що відображаються пізніше, якщо вирішите структурувати елементи по-іншому. Також можете перетягувати стовпці в основній області полотна, доки не знайдете потрібну структуру.

Після вибору структури рядків і стовпців з'явиться поле «Вставити модуль», і тоді зможете вибрати модуль вмісту для свого макету.

Коли вибрано модуль, з'явиться вікно його налаштувань.

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

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

Готові варіанти можуть заощадити час, але якщо хочете максимально використовувати можливості Divi Builder і зробити свої макети унікальними, потрібно вивчити вікно налаштувань для модулів, стовпців, рядків і розділів. Це дасть повний контроль над стилем та положенням контенту на сторінці.

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

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

Важко точно показати, наскільки гнучко Divi Builder використовує текст та зображення.

Використання Legacy Builder

Elegant Themes зробили візуальний конструктор методом за замовчуванням для використання Divi Builder, проте все одно можете за бажання створювати макети у редакторі WordPress.

Конструктор Divi тепер називає внутрішній редактор Legacy Builder.

Щоб використовувати його, необхідно перейти в розширений розділ на сторінці параметрів плагіна Divi Builder, вимкнути останню версію та увімкнути класичний редактор.

Над успадкованим конструктором знаходяться кнопки для повернення до стандартного редактора WordPress.

Ті з вас, хто використовував Divi протягом багатьох років, знайомі зі застарілим конструктором, який відображається внизу. Нові користувачі помітять, що це схоже на режим перегляду візуального каркаса конструктора.

У верхній частині інтерфейсу знаходиться опція імпорту та експорту, за допомогою якої можна створювати резервні копії та відновлювати макети Divi Builder. Поруч із нею знаходиться меню налаштувань, в якому є спліт-тестування та безліч параметрів стилю та налаштувань CSS.

Нижче наведено посилання для збереження до бібліотеки, завантаження з бібліотеки та очищення макета. З іншого боку знайдіть кнопки для скасування змін, повернення змін та перегляду історії змін.

Можна легко вставити на сторінку нові рядки та стовпці, а також додати розділи повної ширини та спеціальні розділи, де стовпці займають кілька рядків.

Оскільки успадкований конструктор відображається безпосередньо в редакторі WordPress, ви не можете попередньо переглянути зміни у макеті в режимі реального часу. Але це означає, що з'являється більше місця для створення варіантів та додавання модулів.

Радимо використовувати це налаштування при структуруванні сторінки, оскільки вона здається менш тісною, ніж візуальний конструктор.

Застарілий конструктор залишається ефективним способом створення макетів, що настроюються, оскільки можна переміщати будь-яку частину сторінки за допомогою функції перетягування.

Для деяких користувачів Divi це, як і раніше, залишається кращим способом створення контенту та стилізації сторінок.

Налаштування плагіна Divi Builder

Переважну більшість настройок можна знайти в головному інтерфейсі Divi Builder, проте деякі додаткові настройки знаходяться у головному меню адміністратора Divi.

На додаток до Theme Builder та Library побачите головну сторінку параметрів плагіна Divi Builder, редактор ролей та центр підтримки.

Сторінка параметрів плагіна розділена на чотири розділи: «Оновлення», «Параметри API», «Інтеграція типів записів» та «Додатково».

Вам потрібно буде ввести своє ім'я користувача Elegant Themes та ключ API, щоб отримувати автоматичні оновлення для Divi Builder.

Щоб використати блок контенту Google Maps, потрібно ввести свій Google API Key у розділі налаштувань API. У цьому розділі також можна вимкнути шрифти Google.

Divi Builder дозволяє точно вибрати, з якими типами записів використовуватимете конструктор сторінок. Наприклад, можете вимкнути Divi Builder для свого типу публікації у галереї.

У розширеному розділі можна знайти безліч інших налаштувань, таких як мініфікація Javascript та CSS та відключення огляду продукту.

Як зазначалося раніше, тут включається застарілий інтерфейс конструктора та замінюється редактор блоків WordPress (Gutenberg) класичним редактором.

Редактор ролей дозволяє вказати, які різні ролі користувачів можуть і не можуть виконувати. Можна визначити, чи можуть користувачі отримати доступ до сторінки параметрів, власника тем, основного інтерфейсу Divi Builder і бібліотеки макетів.

Наприклад, можна дозволити учасникам доступ до конструктора та макетів під час написання записів у блозі, але заборонити їм доступ до сторінки параметрів плагіна.

Останній пункт у меню адміністратора Divi – це «Центр довідки та підтримки».

Угорі відображається системний звіт, в якому вказується, правильність налаштування хостинг для плагіна. Рекомендуємо звернутися до цього звіту, якщо у вас виникли проблеми з Divi. Наприклад, імпорт шаблону може зупинитися через обмеженість ресурсів.

Тут також є можливості надати віддалений доступ до Elegant Themes та поговорити безпосередньо зі службою підтримки.

На цій сторінці є посилання на різні посібники. Крім письмових посібників, є відеоуроки, які допоможуть розпочати роботу з використанням готових варіантів та бібліотекою.

На сторінці підтримки також є опція безпечного режиму та список помилок, згенерованих WP_DEBUG_LOG.

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

Скільки коштує Divi Builder?

Elegant Themes має одну з найпростіших і справедливих цінових політик у світі WordPress.

Можете набути членства в Elegant Themes на річній основі або як одноразову плату. Обидва плани надають доступ до всіх продуктів Elegant Themes та дозволяють використовувати їх на будь-якій кількості веб-сайтів.

Вартість річної ліцензії становить 89 доларів на рік, а для безстрокової ліцензії – 249 доларів.

Якщо ви виберете річну ліцензію, ви зможете продовжувати використовувати продукти Elegant Themes після закінчення терміну дії ліцензії. Однак не отримайте жодної підтримки або оновлень після закінчення терміну вашого членства.

Ліцензія на довічний доступ має сенс, якщо плануєте використовувати продукти Elegant Themes понад два роки.

Усі ліцензії постачаються з 30-денною гарантією повернення грошей без будь-яких питань, і можете скасувати своє членство у будь-який час.

Divi Builder – це лише частина членського пакету Elegant Themes.

Членство також дає вам доступ до універсальної теми Divi. Це чудова тема WordPress для використання шанувальниками Divi Builder, оскільки функція побудови сторінок вбудована безпосередньо на тему.

Членство в Elegant Themes також включає красиву журнальну тему WordPress Extra – дизайн, створений на базі Divi Builder.

Ще до складу членства входить плагін Цвісти для електронного маркетингу та генерації лідів WordPress та плагін для спільного використання у соціальних мережах Монарх.

Elegant Themes має одну з найкращих областей підтримки у світі WordPress. У їхній великій галузі документації є докладні письмові та відеоуроки з усіх продуктів.

Сподіваємося, що вам усім сподобався цей детальний огляд Divi Builder.

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

Джерело: athemes.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/