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 завершена.

Как настроить конструктор страниц для WordPressнастройка 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

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

Visual Composer — Как пользоваться

  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 канал разработчиков. Полезные видео, инструкции и многое другое.

Visual Composer 5.2 скачать на русском языке

В ознакомительных целях я выкладываю Visual Composer 5.2 Nulled. В данной версии конструктора добавлена русская локализация, которая упрощает работу при создание страниц.

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

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

В комментариях расскажите о своем опыте использования визуальных редакторов для сайта. Что вы используете?

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


Комментарии

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *