Сообщество WordPress имеет достаточно много конструкторов для визуальной работы с сайтом. Эти удобные плагины для WordPress позволяют создавать профессионально выглядящие страницы за считанные секунды, даже если у вас нет опыта проектирования или разработки. В этой статье мы сравниваем двух самых популярных конструкторов перетаскивания WordPress: Elementor Pro и Beaver Builder .
Оба эти решения используют редактор переднего плана. Это означает, что вы можете вносить изменения непосредственно на своем веб-сайте с помощью визуального редактора и просматривать изменения в режиме реального времени.
Давайте углубимся и посмотрим, что Elementor Pro и Beaver Builder предлагают владельцам веб-сайтов WordPress. Это поможет вам понять, какой из этих первоклассных конструкторов перетаскивания страниц подходит именно вам.
Elementor Pro
Elementor сразу же был популярен, когда он был выпущен в июне 2016 года . Плагину удалось собрать более 10 000 активированных установок всего за три месяца, а спустя 15 месяцев разработчикам удалось увеличить свою пользовательскую базу с 10 000 пользователей до более 300 000 пользователей.
Одна из причин, по которой бесплатная версия Elementor так быстро росла, заключается в том, что разработчики предложили удобный для пользователя интерфейс с функциями, которые обычно встречаются только в премиальных инструментах для перетаскивания страниц. Их про версия, которую мы рассмотрим сегодня в этой статье, раскрывает все возможности Elementor.
Elementor предоставит вам полный контроль над каждой страницей на вашем сайте с помощью красивого внешнего визуального редактора.
Всего доступно 53 виджета контента, которые помогут вам сформировать страницы так, как вы хотите. Вы найдете виджеты для добавления изображений, видео, карт, боковых панелей, отзывов и многого другого.
24 из этих виджетов контента доступны только в профессиональной версии. Это включает в себя желаемые виджеты контента для WooCommerce, общий доступ к социальным сетям, таблицы цен, публикации, портфолио, комментарии Facebook и многое другое.
Вам будет приятно узнать, что вы можете использовать любой виджет WordPress с Elementor. Это открывает безграничные возможности для интеграции виджетов из ваших любимых плагинов WordPress.
Каждый аспект Elementor имеет открытый исходный код, удобен для мобильных устройств и оптимизирован для поисковых систем. Большая коллекция готовых шаблонов также предоставляется. Их можно использовать без изменений или в качестве основы для создания собственного дизайна. Все шаблоны могут быть сохранены и применены к другим страницам. Они также могут быть экспортированы и импортированы.
Использование Elementor Pro
Как только вы активируете Elementor, вы увидите ссылку «Редактировать с Elementor» на страницах вашего поста и списка страниц. Вы можете перейти непосредственно к редактору, нажав на эту ссылку.
Если вы уже находитесь в области редактирования сообщения или страницы, просто нажмите кнопку «Редактировать с помощью Elementor».
Если вы вошли на свой веб-сайт, вы также увидите ссылку «Редактировать с помощью Elementor» в админ-панели WordPress.
Интерфейс Elementor отображает все параметры в левой части страницы. Когда вы нажимаете на область основного контента, вы можете перемещать разделы и виджеты.
Elementor относится к виджетам контента как к элементам, хотя в строке поиска запутанно указывается «Виджет поиска» в верхней части панели. Все элементы отображаются в двух столбцах.
В верхней части находятся важные элементы, такие как столбцы, заголовки, изображения, видео и карты. В следующем разделе отображаются все профессиональные элементы, а затем есть разделы для общих элементов и виджетов WordPress. Большое количество элементов означает, что вам нужно перемещаться с помощью полосы прокрутки.
Чтобы добавить контент на свою страницу, просто нажмите на элемент контента и перетащите его на свою страницу. Когда вы щелкаете элемент контента на своей странице, панель слева изменится и отобразит настройки для этого элемента. Настройки разделены на три раздела: «Содержимое», «Стиль» и «Дополнительно».
Вы можете изменить каждый аспект элемента содержимого в этой области и изменить макет, стиль, цвета и многое другое. Поскольку Elementor использует визуальный редактор, вы можете видеть, что любые сделанные вами изменения происходят в режиме реального времени.
В самом верху панели находится логотип Elementor и две кнопки слева и справа.
Кнопка слева вызывает окно настроек, в котором вы можете изменить цвета, настройки страницы, общие настройки и многое другое.
Кнопка справа действует как кнопка сброса. Нажав на нее, вы вернетесь на главную панель, где отображаются все элементы содержимого.
В нижней части панели вы можете изменить режим просмотра с рабочего стола на планшетный и мобильный. Вы также можете получить доступ к своей истории изменений и вернуться к предыдущим версиям макета. Это полезно, если вы допустили ошибку или просто передумали над тем, что добавили.
Кнопка шаблонов в этом меню позволяет сохранить текущий макет в качестве шаблона и получить доступ к библиотеке шаблонов.
Интерфейс Elementor не так интуитивен, как у Beaver Builder, но как только вы узнаете, как он работает, вы сможете создавать профессиональные макеты за считанные минуты.
Предварительно разработанные шаблоны Elementor
Когда у вас пустая страница, вы увидите возможность добавить новый раздел или добавить шаблон. Эта область продолжает отображаться в нижней части страницы после добавления контента.
Добавление нового раздела позволяет выбрать одну из двенадцати структур столбцов. При нажатии на кнопку «Добавить шаблон» загружается библиотека шаблонов. Как отмечалось ранее, это также можно запустить через меню в нижней части панели основных параметров.
Библиотека шаблонов показывает все предварительно разработанные шаблоны и все шаблоны, которые вы создали и сохранили самостоятельно. Существует также возможность сохранить ваш текущий макет в правой верхней части.
Всего доступно 125 готовых шаблонов. Подавляющее большинство этих макетов доступно только пользователям Elementor Pro.
Каждый шаблон можно предварительно просмотреть, а затем вставить в область содержимого. Всегда есть небольшая задержка в несколько секунд после нажатия кнопки «Вставить» до ее добавления на страницу.
Вы найдете шаблоны страниц для разных ниш. Есть шаблоны для кофеен, юридических фирм, спортивных сайтов, фестивалей, компаний по недвижимости, скоро появятся страницы, о страницах, интернет-магазинах и многое другое.
Досадно, что Elementor не дает вам возможности заменить ваш текущий макет. Он всегда добавляется в конце существующего макета.
Поэтому, если вы вставляете макет, и он вам не нравится, вам нужно перейти в область настроек на главной панели и выбрать «Удалить весь контент». Если вы забыли это сделать, а затем добавили свой новый макет, вам нужно либо вернуться назад и вручную удалить все разделы предыдущего макета, который вы вставили, либо удалить весь контент и снова вставить макет.
Важно помнить, что все конструкторы перетаскивания страниц предназначены для того, чтобы помочь вам изменить основную область содержимого. Так что, если у вас есть боковые панели на странице, шаблоны будут выглядеть вместе.
У Elementor есть полезная опция в настройках страницы, которая позволяет вам перейти от обычного шаблона вашей темы к пустому холсту. Это очищает макет и позволяет публиковать макет так, как он был предназначен (то есть без боковых панелей).
Шаблоны – большая торговая точка Elementor. Предварительно разработанные шаблоны являются хорошей отправной точкой для ваших собственных макетов, и, поиграв с дизайнами, вы сможете лучше понять, как максимально использовать плагин.
Настройки Elementor Pro
В основной области настроек Elementor вы можете выбрать, с какими типами постов можно использовать. Вы также можете исключить определенные роли пользователей из доступа к нему.
В разделе стиля вы можете установить шрифт по умолчанию, ширину содержимого по умолчанию и расстояние между виджетами. Вы также можете ввести свой ключ reCAPTCHA и информацию Facebook SDK в разделе интеграции, а в расширенном разделе вы можете определить свой метод печати CSS и переключить метод загрузчика редактора.
Ваша библиотека шаблонов связана в главном меню настроек WordPress. Это позволяет легко увидеть, какие макеты вы создали и сохранили. Системную информацию и информацию о лицензии также можно посмотреть здесь.
Область инструментов помогает вам выполнять множество различных задач, таких как восстановление CSS, замена URL вашего веб-сайта и откат к предыдущей версии Elementor.
Расположение области настроек немного странно. Существует область настроек и область инструментов с четырьмя различными разделами в каждом. Отдельная страница настроек, в которой перечислены все параметры на нескольких вкладках, будет более разумной.
Elementor платный или бесплатный, какой лучше?
Бесплатная версия Elementor действительно впечатляет и содержит большое количество виджетов и шаблонов контента, а также необходимые функции, такие как экспорт и импорт. Поэтому вам может быть интересно, почему кто-то захочет купить профессиональную версию, если бесплатная версия хороша. Это разумный вопрос.
Ответ прост. Обычная версия Elementor хороша, про версия отличная.
24 виджета контента (элементы), которые включены в Elementor Pro, содержат виджеты WooCommerce, которые необходимы для интернет-магазинов, виджет постов, помогающий публиковать посты в блоге, виджет слайдов, виджеты цен, виджет входа в систему и многие виджеты социальных сетей. Большинство готовых шаблонов доступны только в Elementor Pro.
Другие дополнительные функции включают в себя возможность сделать виджет глобальным и развернуть его на вашем веб-сайте, использовать CSS и возможность интегрировать шаблоны непосредственно в боковые панели вашего веб-сайта в качестве виджета.
Я не думаю, что было бы справедливо сказать, что бесплатная версия Elementor ограничительна, потому что это не так; однако я думаю, что владельцы веб-сайтов, которые используют бесплатную версию, будут завидовать расширению возможностей профессиональных пользователей.
Проверьте этот список различий между бесплатной и профессиональной версией, чтобы увидеть, что именно вы получите, если вы обновитесь.
Elementor Pro Цены
Elementor предлагает простую и справедливую ценовую политику для тех, кто хочет перейти с бесплатной версии .
Доступны три различных плана: Личный, Бизнес и Безлимитный. Все планы предлагают одну и ту же версию Elementor Pro. Разница лишь в том, сколько сайтов вы получаете обновления и поддержку.
49 долларов в год – заманчивая цена для перехода на профессиональную версию Elementor, и всего 99 долларов, если вы хотите получить лицензию на три сайта, и 199 долларов, если вы хотите получить неограниченную лицензию для веб-сайта.
Все пользователи WordPress могут установить бесплатную версию Elementor, чтобы ознакомиться с тем, что плагин может и не может делать. Несмотря на это, Elementor Pro по-прежнему поставляется с 30-дневной гарантией возврата денег.
Те, кто продолжат использовать Elementor Pro после истечения срока действия лицензии, получат щедрую скидку 50%. Это снижает цену Elementor Pro в последующие годы до 24,50 долларов США в год за персональную лицензию, 49,50 долларов США в год за бизнес-лицензию и 99,50 долларов США в год за неограниченную лицензию.
Beaver Builder
Запущенный в апреле 2014 года , Beaver Builder всегда предлагал простой в использовании интерфейс и множество премиальных функций, облегчающих создание профессионального контента. Плагин оказался очень популярным среди разработчиков, поэтому Beaver Builder пользуется таким большим уважением и почему у него более полумиллиона клиентов.
Как и Elementor, Beaver Builder позволяет настраивать ваш сайт с помощью внешнего визуального редактора. Бесплатная версия плагина доступна (подробнее об этом позже), но это расширенная версия , что все знакомы с.
Beaver Builder использует минималистский интерфейс, который хорошо сочетается с цветовой схемой WordPress по умолчанию. В прошлом я критиковал Beaver Builder за то, что он выглядит устаревшим, но выпуск Beaver Builder 2.0 Hoover изменил это мнение. Интерфейс теперь выглядит тепло и современно.
Beaver Builder всегда отличался простотой использования. С самого первого дня Beaver Builder предоставил удобный для пользователя опыт, которому пытались соответствовать другие конструкторы перетаскивания страниц. Интерфейс быстро загружается и практически не имеет кривой обучения.
Предоставлено 30 уникальных виджетов контента, которые они называют модулями, и вы также можете использовать сторонние виджеты WordPress. Все виджеты контента распределены по категориям, чтобы помочь вам быстро их найти.
Все макеты могут быть сохранены и применены к другим страницам. Для выбора доступны десятки готовых целевых страниц и страниц контента.
Платформа под названием Beaver Builder Theme включена в более дорогие лицензии для Beaver Builder.
Использование Beaver Builder
Все редактирование в Beaver Builder происходит на внешней стороне вашего сайта. Вы можете запустить конструктор страниц, щелкнув ссылку «Построитель страниц» на страницах поста и списка страниц, или щелкнув вкладку «Построитель страниц» на странице редактирования.
Если вы просматриваете свой веб-сайт и вошли в систему, вы увидите возможность редактировать свой макет с помощью Beaver Builder в верхней части каждой страницы.
Интерфейс Beaver Builder очень прост в навигации, и все загружается быстро. Я протестировал десятки конструкторов страниц WordPress, и Beaver Builder всегда загружает макеты, поля и настройки быстрее всего.
Когда вы впервые войдете в конструктор страниц, вы увидите простую панель инструментов в верхней части страницы.
С левой стороны вы увидите примечание к сообщению или странице, которую вы в настоящее время редактируете. С правой стороны вы увидите символ плюса (+) и кнопку «Готово». Нажатие на кнопку «Готово» вызывает кнопки для отмены изменений, сохранения изменений в виде черновика, публикации страницы или отмены.
При нажатии на символ плюса загружается панель построения главной страницы.
Стандартные модули содержимого отображаются по умолчанию, но вы можете переключиться, чтобы показать виджеты WordPress или сохраненные модули (напоминание: модули, элементы и виджеты – это одно и то же).
Модули контента делятся на категории: Основные, Медиа, Действия, Макет, Информация и Сообщения. Все отображается сразу, поэтому вам не нужно прокручивать вверх и вниз, как в Elementor.
Все обычные варианты есть. Вы можете дублировать, редактировать, удалять и перемещать столбцы, строки и модули содержимого.
При редактировании столбца, строки или модуля содержимого появляется окно с множеством различных параметров настройки и параметров стиля. В целом, я бы сказал, что Elementor предлагает больше возможностей для настройки, но просто добавить цвета и изменить общий макет и стиль.
Если мы вернемся к главной панели, то увидим четыре разных вкладки: «Модули», «Строки», «Шаблоны» и «Сохраненные».
Вкладка строк имеет готовые структуры строк с различными вариантами столбцов. Вам просто нужно перетащить их в свою область содержимого, а затем добавить содержимое в столбцы.
В конце на сохраненной вкладке вы можете просмотреть сохраненные строки и модули. Сохраненные строки также доступны на вкладке «Строки».
Вкладка шаблонов разделена на три различных раздела, к которым можно получить доступ через выпадающее меню. Разделы – это целевые страницы, страницы содержимого и сохраненные шаблоны.
Существует пустой шаблон холста, 30 шаблонов целевой страницы и 30 шаблонов контента.
Хотя Beaver Builder предлагает меньше шаблонов, чем Elementor Pro, у них лучшее сочетание дизайнов. Некоторые шаблоны, предлагаемые в Elementor Pro, неясны. Похоже, что в Beaver Builder они подойдут для большего количества владельцев сайтов.
Существует множество макетов для агентств, предприятий, маркетологов и интернет-магазинов. Вы также найдете шаблоны страниц о страницах, страницах услуг, портфолио, контактных страницах и т. Д.
К сожалению, нет возможности предварительно просмотреть какой-либо шаблон или способ быстрого удаления боковых панелей дизайна вашего веб-сайта, но, что важно, когда вы нажимаете на шаблон, вам предоставляется возможность заменить существующий макет на шаблон или добавить его в свой шаблон. существующий макет.
Шаблон также вставляется на вашу страницу очень быстро.
Множество опций можно найти через меню инструментов в левой части верхнего меню навигации.
Отсюда вы можете сохранять, дублировать и просматривать текущий макет. Вы также можете просмотреть историю изменений по ссылке на ревизии.
CSS, Javascript и другие глобальные настройки, такие как поля и отступы, также могут быть изменены.
В Beaver Builder отсутствуют некоторые более продвинутые параметры настройки, имеющиеся в Elementor Pro и других решениях, таких как Visual Composer , хотя он превосходит другие области.
Интерфейс загружается быстро и имеет интуитивно понятную структуру, которая проста для понимания. Это сокращает время, необходимое для создания пользовательских макетов.
Тема “Beaver Builder Тема”
Beaver Builder Тема входит в Pro и Агентства лицензий Beaver Builder.
Эта тема, созданная на основе среды Bootstrap и HTML5, позволяет настраивать веб-сайт в режиме реального времени с помощью настройщика тем WordPress. Он имеет встроенную поддержку WooCommerce и предоставляет вам несколько макетов верхнего и нижнего колонтитула.
Каждый аспект темы контролируется через настройщик. Вы не найдете никаких вариантов где-либо еще. Я большой поклонник настройщика WordPress, поэтому мне было приятно видеть, что Beaver Theme использует его вместо собственной панели управления.
Десять предустановок цветовой схемы доступны. Это изменит цвета заголовка и, в некоторых предустановках, цвет фона тоже. Кроме того, вы можете изменить все эти цвета самостоятельно в других областях настройщика.
В Beaver Theme вы найдете множество вариантов настройки, и если вы сможете потратить время на настройку, вы сможете создать крутой дизайн; однако реальность такова, что Beaver Theme – очень простая тема WordPress. Новичкам будет трудно изменить структуру темы, выходящую за рамки основного макета, а разработчики обратят внимание на более универсальные дизайны.
Тема бобра не включена в стандартную лицензию. Разработчики просят еще $ 100, чтобы получить поддержку мультисайтов в WordPress Theme и Beaver.
Для сравнения: за 89 долларов вы можете стать участником ElegantThemes и получить доступ к Divi , 86 другим темам WordPress и трем премиальным плагинам.
Если тема Beaver включена в стандартную лицензию, это будет хорошим бонусом. В нынешнем виде тема предлагает несколько причин для обновления.
Настройки компоновщика страниц
Beaver Builder имеет небольшую область настроек для конструктора страниц, которая находится в главном меню настроек WordPress.
Отсюда вы можете ввести информацию о своей лицензии и выбрать, следует ли отключать какие-либо модули контента и типы сообщений. Основные шаблоны и пользовательские шаблоны также могут быть активированы и деактивированы.
Область доступа пользователя позволяет указать, какие группы пользователей могут и не могут получить доступ к неограниченному редактированию, редактированию глобальных строк и модулей, административной области компоновщика и экспортеру данных шаблонов.
Раздел значков позволяет отключить значки Font Awesome, значки Foundation и дашиконки WordPress.
Наконец, раздел инструментов позволяет очистить кеш и включить режим отладки. Существует также опция удаления, которая полностью удаляет Beaver Builder из базы данных вашего сайта. Это функция, которую я хотел бы, чтобы все разработчики добавили в свои продукты WordPress.
Beaver Builder тоже можно скачать бесплатно
Бесплатная версия Beaver Builder доступен для скачивания на сайте WordPress.org ВЗ прямо с вашего WordPress администратора области.
Beaver Builder Lite в настоящее время активен на более чем 400 000 веб-сайтов WordPress, но, на мой взгляд, это слишком ограничительная и плохая реклама для основного продукта.
Облегченная версия не имеет системы шаблонов и имеет только шесть виджетов контента: аудио, HTML, фото, текстовый редактор, видео и боковую панель. Также можно использовать виджеты WordPress по умолчанию и сторонние виджеты WordPress.
Когда продукты WordPress выпускаются на бесплатной основе, я обычно советую сначала протестировать бесплатную версию, чтобы узнать, нравится ли она вам. Beaver Builder Lite является исключением. Это очень простой плагин, и он не делает достаточно, чтобы показать пользователям, насколько хороша премиум-версия.
Beaver Builder Цены
В то время как планы Elementor Pro оцениваются в зависимости от того, на скольких сайтах вы устанавливаете плагин, планы Beaver Builder ограничивают возможности.
Все планы Beaver Builder обеспечивают поддержку в течение одного года и могут быть установлены на неограниченном количестве сайтов.
Стандартная лицензия продается по цене 99 долларов. Обновление до профессиональной лицензии за 199 долларов добавляет тему Beaver Builder и возможность многосайтового WordPress. Лицензия агентства на 399 долларов была создана для компаний, которые хотят переименовать Beaver Builder с использованием белой маркировки.
Beaver Builder предлагает 30-дневную гарантию возврата денег. На дату продления ваша лицензия будет автоматически продлена со скидкой 40% (если вы не отключите автоматическое продление в своей учетной записи).
Скидка на продление снижает годовую стоимость Beaver Builder до 59,40 долларов США за стандартную лицензию, 119,40 долларов США за профессиональную лицензию и 239,40 долларов США за лицензию агентства.
Elementor Pro против Beaver Builder: Резюме
Elementor Pro и Beaver Builder являются двумя из лучших на рынке конструкторов перетаскивания WordPress.
Давайте рассмотрим сильные и слабые стороны каждого плагина.
Elementor Pro плюсы
- Большое разнообразие виджетов и шаблонов контента
- Красочный пользовательский интерфейс
- Бесплатная версия имеет много замечательных функций, и стоит всего 49 $, чтобы перейти на полную версию
Elementor Pro минусы
- Интерфейс не так быстр, как альтернативные решения
- Панель виджетов контента требует прокрутки вверх и вниз, чтобы найти нужный контент
- Интерфейс может быть более интуитивным
Beaver Builder плюсы
- Интерфейс загружается быстро и прост в использовании
- Система шаблонов работает очень хорошо
- Большое разнообразие виджетов контента и все они доступны без прокрутки
Beaver Builder минусы
- Дорого, если учесть стоимость альтернатив
- Нужно больше настроек модуля и вариантов стилей
- Beaver Theme и Multisite Support не включены в стандартную лицензию
Чтобы узнать больше об этих плагинах, ознакомьтесь с нашими специальными обзорами Elementor Pro и Beaver Builder и сравнением Beaver Builder и Visual Composer.
Какой инструмент перетаскивания страниц вы предпочитаете? Напишите нам в комментариях.
ем, почему Elementor Pro стал так популярен среди владельцев веб-сайтов WordPress, является его удобный и интуитивно понятный интерфейс. Вопрос к автору статьи: Какой функционал и возможности Elementor Pro делают его особенно привлекательным для владельцев веб-сайтов WordPress?
1. Какой редактор используют оба конструктора: Elementor Pro и Beaver Builder?
Привелвнных в статье причин популярности Elementor Pro – это его простой в использовании визуальный редактор и возможность реального времени просмотра вносимых изменений на веб-сайте. Однако данный аспект не охватывает все детали и возможности конструктора. Какие еще особенности Elementor Pro делают его таким популярным среди владельцев веб-сайтов WordPress?
Сколько времени занимает установка и настройка плагина Elementor Pro на сайте WordPress?
стоит отметить, что Elementor Pro не только предоставляет мощные инструменты для создания страниц, но и активно поддерживает свою экосистему темами и плагинами, что делает его еще более привлекательным для пользователей. У меня возникло несколько вопросов по поводу использования этих конструкторов.
Во-первых, как насчет совместимости с различными темами и плагинами? Например, зачастую проблемы могут возникать с темами, которые не полностью оптимизированы под такие плагины, как Elementor или Beaver Builder. Может ли это повлиять на производительность сайта или вызвать конфликты при установке дополнительных плагинов?
Во-вторых, какой из конструкторов лучше подходит для создания адаптивного дизайна? Например, есть ли у вас опыт создания сайта с использованием Elementor и Beaver Builder, и могли бы вы поделиться примерами, когда один из этих плагинов оказал большее влияние на удобство использования на мобильных устройствах?
Также было бы интересно узнать о наличии поддержки сообществом и документацией для этих конструкторов. Возможно, у вас есть информация о том, где можно найти полезные ресурсы и учебные материалы для начинающих пользователей, чтобы быстро освоить данные инструменты.
Надеюсь, вы сможете прояснить эти моменты и, возможно, добавить детали, которые помогут другим пользователям лучше понять, каким образом эти конструкторы могут помочь в разработке их проектов.