1. Знайомство з Visual Composer
2. Купівля і установка Visual Composer
3. Якщо ви вибрали другу опцію (установка з темою).
4. Починаємо роботу з конструктором сторінок Visual Composer
5. Елементи конструктора сторінок
6. Основні елементи, які ви можете використовувати:
7. Розширення Visual Composer в залежності від теми
8. Редагування бекенда і фронтенда
9. Додавання елементів і блоків
10. Є кілька ключових функцій, про які необхідно знати при впровадженні елементів.
11. Популярні, сумісні плагіни
12. Додатково по темі:

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

Знайомство з Visual Composer

Якщо ви ще зовсім не знайомі з цим плагіном, то Visual Composer - це drag & drop (перетягування курсором миші) конструктор сторінок для WordPress. Цей плагін бере на себе левову частку роботи по створенню практично будь-яких кастомних сторінок і записів. Не потрібно ніякого спеціальних знань і умінь, досить просто встановити цей плагін і почати створювати власні сторінки і запису. Важливо - плагін сумісний з більшістю платних і безкоштовних тим, в тому числі і такими популярними плагінами, як Contact Form 7, Slider Revolution і багатьма іншими. Оглядову статтю ви знайдете тут .

Купівля і установка Visual Composer

Є два офіційних способу отримати цей плагін:

1. Купити сам плагін;
2. Купити преміум тему, в якій він вже вбудований;

Якщо ви вибрали варіант з плагіном, просто підіть на CodeCanyon і купіть там розширення. Про те як краще купувати на CodeCanyon і ThemeForest читайте тут .

За замовчуванням, з покупкою, ви отримуєте 6 місяців авторської підтримки, але при бажанні, можете відразу додати ще півроку за 10 $.

Після покупки можете відразу завантажити плагін. Для того, щоб це зробити, потрібно піти на вашу сторінку завантажень на акаунті, натиснути зелену кнопочку і завантажити повний архів з документацією, ліцензією і плагіном або тільки інсталяційний файл для WordPress. Вибираємо другий варіант.

Тепер йдемо в WordPress адмінку, з який переходимо в Модулі> Додати новий.

Вибираємо скачаний zip-архів з Visual Composer (якщо ви завантажили повний архів, то слід спочатку вийняти звідти сам композер - js_composer.zip). Вибираємо його, завантажуємо і потім, як зазвичай, натискаємо на «встановити» і «активувати» плагін.

Так як плагін куплений, то варто ввести код вашої ліцензії: просто клікніть на посилання в верхній частині екрану, а потім на велику синю кнопку. Тепер у вікні натискаємо на зелену кнопку і не лякаємося, якщо сервіс просить вас ввести ім'я користувача / email, щоб завершити процес покупки плагіна.

Прямуємо інструкція і завершуємо процес придбання розширення. Тепер ви можете автоматично оновлювати свій композер і маєте доступ до офіційної підтримки.

Якщо ви вибрали другу опцію (установка з темою).

Тут процес установки залежить від конкретної теми, ми вирішили показати інсталяцію на прикладі Total від WPExplorer, яка дуже схожа з багатьма преміальними темами.

Просто натискаємо посилання Begin Installing Plugins. Потім з меню, що випадає все потрібні інсталяції, а потім натискаємо на Apply (Застосувати).

Це все, що потрібно зробити. І не потрібно активувати Visual Composer за допомогою Envato, так як ви не купуєте плагін, а купуєте тему з плагіном в комплекті. Але мінус в тому, що у вас не буде можливості оновити плагін, поки сама тема не запропонує вам це.

Починаємо роботу з конструктором сторінок Visual Composer

Тепер після установки Visual Composer, ви знайдете підміню Visual Composer у вашій консолі WordPress. Кількома на Основні настройки, щоб відкрити сторінку налаштувань.

Сторінка Основних налаштувань містить базові опції для включення / вимикання чуйних елементів (адаптивний дизайн), коректний висновок Google шрифтів (включіть кирилицю), настройку базових макетів і в деяких випадках (з окремими темами) кнопку для включення Visual Composer навчальних турів.

Якщо ваш сайт використовує безліч призначених для користувача ролей , То Visual Composer Role Manager буде вам дуже корисний. Сторінка налаштувань дозволяє вам обмежити доступ користувача до різних Visual Composer-функцій, грунтуючись на його ролі. Таким чином, ви можете відкрити адмінам доступ до всіх функцій, а редакторам дати доступ тільки до блогових сторінок.

Дизайн елементів - настройка візуального відображення окремих елементів і блоків вашого композер. Може бути відсутнім в преміум темах.

Індивідуальний CSS - тут можна вставити власний CSS код при необхідності.

Visual Composer license - дивись вище.

Shortcode Mapper - додавання власних і шорткодов від сторонніх розробників.

Елементи конструктора сторінок

Visual Composer налічує понад 40 стандартних елементів, які дозволяють впровадити безліч функцій в ваші сторінки. Багато з цих елементів включають додаткові опції для квітів, кордонів, відступів, полів, кастомних CSS, анімації і т. Д.

Основні елементи, які ви можете використовувати:

• 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 в залежності від теми

Базові Visual Compose-елементи прекрасні для початку роботи, але при створенні кастомних сторінок, вам знадобитися більш великий інструментарій, який нам нададуть розширення пропоновані авторами тем. Інші, різні розширення можна взяти з самих різних джерел.

Перший спосіб розширити можливості Visual Composer - це використовувати тему. Наприклад, тема Total містить 39 доданих елементів для конструювання сторінок. Total включає розширення для кастомних типів записів (відгуки, команда, портфоліо), кастомниє галереї, прості слайдери, соціальні опції і багато іншого.

Якщо ж ваша тема не містить будь-яких розширень, то ви можете встановити сторонні Visual Composer-розширення, які доступні на як на CodeCanyon, так і по всьому інтернету. Як би там не було, ми не радимо розширювати функціонал плагіна і темою, і аддонами одночасно.

Редагування бекенда і фронтенда

Visual Composer дає вам можливість вносити зміни, як з модульного бекенда (з адмінки), так і за допомогою візуального фронтенда (зовнішня сторона сайту).

Якщо ви використовуєте бекенд-редактор, кожен елемент буде відображатися, як модульний елемент, який ви можете впровадити, перетягуючи з одного місця на інше. Цей спосіб ідеальний, коли ви хочете швидко створити сраніцу, особливо при наявності повільного сервера або поганого інтернет-з'єднання.

Бекенд-редактор дуже простий у використанні. Просто клікніть на синю кнопку, щоб увімкнути.

Фронтенда-редактор дозволяє краще оглянути фінальний результат, так як всі зміни застосовуються в режимі реального часу. Наприклад, ви можете побачити, наскільки великий насправді виглядає картинка в 300px або або як виглядає якийсь певний колір. Щоб включити фронтенд-редагування, натисніть на одну з двох кнопок, на яких написано «Frontend Editor» або «Frontend». Ця дія оновить сторінку та дозволить побачити внесені зміни.

Додавання елементів і блоків

Просто клікніть на Додати блок або Додати текст щоб почати додавати елементи. Головна відмінність полягає в тому, що ви бачите елементи в процесі їх додавання, і можете використовувати опцію «прев'ю», яка знаходиться у верхньому барі, щоб бачити, як виглядають внесені зміни на екранах настільних комп'ютерів, планшетах, ноутбуках і телефонах.

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

Не важливо, які елементи ви хочете додати на сторінку, але в першу чергу ви повинні додати «ряд» (row).

Після впровадження ряду, ви можете скористатися меню ряду, в якому (зліва направо в двох групах):

• Перша іконка ряду - показує, де ви можете клікнути, щоб перетягнути ряд в інше місце.
• Друга дасть можливість відразу розділити ваш ряд на потрібну кількість стовпців.
• Третя дозволить швидко додати нові ряди.
• Четверта дозволити згорнути ряд.
• Іконка з олівцем відкриває два таба. Перший - Опції детальної настройки ряду, які можуть варіюватися в залежності від того, стандартний у вас композер або доопрацьований авторами теми. Другий таб Дизайн - це другий стандартний таб, який існує для кожного елемента. Тут ви можете задати кастомний фон (колір або картинку), кордон, відступи і поля для елемента. Зауважимо, що коли ви вибираєте фон, то він включає і кордон, так що, при збільшенні полів, збільшується і видимість фону, який ви додали до елементу, але якщо ви збільшите відступ, то збільшиться і порожній простір навколо елемента сторінки.
• Іконка дуплікації клонує існуючий ряд і весь його контент.
• Кошик потрібна для видалення цілого ряду з усім вмістом.

У фронтенд-редакторі ви побачите дуже схожі настройки:

Популярні, сумісні плагіни

WooCommerce: якщо ви хочете створити власний магазин, то цей плагін теж прекрасно підійде для вас. Особливо, якщо ви купили тему в якій автори вже заздалегідь підготували композер до роботи з магазином. Ось знову ж приклад з теми Total. Всі ці елементи органічно впишуться в вітрину вашого маркету.

Slider Revolution. Слайдери - це прекрасний спосіб систематизувати інформацію і звернути на неї призначене для користувача увагу. За допомогою цього плагіна ви зможете перетягувати такі елементи, як текст, кнопки, картинки і навіть відео, ще й додаючи до них різні ефекти.

Templatera. Даний плагін створений командою WPBakery і покликаний розширити функціональність Visual Composer. Він дозволяє вам зберігати і використовувати шаблони сторінок, які ви можете експортувати і імпортувати.

Додатково по темі:

Visual Composer - будуємо сторінки самі
Visual Composer - кращі доповнення та розширення
Visual Composer - «Як мені зробити ..?»