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

0
6531

Сегодня разговор пойдет об отличном решении для вашего сайта или блога на wordpress – плагине visual composer. Если вы не представляете себе о чем пойдет речь, то эта статья для вас. В ней будут разбираться основные компоненты и возможности плагина, который мы до-перевели на русский язык.

Что представляет собой visual composer?

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

Настройки visual composer.

После того, как вы установили и активировали плагин visual composer, он откроет перед вами панель настроек, которая состоит из 4-х основных пунктов.

Первая вкладка – основные настройки – здесь, в принципе можно ни чего не менять и оставить все как есть.

visual composer, настройки visual composer,

Вторая вкладка – назначение ролей:

visual composer, настройки visual composer,

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

Третья вкладка – активировать лицензию.

visual composer, настройки visual composer,

Она используется в том случае, если вы приобрели плагин официально у разработчика и у вас есть коды активации плагина visual composer.

Четвертая вкладка – настройщик шорткодов.

visual composer, настройки visual composer,

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

Пятый пункт в меню плагина – настройка сетки.

visual composer, настройки visual composer,

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

Возможности плагина visual composer.

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

Создайте страницу или запись для того, чтобы посмотреть все возможности плагина visual composer.

Кликните на кнопку “РЕДАКТОР В КОНСОЛЕ” – перед вами откроется вот такое вот поле:

visual composer, настройки visual composer,

Здесь 3 блока:

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

Если вы нажмете на кнопку – добавить блок, перед вами откроется меню, в котором вы можете выбрать для себя необходимый модуль для вставки на страницу или в запись:

visual composer, настройки visual composer,

Сегодня мы с вами поговорим про каждый из этих блоков и их возможностях.

Модули visual composer wordpress.

Ряд visual composer

Начнем с самого первого модуля – “Ряд” – с его помощью мы можем располагать контент на странице или в записи практически любым удобным образом.

visual composer wordpress

Модуль имеет ряд дополнительных настроек:

Например, вы можете сохранить его как шаблон.

visual composer wordpress

visual composer wordpress

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

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

visual composer wordpress

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

Текстовый блок visual composer

Очень простой и совешенно понятный модуль.

visual composer,

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

Пример:

visual composer

Иконка visual composer

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

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

visual composer,

Пример:

Разделитель visual composer

Вам пондобилось, к примеру, отделить один элемент от другого так, чтобы визуально это смотрелось привлекательно:

Задавайте какие угодно настройки, ни в чем себя не ограничивайте.

Пример:

visual composer,

По мимо обычного разделителя, существует еще один.

Разделитель с текстом visual composer

Он используется для того, чтобы акцентировать внимание пользователя. Я бы назвал его что-то вроде дополнительного заголовка.

visual composer,

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

Пример:

visual composer,

Информационное сообщение visual composer

Вы решиили предупредить посетителей сайта о чем-то – этот модуль отлично вам подойдет:

visual composer,

Пример:

visual composer,

Социальные сети visual composer

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

visual composer,

Пример:

visual composer,

ЧастоЗадаваемыеВопросы visual composer

Отличный модуль, если вас постоянно о чем-то спрашивают к комментариям к статьям или в личной переписке. Достаточно выбрать основные вопросы, сделать приятный внешний вид, задать ответы и дело в шляпе 🙂

visual composer,

Пример:

visual composer,

Фото visual composer

Этот модуль, как и последующие не оставит вас равнодушным.

visual composer,

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

visual composer,

visual composer,

Пример:

visual composer,

Галерея изображений visual composer

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

visual composer,

Только помните, что если вы вставляете изображения то, при открытии окна сверху будет указано ключевое слово, которое вы прописали в атрибуте “alt”, показано на примере:

visual composer,

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

visual composer,

Табы, тур и аккардион visual composer

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

visual composer,

visual composer,

visual composer,

Пользовательский заголовок visual composer

Этот модуль применяется тогда, когда необходимо сделать акцент над/рядом с каким-то текстовым блоком, акцентировать внимание.

visual composer,

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

Пример:

visual composer,

Кнопка visual composer

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

visual composer,

Пример:

visual composer,

Призыв к действию visual composer

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

visual composer,

visual composer,

visual composer,

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

Пример:

visual composer,

Слайдер записей visual composer

Не представляет из себя ни чего сложного в настройке. Основная задача сделать меняющийся слайдер с записями вашего блога.

visual composer,

Пример:

visual composer,

Видео проигрыватель visual composer

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

visual composer,

Пример:

visual composer,

Модуль visual composer Карта Google

Недавно один из участников группы в Фейсбук интересовался у меня, как разместить html код или iframe у себя на сайте (была необходимость вставки видео контента). Я решил показать это на примере, вставки карты Google.

visual composer,

На скриншоте выше видно, что код уже стоит – в качестве примера, но вдруг вам необходимо установить другой? Например, карту как на скриншоте ниже:

visual composer,

visual composer,

В итоге у нас получится вот так:

visual composer,

HTML

Не стал разделять HTML и javascript на отдельные модули. Скажу лишь, что вы можете их использовать как вам угодно.

visual composer,

visual composer,

В результате, в качестве примера я сделал небольшой забавный баннер и поставил его  на сайт. Баннер может быть как в формате .jpg, так и в формате .gif (меняющиеся картинки или надписи).

Пример:

visual composer,

Модуль социальной сети Flickr

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

visual composer,

Пример:

visual composer,

Бар visual composer

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

visual composer,

Пример:

visual composer,

Диаграммы visual composer

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

visual composer,

Пример:

visual composer,

visual composer,

Модуль пустое место

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

visual composer,

Модули сетка записей, мозаичная сетка и сетка медиа

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

visual composer,

Пример:

visual composer,

visual composer,

visual composer,

На этом я бы хотел закончить обзор Плагина для WordPress – visual composer.

Ссылка на скачивание версии 5.0.1.

https://seo911.su/plagin-dlya-wordpress-visual-composer/ — link

Плагин Visual Composer стал одним из самых продаваемых конструкторов страниц для WordPress. Первый релиз этого потрясающего плагина состоялся еще в мае 2011 года, и с тех пор он приобрел 150,000+ покупателей (и это не считая всех тех пользователей, которые используют его в паре с темой), 200+ аддонов и расширений, а также тысячи позитивных отзывов на просторах Интернета.

Основные элементы, которые вы можете использовать:

  • Rows (Ряды). Элемент «ряд» используется для создания колонок и для внедрения всех остальных элементов страницы.
  • Text Blocks  — Текстовые блоки. Используя стандартный WordPress WYSIWYG-редактор, вы можете форматировать текст этого модуля.
  • Icons включает иконочный шрифт  из следующих иконочных библиотек: FontAwesome, Open Iconic, Typicons, Entypo, Linecons и Mono Social.
  • Separator & Separator With Text – это способы создания строк (и/или текста), образующих разрывы между секциями, которые вы создали на ваших страницах.
  • Message Boxes великолепны для добавления заметок, реклам и других блоковых сообщений.
  • Facebook, Tweet, Google+ и Pinterest – это простые иконки социальных сетей, с помощью которых пользователи могут делиться контентом ваших страниц
  • FAQs – это переключатели, которые можно использовать для добавления «скрытой» информации, которую пользователи могут прочитывать по мере продвижения по странице.
  • Single Image – это просто картинки с дополнительными опциями для изменения размера, анимации, добавления линков и многого другого/
  • Tabs, Tours & Accordions сходны с FAQs в том, что они содержат спрятанный или схлопнутый контент, но первая секция всегда открыта.
  • Pageable Container —  это базовый слайдер для контента
  • Custom Headings упрощает добавление собственных заголовков секций с использованием кастомных шрифтов, размеров, цветов и много другого.
  • Buttons позволяет вам добавлять ссылки на другие страницы или внешние сайты.
  • A Call to Action – это добавление призыва с кнопкой, цепляющего внимание пользователей/
  • Widgetised Sidebar позволяет внедрить ваш собственный кастомный сайдбар в любое место вашей страницы.
  • Video Player позволяет внедрить любые видео-форматы, которые поддерживает WordPress.
  • Google Maps позволяет внедрить в ваши страницы Google-карты.
  • Progress Bars, Pie Charts, Round Charts и  Line Charts позволяет вам отображать разнообразные графики и диаграммы
  • Empty Space добавляет вертикальный пробел между элементами.
  • Post, Media, Post Masonry и Media Masonry Grids – это кастомные сетки, которые вы можете добавлять на страницы (с возможностью миксовать и совмещать типы записей и медиа).

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

Visual Composer Widgets

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here