Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

Початок роботи з Visual Composer

by
Difficulty:BeginnerLength:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Ukrainian (українська мова) translation by Elen (you can also view the original English article)

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

Все ж, навіть зараз буває так, що ви зустрічаєте чаруючий вас дизайн сайту і ви б хотіли змінити ваш власний веб-сайт, щоб він виглядав точно так само. На жаль, якщо ви абсолютний аматор, ви не зможете зробити щось подібне навіть за допомогою WordPress, оскільки модифікація теми потребує певних знань в області HTML, CSS, PHP та деякі інші навики, залежно від вашої теми. Але навіть якщо ви професійний програміст, вам знадобиться декілька годин, щоб внести потрібні зміни.

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

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

Головні особливості

Visual Composer розроблений хлопцями з WP Bakery. Він є платним плагіном, якого не має в відкритому доступі в каталозі плагінів WordPress. Ви можете завантажити його тільки з CodeCanyon.

Він був завантажений більш, ніж 70000 користувачами і, здається, тільки більше і більше набуває популярності! Visual Composer має декілька надзвичайно корисних переваг, які справляють неймовірно приємне враження від процесу побудови сторінок в WordPress. Ось їх короткий огляд.

Frontend і Backend побудова сторінок

Найбільш сильна перевага Visual Composer - це можливості простого drag and drop конструктора сторінок, який може бути використаний для стандартного редагування сторінки/посту WordPress, або ж напряму з frontend.

Універсальна сумісність з темами

Visual Composer не створений для конкретних тем. Це означає, що ви можете використовувати його з будь-якими темами WordPress без необхідності вносити зміни в наявний код.

Макет, який легко налаштувати

Drag and drop елементи Visual Composer мають стандартний макет і тему по замовчуванню. Тим не менше, ви можете змінити їх відповідно до кольорової гами та інтерфейсу вашого сайту.

Більше 40 готових для використання елементів дизайну

Drag and drop інтерфейс Visual Composer має більше 40 готових для використання drag and drop елементів, які можуть бути використані для створення унікальних макетів ваших сайтів за лічені хвилини.

100% адаптивні елементи

Елементи дизайну і сторінок, створених за допомогою Visual Composer, повністю адаптивні і готові для використання на мобільних пристроях.

Легкий в програмуванні

Visual Composer містить безліч drag & drop елементів. І якщо ви бажаєте додати їх ще більше, ви можете це легко реалізувати завдяки легкості в програмуванні.

Установка і налаштування плагіна

Як я вже згадував раніше, Visual Composer є платним плагіном. Тому спочатку ви повинні придбати його, а потім завантажити на ваш сайт WordPress.

Крок 1

Процес установки такий самий, як і для інших плагінів WordPress. Після активації плагін з'явиться в розділі Settings лівого меню основної панелі WordPress.

Крок 2

Тут ви можете налаштувати деякі основні налаштування плагіна.


Крок 3

Ви можете ввімкнути Visual Composer для сторінок і постів разом, або окремо. Ви також можете встановити певні права доступу для окремих типів користувачів. Для кожного типу користувачів ви можете обрати: або відображати і Visual Composer в області редагування записів, і стандартний редактор WordPress, або відображати тільки Visual Composer. Ви також можете включити, або вимкнути окремі елементи Visual Composer для різних користувачів.

Крок 4

На вкладці Design Options ви можете змінити зовнішній вигляд елементів Visual Composer відповідно до теми вашого сайту. Вкладка Custom CSS дозволяє вам змінювати CSS без зміни будь-якого іншого файла, а вкладка Product License дозволяє вам інтегрувати ваш аккаунт Envato для підключення підтримки і автоматичних оновлень. На вкладці My Shortcodes ви можете додавати будь-який додатково розроблений шорткод до вже наявного списку шорткодів в Visual Composer.

Тепер перейдемо до реального використання плагіна!

Використання VC на сторінках і постах/записах

Як я вже згадував вище ви можете включити Visual Composer для записів і сторінок: разом або окремо. Після активації плагіна ви побачите панель Visual Editor вверху вашого стандартного редактора WordPress.

Дві панельки над текстовим редактором - це Backend Editor і Frontend Editor. Завдяки цим налаштуванням, використання плагіна - одне задоволення. Тут ви можете створити абсолютно будь-яку структуру сайту, яку тільки забажаєте. Почнемо з Backend редактора.

Backend Editor

Крок 1

Коли ви натискаєте на кнопку Backend editor, область вашого текстового редактора перетвориться на drag and drop вікно, куди ви можете додавати елементи, просто обравши їх зі списку.  Але спочатку вам потрібно додати рядок. З цієї миті, єдине обмеження вашого дизайну - ваша уява.

Крок 2

Ви можете додавати різні елементи в рядок, а також вибирати різний макет колонок для кожного рядка, навівши мишку на кнопку вище редактора контенту. Ви можете додавати різні елементи, щоб оформити вашу сторінку, з віконця Add element. Вікно Add element містить все, що необхідно для дизайну сайта.

Елементи розділені по категоріям: Content, Social, Site Structure, New Elements і WordPress Widgets, але ви також можете переглянути їх всіх разом. Клікніть на обраний вами варіант і перетягніть його в віконце контенту. Ваша сторінка в основному ділиться на декілька різних рядків. Ви можете продовжувати додавати нові рядки з новими елементами.

Крок 3

Для редагування, видалення, або дублювання будь-якого рядка, користуйтесь іконками над кожним рядком.

Крок 4

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

Крок 5

Visual Composer також дозволяє вам додавати користувацький CSS для окремих сторінок і записів/постів. Він буде впливати тільки на ці окремі сторінки і записи.

Visual Composer також підтримує декілька відомих плагінів WordPress, таких як Contact Form 7Layer Slider, Revolution Slider та Gravity Forms. Якщо у вас вже встановлений один із цих плагінів, він буде автоматично доданий в віконце Add element. Коли із списку елементів ви виберете один із них, він буде безпосередньо вставлений в вашу сторінку без необхідності додавати будь-який шорткод. Backend editor дає вам стільки гнучкості і налаштувань, що ви можете створювати будь-який дизайн, навіть якщо ви всього лиш аматор.

Frontend Editor

Frontend Editor дозволяє вам перетягувати елементи сторінки в режимі реального перегляду. Так набагато легше побачити, як безпосередньо впливають внесені вами зміни, при цьому ви також користуєтесь налаштуваннями backend editor.

Крок 1

Почавши зліва, ви можете додавати нові елементи, натиснувши на знак +, і за допомогою кнопки, розміщеної поруч з ним, редагувати макет колонок.

Крок 2

Ви також можете додавати рядки і стовпці за допомогою знака + в контенті сторінки.

Крок 3

Всі елементи Visual Composer повністю адаптивні і працюють на мобільних пристроях. Ви можете переглядати в реальному режимі на різних пристроях в frontend editor за допомогою іконок, розташованих нижче.

Крок 4

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

Закінчення

WordPress завжди була гнучкою платформою, здатною за допомогою плагінів підтримувати різні функції. Проте за допомогою плагіна побудови сторінок Visual Composer дизайн WordPress, який колись був доступний тільки досвідченим користувачам, тепер можна відредагувати за дуже короткий термін.  

Особисто для мене, Visual Composer суттєво зменшив час, який я витрачав на дизайн сайта замовника і редагування тасків: від декількох годин до декількох хвилин. Зі зростанням популярності цього плагіна я бачу все більше і більше користувачів WordPress, які покладаються на нього в ці дні.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.