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

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

Такие визуальные редакторы называются Page Builder («конструктор страниц») или Site Builder («конструктор сайтов»). Последнее название звучит слишком громко и скорее указывает на желание разработчика плагина поднять значимость своего продукта в глазах потенциального потребителя.

Основные преимущества конструкторов:

• уменьшается необходимость вмешательства в код;
• от пользователя не требуются навыки веб-программирования;
• простота работы, кодирование заменяется работой мышкой по принципу «тащи и бросай»;
• за счет упрощения работы у вебмастера остается больше времени на решение других задач;
• снижается необходимость установки дополнительных плагинов. 

Подобных конструкторов на рынке программного обеспечения великое множество. Однако если вы зайдете в каталог премиальных тем WordPress, то увидите, что использованные в них «билдеры» можно пересчитать по пальцам одной руки. Чаще всего вам будут встречаться Elementor, WPBakery или Visual Composer (это новое и старое название одного и того же редактора). Реже – несколько других названий. Чтобы упростить выбор, рассмотрим лучшие конструкторы подробней, попутно определяясь с преимуществами и недостатками каждого из них.    

Визуальные редакторы WordPress:

Elementor

Начать «разбор полетов» лучше всего с лидера гонки – конструктора Elementor Website Builder. Визуальный редактор WordPress, разработанный израильской софтверной компанией Elementor Ltd, поставляется в двух версиях, бесплатной и платной. Нередко пользователям хватает базового функционала, но иногда без функций PRO попросту не обойтись. Рассмотрим более подробно возможности бесплатной версии и кратко остановимся на функционале, который становится доступным по платной подписке.

Elementor, краткая сводка:

• разработчик: Elementor Ltd;
• официальный сайт разработчика: elementor.com;
• полное название продукта: Elementor Website Builder;
• текущая версия: 3.0.12;
• год создания: 2016;
• последний апдейт плагина: около недели назад;
• регулярность обновлений: часто;
• версия WordPress: 5.0+;
• проверена совместимость до: 5.5.1;
• версия PHP: 5.6+;
• языки: 56 языков;
• русская локализация: есть.

Косвенным подтверждением многочисленных преимуществ Elementor может служить стремительный рост количества сайтов, сконструированных с помощью этого редактора. Если в течение первых двух лет после начала разработки плагин установило более миллиона пользователей, то за следующие два года количество активных установок выросло в целых пять раз! Посмотрим, что же именно привлекает вебмастеров.

Ключевые особенности Elementor:

• интуитивно понятный интерфейс;
• просмотр изменений в реальном режиме времени;
• множество профессиональных функций, доступных «из коробки» в бесплатной версии конструктора;
• 40+ бесплатных виджетов;
• 100+ готовых, настраиваемых макетов страниц;
• 300+ блоков, шаблонов секций;
• перевод на десятки языков, русская локализация, поддержка RTL;
• большое количество бесплатных дополнений от сторонних разработчиков;
• высокая частота обновлений;
• подробная документация, FAQ, видеоинструкции, большое количество обзоров, профессиональная поддержка.

Еще один немаловажный плюс – открытый программный код. Доступность API позволяет каждому пользователю усовершенствовать конструктор и сделать его еще лучшим инструментом для решения своих задач. А еще одно преимущество обуславливается популярностью плагина. Многомиллионное сообщество Elementor – это и упрощение поиска ответов на свои вопросы. Ведь чем больше пользователей продукта, тем большее число людей уже сталкивалось с проблемами, аналогичными вашим.   

Основные виджеты:

• Image: управление параметрами изображений (размеры, прозрачность и так далее);
• виджеты презентации серии изображений (галерея, слайдер, карусель);
• текстовый редактор WYSIWYG («что видишь на экране, то и получаешь [на выходе]»);
• Video: интеграция Vimeo, YouTube;
• интеграция с социальными сетями;
• Image Box: картинка + заголовок + текст;
• виджет для вставки шорткодов;
• интеграция с SoundCloud;
• виджет боковых панелей;
• интеграция карт Google;
• виджет вставки кода HTML;
• и другие.

Часть премиальных функций можно заменить бесплатными аналогами, однако если Elementor работает в связке с интернет-магазином WooCommerce, переход на платную версию плагина существенно облегчит жизнь вебмастеру. Заплатив за лицензию $49, пользователь получит доступ к 40 виджетам электронной коммерции, 18 из которых напрямую связаны с интеграцией с WooCommerce.

Основной недостаток Elementor – создание избыточного кода и, как следствие, некоторое увеличение времени загрузки страниц и размера сайта. Однако этот минус присущ всем конструкторам (и далеко не только им). Решить эту проблему может только очень хороший программист «с прямыми руками», большой запас времени и приличная сумма денег. Стоят ли сотые доли секунды и несколько байт таких жертв, решать только вам. Да, никто не даст гарантий, что руки программиста окажутся «прямее», чем «кривизна» избыточного кода. В целом же Elementor – вполне достойное решение, что подтверждается опытом миллионов владельцев сайтов на CMS WordPress.    

WPBakery (Visual Composer)

WPBakery Page Builder, до недавнего времени называвшийся Visual Composer, основной конкурент Elementor. Количество активных установок превысило 4,3 миллиона. В большинстве случаев для пользователей выбор конструктора сводится к выбору между этими двумя визуальными редакторами. И обосновать свой выбор вебмастера зачастую не могут. Просто одному «не зашел» WPBakery, а пришелся по нраву Elementor, а другому наоборот. Кстати, wpbakery.com, официальный сайт разработчика, полностью сделан на этом конструкторе.

Начнем с основного недостатка – у WPBakery нет бесплатной версии, только небольшой «тест-драйв». Стоимость лицензии начинается с $45 за один сайт. Однако конструктор поставляется в виде бонуса ко многим премиальным темам WordPress.  

Ключевые особенности WPBakery Page Builder:

• редактирование Front End и Back End;
• 250+ аддонов с сотнями элементов;
• поддержка Gravity Forms, Essential Grid, Layer Slider, Revolution Slider, Contact Form 7, Ninja Forms, WooCommerce и многих других плагинов от сторонних разработчиков;
• 100+ готовых настраиваемых шаблонов страниц и секций;
• коллекция встроенных виджетов WPBakery + 13 дефолтных виджетов WordPress;
• возможность использования кастомных стилей CSS + конструктор скинов Skin Builder +50 пресетов;
• еженедельно пополняемая библиотека шаблонов;
• возможность использования с любой темой WordPress;
• объектно-ориентированный код;
• параллакс и другие эффекты анимации;
• пожизненные бесплатные обновления;
• совместимость с WooCommerce;
• совместимость с WPML и qTranslate, поддержка RTL;
• совместимость с Yoast SEO;
• респонсивный дизайн, шаблоны, готовые к использованию на мобильных версиях сайтов;
• подробная документация, обучающее и демонстрационное видео, база знаний онлайн, профессиональная поддержка.

Как видите, даже далеко не полный перечень возможностей конструктора WPBakery Page Builder выглядит довольно внушительно. Помимо прочего, существует еще огромное количество бесплатных и премиальных плагинов от сторонних разработчиков, созданных специально для этого конструктора. Их число превысило две сотни и продолжает стремительно расти.

Page Builder от Site Origin

Если разработчики WPBakery отказались от названия Visual Composer, присутствующего в наименованиях десятков расширений WordPress, то создатели Page Builder не побоялись назвать свой конструктор страниц… конструктором страниц. Но, вопреки скепсису маркетологов, бренд не затерялся в море аналогов, в названиях которых присутствует словосочетание «Page Builder». Пусть цифровой продукт Site Origin пока не достиг высот WPBakery и Elementor, но число активных установок плагина легко перевалило через миллионную отметку и продолжает стремительно расти. Page Builder от Site Origin бесплатен, но есть и премиальная версия.

Краткая информация о Page Builder:

• автор: SiteOrigin;
• официальный сайт разработчика: siteorigin.com/page-builder/;
• текущая версия редактора: 2.11.5;
• частота обновлений: часто;
• последний апдейт: менее месяца назад;
• количество активных установок плагина: более миллиона;
• версия WordPress: от 4.7;
• совместимость проверена до версии: 5.5.1;
• версия PHP: от 5.6.20;
• языки интерфейса: 32 языка, включая русский.

Особенности Page Builder:

• интуитивно понятный интерфейс;
• работает со стандартными виджетами WordPress;
• полная свобода выбора темы;
• 20+ бесплатных тем от Site Origin;
• простой интерфейс drag-and-drop;
• предварительный просмотр в реальном режиме времени;
• история изменений (History Browser);
• возможность использования кастомных CSS и классов CSS;
• пакет оригинальных виджетов Widgets Bundle;
• плагин активно развивается;
• интерфейс на многих языках, включая русский;
• оригинальные плагины SiteOrigin Installer, SiteOrigin CSS;
• открытый исходный код, API для разработчиков;
• подробная документация, профессиональная поддержка, форумы сообщества Page Builder.

В премиальной версии добавляются десятки аддонов (и не только), включая:

• конструктор кастомных типов записей Custom Post Type Builder;
• аддон с дополнительными настройками и стилями контактной формы (расширение возможностей Widgets Bundle Contact Form, входящего в базовую версию редактора);
• слайдеры, параллакс;
• виджеты социальных медиа;
• виджет веб-шрифтов;
• комментарии Ajax;
• и многие другие.

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

Beaver Builder

Еще один удобный и функциональный визуальный редактор, входящий в ТОП-5 самых популярных конструкторов страниц WordPress. Пусть количество активных установок расширения пока измеряется не в миллионах, а в сотнях тысяч, этот плагин также достоин самого пристального внимания. В пользовательском рейтинге на официальном сайте WordPress «бобер» (так переводится с английского «beaver») получил среднюю оценку 4.9 баллов, что также говорит в пользу этого расширения.

У конструктора Beaver Builder есть Live Demo, позволяющее наглядно убедиться в возможностях редактора, а также лайт-версия с ограниченным функционалом. Стоимость же премиальных вариантов достаточно высока: пакет Standard – $99, PRO – $199, Agency – $399.

Beaver Builder, основные сведения:

• авторы: команда Beaver Builder;
• официальный сайт плагина: wpbeaverbuilder.com;
• текущая версия расширения: 2.4.0.5;
• обновление: менее месяца назад;
• WordPress, релиз: от 4.6, тестировано до 5.5.1;
• версия PHP: 5.6 и выше;
• количество активных инсталляций: более трети миллиона;
• языки интерфейса: 17 языков, включая польский и украинский;
• русский интерфейс: нет.

Команда разработчиков конструктора Beaver Builder уверяет, что на основе их творения работает более миллиона сайтов. Либо «лишние» ресурсы – преувеличение в маркетинговых целях, либо несколько сотен тысяч скачиваний/установок остались неучтенными статистикой сообщества WordPress.  

Ключевые особенности Beaver Builder:

• набор виджетов для боковых панелей, вставки видео и аудио, изменения параметров изображений и кнопок, редактирования текста и так далее;
• готовые шаблоны домашней страницы, внутренних страниц и разделов, лендинга;
• плагин Beaver Themer Addon;
• наличие демонстрационной версии Live Demo;
• работает со всеми типовыми виджетами и шорткодами, а также почти со всеми темами WordPress;
• добавление кастомных стилей CSS;
• совместимость с ClassicPress;
• подробная документация, база знаний онлайн, обучающее видео.

В премиальных версиях добавляется несколько десятков готовых шаблонов, расширенные возможности экспорта и импорта, подборка аддонов, таких как виджеты иконок социальных сетей, контактной формы, прайс-листов, слайдеров и так далее. Можно заметить, что функционал «облегченной» версии ограничен чуть больше, чем следовало бы. Однако многих пользователей устраивает и такой, «урезанный» вариант.

Landing Page Builder

Визуальный редактор WordPress Landing Page Builder имеет более узкую направленность. Этот конструктор заточен на создание посадочных страниц. На основе Landing Page Builder на данный момент работает 18689 лендингов.

Landing Page Builder, краткие сведения:

• разработчик: PluginOps;
• текущий релиз редактора: 1.4.7.7;
• количество активных установок: более 10000;
• обновление: менее недели назад;
• WordPress: 3.4 – 5.5.1;
• языки: английский и урду;
• русская локализация: нет.

Ключевые особенности Landing Page Builder:

• простой в использовании конструктор drag-and-drop;
• регулярно обновляемая коллекция шаблонов;
• аддон формы обратной связи OptIn Form;
• виджет всплывающих окон OptIn Popups;
• десятки других модулей для конструктора;
• совместимость почти со всеми современными темами WordPress (проверено 50+ тем);
• предварительный просмотр в реальном режиме времени;
• редактор форм обратной связи Live Form Builder;
• интеграция с различными сервисами почтовых рассылок;
• открытый исходный код, API для разработчиков;
• подробная документация, оперативная служба поддержки.

Бесплатный конструктор Landing Page Builder имеет смысл попробовать, если вам нужна посадочная страница. Для остальных типов сайтов лучше подобрать один из более универсальных конструкторов. Тот же Elementor, WPBakery (Visual Composer), Beaver Builder или Page Builder от SiteOrigin.

CoBlocks для Gutenberg

Этот на 100% бесплатный плагин не является полноценным и независимым конструктором страниц для сайтов на CMS WordPress, поскольку лишь расширяет возможности нового редактора контента Gutenberg и работает только в связке с ним. Однако если вы уже успели поработать с Gutenberg и он вам понравился, с помощью CoBlocks вы сможете превратить это расширение в достаточно функциональный конструктор страниц. Многие пользователи именно так и поступили, о чем свидетельствует более трети миллиона активных установок плагина.

CoBlocks, краткая справка:

• автор: GoDaddy;
• текущая версия расширения: 2.5.0;
• количество активных установок: 300000+;
• WordPress: 5.0 – 5.5.1;
• PHP: 5.6+;
• языки интерфейса: 27 языков, в том числе русский.

Ключевые особенности CoBlocks:

• мощный, но легковесный плагин, низкие требования к аппаратным ресурсам;
• открытый исходный код;
• бесплатная тема Go theme;
• модуль меню «аккордеон»;
• несколько виджетов галерей (Offset Gallery, Stacked Gallery, Masonry Gallery, Collage Gallery, Carousel Gallery);
• модуль настройки кнопок;
• блок «Еда и напитки» для общепита и кулинарных блогов;
• форма обратной связи;
• блоки GIF, GitHub Gist;
• виджеты социальных медиа (профили, иконки);
• блок прайс-листов;
• интеграция Google Maps;
• модуль медиа-карт;
• и многое другое.

Плагин представляет собой десятки блоков, автоматически интегрирующиеся в редактор контента Gutenberg и превращающие его в полноценный конструктор страниц. Разработчики регулярно добавляют новые модули, расширяющие функциональные возможности аддона, и создали бесплатную тему Go theme, призванную подчеркнуть все лучшее, что заложено авторами в CoBlocks.

Выводы

Несмотря на немалое количество визуальных редакторов контента и страниц на рынке программного обеспечения, для подавляющего большинства пользователей CMS WordPress выбор сужается до пары-тройки вариантов. Нет смысла тратить время на перебор десятков «экзотических» конструкторов. До вас этим занимались тысячи пользователей. И остановили они свой выбор на тех плагинах, у которых количество активных установок исчисляется десятками и сотнями тысяч и даже миллионами. А это те же самые Elementor, WPBakery (Visual Composer), Beaver Builder, Page Builder от SiteOrigin и несколько других.