Visual Composer — конструктор страниц для WordPress

Visual Composer - конструктор страниц для Wordpress

Visual Composer — это лучший визуальный конструктор страниц для WordPress, разработанный компанией WPBakery Inc в 2013 году. Уже тогда им пользовалось 25000 разработчиков. В 2017 году это число перевалило за 1500000 человек. Используется для создания landing page. В статье расскажу о плагине и как им пользоваться.

С 2015 года компания Wix и uCoz начали пропагандировать идею о том, что для создания ресурса не требуется знание языков программирования. Якобы процесс займет 30 минут, и всё готово. Это, конечно, круто, но возможности при использовании конструкторов такого типа сильно ограничены. Сайт строится из стандартных блоков, нет возможности использовать свой HTML код или скрипты. Если вам чего-то не хватает, то купите Premium аккаунт. Дорогой хостинг, домен и постоянное высасывание денег надоедает людям. Попытки создания интернет-ресурса заканчивались через пару дней.

Плюсы использования:

  • Установка на личный хостинг
  • Работа на 99% тем;
  • Front End и Back End редактирование;
  • Библиотека шаблонов;
  • Адаптивный дизайн;
  • 45+ элементов + установка дополнений (Addons);
  • Использование сетки

Минусы:

  • Нет бесплатной версии
  • Не работает на 1% из-за кривых рук разработчиков тем.

Как установить «Visual Composer» себе на сайт

  1. Для начала приобретите VC в магазине codecanyon.net. После оплаты в личном кабинете появится ссылка для загрузки и код активации.
  2. Зайдите в панель управления > Плагины > Добавить новый > Загрузить плагин. Теперь появится область с кнопкой выбора файла. Найдите .zip архив VC и нажмите кнопку Установить. Продвинутые пользователи могут использовать FTP.
  3. Начнется загрузка файлов на сервер и установка.
  4. После успешной загрузки, WordPress предложит активировать новый плагин и ввести лицензионный ключ.
  5. Установка Visual Composer завершена.

Первоначальная настройканастройка Visual Composer

Чтобы настроить конструктор для WordPress пройдите в меню плагина > Основные настройки.

В основных настойках не отключайте адаптивный дизайн. В пункте «Google font subsets» отметьте кириллические шрифты как на картинке ниже. Так как у нас ещё нет шаблонов, ничего не выберем в пункте «Default template for post types». Если хотите пройти обучающий тур, то нажмите кнопку «Reset». Во время работы будут приходить подсказки на английском языке.

Основные настройки Visual Composer

Самой важной настройкой будет вкладка «Role Manager», так как тут происходит выбор типа страниц, на которых будет включен конструктор. Представлены роли пользователей, которые у есть на сайте. Я пользуюсь только администратором, поэтому расскажу на его примере.

Visual Composer Role Manager

Типы записей:

  • Page only — Visual Composer работает только на страницах
  • Custom — самостоятельный выбор. В моем случае это Страницы, записи в блоге и портфолио.
  • Disable — Выключить. Этот пункт можно использовать для авторов.

Backend editor — конструктор в админ-панели WordPress. Вы можете расставлять блоки, заполнять их, но результат увидите только после сохранения и перехода на сайт. Оставляем его включённым. Не рекомендую отключать классический редактор, поэтому «Disable Classic editor» не отмечаем.

Backend editor

Frontend editor — визуальный редактор. Открывается сайт, где вы можете вставлять и редактировать блоки. Главный плюс — вы видите, как будет выглядеть контент на ПК, планшете, телефоне в горизонтальном и вертикальном режиме. Оставляем этот пункт включенным.

конструктор страниц для WordPress

В последующих пунктах ничего не меняем. Делаем настройки, как на скриншоте. Настройка вижуал компосер окончена.

Начинаем использовать конструктор страниц для WordPress

  1. Создаем страницу, прописываем название и URL.
  2. Переходим в Backend editor.сайт на VC
  3. Кликаем по»Добавить блок», и у нас откроется такое окно:
    блоки Visual Composer
    Здесь присутствуют как предустановленные блоки, так и блоки от установленных расширений.
  4. Нажимаем на «Ряд». Этот блок позволяет разметить область на столбцы, применить к нему анимацию. Обязательно сначала воспользуйтесь этим  блоком, так как все остальные блоки вы будете вставлять в него. Представьте, что контент разделен на сектора и каждый сектор — свой ряд. Ряд можно сравнить с папкой на компьютере. При перемещении папки, файлы внутри перемещаются вместе с ней. Так и здесь.
  5. Ряд мы разделим на 2 части. Для этого наводим на кнопку со строчками. Выбираем 1/2 + 1/2.
  6. Нажимаем на + в первой колонке. Откроется меню выбора блоков, жмем на «Текстовой блок». Нас встречает текстовой редактор с рыба-текстом. В «CSS анимация» можно выбрать нужный эффект. После внесения изменение > «Safe changes»Текстовой блок VC
  7. Во вторую колонку мы вставим картинку, выбираем блок»Фото». Источником изображения выбираем библиотеку сайта. Нажимаем на зеленый плюс и щелкаем на нужную картинку. Размер изображения можно прописать в пикселях или выражениями («thumbnail», «medium», «large», «full»). Ниже вы можете выбрать анимацию, эффект для фото, а также прикрепить ссылку, по нажатию на которую будет происходить переход.
  8. Сохраняем изменения и смотрим получившийся результат.

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

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

Подведем итоги

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

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

Купить Visual Composer можно по ссылке — codecanyon.net. Попробовать плагин в Demo режиме можно по ссылке — vc.wpbakery.com/try/. На странице введите своё имя, Email и выберите, какую страницу вы хотите создать.


Комментарии

  1. Очень подробная и полезная статья. Спасибо за такой подробный и полный обзор. Думаю работа по созданию страниц будет намного проще после изучения и прочтения данного материала. Складывается впечатление, что возможности этого инструмента практически безграничны. Можно творить и создавать.

  2. Евгений Кузнецов : Август 25, 2017 at 1:02 дп

    Скачал плагин, залил на хостинг, на русском только описание плагина в админке, кнопки и блоки из первых строк списка, не более того, см скрин https://gyazo.com/7de8d180497c2f464df42ca16f429861

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

  3. Я до VC юзал Divi два года подряд, а тут решил попробовать что-то новое, попробовал, теперь как строитель на стройке только и чертыхаюсь, зачем я взял его в работу… Повелся на VC потому-что много разных слайдеров, графиков и др. элементов, а так Диви намного впереди по удобству, интрефейсу и т.д., в общем создается впечатления, что Elegance Theme учли все недостатки VC и сделали нормальную версию драг н дроп конструктора) Да настроек в Диви поменьше, да возможно цена покажется высокой, но юзабилити с интерфейсом время и нервы экономят…. Кстати насчет настроек, в Диви возможно верстать отдельно под мобильные приложения, да и с шрифтами делай что хочешь, а например в VC банального размера в px не выставишь, вручную прописывать приходится…. Короче можно целый обзор — сравнение делать)

    • Пытался пробовать в демо режиме Divi, но не хватило некоторых блоков. У VC больше дополнений, это радует. Что стоит попробовать, divi тему или именно конструктор (плагин)?

  4. Опечалило, что плагин платный… А есть какие-нибудь сходные по функционалу плагины? Даже не сходные, а просто бесплатные, чтобы сделать более или менее простую посадочную страницу? Есть такие?

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