Як зробити Лендінгем Пейдж на Вордпресс: плагіни і теми

1. Що потрібно знати про Landing Page?
2. Як зробити якісну посадкову сторінку?
3. Особливості шаблону для посадкової сторінки
4. Модулі Вордпресс для створення посадкової сторінки

Привіт, читачі блогу «Pro-Wordpress»! Landing Page зараз - явище широко поширене в сфері інтернет-маркетингу. І не без підстав. При правильному застосуванні це потужний інструмент для перетворення відвідувачів сайту в клієнтів. Якщо ви прийшли до висновку, що вашому проекту потрібна посадкова сторінка, то без зусиль зможете знайти агентство, яке розробить Лендінгем. Або ж ви можете спробувати зробити це самостійно.

І в сьогоднішній статті ми розглянемо, як створити Лендінгем Пейдж на WordPress, які теми і плагіни можуть нам в цьому допомогти. Для прикладу розберемо інструмент Page Builder by SiteOrigin. А для тих, хто ще не знайомий з Лендінзі, буде корисна інформація про те, що це, навіщо вони потрібні і які основні правила їх розробки.

зміст:

1. Посадкова сторінка: чому вона служить?
2. Як самому зробити Лендінгем Пейдж: структура та поради щодо оптимізації
3. Як вибрати шаблон цільової сторінки: основні критерії
4. Огляд плагінів Landing Page для WordPress

Що потрібно знати про Landing Page?

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

Landing Page (буквально - «сторінка посадки») - це одна веб-сторінка, зроблена з метою підвищення конверсії вашого проекту , На яку користувач потрапляє по посиланню з іншого джерела (мова йде про контекстну рекламу). Така сторінка максимально підштовхує відвідувача до скоєння цільового дії.

Це досягається за рахунок того, що Лендінгем Пейдж розробляється тільки під одну пропозицію і має на увазі вчинення єдиного можливого дії. Тут працює принцип «buy or die!» ( «Купи або помри»), тобто розміщений на посадкової сторінці контент не допускає ніяких альтернативних дій потенційного клієнта, крім здійснення того одного, під яке він написаний.

Крім цього, саме вміст цільової сторінки привабливе, інформативне. Оформлення має на меті викликати в вас бажання обов'язково отримати те, що тут пропонується.

Залежно від бажаних дій, цілями створення Лендінзі є:

1. отримання контактних даних користувача, в основному мова йде про email. Таким чином відбувається формування бази даних користувачів. Далі, за допомогою email-маркетингу, з учасників такого списку можна зробити повноцінних клієнтів. Щоб ви захотіли залишити свої контакти, в обмін на них цільова сторінка пропонує якийсь бонус, найчастіше це: завантажити якийсь курс без оплати, отримати безкоштовну консультацію і т.п. Ось класичний приклад такого варіанту:
   

2. продаж товару або послуги. Якщо пропонується придбати товар, то середньостатистична посадкова сторінка в такому випадку набуває формат автономної картки даного товару. Ми бачимо якісні фото, характеристики об'єкта, його переваги і кнопки для здійснення покупки. Ось так виглядає універсальний шаблон Лендінгем Пейдж для WordPress, що підходить для презентації будь-якого предмета торгівлі:
   

3. Коли ж пропонується придбати послугу, суть такої продає сторінки нічим не відрізняється від товарної. З тією лише різницею, що до скоєння цільового дії відвідувача схиляє НЕ фраза «Купити зараз». Тут цього служить кнопка зворотного дзвінка або виділяється на загальному тлі номер телефону для здійснення замовлення або отримання інформації.

   

Landing Page може являти собою як окрему сторінку повноцінного сайту, так і самостійний одностранічнік.

Як зробити якісну посадкову сторінку?

Перш ніж ми перейдемо до розбору інструментів, дамо відповідь на питання: як зробити Лендінгем Пейдж таким чином, щоб він дійсно мав високу конверсію і приносив прибуток?

Аналіз споживчої поведінки виявив, що потенційний клієнт проходить 5 основних етапів: увага - інтерес - бажання - дія - задоволення / незадоволення. На основі цієї інформації була розроблена певна структура посадкової сторінки, покликана забезпечити максимальну віддачу. Давайте розглянемо основні її блоки і елементи, що наповнюють їх.

Перший «цеглинка» ідеального Лендінгем Пейдж на WordPress і не тільки - перший екран. Це той самий блок, умовно можна назвати його шапкою, який видно відвідувачу відразу після завантаження сторінки до моменту скролінгу. Суть першого екрану - в залученні уваги користувача з метою утримати його на сторінці якомога довше. Він повинен бути спроектований таким чином, щоб «чіпляти» гостя і викликати у нього бажання вивчити інший контент. Які ж компоненти розташовуються в цій частині посадкової сторінки?

1. Логотип. Чи не обов'язковий, але бажаний елемент. Його присутність дозволяє ідентифікувати вас і тим самим збільшує ступінь довіри до вашої компанії.
2. Дескріпт. Короткий текст, що описує, чим ви займаєтеся, на чому спеціалізуєтесь.
3. Контакти. Ще один інструмент підвищення довіри. Переважно це номер телефону і кнопка замовлення зворотного дзвінка, але допускаються й інші зручні способи зв'язку.
   Схематично верхня смуга цільової сторінки може мати такий вигляд:
4. Заголовок. Унікальна торгова пропозиція (УТП) - це те, під що створений Лендінгем. І цілком закономірно, що саме в заголовку воно і повинно знаходитися. Саме заголовок з перших секунд перебування на сайті говорить відвідувачеві, що він перейшов за правильною адресою і про що тут йтиметься.
   Щоб максимально вичерпно передати УТП, вдаються до такого стандарту:
   - основний заголовок. Ця частина лаконічна, яскраво виражена (з точки зору дизайну). Продає заголовок значно впливає на конверсію. Для формування основної частини слід використовувати релевантні слова, тобто ті, які призводять відвідувачів з пошукових систем на цільову сторінку;
   - підзаголовок. Може використовуватися для уточнення основного заголовка або позначення ще одного вигоди.
5. Зображення / відео як демонстрація продукту або послуги. Повинні бути виключно високої якості. Картинка або ролик можуть служити декільком цілям: сприяти посиленню емоції, що асоціюється з УТП, ілюструвати користь або взаємодія з продуктом.
6. Кнопка СТА. СТА - Call To Action, заклик до дії, розміщується на кнопці. Саме цей елемент і стає першим з важелів, конвертують потенційного клієнта в реального.
   Дана кнопка закликає відвідувача зробити бажану дію. І оскільки вона має дуже важливу місію, її оформлення коштує приділити увагу. Якщо вам належить створити Landing Page самому, прослідкуйте, щоб кнопка містила гранично зрозумілий і чіткий заклик до дії ( «Записатися на тест-драйв», «Замовити безкоштовну консультацію»), мала контрастне по відношенню до фону кольорове оформлення, була великою і клікабельно.
7. Іноді на першому екрані розміщується форма зворотного зв'язку. Таким чином структура Лендінзі дозволяє легко знайти цей елемент серед іншого контенту. Число полів форми повинно бути мінімальним і вимагати від відвідувача тільки найнеобхіднішу для вас інформацію. Оптимально: email і ім'я.

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

Зацікавившись унікальною пропозицією, відвідувач тепер хоче отримати більш предметне опис продукту. Цьому і служить блок пояснення послуги. Проектуючи Лендінгем Пейдж на WordPress, розмістіть саме в цій частині все ті фактичні дані про вашому унікальному торговій пропозиції, які необхідні потенційному клієнту для прийняття рішення про укладення з вами угоди. Такого роду інформація може набувати різних форм:

• перелік послуг, пропонованих замовникові і процес їх надання;
• детальний опис вигод, які отримує клієнт;
• технічні характеристики товару;
• 3D-зображення;
• варіанти / версії / різновиди та їх основні відмінності;
• калькулятор, онлайн-конвертер і подібні послуги;
• результати досліджень, статистичні дані, графіки і т.д.

Як бачимо, в даному блоці буде доречна конкретика, яка описувала реальну цінність пропозиції.

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

Наступна структурна частина - докази авторитетності бренду. Цілі остаточно підштовхнути користувача до покупки служать розташовані в цьому блоці: відгуки клієнтів і ЗМІ, сертифікати, нагороди, імена заслуговують на довіру партнерів або клієнтів, приклади робіт, показники в цифрах.

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

• кількість рецензій не повинно бути менше трьох;
• фото заможних клієнтів краще використовувати справжні;
• вітаються посилання на профілі авторів відгуків в соцмережах (для підтвердження того, що це реальні люди);
• бажано, щоб текст був написаний простою, «людським» мовою.

Завершальну структурну частину цільової сторінки можна умовно позначити як футер. Тут в обов'язковому порядку повинен знаходитися Call To Action. В іншому допускається, на ваш розсуд, розташування наступних елементів: форма зворотного зв'язку, додаткові контакти, посилання на форуми та інші джерела додаткової інформації, кнопки соціальних мереж.

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

CTA, заклик до дії, повинен бути коротким, чітким і розташовуватися на першому екрані, в футере і в середньому через кожні 2 блоки.

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

Щоб зробити Landing Page на WordPress дійсно продають, особливу увагу варто приділити закриття заперечень. Заперечення клієнта - це доводи користувача, чому він не хоче придбати товар або послугу. Наприклад: «у вас дорого», «я зустрічав дешевше», «які гарантії якості?», «А якщо ви візьмете передоплату і зникнете?», «Не знаю, який варіант вибрати», «а точно встигнете за 3 дні?» , «і який результат я отримаю, якщо піду на ваш семінар?». Тобто допускається ситуація, що ваше УТП цікаво потенційному клієнту, але у нього виникають сумніви. Ці сумніви вам і необхідно передбачити.

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

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

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

Особливості шаблону для посадкової сторінки

Ми з вами вже знаємо, як влаштований сам механізм посадкової сторінки. Але як вибрати тему Landing Page для WordPress, щоб мати можливість розмістити в ній всі необхідні елементи і зробити їх роботу ефективною?

Принципи, за якими визначається якість теми Лендінзі, нічим не відрізняються від параметрів вибору шаблону для блогу на Вордпресс . За посиланням ви можете ознайомитися з такими критеріями оцінки, як: швидкість завантаження, валідність, адаптивність. У Рунеті можливий широкий вибір шаблонів цільових сторінок: безкоштовних і платних, на основі фреймворку бутстрапа, з паралакс-ефектом, повноекранними відео, з формами зворотного зв'язку, таймерами, призначених для продажу, підписок, просування івентів.

Але якщо для блогу вибір оформлення - це швидше питання смаку і трендів, то для Landing Page дизайн - це інструмент конвертації відвідувача в клієнта. За допомогою дизайну розставляються акценти на потрібних місцях посадкової сторінки. Це сприяє певному, вигідному для вас, сприйняттю інформації користувачем. Розглянемо основні вимоги до дизайну Вордпресс-теми Лендінгем Пейдж:

• бажано, щоб висота першого екрану не перевищувала 700 пікселів;
• основний заголовок (h1) рекомендується розміщувати зліва або по центру. Він повинен мати хорошу читаність, тому, якщо фон першого екрану не однотонний, складний, зверніть увагу на те, щоб під текстом розташовувалася напівпрозора підкладка;
• форма і кнопка СТА повинні бути контрастними по відношенню до фону (якщо фон темний - форма світла, і навпаки, а кнопка призову до дії - яскрава). Кількість полів - мінімальне;
  
• віддайте перевагу темі, в якій використовуються шрифти без зарубок і в кількості не більше двох;
• вибираючи шаблони Лендінгем Пейдж для Вордпресс, зупиніться на тих варіантах, де багато вільного простору. Що це означає? Слід уникати нагромаджень тексту і зображень. Стиль мінімалізму дає можливість сконцентрувати увагу потенційного клієнта на основному і виділити кнопки СТА.

При бажанні, опанувавши основами, ви можете самостійно відредагувати файли шаблону , файл стилів style.css , змінити або додати шрифт на свій смак і відповідно до вашим УТП. Це надасть вам велику свободу у виборі теми для створення Landing Page на WordPress.

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

Модулі Вордпресс для створення посадкової сторінки

Серед популярних платних інструментів для створення Лендінзі на WP добре зарекомендували себе: wPPage, Visual Composer, Optimize Press, Thrive Landing Pages, InstaBuilder, Divi Builder. Всі вони мають практично ідентичний функціонал, принцип роботи та основні особливості:

• вбудований комплект шаблонів;
• чуйний дизайн, адаптивність до різних девайсів;
• можливість кастомной настройки html / css;
• велика бібліотека елементів;
• візуальний редактор;
• інтеграція з допоміжними плагінами;
• настроюється аналітика і статистика.

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

Представниками найбільш затребуваних з безкоштовних плагінів для Лендінгем Пейдж на Вордпресс є: WordPress Landing Pages, (Ultimate) Landing Page, Free Landing Pages Builder by Wishpond, WPLead, Long Form Storybuilder.

Принцип створення Лендінгем Пейдж на WordPress за допомогою всіх цих інструментів приблизно однаковий. І детальніше ми його розберемо на прикладі роботи плагіна Page Builder by SiteOrigin, який встановимо зі сховищ CMS.

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

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

Після активації плагіна створюємо головну сторінку. У режимі редагування в налаштуваннях шаблону відображення сторінки, якщо тема дозволяє, слід встановити варіант без заголовка і сайдбарі. Справа над вікном редактора тиснемо кнопку «Page Builder».

Тепер ми перебуваємо в конструкторі плагіна. Тут розташовані основні кнопки, за допомогою яких ми будемо збирати Лендінгем, і кнопка «Назад в редактор» ( «Revert to Editor»).

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

Історія. На цій вкладці відображені всі наші дії і маніпуляції. Ми можемо в будь-який момент відкотити нашу сторінку до потрібного етапу.

Готовий макет ( «Layouts»). Тут, як зрозуміло з назви, можна підібрати готовий макет. Якщо є необхідність очистити вміст головної сторінки, тисніть на кнопку з іконкою гайкового ключа над полем редактора Page Builder і виберіть у спадному списку «Видалити рядок».

Тепер переходимо на вкладку готових макетів. Вибираємо пункт «Layouts Directory», натискаємо «Enable». Тим самим ми завантажуємо бібліотеку готових шаблонів посадочних сторінок.

Кожен із запропонованих варіантів можна відкрити в режимі попереднього перегляду. Цьому служить посилання «Preview», яка з'являється при наведення на мініатюру. Сподобався макет встановлюється за допомогою кнопки «Вставити» внизу вкладки.

В результаті в редакторі конструктора з'являється обрана сторінка в форматі модулів.

В обраному мною макеті перший екран представлений слайдером. У схематичному відображенні сторінки це - перший рядок «SiteOrigin Slider». Наводимо на неї курсор мишки і натискаємо «Редагувати». У вікні, ми можемо завантажити призначені для користувача картинки для слайдера, замість представлених (поля «Frame» - «Background Image»), додати нові ( «Add») і зробити ряд налаштувань для слайдшоу.

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

Переходимо до решти кнопок конструктора. Саме вони допоможуть нам зробити Лендінгем Пейдж на WordPress з нуля.

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

Перейдемо на вкладку. Спочатку рядок розбита на 2 рівних колонки. Мишкою ми можемо розширювати і звужувати кордону кожної з них, попередньо обравши, скільки колонок повинно бути в нашому макеті рядки. Якщо вибрати 1 колонку, вона буде займати 100% ширини.

Встановлюємо потрібні параметри і тиснемо «Вставити». Обрана конструкція відображається в редакторі Page Builder.

Вкладка «Додати віджет» допоможе нам наповнити кожну з колонок. Ось так виглядають пропоновані конструктором варіанти віджетів.

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

Як бачимо, логіка роботи Page Builder задоволена проста, а функціонал достатній для створення всіх основних елементів посадкової сторінки. Подивитися, як працює плагін, можна в даному відео:

Сьогодні ми з вами дізналися, як зробити Landing Page на WordPress таким чином, щоб отримувати максимальну віддачу від використання цього маркетингового інструменту. Тепер нам відомо, яка структура і дизайн шаблону оптимальні для досягнення мети посадкової сторінки - привести користувача до скоєння цільового дії. А плагіни для створення Лендінзі на Вордпресс, які були розглянуті в статті, допоможуть вам зробити ефективну цільову сторінку і підвищити конверсію.