Сегодня разговор пойдет об отличном решении для вашего сайта или блога на wordpress – плагине visual composer. Если вы не представляете себе о чем пойдет речь, то эта статья для вас. В ней будут разбираться основные компоненты и возможности плагина, который мы до-перевели на русский язык.
Что представляет собой visual composer?
Этот плагин, по сути, является мощным техническим подспорьем в улучшении функциональности вашего блога. В нем встроено большое количество различных модулей, которые позволяют настроить сайт на wordpress оптимальным образом, так чтобы им было удобно пользоваться и вам, и посетителям блога.
Настройки visual composer.
После того, как вы установили и активировали плагин visual composer, он откроет перед вами панель настроек, которая состоит из 4-х основных пунктов.
Первая вкладка – основные настройки – здесь, в принципе можно ни чего не менять и оставить все как есть.
Вторая вкладка – назначение ролей:
На этой вкладке вы можете установить роли для ваших пользователей блога. Например, разрешить использовать плагин Авторам или редакторам.
Третья вкладка – активировать лицензию.
Она используется в том случае, если вы приобрели плагин официально у разработчика и у вас есть коды активации плагина visual composer.
Четвертая вкладка – настройщик шорткодов.
Можете по экспериментировать с ней, если вам любопытно. Лично я ни чего не настраивал, функциональности плагина хватает с избытком.
Пятый пункт в меню плагина – настройка сетки.
Весьма полезная настройка, которая предлагает вам возможность настроить шаблон сетки отображения информации. Шаблонов, разумеется, может быть не ограниченное количество.
Возможности плагина visual composer.
Давайте плавно перейдем к возможностям самого плагина. Но перед тем, как продолжить, хочу сразу отметить тот факт, что одних настроек, которые в нем присутствуют вам, возможно не хватит и могут понадобится дополнительные компоненты, которые называются – visual composer addons. В будущем, я планирую посвятить этим дополнениям ни одну статью на сайте.
Создайте страницу или запись для того, чтобы посмотреть все возможности плагина visual composer.
Кликните на кнопку “РЕДАКТОР В КОНСОЛЕ” – перед вами откроется вот такое вот поле:
Здесь 3 блока:
- Добавить блок – вы добавляете один из элементов, которые мы рассмотрим ниже.
- Добавить текстовый блок – обычный блок с текстовой информацией.
- Добавить шаблон – вы можете создать свой шаблон, например, для страниц, на которых представлены одни и те же блоки, но отличается контент. Эта функция ускоряет вашу работу с сайтом, чтобы каждый раз не сверяться с уже существующими настройками на страницах.
Если вы нажмете на кнопку – добавить блок, перед вами откроется меню, в котором вы можете выбрать для себя необходимый модуль для вставки на страницу или в запись:
Сегодня мы с вами поговорим про каждый из этих блоков и их возможностях.
Модули visual composer wordpress.
Ряд visual composer
Начнем с самого первого модуля – “Ряд” – с его помощью мы можем располагать контент на странице или в записи практически любым удобным образом.
Модуль имеет ряд дополнительных настроек:
Например, вы можете сохранить его как шаблон.
Все параметры настроек в модуле “Ряд” переведены на русский язык, думаю, у вас не возникнет проблем с его настройками. По сути, если рассматривать этот модуль как пример, по остальным модулям, то он фактически дублирует настройки всех остальных, только в них появляются различные дополнительные функции.
Например, вам понадобилось оживить часть страницы, на которой располагается информация о компании или достижения отделно взятого человека. Вы Можете добавить фоновое изображение с эффектом паралакса (тот случай, когда изображение прокручивается) или например фоновое видео (выбирайте материал, у которого отсутствует звковая дорожка).
Дизайн элементов позволяет добавлять дополнительные функции, такие как показаны на скриншоте.
Текстовый блок visual composer
Очень простой и совешенно понятный модуль.
В его настройках нет ни чего сложного, по сути, он используется для того, чтобы разместить на сайте какую бы то ни было текстовую информацию.
Пример:
Иконка visual composer
Весьма любопытный модуль, который позволяет располагать на вашем сайте различные симпатичные иконки, которые могут использоваться под совершенно разные нужды. Например, акцентировать внимание пользователя на чем-то.
В настройках иконки нет ни чего особо примечательного, кроме того, что вы можете выбрать огромное количество вариаетов и стилизовать ее, как вам будет угодно.
Пример:
Разделитель visual composer
Вам пондобилось, к примеру, отделить один элемент от другого так, чтобы визуально это смотрелось привлекательно:
Задавайте какие угодно настройки, ни в чем себя не ограничивайте.
Пример:
По мимо обычного разделителя, существует еще один.
Разделитель с текстом visual composer
Он используется для того, чтобы акцентировать внимание пользователя. Я бы назвал его что-то вроде дополнительного заголовка.
Кстати, у него есть весьма приятное дополнение, которое заключается в том, что к тексту вы можете добавить иконку.
Пример:
Информационное сообщение visual composer
Вы решиили предупредить посетителей сайта о чем-то – этот модуль отлично вам подойдет:
Пример:
Социальные сети visual composer
По какой-то причине плагин использует всего лишь 4 социальные сети, 3 из них для нас с вами интересны, а вот 4-ая не особо. Для русского-язычных пользователей лучше бы подошла социальная сеть Вконтакте.
Пример:
ЧастоЗадаваемыеВопросы visual composer
Отличный модуль, если вас постоянно о чем-то спрашивают к комментариям к статьям или в личной переписке. Достаточно выбрать основные вопросы, сделать приятный внешний вид, задать ответы и дело в шляпе 🙂
Пример:
Фото visual composer
Этот модуль, как и последующие не оставит вас равнодушным.
С его помощью вы сможете сделать так, чтобы изображения на сайте увеличивались по клику. Довольно удобная функция.
Пример:
Галерея изображений visual composer
Возможна ситуация, когда вам необходимо сделать на сайте галерею изображений, этот модуль отлично вам подойдет.
Только помните, что если вы вставляете изображения то, при открытии окна сверху будет указано ключевое слово, которое вы прописали в атрибуте “alt”, показано на примере:
Я не стал отдель выделять модуль карусель изображений отдельно от галереи, так как суть у них примерно одинаковая. Скажу лишь, что при переводе была допущена ошибка в этом модуле и размеры изображений нужно прописывать по английски, показано на скриншоте:
Табы, тур и аккардион visual composer
Разделять эти 3 модуля и говорить о каждом из них по отдельности особого смысла нет, так как по сути они выполняют одну и ту же функцию, только с небольшими вариациями в дизайне:
Пользовательский заголовок visual composer
Этот модуль применяется тогда, когда необходимо сделать акцент над/рядом с каким-то текстовым блоком, акцентировать внимание.
Одной из приятностей, которая ему присуща является то, что вы можете выбирать шрифты и менять их в соответствии со своими предпочтениями.
Пример:
Кнопка visual composer
Очень полезный модуль для тех, кто хочет поставить, например, ссылку на скачивание файла, но так, чтобы она не выбивалась из общей концепции сайта.
Пример:
Призыв к действию visual composer
Один из самых моих любимых модулей. Чрезвычайно будет полезен тем, кто занимается инфо бизнесом. Выглядит чрезвычайно приятно и очень прост в настройке.
Позволяет сделать призыв пользователя к какому быто ни было действию очень привлекательным внешне.
Пример:
Слайдер записей visual composer
Не представляет из себя ни чего сложного в настройке. Основная задача сделать меняющийся слайдер с записями вашего блога.
Пример:
Видео проигрыватель visual composer
Про этот модуль говорить не имеет большого смысла, он позволяет вам вставлять на сайте видео записи с популярных видео хостингов.
Пример:
Модуль visual composer Карта Google
Недавно один из участников группы в Фейсбук интересовался у меня, как разместить html код или iframe у себя на сайте (была необходимость вставки видео контента). Я решил показать это на примере, вставки карты Google.
На скриншоте выше видно, что код уже стоит – в качестве примера, но вдруг вам необходимо установить другой? Например, карту как на скриншоте ниже:
В итоге у нас получится вот так:
HTML
Не стал разделять HTML и javascript на отдельные модули. Скажу лишь, что вы можете их использовать как вам угодно.
В результате, в качестве примера я сделал небольшой забавный баннер и поставил его на сайт. Баннер может быть как в формате .jpg, так и в формате .gif (меняющиеся картинки или надписи).
Пример:
Модуль социальной сети Flickr
Ни разу, честно сказать не встречал на сайтах wordpress этот виджет. Но раз разработчики плагина работают в основном на зарубежных пользователей, думаю, что там данная сеть пользуется популярностью.
Пример:
Бар 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 – это кастомные сетки, которые вы можете добавлять на страницы (с возможностью миксовать и совмещать типы записей и медиа).
Использую закладки — фильтр в верхней части вы можете показывать элементы по определенным группам. Например, виджет-элементовы, с помощью которых можно создать собственный сайд-бар. Также они пригодятся вам при создании целевых страниц, где сайд-бар располагается нестандартно.
