Здравствуйте.

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

Но какой конструктор выбрать, если вы еще не точно определились с темой? Какой конструктор позволит получить больше возможностей, будет более прост в использовании, освоении и поддержке в долгосрочном развитии сайта?

Я читал некоторые объемные сравнения с честными оценками от веб-разработчиков, — на выходе это отличные обзоры, дающие общее представление о  существующих конструкторах с их плюсами и минусами.

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

Я буду сравнивать три конструктора премиум версии: Beaver Builder, Divi, и Elementor Pro. Если вы выбираете конструктор для сайта, имеет смысл использовать полный функционал. Нужно что-то попроще, используйте соответственно более простые решения для сетки, иконок, и вывода полей, например, с помощью Advanced Custom Fields.
к содержанию ↑

Подготовка среды для сравнения

Чтобы быть максимально честным, я подготовил три чистые инсталляции WordPress и установил последние версии премиум конструкторов на стандартную тему Twenty Seventeen. Поначалу хотел взять базовые стартовые темы, предлагаемые разработчиками конструкторов, так как, скорее всего вы будете их использовать. Но сравнивать функционал честнее  в однородной среде, чтобы ничто не мешало правильной оценке.

Также я установил с кодекса демо контент для тестирования тем.
к содержанию ↑

Сетка: колонки и ряды

Beaver Builder

В ряд можно расположить 1-6 колонок, а также выбрать варианты с расположением сайдбаров.

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

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

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

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

Elementor Pro

Управление разделено на секции и колонки. Число колонок можно увеличивать кликая по значку плюс (+), я насчитал максимальное количество 10.

В настройки секции входит: управление высотой и шириной (можно растянуть на весь экран), выровнять содержимое (по верху, посередине, и по низу), задать тег для секции (div, header, footer, article и т.д.).

Здесь же можно выбрать структуру макета в процентном соотношении, имитируя контент и сайдбар.

В настройках колонки можно настроить: макет (ширину в процентах, позицию, отступы виджетов, и задать html тег), стиль (фон классический цвет/изображение или градиент, настроить рамку и цвета), расширенные (отступы и поля, анимация появления, css классы и свои стили). Интерфейс тоже русифицирован, с подсказками.

Divi Builder

Колоночный макет выбирается из предустановленных вариантов: 1-4 колонки, сайдбар справа/слева, два сайдбара рядом.

В настройках ряда можно задавать фон для колонок (цвет, градиент, изображение, видео).

На вкладке Дизайн: выравнивание, размеры (ширина/высота), отступы и поля, настроить рамку, тень и анимацию.

И на вкладке Расширенные: задать классы, id, видимость на разных экранах.

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

На мой взгляд Divi и Beaver Builder чуть более просты для пользователя, а Elementor гибче и для более продвинутого уровня.

Посмотрим, что нам покажет работа с модулями и виджетами.
к содержанию ↑

Виджеты Beaver Builder

 

В Beaver Builder есть 8 базовых виджетов:

  • HTML
  • Текстовый редактор
  • Кнопка
  • Разделитель
  • Фото
  • Видео
  • Аудио
  • Заголовок

 

2 информационных виджета:

  • цифровой счетчик (числа, круг или панель)
  • обратный отсчет

 

Медиа виджеты

  • иконка
  • слайдер контента
  • галерея
  • слайдшоу
  • группа иконок
  • карта
  • отзывы

 

Записи

  • записи
  • карусель записей
  • слайдер записей

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

 

Макет виджеты

  • вкладки
  • прайс-лист
  • боковая панель
  • гармошка

 

Actions виджеты

  • меню
  • контакная форма
  • призыв к действию
  • вызов
  • форма подписки

 

Где можно посмотреть элементы Beaver Builder

На странице демо сайта http://demo.wpbeaverbuilder.com можно опробовать конструктор в действии.
к содержанию ↑

Виджеты Elementor

 

8 базовых виджетов:

  • колонки
  • заголовок
  • изображение
  • текстовый редактор
  • видео
  • кнопка
  • разделитель
  • распорка
  • карты Google
  • иконка

 

Элементы Pro

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

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

С помощью модуля form можно создать достаточно сложную форму отправки данных с многочисленными полями.

 

Виджеты элементы темы:

  • заголовок поста
  • отрывок
  • контент
  • изображение
  • заголовок архива
  • записи архива
  • название сайта
  • логотип сайта
  • форма поиска
  • блок автора
  • комментарии записи
  • навигация
  • информация записи

 

Общие элементы

  • картинка с текстом
  • иконка с текстом
  • галерея
  • карусель
  • список с иконками
  • счетчик
  • прогресс
  • отзыв
  • вкладки
  • аккордеон
  • спойлер
  • иконки соц сетей
  • предупреждение
  • soundcloud плеер
  • шорткод
  • html код
  • якорь меню
  • сайдбар

Плюс все стандартные виджеты WordPress.
к содержанию ↑

Виджеты конструктора Divi

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

 

Где можно посмотреть и опробовать элементы

Демо конструктора Divi находится на странице — https://www.elegantthemesdemo.com/?et_fb=1

Правда все названия, надписи и подсказки на английском языке.
к содержанию ↑

Какой конструктор всё-таки выбрать

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

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

Для владельца сайта, будь то блог, магазин, портфолио, визитная карточка или сайт для бизнеса, —  конструктор Beaver Builder вероятно будет лучшим выбором. Отличная организация виджетов, мощный набор функционала, но без перегрузки, удобное и легкое управление создает комфортный опыт в использовании.

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

Ну а Divi, Divi отличный конструктор сам по себе. Он немного проигрывает по функционалу в сравнении с двумя другими товарищами. У него большой упор на оформление, т.е если вы любите настраивать шрифты, цвета, рамки, тени, анимации, — это ваш вариант.

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

Пишите ваши отзывы, комментарии, идеи. Спрашивайте вопросы.

 

 

Оставить комментарий

avatar
  Подписаться  
Уведомление о