Створення lending page на wordpress, page builder
Багато хто задається питанням, як можна створити landing сторінку при цьому не маючи ніяких навичок програмування і використовуючи відому систему cms WordPress. Сьогодні я розповім і покажу на прикладі просту і доступну всім технологію по створенню Лендінзі використовую плагін Page Builder by SiteOrigin.
Інструментарій для Лендінзі на wordpress
Для отримання повноцінного Лендінгем на wordpress нам знадобиться:
- Встановлена остання версія WordPress
- Встановлений плагін Page Builder від SiteOrigin
- Встановлені віджети SiteOrigin Widgets Bundle (установка в плагінах)
Цих простих дій достатньо, щоб перейти до практичних моментів. Але є ще цікавий пункт в настройках, про які я хочу тут згадати.
Налаштування SiteOrigin Widgets
Переходимо в лівому меню адмінки в розділ «Модулі» і натискаємо на що з'явилося після установки (SiteOrigin Widgets Bundle) підміню і отримуємо список доступних для використання віджетів. Вони розділені на три частини:
- All - все віджети
- Enabled - включені віджети
- Disabled - відключені віджети
Створення Лендінгем Пейдж використовуючи сторінку wordpress
Сторінки же створюються в основному для виведення в меню і служать пояснює контентом або контентом для розміщення контактних і інших даних. Їм неможливо привласнити рубрики і неможливо згрупувати, так як це можливо в записах.
Установка сторінки за замовчуванням
Створюємо нову сторінку, поки порожню для того, щоб зробити її головною сторінкою нашого сайту. Я для тесту створю з ім'ям Page Builder, тепер зробимо її головною. Йдемо в меню «Налаштування» -> «Читання» і ставимо за замовчуванням нашу сторінку:
Після цих маніпуляцій повертаємося до нашої сторінці і задаємо їй 100% ширину контенту, це робиться в правій частині адмінки і виглядає приблизно таким чином:
На різних шаблонах цей пункт може виглядати по різному, ваша мета прибрати всякі віджети зі сторінки і дати їй 100% ширину в вікні браузера. На цьому наші приготування прийшли до завершального етапу і саме час приступити до Lending page.
Template landing page в конструкторі Page Builder
Перед нашим поглядом постане вікно в якому і буде відбуватися весь процес створення нашої посадкової сторінки, а точніше Лендінгем Пейдж. Але перед практичним заняттям, хочу дати пару слів теорії.
Page Builder - це візуальний конструктор, який створює контент надаючи йому свої форми і місця розміщення на сторінках сайту, сам контент потім виводиться за допомогою шорткодов. У цього конструктора є один істотний недолік, при великій кількості таких сторінок система помітно починає пригальмовувати. Тобто використовувати Page Builder варто лише на сторінках (статиці) в записах я не рекомендую його застосовувати. Ну а тепер до справи.
Робота з готовим шаблоном Lending Page
Досить зберегти сторінку і потім подивитися на неї ви побачите готовий, повноцінний Лендінгем. Але давайте подивимося, як ми можемо його редагувати і правити під свою інформацію. Дивимося в адмінці, що і як:
У вас буде приблизно схоже на те, що я показав вище. Це рядки в яких розташований контент за допомогою віджетів, що і створює підсумкову картину вашого Лендінзі. Давайте відкриємо перший рядок і подивимося на неї уважніше.
На скрині вище я навів приклад редагування першого рядка мого макета, в кожній області редагується своя частина контенту і функціоналу.
З усім варто пробувати і експериментувати, не всі вийде з першого разу, щось зламається або стане не так, як вам хочеться, але практика, це кращий вчитель! Для розуміння наведу ще один скрін, де я показую елементи сторінки на сайті, а потім як це виглядає всередині адмінки:
Якщо ви хоч трошки знайомі з розумінням адаптивної верстки, тоді ви знаєте про рядках і блоках всередині рядків. Так ось, рядок, це елемент сторінки в якому всередині ставляться блоки (віджети, які ми встановлювали на початку статті). Кожен рядок може містити від одного до десяти або двадцяти блоків (віджетів).