Divi 5 — как создать сайт самому с помощью конструктора WordPress

Как создать сайт самому конструктором WordPress

Если вам нужно создать сайт самому, но вы не готовы изучать HTML, CSS, PHP и JavaScript, можно воспользоваться визуальным конструктором для WordPress. Одним из наиболее известных решений такого типа является Themes и Builder Divi.

С помощью этой связки создаются сайты непосредственно в визуальном интерфейсе. Разработчик может:

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

сразу видя результат на экране.

Особого внимания сегодня заслуживает Divi 5 — новая версия конструктора, которую Elegant Themes разработала практически с нуля. Она получила новую архитектуру, современную систему построения макетов, Flexbox, CSS Grid, динамический контент, Theme Builder, Loop Builder и другие инструменты для создания сайтов на WordPress.

Поэтому если у вас остро стоит вопрос: «Как создать сайт самому без программирования?», Divi стоит рассмотреть как один из самых актуальных вариантов.

Что такое Divi Builder

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

Вместо того чтобы прописывать HTML или CSS, пользователь может:

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

Официальная документация Elegant Themes называет Divi визуальным no-code drag-and-drop конструктором для WordPress. При этом возможность использовать собственный код для более сложной настройки сохраняется.

Именно сочетание простого визуального управления и большого количества профессиональных настроек является одной из главных особенностей Divi.

Что представляет собой 5 версия конструктора Divi

Divi 5 — не просто небольшое обновление предыдущей версии.

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

Среди возможностей Divi 5:

  • Flexbox
  • CSS Grid
  • вложенные модули
  • Loop Builder
  • динамический контент
  • Design Variables
  • Design Presets
  • Responsive Editor
  • Customizable Breakpoints
  • Theme Builder
  • Canvases
  • Interactions
  • Style Inspector
  • AI-инструменты
  • WooCommerce-модули

Официальная база знаний Elegant Themes сейчас содержит десятки отдельных руководств по этим функциям.

При этом владельцам старых сайтов не обязательно начинать работу с нуля: Divi 5 поддерживает обратную совместимость с контентом Divi 4. А Elegant Themes рекомендует перед обновлением существующего проекта сделать резервную копию и протестировать переход на staging-сайте.

Можно ли создать сайт самому с помощью Divi

— Однозначно ДА.

Именно самостоятельное создание сайта без постоянного обращения к программисту является одним из основных сценариев использования Divi.

Для начала работы вам понадобятся:

  • доменное имя
  • хостинг
  • WordPress
  • Divi
  • контент для будущего сайта

Обратите внимание на хостинг Profit Server. Доступные тарифы, удобная Панель управления, разнообразные скидки и грамотная Служба Поддержки делают этого интернет-провайдера одним из лучших хостеров на рынке.

ProfitServer — Быстрый и Надёжный Виртуальный Хостинг и VPS/VDS

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

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

Можно:

  • использовать уже готовые шаблоны
  • создать собственный дизайн
  • комбинировать готовые блоки
  • импортировать ранее созданные элементы
  • воспользоваться помощью AI
  • настроить внешний вид сайта под конкретную нишу

Теперь подробнее, как сделать сайт самому в Divi

Процесс создания сайта можно разделить на несколько последовательных этапов.

Шаг 1. Купить домен и хостинг

Divi не заменяет хостинг.

Сначала необходимо зарегистрировать доменное имя и выбрать сервер, на котором будет размещен WordPress-сайт. Посетите хостинг Profit Server.

Шаг 2. Установить WordPress

Большинство современных хостингов позволяют установить WordPress автоматически.

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

H3: Шаг 3. Установить Divi

После установки и активации Divi можно открыть Visual Builder.

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

Шаг 4. Выбрать способ создания сайта

Есть несколько вариантов.

  • Первый: начать с пустой страницы.
  • Второй: использовать готовый Layout.
  • Третий: создать сайт с помощью инструментов AI.

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

Шаг 5. Создать основные страницы

Минимальный корпоративный сайт должен включать:

  • Главную
  • О компании
  • Услуги
  • Портфолио
  • Блог
  • Контакты
  • Публичную оферту
  • Политику конфиденциальности

Для интернет-магазина структура будет другой:

  • Главная
  • Каталог (Магазин или Витрина)
  • Категории
  • Товары
  • Корзина
  • Оформление заказа
  • Доставка и оплата
  • Контакты
  • Публичная оферта
  • Политика конфиденциальности

Шаг 6. Настроить дизайн

После формирования структуры можно заниматься визуальным оформлением:

  • цветами
  • шрифтами
  • кнопками
  • фонами
  • изображениями
  • расстояниями
  • границами
  • тенями
  • анимациями
  • адаптивностью

Как работает визуальный редактор Divi

Главная особенность Divi Builder — возможность редактировать страницу визуально.

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

Можно сразу:

  • изменить заголовок
  • перетащить блок
  • увеличить изображение
  • изменить ширину колонки
  • поменять цвет
  • добавить кнопку
  • изменить расстояние между элементами

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

Для новичка это существенно упрощает процесс.

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

Из каких элементов состоит сайт в Divi

В Divi используется система визуальных элементов, из которых формируется страница.

В зависимости от конкретной версии и используемого подхода это будут:

  • секции
  • строки
  • колонки
  • модули
  • группы модулей
  • вложенные элементы

Каждый элемент можно отдельно настроить.

Например, блок с преимуществами может содержать:

  • заголовок
  • описание
  • несколько карточек
  • иконки
  • кнопки

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

Готовые шаблоны визуального конструктора

Готовые шаблоны Divi

Если вы не дизайнер, это вовсе не означает, что придётся создавать сайт из пустой страницы.

Divi предоставляет библиотеку готовых дизайнов и макетов.

Можно выбрать подходящий вариант для:

  • бизнеса
  • агентства
  • ресторана
  • интернет-магазина
  • блога
  • портфолио
  • услуг
  • образования
  • недвижимости
  • различных профессиональных сфер

После импорта шаблон можно полностью изменить.

Например:

  1. загрузить готовую главную страницу
  2. заменить логотип
  3. установить свои цвета
  4. загрузить собственные фотографии
  5. изменить заголовки
  6. переписать текст
  7. добавить нужные страницы
  8. настроить меню
  9. адаптировать сайт под мобильные устройства

Поэтому готовый Layout — это скорее стартовая точка, чем жестко заданный шаблон.

Divi Theme & Builder — управление дизайном всего сайта

Обычный конструктор страниц позволяет создать отдельную страницу.

Связка Тема + Конструктор Divi идёт значительно дальше.

С помощью Divi 5 можно создавать шаблоны для:

  • Header — шапки сайта
  • Footer — подвала сайта
  • записей
  • страниц
  • категорий
  • товаров
  • архивов
  • результатов поиска
  • страницы 404
  • других типов контента

В официальной документации Elegant Themes Divi Builder описывается как инструмент для создания шаблонов Header, Body и Footer и их автоматического назначения определенным типам контента.

Это особенно удобно для больших сайтов.

Например, можно один раз создать шаблон статьи:

После этого один шаблон автоматически используется для множества публикаций.

Создание шапки и подвала сайта

Header и Footer являются важными частями любого сайта.

В Divi их можно проектировать визуально.

Например, в шапке можно разместить:

  • логотип
  • главное меню
  • кнопку
  • телефон
  • ссылку на корзину
  • дополнительные элементы

В подвале:

  • контакты
  • меню
  • ссылки
  • форму подписки
  • информацию о компании
  • социальные сети

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

Адаптация сайта под смартфоны

Сегодня нельзя создавать сайт только для компьютеров.

Большая часть пользователей заходит на него со смартфона.

Поэтому Divi позволяет отдельно настраивать параметры элементов для разных размеров экрана.

Например, можно изменить:

  • размер заголовков H1, H2, H3
  • размер обычного текста
  • ширину изображения
  • расстояния
  • расположение колонок
  • видимость отдельных блоков
  • размер кнопок

Divi 5 включает отдельный Responsive Editor и настраиваемые breakpoints, которые дают больше контроля над поведением дизайна на разных экранах.

Глобальные стили и дизайн-система Divi

Flexbox и CSS Grid в Divi 5

Одно из важных отличий Divi 5 от старого подхода — использование современных CSS-систем построения макетов.

Flexbox

Flexbox позволяет управлять:

  • направлением элементов
  • переносом
  • расстояниями
  • выравниванием
  • порядком элементов
  • позиционированием

CSS Grid

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

В Divi 5, Grid используется на уровне секций, строк, колонок и групп модулей.

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

Глобальные стили Divi

Представьте сайт, на котором 50 кнопок.

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

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

Можно централизованно управлять:

  • цветами
  • шрифтами
  • размерами
  • стилями кнопок
  • другими параметрами

Divi 5 развивает эту концепцию с помощью Design Variables, Presets и Style Inspector.

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

Loop Builder — создание динамических списков

Еще одна функция Divi 5, которая особенно интересна для контентных и коммерческих сайтов, — Loop Builder.

Он позволяет выводить записи из базы данных WordPress и управлять дизайном каждого элемента списка.

Например:

  • список статей
  • каталог товаров
  • список мероприятий
  • карточки курсов
  • категории
  • авторов

Elegant Themes прямо приводит такие сценарии использования Loop Builder.

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

Cоздать сайт без программирования

Divi и WooCommerce

Можно визуально настраивать элементы магазина и создавать собственные макеты для:

  • каталога
  • категории товара
  • карточки товара
  • корзины
  • страницы магазина
  • других элементов WooCommerce

В документации Divi 5 присутствует отдельный набор WooCommerce-модулей.

Это позволяет использовать WordPress + WooCommerce + Divi как основу функционального интернет-магазина.

Divi AI — создание сайта с помощью искусственного интеллекта

Еще одна составляющая современной экосистемы Divi 5 — искусственный интеллект.

Divi AI может использоваться для создания:

  • текста
  • изображений
  • макетов
  • фрагментов кода

Elegant Themes также продвигает AI Site Builder, который позволяет генерировать основу сайта с помощью искусственного интеллекта.

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

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

Divi Quick Sites

Для ускорения создания сайта разработчик предлагает Quick Sites.

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

Это особенно интересно для тех, кто ищет не просто конструктор страниц, а способ максимально быстро запустить полноценный WordPress-сайт.

Divi Marketplace

Вокруг Divi сформировалась отдельная экосистема дополнений.

Marketplace позволяет устанавливать:

  • дополнительные модули
  • расширения
  • Child Themes
  • готовые Layouts
  • дополнительные инструменты

Это расширяет стандартные возможности конструктора.

По сути, если базового функционала Divi вам недостаточно, можно искать готовое решение в экосистеме сторонних разработчиков.

Divi Dash — управление несколькими сайтами

Если вы работаете сразу с несколькими WordPress-сайтами, полезным инструментом становится Divi Dash.

Он предназначен для централизованного управления сайтами и позволяет контролировать обновления, темы, плагины, пользователей и другие задачи обслуживания. Elegant Themes включает Divi Dash в актуальные планы Divi.

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

Для фрилансера или веб-студии она уже значительно интереснее.

Сравнить сколько стоит Divi

Сколько стоит Divi в 2026 году

Стоимость Divi зависит от выбранного варианта лицензии.

На момент подготовки этой статьи актуальные предложения Elegant Themes выглядят следующим образом:

ТарифЦенаОсновная идея
Divi89 $ / годКонструктор и тема для неограниченного количества сайтов
Divi Lifetime249 $ / ЕДИНОРАЗОВАЯ ОПЛАТАПожизненная лицензия Divi
Divi Pro277 $ / годDivi + Pro-сервисы
Divi Lifetime + Pro297 $ сегодня + 212 $ / годLifetime Divi + ежегодные Pro-сервисы

Divi за 89 $ в год

Базовый вариант стоит 89 $ в год.

Он подходит тем, кому нужен непосредственно Divi и возможность использовать его на неограниченном количестве сайтов.

Также в этот пакет входит Divi Dash.

Divi Lifetime — один раз 249 $ и на всю жизнь он ваш

Divi Pro за 277 $ в год

Divi Pro предназначен прежде всего для тех, кому недостаточно самого конструктора.

В пакет входят дополнительные Pro-сервисы, включая:

  • Divi AI
  • Divi Cloud
  • Divi VIP
  • Divi Teams
  • дополнительные преимущества экосистемы

Стоимость на актуальной странице Elegant Themes — 277 $ в год.

Divi Lifetime + Pro

Стоимость составляет:

297 $ единоразово за Lifetime Divi + $212 в год за Pro Services.

Какой тариф Divi выбрать

Для большинства пользователей можно ориентироваться на следующую схему.

Выберите Divi за 89 $ в год, если вы:

  • хотите попробовать конструктор
  • создаете небольшой проект
  • пока не знаете, будете ли пользоваться Divi долго
  • вам не нужны расширенные Pro-сервисы

Рассмотрите Divi Lifetime за 249 $, если вы:

  • планируете использовать Divi несколько лет
  • создаете несколько сайтов
  • работаете с WordPress профессионально
  • не хотите ежегодно оплачивать сам конструктор

Divi Pro подойдет вам, если:

  • нужен Divi AI
  • необходимо облачное хранение
  • важна VIP-поддержка
  • вы работаете в команде
  • создаете сайты для клиентов

Lifetime + Pro имеет смысл, если:

  • вы точно хотите использовать Divi долгосрочно
  • вам нужны Pro-сервисы
  • вы создаете много сайтов
  • стоимость ежегодных Pro-сервисов вас устраивает
Недостатки Divi Builder

Преимущества конструктора Divi

Главные сильные стороны можно свести к нескольким пунктам.

  • Визуальное редактирование
  • Не требуется обязательное знание программирования
  • Большое количество настроек дизайна
  • Готовые шаблоны и различные макеты блоков
  • Theme Divi
  • WooCommerce
  • Responsive Editor
  • Flexbox и CSS Grid
  • Динамический контент
  • Loop Builder
  • AI-инструменты
  • Marketplace
  • Работа на неограниченном количестве сайтов
  • Lifetime-лицензия
  • Инструменты для управления несколькими сайтами

«Недостатки» Divi

Несмотря на большое количество возможностей, у конструктора есть и сложности.

1. Много функций

Начинающему пользователю ОБЯЗАТЕЛЬНО потребуется время на изучение интерфейса.

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

2. Платная лицензия

Divi нельзя отнести к бесплатным конструкторам.

Кроме самого Divi, некоторые дополнительные сервисы требуют отдельной оплаты.

3. Необходимость продуманной структуры

Сам конструктор не сделает хороший сайт автоматически.

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

Поэтому перед визуальной разработкой необходимо определить:

  • структуру сайта
  • целевые страницы
  • поисковые запросы
  • контент
  • навигацию
  • коммерческие элементы
  • внутреннюю перелинковку
Divi или Elementor — что выбрать

Divi или Elementor — что выбрать?

Divi и Elementor относятся к одному большому классу решений — визуальным конструкторам для WordPress.

Оба позволяют:

  • создавать страницы без программирования
  • работать методом drag-and-drop
  • визуально редактировать дизайн
  • создавать адаптивные страницы
  • использовать готовые шаблоны

Но выбирать между ними лучше не только по списку функций.

Нужно учитывать:

  • какой интерфейс вам удобнее
  • какой конструктор уже используется на сайте
  • какие плагины установлены
  • нужна ли WooCommerce-интеграция
  • нужен ли AI
  • сколько сайтов планируется создавать
  • насколько важна Lifetime-лицензия
  • требуется ли экосистема Divi

Можно ли продвигать сайт на Divi в Google

— Да.

Сам факт использования Divi не мешает поисковому продвижению.

Но важно понимать принципиальную вещь:

Сам конструктор не заменяет традиционное SEO

Даже технически хороший сайт не будет автоматически получать органический трафик.

Для продвижения необходимо работать с:

  • семантическим ядром
  • структурой сайта
  • Title
  • Description
  • Alt
  • заголовками H1-H3
  • текстовым контентом
  • внутренними и внешними ссылками
  • изображениями
  • скоростью загрузки страниц
  • мобильной адаптацией
  • техническими ошибками
  • коммерческими факторами

Поэтому Divi лучше воспринимать как инструмент создания сайта, а не как SEO-продвижение само по себе.

Для каких сайтов подойдет Divi

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

Например:

  • сайт-визитка
  • корпоративный сайт
  • онлайн-школа
  • сайт услуг
  • блог
  • информационный портал
  • лендинг / одностраничник
  • портфолио
  • интернет-магазин
  • сайт агентства
  • образовательный проект
  • сайт специалиста
  • коммерческий каталог

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

Стоит ли использовать Divi 5 для нового сайта

Если вы сегодня выбираете конструктор для нового WordPress-сайта, Divi 5 выглядит гораздо интереснее, чем старая версия Divi 4.

Главное изменение заключается не только в новом интерфейсе.

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

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

Подводя итог обзора

Главное, что получает пользователь:

  • универсальный визуальный редактор
  • готовые макеты
  • тему Divi
  • адаптивное редактирование
  • современные CSS-инструменты
  • глобальные стили
  • динамический контент
  • WooCommerce
  • AI
  • Marketplace
  • инструменты для управления сайтами

А Divi 5 существенно расширяет возможности старого конструктора за счет новой архитектуры, Flexbox, CSS Grid, Loop Builder, Nested Modules, динамического контента и современной системы управления дизайном.

Если ваша задача — создать сайт самому без программиста, Divi позволяет пройти практически весь путь самостоятельно: от выбора готового макета до создания собственных страниц, шаблонов, Header, Footer и интернет-магазина.

Однако хороший сайт начинается не с конструктора.

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

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

Подводя итог обзора конструктора Divi Builder

Часто задаваемые вопросы о Divi

Да. Divi является визуальным no-code конструктором. При этом опытные пользователи могут дополнительно использовать собственный CSS и другие возможности для более глубокой настройки.

Да. Divi разработан именно для создания сайтов на движке WordPress.

Divi 5 — современная версия конструктора с переработанной архитектурой, новым интерфейсом и дополнительными инструментами построения сайтов.

Да. Актуальная лицензия Divi предусматривает использование на неограниченном количестве сайтов.

За сам Divi — нет. Дополнительные Pro-сервисы оплачиваются отдельно, если вы решите ими пользоваться.

Да. Divi 5 содержит отдельные WooCommerce-модули и инструменты для визуальной настройки магазина.

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

Обратите внимание

Дочитали до самого конца? Отличная новость для вас!

Вам может быть интересно:

Тема Reboot для WordPress — подробный обзор возможностей, плюсы и минусы

Какой конструктор сайтов на WordPress выбрать: подробный обзор

Тема Divi и конструктор сайтов Divi Builder: создавайте сайты без кода!

Визуальный конструктор Divi Builder для создания сайтов на WordPress за 4 500 рублей

ProfitServer — Быстрый и Надёжный Виртуальный Хостинг и VPS/VDS
Yutex - хостинг для твоих сайтов в один клик

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

4 комментария

  1. Как бы вы красиво не писали за Диви, всё равно Elementor лучше, проще и удобнее… Я выбираю однозначно Элементор

  2. Хороший, функциональный конструктор, но мне кажется сложный. Хотя за 4500 рублей купить безлимит, можно и не рассуждать. Беру

    1. Ничего сложного в нём нету — просто дело времени. Освоит любой. А вот по функционалу и цене…. Это точно, что рассуждать долго нельзя. А то может не хватить. Количество копий ограничено