Visual Composer против Beaver Builder

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

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

Visual Composer был плагином WordPress, который действительно определил, что такое конструкторы страниц с перетаскиванием, и продолжает оставаться самым продаваемым конструктором страниц с перетаскиванием для WordPress. Beaver Builder — это более новое решение, которое с момента своего запуска в 2014 году становится все сильнее и сильнее и действительно делает себе имя в этом году.

Как можно сравнить эти замечательные решения? Давайте посмотрим поближе и посмотрим.

визуальный композитор

Мало того, что Visual Composer является самым продаваемым плагином WordPress на CodeCanyon, он также включен в огромное количество тем WordPress на ThemeForest. Это помогает объяснить, почему плагин используется более чем на 500 000 веб-сайтов.

Visual Composer помогает создавать адаптивные макеты за считанные минуты с помощью удобного интерфейса. Он позволяет создавать макеты в бэкэнде или интерфейсе вашего сайта. Он работает с любой темой WordPress и поддерживает WordPress Multisite и WooCommerce.

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

Visual Composer совместим со всеми доступными пользовательскими типами сообщений. Это означает, что вы можете использовать его для изменения любого сообщения в блоге, страницы и пользовательских типов сообщений, добавленных с помощью тем и плагинов WordPress.

Одна из самых крутых особенностей Visual Composer — его гибкость. В плагине доступно множество опций для разработчиков, а на CodeCanyon для него доступно более сотни надстроек.

Я был одним из первых, кто протестировал и проверил Visual Composer, и с момента его запуска они каждый год добавляли новые функции и возможности.

Использование визуального компоновщика

После установки Visual Composer вы увидите новую панель Visual Composer на экранах редактирования. Один загружает внутренний редактор, другой загружает внешний редактор (эта панель отображается, даже если вы отключили визуальный редактор WordPress).

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

В верхней части интерфейса пять кнопок: три слева и две справа.

Слева значок Visual Composer ведет на официальный веб-сайт плагина, символ плюса позволяет добавлять элементы на вашу страницу, а значок T открывает окно шаблона. Справа есть значок конфигурации, который открывает окно для добавления пользовательского кода CSS и кнопку для переключения в редактор внешнего интерфейса.

Если вы еще не добавили какой-либо контент, вы увидите объяснение того, как быстро добавить контент. Вы можете добавить элемент, добавить текстовый блок или выбрать один из предварительно определенных макетов. Например, вы можете добавить целевую страницу или страницу продукта одним нажатием кнопки.

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

Количество доступных элементов впечатляет. Всего текущая версия Visual Composer предлагает сорок восемь элементов контента (в это число входят стандартные виджеты WordPress). Также доступны семь старых устаревших элементов контента, а дополнительные элементы контента можно добавить с помощью расширений плагинов.

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

Добавлять элементы содержимого, а затем размещать их в строках и столбцах очень просто. Ряды и элементы можно перетаскивать туда, куда вы хотите их поместить. Количество столбцов, отображаемых в строке, можно определить, выбрав одну из одиннадцати структур столбцов, например, 2/3 + 1/3. Кроме того, вы можете создать свою собственную структуру.

Есть варианты удаления элементов, столбцов и строк. Новые элементы можно добавлять в столбцы и строки, выбирая символ «плюс». Вы также можете клонировать целые строки содержимого.

Множество настроек доступно как для столбцов, так и для строк.

На вкладке «Общие» есть параметры: использовать видеофон, растянуть строку/столбец и добавить пользовательский CSS. Вкладка «Дизайн» позволяет вам стилизовать столбец или строку любым удобным для вас способом. Вы можете определить поля, границы, отступы и цвета.

Настройки, доступные для отдельных элементов, зависят от изменяемого элемента. Базовый элемент, такой как кнопка «Мне нравится» в Facebook, позволяет выбрать только тип кнопки, в то время как более сложные элементы могут иметь десятки различных вариантов.

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

Вы можете активировать редактор внешнего интерфейса, нажав кнопку внешнего интерфейса в редакторе сообщений/страниц. Если вы вошли на свой веб-сайт, вы также увидите ссылку «Редактировать с помощью Visual Composer» в панели администратора WordPress вверху каждой страницы. Нажав на эту ссылку, вы загрузите редактор внешнего интерфейса, чтобы вы могли редактировать эту страницу.

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

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

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

Я всегда считал, что внутренний редактор Visual Composer намного проще в использовании, чем внешний редактор. Я могу создавать профессиональные дизайны за считанные минуты с помощью бэкэнд-редактора, но с фронтенд-редактором я чувствую, что перемещение вещей более неуклюже и менее плавно. Он по-прежнему работает так, как должен, но мне он кажется не таким удобным для пользователя.

Тем не менее, я знаю из комментариев других пользователей Visual Composer, что многие предпочитают использовать внешний редактор внутреннему редактору, поэтому, возможно, это вопрос того, какой интерфейс вы привыкли использовать (интерфейсный редактор был представлен в Visual Composer намного позже). поэтому у меня больше опыта работы с бэкэнд-редактором).

Настройки визуального композитора

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

На странице общих настроек вы можете определить, для каких типов записей Visual Composer будет активен. Любые дополнительные пользовательские типы сообщений, добавленные через вашу тему или плагины, будут перечислены здесь. Вы также можете отключить адаптивные элементы контента и включить подмножества шрифтов Google.

Центральная часть этой страницы позволяет вам контролировать доступ к Visual Composer для каждой группы пользователей WordPress. Вы можете определить, видит ли группа пользователей Visual Composer, видят ли они Visual Composer и редактор по умолчанию, и видят ли они только Visual Composer (т.е. отключают редактор по умолчанию).

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

Пользовательский код CSS может быть добавлен без необходимости изменять основные файлы плагинов.

Лицензия на продукт предоставляется при покупке Visual Composer. Он действителен для одного веб-сайта и обеспечивает постоянную поддержку и автоматические обновления через вашу административную область.

Шорткоды, предоставленные сторонними плагинами, могут быть сопоставлены с элементами контента Visual Composer.

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

Расширенный построитель сетки

Visual Composer позволяет добавлять новые элементы сетки для следующих элементов содержимого: сетка постов, сетка пост-каменной кладки, медиа-сетка и медиа-сетка каменной кладки. Это элементы контента, которые можно использовать для отображения сообщений в блогах, галерей и другого контента на вашем веб-сайте.

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

Цены на визуальный композитор

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

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

Технически Visual Composer не поддерживает GPL. Несмотря на то, что WordPress не позволяет ограничивать использование, разработчики просят всех клиентов покупать обычную лицензию для каждого веб-сайта, на котором они используют Visual Composer.

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

Beaver Builder Конструктор страниц с перетаскиванием

Как и Visual Composer, Beaver Builder позволяет легко создавать профессиональные страницы с помощью интерфейса перетаскивания. Одно из самых больших различий между этими двумя решениями заключается в том, что все редактирование с помощью Beaver Builder происходит во внешнем интерфейсе вашего веб-сайта.

Все макеты адаптивны, а визуальный редактор совместим с постами блога, страницами и всеми другими пользовательскими типами постов. Благодаря поддержке шорткодов и виджетов Beaver Builder хорошо работает с большинством других плагинов WordPress. Например, вы можете легко интегрировать элементы из других плагинов в свои макеты, такие как формы, таблицы и галереи.

Beaver имеет хорошую поддержку WooCommerce и многоязычного плагина WordPress и должен работать практически с любой темой WordPress. Он также поддерживает WordPress Multisite, но, к сожалению, эта функция не включена в стандартную лицензию Beaver Builder (подробнее о вариантах ценообразования позже).

Особенностью Beaver Builder, которая действительно выделяется для меня, является система шаблонов страниц. Это позволяет создавать большие подробные страницы за считанные секунды. Все, что вам нужно сделать, это выбрать шаблон страницы, который вы хотите. Например, вы можете создать страницу бизнес-контактов одним нажатием кнопки.

Более дорогие лицензии Beaver Builder также поставляются в комплекте с темой Beaver Builder WordPress.

Использование BeaverBuilder

Beaver Builder интегрируется с WordPress почти так же, как и Visual Composer. После активации плагина вы можете загрузить редактор, щелкнув вкладку «Конструктор страниц» в редакторе сообщений.

В качестве альтернативы, если вы вошли в систему, вы можете щелкнуть ссылку «Конструктор страниц» в панели администратора WordPress вверху каждой страницы.

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

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

Шаблоны макетов контента помогают быстро создавать стандартные страницы. Например, есть макеты для страницы «О нас», страницы контактов и страницы блога.

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

Beaver Builder имеет удобный интерфейс, разобраться в котором не займет много времени.

В панели администратора вверху справа есть ссылки: Шаблоны, Инструменты, Готово и значок справки. С правой стороны находятся раскрывающиеся меню для макетов строк, базовых модулей, расширенных модулей и виджетов WordPress.

Кнопка шаблонов загружает окно шаблонов макета, которое я выделил ранее.

Щелкнув по панели инструментов, вы увидите несколько вариантов. Дублирование страницы создаст копию поста/страницы/типа поста с тем же макетом. Также есть возможность сохранить макет в качестве шаблона.

Выбор «Редактировать глобальные настройки» загрузит окно «Настройки компоновщика страниц». Отсюда вы можете изменить настройки заголовка страницы по умолчанию, строк, модулей и адаптивного макета.

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

Значок справки открывает возможности для интерактивного тура, просмотра семиминутного обучающего видео и перехода к базе знаний или форумам Beaver Builder.

Я рекомендую пройти этот тур при первой загрузке Beaver Builder. Это даст вам хороший обзор того, как все работает.

Первая опция в меню справа — макеты строк. Вы можете выбрать от одного до шести столбцов контента. Также можно добавить левую и правую боковые панели.

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

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

Удаление столбца автоматически уменьшит количество строк в этой конкретной строке. Например, уменьшить его с трех столбцов до двух и т. д.

Те же настройки доступны для строк и столбцов. Вы можете настроить ширину, текст, изменить цвет фона на фоновое фото, изменить настройки фона и определить границы. На вкладке «Дополнительно» вы можете изменить поля и отступы, адаптивный макет и селекторы CSS.

Вы сохраните изменения, как только нажмете кнопку «Сохранить». Я обнаружил, что все работает отлично. Например, по умолчанию ширина строки из двух столбцов будет составлять 50 % каждая, но если вы измените ширину одного столбца на 70 %, ширина другого столбца автоматически изменится на 30 %.

Есть пять основных модулей контента: заголовок, фото, разделитель, текстовый редактор и видео.

Как и следовало ожидать, вы просто перетаскиваете модули контента на свою страницу в нужный столбец и строку. Как только вы это сделаете, вы сможете изменить настройки этого модуля контента. Как и в Visual Composer, отображаемые настройки зависят от модуля содержимого, который вы изменяете.

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

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

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

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

Тема Beaver Builder

Тема Beaver Builder включена в профессиональную и агентскую версии Beaver Builder (подробнее о тарифных планах позже). Тема — это, по сути, чистый холст, который позволяет вам создать веб-сайт, который вы хотите.

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

Тем не менее, разработчики темы Beaver Builder использовали настройщик темы. Здесь можно найти все параметры и настройки темы. Это прекрасно сочетается с плагином Beaver Builder для WordPress, поскольку это означает, что все изменения, которые вы вносите на свой сайт, можно просмотреть в режиме реального времени.

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

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

Понятно, что тема Beaver Builder была создана для пользователей плагина, поскольку сама тема очень проста. Он позволяет настраивать огромное количество параметров вашего дизайна, но мало вариантов для изменения структуры вашего сайта. В этом отношении тема кажется мне устаревшей.

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

Хотя тема Beaver Builder является хорошим дополнением, ей не хватает функций и дополнений, которые предлагают большинство современных тем WordPress. За дополнительные деньги, которые Beaver Builder хочет за эту тему, вам лучше купить универсальную тему WordPress, такую ​​​​как Divi, поскольку она предлагает гораздо больше.

Настройки компоновщика страниц

Область настроек плагина Beaver Builder отображается на одной странице. В меню отображаются десять разделов.

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

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

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

В разделе шаблонов вы можете включить все шаблоны, включить только основные шаблоны, включить пользовательские шаблоны (т.е. шаблоны, которые вы сохранили) и отключить все шаблоны.

Также есть возможность редактировать шаблоны компоновщика страниц в административной области и переопределять основные шаблоны.

Все типы сообщений, доступные на вашем веб-сайте WordPress, отображаются в разделе типов сообщений. Вы можете отключить любые типы сообщений, для которых вы не хотите, чтобы Beaver Builder был активен.

Плагин включает в себя три разных набора иконок. Их можно отключить в разделе значков. Также есть возможность загрузить собственный набор иконок.

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

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

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

Если вы перенесли свой сайт на новый тарифный план хостинга, вам может потребоваться очистить кеш плагина.

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

Как видите, в Beaver Builder есть много полезных опций, которые можно настроить на странице настроек. Единственное, что, как мне кажется, ему действительно нужно, — это возможность изменять разрешения на основе роли пользователя (это то, что есть у Visual Composer).

Цены на Beaver Builder

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

Все лицензии позволяют вам использовать Beaver Builder на неограниченном количестве веб-сайтов столько времени, сколько вам нужно. Поддержка и обновления предоставляются в течение года, а последующие годы доступны со скидкой в ​​размере 40% от первоначальной цены (хотя вы можете продолжать использовать плагин, если не продлите подписку).

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

Стандартная лицензия на Beaver Builder продается по цене 99 долларов. Эта лицензия предоставляет полную копию плагина Beaver Builder, но не включает тему WordPress Beaver Builder или поддержку мультисайта WordPress. Чтобы получить эти два дополнения, вам необходимо перейти на профессиональную лицензию, которая стоит 199 долларов.

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

Если вам не нужна поддержка WordPress Multisite, я считаю, что стандартная лицензия за 99 долларов дает вам все, что вам нужно, поскольку тема Beaver Builder не стоит того, чтобы платить еще 100 долларов.

Visual Composer против Beaver Builder: сводка

Как вы видели, Visual Composer и Beaver Builder имеют свои сильные и слабые стороны. Я лично не чувствую особой разницы между этими двумя решениями в том, что касается создания макетов, поскольку оба они могут использоваться для создания великолепно выглядящих веб-сайтов.

Если вы предпочитаете создавать макеты на внешнем интерфейсе своего веб-сайта, я считаю, что Beaver Builder немного ограничивает его, поскольку интерфейс более плавный (хотя между ними не так уж много).

Если вы предпочитаете создавать макеты в бэкэнде своего веб-сайта, вам подойдет Visual Composer, поскольку Beaver Builder не предлагает эту функциональность.

После создания макетов с помощью обоих решений я пришел к выводу, что предпочитаю создавать макеты в бэкэнде с помощью Visual Composer. Отчасти это может быть связано с тем, что у меня больше опыта работы с плагином, но я чувствовал, что могу быстрее создавать нужные мне страницы с помощью Visual Composer. Тем не менее, я считаю, что это действительно зависит от ваших собственных предпочтений в отношении того, какой интерфейс вы предпочитаете, поскольку, хотя Beaver Builder может выглядеть не так профессионально, я нашел его простой интерфейс приятным в использовании.

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

Плюсы визуального композитора

• Значительно дешевле, чем Beaver Builder
• Позволяет создавать макеты в бэкэнде и интерфейсе вашего сайта.
• Имеет более широкий спектр предлагаемых модулей контента
• Предлагает множество вариантов для разработчиков, и существует множество доступных плагинов WordPress, которые добавляют дополнительные функции.

Минусы визуального композитора

• Плагин не поддерживает GPL, и разработчики ожидают, что вы приобретете лицензию на Visual Composer для каждого принадлежащего вам веб-сайта (хотя технически вы все равно можете использовать плагин на нескольких веб-сайтах).
• Редактор внешнего интерфейса мог бы быть немного более совершенным

Плюсы бобра-строителя

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

Минусы Beaver Builder

• Дороже, чем Visual Composer
• Вы можете редактировать макеты только в интерфейсе вашего сайта.
• Более дорогие профессиональные и агентские лицензии не оправдывают их дополнительных затрат (особенно потому, что поддержка нескольких сайтов входит в стандартную комплектацию Visual Composer).

Я надеюсь, что эта сравнительная статья оказалась вам полезной. Чтобы узнать больше об этих плагинах WordPress, посетите информационные страницы Visual Composer и Beaver Builder.

Спасибо за чтение.

Кевин