Visual composer- обзор и настройка плагина

плагин visual composerПриветствую читателей моего блога. Сегодня я хочу рассказать про ультра классный, профессиональный, мощный и многофункциональный плагин Visual composer.

Появился этот плагин почти 6 лет назад и за это время успел завоевать доверие многих пользователей. Более того, данный плагин включен в состав большого количества премиум тем. На момент написания статьи продажи плагина достигли 274 тыс. экземпляров, и я думаю, что это вовсе еще не порог. В 2014 году Visual Composer был показан как самый популярный и быстро развивающийся премиум плагин после WooCommerce. Разработчиком плагина является команда высококвалифицированных, талантливых и опытных профессионалов WPBakery.

Так же по теме: Дополнения к плагину Visual Composer

 

Обзор плагина для wordpress Visual composer

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

Преимущества конструктора страниц wordpress Visual composer:

  • не требует знаний программирования;
  • больше 45 предопределенных элементов контента;
  • более 200 различных аддонов;
  • интуитивный и понятный интерфейс;
  • переведен на многие языки, в том числе и на русский;
  • полностью адаптивный;
  • дружелюбен к SEO;
  • поддержка Woo Commerce;
  • большое кол-во различный иконок, в том числе и иконок социальных сетей;
  • возможность использование в качестве фона видео и фото;

И это еще не весь список преимуществ этого замечательного плагина.

Плагин Visual composer настройка

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

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

Включение/отключение адаптивного дизайна-думаю вряд ли кому-то захочется отключить адаптивный дизайн :). Поддержка шрифтов google- включаем или отключаем необходимые шрифты.

Role manager. 

На этой вкладке мы настраиваем разрешения для различных пользователей сайта. Так же советую заглянуть в чекбокс "Типы записей". Он позволяет выбирать, на каких элементах сайта будет включен visual composer. По умолчанию установлено, что плагин работает только на страницах. Если вы хотите использовать плагин не только на страницах, а например еще в записях, портфолио, в описании товаров woocomerce и т.д., то необходимо выбрать значение "Custom" и птичками выбрать нужные элементы.

Дизайн элементов.
Здесь имеется возможность настроить цветовую гамму различных элементов плагина.

Индивидуальный CSS
Это поле предназначено для опытных разработчиков, которые хотят внести свои стили.

На этом настройка visual composer закончена, хотя как видите, у плагина настроек не так уж и много.

Как работать с плагином visual composer wordpress

Как я и писал выше, плагин visual composer имеет более 45 предопределенных элементов контента. Давайте их рассмотрим. 

Конечно я все элементы описывать не буду, но выделю основные. Дабы выбрать тот или иной элемент, необходимо просто нажать на кнопку "Добавить элемент"

  • Ряд-пожалуй с добавления этого элемента начинается процесс создание страница. Ряд можно разделять на несколько блоков, более того, можно задавать разную пропорцию ширины блоков на страницы. Делается это здесь:
  • Текстовый блок-стандартный текстовый редактор вордпресс.
  • Иконка- потрясающий набор иконок с возможностью тонкой настройки каждого элемента
  • Фото-добавление на сайт фотографии. Блок позволяет задать выравнивание, размер, действие при нажатии и анимацию появления.
  • Галерея изображение-почти то же самое, что блок с фото, только позволяет создавать галереи из набора фотографий.
  • Табы-очень привлекательный и функциональный элемент. В стандартном наборе присутствует два вида табов-вертикальный и горизонтальный.
  • Custom heading- произвольный заголовок. В его настройках можно выбрать размер текста, выбрать шрифт, выбрать тип заголовка, а так же выравнивание и дополнительные стили.
  • Кнопка- отличный инструмент с множеством настроек. Позволяет создать практически любую кнопку с произвольным текстом, цветов, фоном, обрамлением и т.д.
  • Сайдбар с виджетами-в любом месте сайта позволяет вывести определенный сайдабар с вашими виджетами.
  • Видео проигрыватель-вставляйте ссылку на любой видео ролики задайте свои параметры отображения.
  • Бар, Pie chart, Round chart и Line chart- создавайте свои анимационные с любыми цветами различные диаграммы и графики.
  • Empty space-позволяет сделать пробел между элементами. Размер пробела задается в пикселях.

Ну а теперь давайте рассмотрим на примере как можно создать очень красивую страницу. У плагина есть два варианта редактирования страницы-CLASSIC MODE и FRONTEND EDITOR.

Давайте добавим ряд на три блока с элементами и поместим их на фон. Для этого создаем ряд и задаем необходимое количество блоков. Я хочу сделать так, что бы все элементы этого ряда были на фоне картинки. Что бы это сделать, нужно зайти в редактирование ряда и выбрать нужную фоновую картинку. Делается это здесь:

настройка композера

Далее заходим во вкладку "Дизайн элементов", выбираем наш фон и сохраняем.

Screenshot (4)

Теперь добавим элементы контента. Я добавил произвольные элементы, дабы показать, как это будет выглядеть. Вот так получилось в админке. Обратите внимание, что бы не много опустить элементы вниз, я использовал Empty space, т.е. добавил пустое место.

7f12e4b72d464970a2d463dab97e9549

А вот такой результат получился на сайте:

Screenshot (4)

Используя плагин visual composer wordpress таких рядов и страниц можно создавать неограниченное количество. Все зависит от вашей фантазии и цели будущего сайта. Да кстати, чуть не забыл рассказать о том, что плагин предусматривает и готовые шаблоны оформления страницы, что может упростить вам работу и сэкономить некоторое время для создания сайта. Шаблоны можно найти в окне редактирования страницы. Давайте выберем любой и посмотрим, как все это будет отображаться. Нас интересует этот элемент:

Screenshot (4)

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

Screenshot (4)

После выбора шаблона и добавления его на страницу можем смотреть результат.

Используя свою смекалку, креативность и фантазию с использованием данного плагина, я думаю, хотя нет- я уверен, что можно создать просто отличный сайт. Я, как веб мастер, постоянно его использую для создания клиентских сайтов и честно говоря, уже не могу представить красивый, функциональный и современный сайт без этого плагина. В статье я рассказал всего лишь о некоторых возможностях плагина и описал важные настройки visual composer wordpress, т.к. об этом плагине можно писать и писать :). Хочу заметить, что в комплекте с плагином представлена документация, но она на английском языке, поэтому, если вы столкнетесь со сложностями в работе плагина, что-то у вас не получается, пишите в комментариях-будем разбираться.

А на сегодня пока все, надеюсь моя инструкция по visual composer хоть не много помогла вам.

Понравилась статья? Не хотите пропустить следующие обзоры и настройки тем и плагинов для wordpress?

Подписывайтесь на обновления!!!

Будьте в курсе о новых обзорах

: 4

  1. Антон

    Спасибо. Кратко и понятно)

  2. Ольга

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

    • Миша

      Добрый вечер, Ольга. Нет, тестов не проводил, но я бы не сказал, что этот плагин значительно влияет на скорость загрузки сайт+ еще многое зависит от того, какие элементы плагина выводятся на сайте. Вы хотите его использовать только для постов? т.е. обычных записей?

  3. Ольга

    Пока да, буду юзать для постов. Хочу использовать традиционные элементы оформления — иконки, табы, аккордеоны, выделения там всякие и тому подобную типографию.

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