Автор: Михайло Русаков
що таке лендінг?
Тепер коли ви переконалися в моїй компетенції, я хочу пояснити, що таке лендінг тим, хто ще цього не знає. Лендінг – це цільова сторінка або просто Web-сторінка, головною метою якої є виконання певної дії. Наприклад, підписка на розсилку, оформлення замовлення, залишення заявки тощо. Приклад лендінгу-це сторінка, на якій ви зараз перебуваєте і читаєте цей текст.
завдання лендінгу – отримати максимальну конверсію необхідних дій. Наприклад, прийшло на Лендінгем 100 осіб, з них 5 оформили замовлення на Ваш товар. Тут конверсія 5%. Безумовно, чим вона вища – тим вона краща. Як досягти максимальної конверсії? Читайте далі.
навіщо потрібен лендінг?
Ще кілька років тому лендінгів було досить мало. І майже всі товари та послуги продавалися на звичайних сайтах. Однак, потім стало ставати все більше і більше сайтів, що складаються, по суті, з усього однієї сторінки. І на одній сторінці розміщувалася абсолютно вся інформація про товар або послугу, а так само була форма оформлення замовлення або залишення заявки. І в підсумку власники стали помічати, що ціна клієнта різко впала. Ціна клієнта-це та сума, яку потрібно витратити на рекламу, щоб отримати 1-го клієнта.
Після цього від звичайних сайтів-візиток багато фірм стали відмовлятися. І тепер на лендінгах продається практично все: від китайських товарів до заміських будинків, від юридичних і бухгалтерських послуг до ріелтерських.
що таке лендінг?
Тепер коли ви переконалися в моїй компетенції, я хочу пояснити, що таке лендінг тим, хто ще цього не знає. Лендінг – це цільова сторінка або просто Web-сторінка, головною метою якої є виконання певної дії. Наприклад, підписка на розсилку, оформлення замовлення, залишення заявки тощо. Приклад лендінгу-це сторінка, на якій ви зараз перебуваєте і читаєте цей текст.
завдання лендінгу – отримати максимальну конверсію необхідних дій. Наприклад, прийшло на Лендінгем 100 осіб, з них 5 оформили замовлення на Ваш товар. Тут конверсія 5%. Безумовно, чим вона вища – тим вона краща. Як досягти максимальної конверсії? Читайте далі.
навіщо потрібен лендінг?
Ще кілька років тому лендінгів було досить мало. І майже всі товари та послуги продавалися на звичайних сайтах. Однак, потім стало ставати все більше і більше сайтів, що складаються, по суті, з усього однієї сторінки. І на одній сторінці розміщувалася абсолютно вся інформація про товар або послугу, а так само була форма оформлення замовлення або залишення заявки. І в підсумку власники стали помічати, що ціна клієнта різко впала. Ціна клієнта-це та сума, яку потрібно витратити на рекламу, щоб отримати 1-го клієнта.
Після цього від звичайних сайтів-візиток багато фірм стали відмовлятися. І тепер на лендінгах продається практично все: від китайських товарів до заміських будинків, від юридичних і бухгалтерських послуг до ріелтерських.
зміст
Розділ "дизайн лендінгу"
Починається Створення лендінгу з дизайну, і в цьому розділі ми з вами цим займемося:
1.Вступ. У цьому відео розповідається, як проходити курс, щоб ви отримали максимальний результат.
2.Написання продає тексту. Продаючий текст-це основа всього. Хороший продаючий текст + поганий дизайн-нормальний результат. Поганий тест на продаж + чудовий дизайн-поганий результат. Тому вкрай важливо написати все правильно, і про те, як це робиться на прикладі створюваного лендінга, ви і дізнаєтеся. Досвід в написанні продають текстів у мене вже років 6.
3 .Викладаємо проект. Оскільки я не є дизайнером, ми з вами будемо замовляти дизайн для лендінгу на фрілансі. Дуже важливо вміти правильно скласти текст завдання, щоб отримати максимум відгуків і відразу відфільтрувати поганих виконавців. Як це зробити ще на етапі викладання проекту, ви дізнаєтеся з цього відео.
4.Вибір виконавця. Незважаючи на велику кількість заявок, вибирати, як правило, не з кого, в силу повної відсутності конкуренції на фрілансі в Рунеті. Багатьох це шокує, але, повірте, це дійсно так. Тому навіть найкращий з тих, хто відгукнеться, швидше за все, надасть середнього рівня варіант. Однак, і такого рівня буде більш ніж достатньо для відмінного результату. Але на фрілансі, на жаль, абсолютна більшість-нездари, і новачкові не нарватися на них вкрай важко. Більш того, вони ще й вимагають передоплату, тому зіскочити з них не вийде. Так ось в цьому відео ви дізнаєтеся, як вибрати найкращого відгукнувся виконавця і не давати при цьому передоплату. Більш того, ви побачите, як це все відбувається.
5 .Приймаємо роботу. В даному відео я покажу всю переписку з Виконавцем, поясню, як треба листуватися з ними і які моменти треба завжди виправляти в лендінгах.
6.Що робити, якщо дизайн не сподобався? Буває так, що робота занадто погана. Але як бути? Якщо просто кинути виконавця, то можна отримати поганий відгук від нього. У цьому відео я розповім, як правильно посилати нахабних нездар і при цьому не заробити негативний відгук від них. Так само поясню, що робити з тими, хто видно, що намагався, але результат їх вас так само не влаштовує.
розділ "верстка"
Після створення дизайну лендінгу необхідно його зверстати, тобто перетворити зображення на Web-сторінку:
1.Підготовка до верстки. Тут ви побачите всі підготовчі дії перед безпосередньою версткою лендінгу.
2.Меню. Верхнє меню у нас завжди закріплено зверху, як це робиться і взагалі всю верстку меню, ви побачите в цьому уроці.
3 .Блок "Шапка сайту". В даному уроці ми зверстаємо шапку сайту. Зверніть увагу, що нечисті на руку верстальники подібні речі завжди роблять у вигляді картинки, а потім заголовок неможливо буде змінити без танців з бубном. Однак, в курсі ви побачите, як правильно верстаються такі блоки.
4.Блок "наші переваги". У цьому уроці ви побачите, як зробити таблицю на одних лише div.
5.Блок "Порядок роботи". Дуже складний блок, який навіть непогані верстальники воліють робити картинкою. Однак, ми з вами зробимо все по максимуму у вигляді тексту. Я розповім, як взагалі верстаються подібні блоки. Загалом, всю теорію і практику по даній мікро-задачі, ви отримаєте в цьому уроці.
6.Блок " чому наші лендінги ефективні?". Тут ви побачите, як створюється таблиця на div, при цьому кількість стовпців в різних рядках – різний.
7.Блок "Портфоліо". У цьому відео ви побачите, як при верстці вставляються одні зображення в інші. Дуже корисний урок, так як це застосуються при верстці лендінгов дуже часто. Аналогічно робиться, наприклад, плеєр у вигляді якого-небудь iPad, а на екран вставляється відео.
8.Блок "Гарантія". Тут ви побачите процес верстки блогу з гарантією.
9.Підвал. При верстці цього блоку є так само парочка важливих нюансів, про які треба обов'язково знати.
10.Форма замовлення. Форма замовлення буде спливаючою, плюс верстка у неї відносно непроста. Але я все розберу і покажу процес її створення безпосередньо в уроці.
11.Підключаємо fancybox. Fancybox-це плагін для демонстрації вмісту в окремому спливаючому вікні. Найчастіше використовується це при збільшенні зображення. В уроці ми підключимо fancybox до блоку з портфоліо, щоб при кліці по роботі, у відвідувача відкривалося спливаюче вікно з повним зображенням лендінга. До речі, у fancybox є один знаменитий і дуже неприємний баг, який до сих пір не виправлений розробниками. Ми ж його виправимо прямо в відеоуроці.
12.Робимо швидкі посилання. Якщо клікати на сторінці по посиланнях в меню, нас буде плавно переміщати до відповідного блоку. Як це робиться, ви дізнаєтеся з цього уроку.
13.Робимо анімацію блоків. Якщо ви переходили на створений лендінг http://landing-order.ru, то звернули увагу, що всі блоки рухаються. Зробити це можна різними шляхами. Ми з вами в уроці реалізуємо найстабільніший і найпростіший спосіб створення такої анімації.
14.Верстаємо сторінку " спасибі за замовлення!". Тут ви побачите верстку нової сторінки, яку побачать всі відвідувачі, які заповнили і відправили форму замовлення.
15.Адаптація під різні дозволи. Дуже важливо зробити, щоб при популярних дозволах екрану все виглядало добре. Цим ми в даному уроці і займемося.
16.Кросбраузерність. Обов'язково лендінг повинен бути оптимізований під всі популярні браузери, інакше конверсія буде значно нижче. І як раз як оптимізувати лендінг під різні браузери, ви дізнаєтеся з даного уроку.
розділ "програмування клієнтської частини"
Тепер настав час розробляти внутрішні механізми лендінгу:
1.Створення БД. У цьому відео ми створимо структуру бази даних і реалізуємо її.
2.Створення простого движка. Оскільки лендінги, на відміну від звичайних сайтів, не вимагають великої програмної основи, ми з вами створимо простенький движок саме для лендінгів. Його ви зможете використовувати і для своїх лендінгів.
3.Підключення верстки до движка. В даному відео ви дізнаєтеся, як підключити зроблену верстку до движка з попереднього уроку.
4.Обробка форми замовлення. У цьому уроці ви побачите, як обробляється форма замовлення. Наша з вами мета – отримати дані з форми і відправити їх в нашу базу даних. Все це буде зроблено на ваших очах.
5.Відстеження рекламних кампаній. Обов'язково в програмній частині повинна бути реалізована можливість відстеження рекламних кампаній. Що конкретно потрібно робити, а також як це робиться, ви дізнаєтеся з цього найважливішого уроку.
6.Реалізація SPLIT-тестування. Лендінг без єдиного SPLIT-тестування, можливо, буде і так давати хороший результат, але якщо ви хочете отримати найкращий результат, то SPLIT-тести неминучі. І в даному відео ми підготуємо для цього всю програмну частину.
розділ "створення admin-панелі"
Для зручного перегляду і редагування замовлень, статистики та аналізу рекламних кампаній і SPLIT-тестів, в цьому розділі створюється Admin-панель:
1.Верстка сторінок Admin-панелі. У цьому відео ми зробимо просту верстку наших майбутніх сторінок Admin-панелі.
2.Авторизація. Безумовно, Admin-панель повинна бути доступна тільки за логіном і паролем. Весь механізм авторизації в Admin-панелі ми зробимо в цьому уроці.
3.Висновок статистики. В даному уроці ви побачите, як виводиться загальна статистика по Вашому лендінгу.
4.Виведення замовлень. В даному відео ви дізнаєтеся, як правильно виводити отримані замовлення.
5.Додавання замовлень. У цьому уроці ми реалізуємо додавання замовлень. Це може бути корисно, якщо клієнт не захоче заповнювати форму, а захоче зателефонувати вам по телефону, а ви вже оформите замовлення за нього самі.
6.Редагування замовлень. Редагувати замовлення потрібно постійно. Найпопулярніший варіант-редагування статусу, наприклад, такі статуси: "новий", "підтверджений", "оплачений", "анульований".
7.Видалення замовлень. У цьому відео Ми реалізуємо видалення замовлень.
Розділ "дизайн лендінгу"
Починається Створення лендінгу з дизайну, і в цьому розділі ми з вами цим займемося:
1.Вступ. У цьому відео розповідається, як проходити курс, щоб ви отримали максимальний результат.
2.Написання продає тексту. Продаючий текст-це основа всього. Хороший продаючий текст + поганий дизайн-нормальний результат. Поганий тест на продаж + чудовий дизайн-поганий результат. Тому вкрай важливо написати все правильно, і про те, як це робиться на прикладі створюваного лендінга, ви і дізнаєтеся. Досвід в написанні продають текстів у мене вже років 6.
3 .Викладаємо проект. Оскільки я не є дизайнером, ми з вами будемо замовляти дизайн для лендінгу на фрілансі. Дуже важливо вміти правильно скласти текст завдання, щоб отримати максимум відгуків і відразу відфільтрувати поганих виконавців. Як це зробити ще на етапі викладання проекту, ви дізнаєтеся з цього відео.
4.Вибір виконавця. Незважаючи на велику кількість заявок, вибирати, як правило, не з кого, в силу повної відсутності конкуренції на фрілансі в Рунеті. Багатьох це шокує, але, повірте, це дійсно так. Тому навіть найкращий з тих, хто відгукнеться, швидше за все, надасть середнього рівня варіант. Однак, і такого рівня буде більш ніж достатньо для відмінного результату. Але на фрілансі, на жаль, абсолютна більшість-нездари, і новачкові не нарватися на них вкрай важко. Більш того, вони ще й вимагають передоплату, тому зіскочити з них не вийде. Так ось в цьому відео ви дізнаєтеся, як вибрати найкращого відгукнувся виконавця і не давати при цьому передоплату. Більш того, ви побачите, як це все відбувається.
5 .Приймаємо роботу. В даному відео я покажу всю переписку з Виконавцем, поясню, як треба листуватися з ними і які моменти треба завжди виправляти в лендінгах.
6.Що робити, якщо дизайн не сподобався? Буває так, що робота занадто погана. Але як бути? Якщо просто кинути виконавця, то можна отримати поганий відгук від нього. У цьому відео я розповім, як правильно посилати нахабних нездар і при цьому не заробити негативний відгук від них. Так само поясню, що робити з тими, хто видно, що намагався, але результат їх вас так само не влаштовує.
розділ "верстка"
Після створення дизайну лендінгу необхідно його зверстати, тобто перетворити зображення на Web-сторінку:
1.Підготовка до верстки. Тут ви побачите всі підготовчі дії перед безпосередньою версткою лендінгу.
2.Меню. Верхнє меню у нас завжди закріплено зверху, як це робиться і взагалі всю верстку меню, ви побачите в цьому уроці.
3 .Блок "Шапка сайту". В даному уроці ми зверстаємо шапку сайту. Зверніть увагу, що нечисті на руку верстальники подібні речі завжди роблять у вигляді картинки, а потім заголовок неможливо буде змінити без танців з бубном. Однак, в курсі ви побачите, як правильно верстаються такі блоки.
4.Блок "наші переваги". У цьому уроці ви побачите, як зробити таблицю на одних лише div.
5.Блок "Порядок роботи". Дуже складний блок, який навіть непогані верстальники воліють робити картинкою. Однак, ми з вами зробимо все по максимуму у вигляді тексту. Я розповім, як взагалі верстаються подібні блоки. Загалом, всю теорію і практику по даній мікро-задачі, ви отримаєте в цьому уроці.
6.Блок " чому наші лендінги ефективні?". Тут ви побачите, як створюється таблиця на div, при цьому кількість стовпців в різних рядках – різний.
7.Блок "Портфоліо". У цьому відео ви побачите, як при верстці вставляються одні зображення в інші. Дуже корисний урок, так як це застосуються при верстці лендінгов дуже часто. Аналогічно робиться, наприклад, плеєр у вигляді якого-небудь iPad, а на екран вставляється відео.
8.Блок "Гарантія". Тут ви побачите процес верстки блогу з гарантією.
9.Підвал. При верстці цього блоку є так само парочка важливих нюансів, про які треба обов'язково знати.
10.Форма замовлення. Форма замовлення буде спливаючою, плюс верстка у неї відносно непроста. Але я все розберу і покажу процес її створення безпосередньо в уроці.
11.Підключаємо fancybox. Fancybox-це плагін для демонстрації вмісту в окремому спливаючому вікні. Найчастіше використовується це при збільшенні зображення. В уроці ми підключимо fancybox до блоку з портфоліо, щоб при кліці по роботі, у відвідувача відкривалося спливаюче вікно з повним зображенням лендінга. До речі, у fancybox є один знаменитий і дуже неприємний баг, який до сих пір не виправлений розробниками. Ми ж його виправимо прямо в відеоуроці.
12.Робимо швидкі посилання. Якщо клікати на сторінці по посиланнях в меню, нас буде плавно переміщати до відповідного блоку. Як це робиться, ви дізнаєтеся з цього уроку.
13.Робимо анімацію блоків. Якщо ви переходили на створений лендінг http://landing-order.ru, то звернули увагу, що всі блоки рухаються. Зробити це можна різними шляхами. Ми з вами в уроці реалізуємо найстабільніший і найпростіший спосіб створення такої анімації.
14.Верстаємо сторінку " спасибі за замовлення!". Тут ви побачите верстку нової сторінки, яку побачать всі відвідувачі, які заповнили і відправили форму замовлення.
15.Адаптація під різні дозволи. Дуже важливо зробити, щоб при популярних дозволах екрану все виглядало добре. Цим ми в даному уроці і займемося.
16.Кросбраузерність. Обов'язково лендінг повинен бути оптимізований під всі популярні браузери, інакше конверсія буде значно нижче. І як раз як оптимізувати лендінг під різні браузери, ви дізнаєтеся з даного уроку.
розділ "програмування клієнтської частини"
Тепер настав час розробляти внутрішні механізми лендінгу:
1.Створення БД. У цьому відео ми створимо структуру бази даних і реалізуємо її.
2.Створення простого движка. Оскільки лендінги, на відміну від звичайних сайтів, не вимагають великої програмної основи, ми з вами створимо простенький движок саме для лендінгів. Його ви зможете використовувати і для своїх лендінгів.
3.Підключення верстки до движка. В даному відео ви дізнаєтеся, як підключити зроблену верстку до движка з попереднього уроку.
4.Обробка форми замовлення. У цьому уроці ви побачите, як обробляється форма замовлення. Наша з вами мета – отримати дані з форми і відправити їх в нашу базу даних. Все це буде зроблено на ваших очах.
5.Відстеження рекламних кампаній. Обов'язково в програмній частині повинна бути реалізована можливість відстеження рекламних кампаній. Що конкретно потрібно робити, а також як це робиться, ви дізнаєтеся з цього найважливішого уроку.
6.Реалізація SPLIT-тестування. Лендінг без єдиного SPLIT-тестування, можливо, буде і так давати хороший результат, але якщо ви хочете отримати найкращий результат, то SPLIT-тести неминучі. І в даному відео ми підготуємо для цього всю програмну частину.
розділ "створення admin-панелі"
Для зручного перегляду і редагування замовлень, статистики та аналізу рекламних кампаній і SPLIT-тестів, в цьому розділі створюється Admin-панель:
1.Верстка сторінок Admin-панелі. У цьому відео ми зробимо просту верстку наших майбутніх сторінок Admin-панелі.
2.Авторизація. Безумовно, Admin-панель повинна бути доступна тільки за логіном і паролем. Весь механізм авторизації в Admin-панелі ми зробимо в цьому уроці.
3.Висновок статистики. В даному уроці ви побачите, як виводиться загальна статистика по Вашому лендінгу.
4.Виведення замовлень. В даному відео ви дізнаєтеся, як правильно виводити отримані замовлення.
5.Додавання замовлень. У цьому уроці ми реалізуємо додавання замовлень. Це може бути корисно, якщо клієнт не захоче заповнювати форму, а захоче зателефонувати вам по телефону, а ви вже оформите замовлення за нього самі.
6.Редагування замовлень. Редагувати замовлення потрібно постійно. Найпопулярніший варіант-редагування статусу, наприклад, такі статуси: "новий", "підтверджений", "оплачений", "анульований".
7.Видалення замовлень. У цьому відео Ми реалізуємо видалення замовлень.
https://privatelink.de/?https://srs.myrusakov.ru/landing