Как собрать преленд на ChatGPT

Про нейромережі та ChatGPT не казав лише лінивий, та й той періодично згадував штучний інтелект. Інструменти ШІ (або більш звична для більшості абревіатура AI - artificial intelligence) полегшили життя багатьом спеціалістам, а когось навіть позбавили роботи.

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

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

Що знадобиться для роботи

Ми розглянемо універсальний варіант для будь-якої вертикалі, щоб ти міг потім використовувати той самий алгоритм під потрібну нішу. Спочатку підготуємо інструменти для роботи. У тебе мають бути відкриті:

ChatGPT — з ним ми будемо генерувати код і писати тексти для преленду;
DeepL — потрібно буде перекладати запити з української на англійську і навпаки, аби нейромережа видавала нам якісний запит.
Будь-який блокнот, у статті будемо використовувати Obsidian, щоб відчути себе справжніми айтішніками;
AI для генерації зображень. Можна використовувати промо від партнерки, або ж створювати їх в нейромережах. Зараз багато альтернатив платній Midjourney, ми працюватимемо з Blue Willow.

На підготовку і створення знадобиться в середньому 2-3 години, і щоб лити на преленд трафік, треба буде розщедритися на домен та хостинг. Тут вже нейромережі не допоможуть.

Для реєстрації в ChatGPT знадобиться лише пошта.

З рештою інструментів теж нема проблем — Obsidian можна просто встановити на комп’ютер, якщо хочеться побавитися, а Blue Willow вимагає звичну реєстрацію.

Після того як ти відкрив усі інструменти, можна переходити до створення сайту.

Робота з ChatGPT: промти, теги та код

Будь-який сайт починається зі структури. Візьмемо за основу преленд для нутри, а саме — БАДи, схуднення і таке інше. Спочатку пишемо промт для нейромережі та детально описуємо, що нам від неї потрібно.

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

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

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

Нейромережа пропонує нам розглянути декілька пунктів, які допоможуть зробити «добротний» преленд для роботи з нутрою:

Заголовок, який буде привертати увагу, і офер з перевагами;
Основні характеристики продукту з особливостями і перевагами;
Відгуки та історії успіху, з фотографіями до та після;
Розповідь про склад і діючі речовини, які допомагають худнути;
Заклик до дії — CTA;
Спеціальні пропозиції чи акції, якщо такі є;
Розділ FAQ;
Контакти для зв’язку.

Також нейромережа пропонує додати відзнаки сертифікації, спливаюче вікно та анімацію. Але нас наразі цікавить сама структура сайту, оскільки саме по ній ми отримаємо код для сайту.

Кажемо нейромережі «дякую» за структуру та просимо скласти нам код для преленду по ній.

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

Весь код ми копіюємо в блокнот чи Obsidian. Там ми зможемо редагувати код і перевірити чи працює він взагалі..

Якщо ти вирішив використати Obsidian, то зможеш переглянути текст у вигляді локальної позиції. Для цього в налаштуваннях прибери відмітку «Перегляд вихідного коду».

Зберігаємо цей код та переходимо до його редагування. Спочатку треба пропрацювати заголовок і те, що користувач побачить після нього — тобто саме зображення. Просимо ChatGPT допомогти з цим і зробити код для ілюстрації.

Нейромережа додає код, і як турботлива мамця пояснює, що і куди треба вставити, щоб потім не було соромно. Додаємо картинку в код:

Корисне про теги, які знадобляться при верстці

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

Якщо хочеться чогось специфічного, то можна знайти потрібний запит у довіднику CSS. Так, це не промт вбивати в ChatGPT, але й не так складно, як здається.

Робота з ChatGPT: створюємо тексти для сторінки

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

Обираємо заголовки

Знов йдемо в DeepL, щоб попросити нейромережу написати текст, що буде продавати.

Перші декілька варіантів будуть, швидше за все, не вражаючими. В діалозі краще спробувати ще трохи «поспілкуватися» та спрямувати ChatGPT у потрібне русло. Так можна буде вибирати цікаві варіанти для роботи.

Ми обрали варіант «Achieve Your Dream Body: Fuel Your Journey with Our Elite Supplements», та перетворили його в «Achieve the body of your dreams with new elite supplements». Його можна буде одразу вставити у відповідне місце у коді. Шукаємо H1 та насолоджуємося результатом.

Як зробити так, щоб користувачі точно забажали купити це? Зробити нормальний преленд? Ні, написати текст, що продаватиме! Прописуємо цільову аудиторію, щоб нейромережа написала те, що потрібно.

Для краси додамо трохи «жирного» тексту, щоб підкреслити головне.

Додаємо списки та інтерактив

За тим самим принципом продумуємо решту заголовків. Красиво список можна оформити, як показано на прикладі:

Але тут важливо дотримуватися коректного форматування списків: просто розмістить кожен елемент в теги <li></li>, а весь список виділіть тегами <ul> </ul>.

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

А ось так — на самому прелендінгу.

Порада: коли прописуєте для ChatGPT промт, не забудьте вказати слово «чекбокс», а не «тест». А то доведеться довго страждати і споглядати просто перелічення списку. Принаймні, нам довелося переглянути різні варіанти, перш ніж отримати нормальний чекбокс.

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

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

Спробуємо додати ще трохи тексту. І в кінці — ще одна кнопка із закликом.

Який результат ми отримуємо?

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

Таку сторінку можна одразу переносити на хостинг і намагатися використовувати у своїй роботі.

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

Висновок

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

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