WP Page Builder – безкоштовний компонувальник сторінок WordPress

Конструктор сторінок WP, безкоштовний компонувальник сторінок для сайтів WordPress вийшов на ринок 1 серпня 2018 року. Команда Themeum інвестувала багато років у дослідження та розробку, щоб створити ідеальний продукт.

1. Що таке WP Page Builder

WP Page Builder – це плагін WordPress для створення сторінок сайту, який використовує функцію перетягування. Незалежно від того, чи потрібно створювати веб-сторінки з нуля або редагувати існуючі, WP Page Builder справляється з цим однаково добре.

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

2. Встановлення компонувальника сторінок

Якщо ви бажаєте встановити безкоштовну версію, перейдіть до каталогу плагінів та завантажте його. Потім увійдіть до WordPress та активуйте плагін.

Або ви можете перейти до панелі інструментів WP і виконати такі дії:

1. Відкрийте вкладку Плагіни та натисніть «Додати».
2. Знайдіть WP Page Builder.
3. Встановіть та активуйте WP Page Builder.

3. Налаштування параметрів

WP Page Builder для WordPress дозволяє легко настроювати параметри. Налаштування параметрів компонувальника сторінок є обов'язковим.

В адмінпанелі WordPress вашого сайту натисніть "WP Page Builder".

Перед вами відкриється панель адміністратора:

Щоб налаштувати параметри, просто натисніть на потрібний варіант і змініть відповідно до ваших потреб. Нижче описані варіанти та їх функції:

• Тип запису (Post Type). Виберіть тип контенту, який потрібно змінити. Ви можете натиснути кілька опцій одночасно.
• Виключити роль користувача (Exclude User Role). Дозволяє редагування певним адміністраторам вашого сайту.
• Ширина вмісту (Content Width). Якщо потрібно змінити ширину вмісту за промовчанням (1140 px), виберіть потрібну ширину.
• Інтервал шпальт (Column Spacing). Ви можете зберегти інтервал у 30 пікселів або вибрати свій власний.
• Спосіб збереження CSS (CSS save method). Визначає, яким способом зберігати таблиці стилів.
• Кеш (Cache). Натисніть «Очистити кеш» та «Синхронізувати», щоб очистити кеш та синхронізувати вбудовані макети та блоки.

4. Як створити сторінку

Найпростішою частиною WP Page Builder є створення сторінки. Ви можете редагувати сторінки в реальному часі або публікувати сторінку за допомогою звичайного WordPress, а потім редагувати її за допомогою WP Page Builder.

Ви можете відредагувати сторінку за таким алгоритмом:

1. Додати назву сторінки у заголовку.
2. У нижній правій частині вікна у розділі «Атрибути сторінки» виберіть шаблон. Натисніть "Шаблон" та виберіть "WP Page Builder Template".
3. Перейдіть на початок вікна та виберіть «Редагувати за допомогою WP Page Builder».
4. Натисніть «Опублікувати», щоб розпочати роботу зі сторінкою.
5. Опція «Додати рядок» помітна після відкриття будівельника сторінок WP. Натисніть +, щоб вибрати будь-яку кількість рядків.
6. Якщо ви хочете імпортувати раніше експортовану сторінку, натисніть кнопку «Імпорт» поряд з кнопкою «Додати рядок» та виберіть файл для завантаження.

5. Як настроїти веб-сторінки

Значення рядок-стовпець за умовчанням для WP Page Builder становить 50%-50%. Але ви можете не тільки змінити кількість рядків та стовпців, але й налаштувати їх.

Натисніть "Додати рядок", щоб вибрати кількість рядків та стовпців, які ви хочете мати на сторінці свого сайту.Виберіть конкретний рядок і натисніть значок «Параметри», щоб відкрити вкладку «Параметри».

Параметри налаштування містять три вкладки:

• Загальні,
• Стиль,
• Просунуті.

У цьому посібнику основна увага приділяється тому, як використовувати загальні налаштування рядків-стовпців (спеціально для початківців).
Перейдіть на вкладку Загальні. Тут ви можете вибрати, що саме налаштовуватимете:

• Налаштування екрана (Screen settings). Ви можете зберегти опцію за замовчуванням або вибрати Розтягуваний рядок / Рядок (Row Stretch / Row) і Розтягуваний контейнер / Контейнер, що розтягується без канви (Container Stretch / Container Stretch Without Gutter).
• Висота користувача (Custom height). Зберігайте висоту користувача або налаштовуйте її.
• Позиція вмісту (Content position). Ви можете вибрати верхню/середню/нижню позицію для вмісту або зберегти значення за промовчанням.
• Користувацька ширина (Custom width). Налаштуйте ширину вмісту або збережіть ширину за замовчуванням за допомогою повзунка.
• Канва (Gutter). Перетягніть повзунок, щоб налаштувати відстань між стовпцями або зберегти його за замовчуванням.
• Анімація (Animation). Увімкнення/вимкнення анімації.

6. Стиль сторінки сайту

Тут починається цікава частина створення веб-сайту. WP Page Builder дає кілька варіантів, коли йдеться про стилізацію вашого унікального веб-сайту.

• Загальні. Виберіть колір, відступи та відступи для вашого контенту.
• Топографіка (Topography). Увімкніть топографіку за допомогою цієї опції.
  Налаштуйте сімейство шрифтів, розмір шрифту, висоту рядка, інтервал між літерами, стиль шрифту та перетворення тексту.
• Рамка (Border). Натисніть «Увімкнути» для стилю, ширини та кольору межі та наведення.
• Тінь боксу (Box Shadow). Увімкнути/вимкнути налаштування кольору та розмірності тіней.
• Радіус рамки (Border Radius). Натисніть, щоб увімкнути та встановити радіус кордону.
• Фон (Background). Увімкніть фон, щоб вказати колір, зображення та градієнт для фону вашого веб-сайту.
• Накладення (Overlay). Перетягніть курсор на параметр кольору непрозорості, щоб настроїти накладання.

7. Розширене налаштування

На вкладці "Додатково" веб-сайт WordPress налаштовується на нову висоту. Натисніть на налаштування у верхній частині рядка та перейдіть у вкладку «Додатково».

Параметр «Додатково» має три внутрішні вкладки:

• Загальні. Тут можна вибрати Ідентифікатор (ID) стовпця, Клас та Z-Індекс.
  - Ідентифікатор стовпця. Ви можете легко встановити ідентифікатор стовпця за допомогою вкладки "Додатково". Це особливо важливо, якщо ви працюєте на великому сайті та маєте кілька адміністраторів, що працюють в одному місці.
  - Клас. Увімкніть перевагу класу для свого сайту, використовуючи цей параметр.
  - Z-Індекс. Повзунок опції Z-Індекс дозволяє визначити порядок стека. Z-Індекс працює тільки з позиціонованими елементами (становище: абсолютне, положення: відносне або положення: фіксоване).
• Адаптивність (Responsiveness). Виберіть, на яких пристроях приховуватиметься або показуватиметься певний рядок. Ви можете налаштувати адаптивність для мобільних пристроїв, планшетів, настільних комп'ютерів та більших пристроїв.
• Користувальницький CSS (Custom CSS). Додати власний CSS-код у текстове поле редактора. Це дозволяє додавати власний CSS в будь-який рядок, стовпець і віджет.

8. Макети та блоки

WP Page Builder має безліч заздалегідь розроблених блоків та макетів.

макети

Коли ви вибираєте макет, WP Page Builder надасть конкретні бізнес-макети. Таким чином ви будете в курсі найпоширеніших макетів для підприємств вашої галузі.
Натисніть кнопку «Макети (Layouts)» ліворуч (під вкладкою Блоки).

На екрані з'являться макети. Виберіть той, що вам більше подобається.

Натисніть на компонування макету та виберіть "Імпорт", щоб додати макет на свій сайт.

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

Блоки

Блоки мають певні розділи, які можна легко налаштувати по-своєму. Передвстановлених блоків шість:

• Особливість,
• Відгуки,
• Команда,
• Заклик до дії,
• Таблиця цін
• Зміст.

9. Додатки WP Page Builder Addons

WP Page Builder має 30+ доповнень (аддонів) для підвищення ефективності вашого сайту. Натисніть кнопку «Додати» на лівій бічній панелі. Ви побачите всі доступні додатки.

Їх можна легко перетягувати з бічної панелі WP Page Builder на сторінку.

Щоб розмістити один із додатків (аддон) WP Page Builder:

• Додати новий рядок.
• Виберіть свій аддон і перетягніть його до створеного рядка.
• Перейдіть до аддону та натисніть на значок налаштувань у лівій верхній частині розміщеного аддону для налаштування.

Аддони надають нову унікальну гнучкість сторінці, і ви можете використовувати налаштування користувача для кожного доповнення.
Коли ви вибираєте аддон, вкладка налаштувань відображається безпосередньо:

• Вкладка "Загальні".
  Використовується для додаткових змін. Тут можна змінити кожен аспект аддону відповідно до потреб вашого сайту.
• Вкладка "Стиль".
  Цей параметр дозволяє налаштувати віртуальний зовнішній вигляд аддону.
• Вкладка "Додатково".
  Є спільною всім аддонів. Ці налаштування допомагають змінити загальний вигляд аддону.

приклад. Додавання групи кнопок

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

При виборі аддону та його розміщення відкривається вкладка «Загальні». Тут можна визначити ім'я кнопки або додати / видалити нову кнопку. Ви також можете вибрати вирівнювання (вліво, вправо, по центру) кнопок або вирівнювання на вибір.

Перейшовши на вкладку стилю, вибираємо візуальний стиль групи кнопок.

Ви можете увімкнути/вимкнути друкарню аддону. Увімкнення типографіки дозволяє змінити всі форми ліній, а також усі модифікації, пов'язані зі шрифтом.

Вкладка «Додатково»

Ця вкладка є спільною для всіх аддонів.
Вкладка містить параметри для налаштування:
- Загальні,
- Стиль,
- Друкарня,
- Фон,
- Накладення,
- Кордон,
- Радіус рамки,
- Тінь,
- Анімація,
- Непрозорість,
- Чуйний,
- Користувальницький CSS.

На вкладці "Додатково" є величезний вибір опцій. Наприклад, при виборі опції «Тінь вікна» візуалізація виглядатиме так:

Або вкажіть фон для вашого аддону, вибравши опцію фону.

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

10. Використання параметрів скасування/повтор

WP Page Builder має необмежені варіанти скасування/повтор одним клацанням миші.

Для створення сайту потрібно багато спроб і помилок. Таким чином, необмежені можливості для дій скасування/повтор є необхідною частиною плагіна для побудови сторінок.

У нижній частині кожної сторінки ви побачите дві стрілки. Ліва стрілка призначена для опції скасування. Права – це повторення.

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

11. Різне

WP Page Builder надає безліч опцій, які є важливими для створення професійного веб-сайту. У цьому випадку важливими є параметри бічної панелі.

У цьому пункті показано, як:

• Імпортувати,
• Експорт,
• Повністю очистити сторінку,
• Використання бібліотеки,
• Зберегти.

Натисніть на опцію «Інструменти» у бічній панелі і ви знайдете 3 варіанти:

• Імпортувати,
• Експорт,
• Очистити вміст.

Давайте подивимося на функцію кожного з таких варіантів:

Як імпортувати сторінку

Якщо ви зберегли сторінку як файл .json, можна легко імпортувати її з вашого пристрою.
Натисніть «Імпорт» на бічній панелі та завантажте сторінку, яку ви бажаєте розмістити на своєму сайті.

Експорт

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

Очистити вміст сторінки

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

Один клік очистить сторінку повністю, і ви отримаєте сторінку подібно до цієї:

Бібліотека

Плагін WP Page Builder дозволяє зберігати всі ваші проекти в одному просторі. Ви можете зберігати ваші улюблені сторінки тут для подальшого використання або зберігати та редагувати пізніше, не повторюючи весь процес знову.

Подивитися

Якщо ви бажаєте переглянути, як виглядає сайт, перш ніж публікувати його, виберіть варіант «Вид» на бічній панелі. Вигляд сайту виглядає так:

Зберегти

Опція «Зберегти», як випливає з назви, допоможе зберегти всю роботу. Ви можете зберегти всі зміни одним клацанням миші. Після того, як ви збережете всі свої зміни, з'явиться повідомлення: "WP Page Builder було оновлено". Це означає, що ви успішно зберегли свою роботу.

Переваги WP Page Builder:

• Це ідеальний продукт для тих, хто любить редагування у реальному часі.
• Прості функції перетягування цього виробника сторінок дозволять вам використовувати його надбудови, блоки, макети для переміщення та керування ними на будь-якій сторінці сайту.
• Побудовник дозволяє вимкнути або приховати будь-який існуючий елемент, щоб очистити його пізніше, і ці елементи можна зберегти для подальшого використання.
• У вас є доступ до встановлених блоків та макетів, що дозволяє працювати швидше.
• Усі надбудови безкоштовні. Якщо ви хочете використовувати pro-функції будівельника сторінок, не втрачаючи жодної копійки, тоді WP Page Builder – для вас.
• Використання WP Page Builder не потребує жодних навичок кодування. Але якщо ви хочете застосувати більш розвинений дизайн, ви можете скористатися опцією користувача CSS.

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/