Если зайти на Kwork, биржу фриланса или обратиться к дизайнерам, то стоимость преленда может расстроить. Например, на Kwork самый обычный преленд без отзывов и с текстом на 2 000 символов стоит 6 000 рублей:
А еще всегда приходится ждать, бояться, что новый исполнитель подведет, сделает что-то не так, сольет преленд другим конкурентам-заказчикам. С популяризацией нейросетей все стало проще — можно сделать преленд с минимальными усилиями, за один час и оплатив только хостинг.
Подготовка к работе
Нам понадобится:
- ChatGPT — здесь мы будем генерировать код и текст для нашего прелендинга;
- Sublime Text или Блокнот — чтобы собрать полученный код в сайт;
- Изображения — можно взять промо у партнерки или сгенерировать в нейросетях, которые работают с картинками;
- Домен и хостинг — чтобы залить сайт.
Аккаунт для ChatGPT можно создать самостоятельно или купить на plati.ru за $1-3.
Создаем сайт с помощью ChatGpt
Основная сложность в том, чтобы собрать сам сайт. Некоторые не знают HTML совсем, некоторые знают очень базово. Поэтому я буду рассказывать не только про промты, но и о некоторых тегах, которые нужно запомнить, чтобы подредактировать наш преленд.
ChatGpt учился на англоязычном контенте и хорошо понимает английский язык. Да, вы можете задать промт на русском, но процесс будет выглядеть так: промт на русском → перевод на английский → поиск на английском → формирование результата → перевод на русский. Из-за этого результат может быть неудовлетворительный.
Сначала определяемся со структурой прелендинга. С этим тоже поможет нейросеть. Я использовал запрос:
ChatGpt выдал мне результат:
Нейронка предлагает прелендинг из пяти блоков:
- Заголовок — привлекаем внимание пользователя к проблеме;
- Описание проблемы — «цепляем» пользователя за его боль;
- Описание решения — рассказываем про наше средство;
- Социальные доказательства — отзывы, лицензии, документы;
- CTA — форма для контактов или переход на преленд, чтобы заказать.
Нас устраивает такой результат, поэтому просим ChatGPT написать код для прелендинга:
Получаем результат:
Копируем полученный код в текстовый редактор или Sublime, чтобы убедиться, что код рабочий и редактировать его в дальнейшем.
Если интересно, то стартовый код от ChatGPT выглядит так:
Чтобы открыть текст в виде локальной страницы, нам нужно сохранить код в формате .html. Sublime автоматически подтягивает формат под содержание документа, а если используете блокнот, то придется изменить расширение вручную.
Так выглядит наш пустой код от нейронки:
До полноценного преленда далеко. Хотелось бы, например, чтобы сразу после заголовка пользователь видел саму проблему. Просим нейросеть добавить код для изображения:
ChatGPT переписывает код, добавляет CSS стили, а после кода дает разъяснения: куда писать текст, а куда добавлять картинку:
Добавляем картинку и текст и проверяем результат:
Если картинка слишком большая, уменьшите ее в фоторедакторе или через Canva. Добавим в прелендинг немного цвета — попросим сделать фон у блока с H2 серым, добавить кнопку «Найти лечение» и еще одну картинку.
Если код получается слишком большой, то ChatGPT остановится на 2 000 символах. Можно написать «Продолжить», но есть шанс, что нейронка начнет код не с той части. Поэтому советую выборочно копировать блоки, которые поменяла нейронка и вставлять их в свой Sublime Text. Так вы не испортите рабочий код, если какая-то его часть при новой генерации потерялась.
Результат:
По такому же принципу делаем запросы для остальных блоков, чтобы нас устраивал шаблон страницы и мы могли перейти к наполнению. У меня получился такой результат:
HTML и CSS теги, которые нужно знать, чтобы редактировать преленд
ChatGPT пишет код для ленда, но вам все равно нужно знать некоторые теги, чтобы изменить цвет, выделить что-то курсивом или жирным шрифтом, сменить размер шрифта и просто ориентироваться в коде.
CSS
Блок с CSS — это то, что пишет нейронка в <head> между <style></style>. CSS позволяет менять не конкретную часть текста, как HTML, а «семейство» этих частей.
CSS работает примерно так:
- задаете название «семье» контейнеров;
- задаете параметры этому контейнеру;
- указываете, что какие-то части преленда относятся к этому контейнеру в HTML коде.
Например:
h2 — это название контейнера, в дальнейшем все, что вы припишете к контейнеру h2 будет иметь стиль, который прописан в этом кусочке кода.
Например, в этой части кода видно, что ко всему блоку применяются стили из блока «container1»:
Основные значения CSS:
- font-size — размер, указывается в px;
- color — цвет, указывается в HEX (#003355) или по названию (black, green);
- background-image — фоновое изображение;
- background-color — цвет фона;
- border — обводка;
- margin-top (button, left, right) — отступы.
Свойств огромное количество — если вам нужны какие-то конкретные, можно спросить у chatGPT или посмотреть в справочнике.
HTML
С HTML все еще проще. Для HTML-кода вы указываете правила конкретной части текста, которая находится внутри этого кода. Например:
<ul> означает, что в этом блоке начинается список, а <li> — что в этом блоке элемент этого списка. Все, что находится между парными тегами — относится к этим тегам. Все, что за ними — не относится.
Основные теги, которые вам понадобятся для оформления текста:
- <p> — парный, обозначает параграф или абзац текста;
- <br> — не парный, перенос на новую строку;
- <i> — парный, курсивный текст;
- <b> — парный, жирный текст;
- <a href =”URL”> — ссылка на что-то;
- <sup> — верхний индекс;
- <sub> — нижний индекс;
- <color> — цвет.
Например, если посреди текста, вам нужно что-то выделить жирным, то вы просто ищете этот текст в коде и обрамляете его в <b></b>:
Результат:
HTML-код также можно спросить у ChatGPT, например:
Готовим контент с помощью ChatGPT и вносим небольшие правки в код
Мы подготовили шаблон сайта, теперь нам нужен контент для него. И с этим тоже справится ChatGPT, причем за 10 минут. Пойдем по порядку — просим в этом же диалоге сгенерировать нам цепляющий заголовок для нашего прелендинга.
По одной теме лучше «нагуливать» ChatGPT в рамках одного диалога. Нейронка работает так, что чем больше вы общались с ней на одну тему, тем точнее она выдает результат. Поэтому я советую или «нагуливать» новый диалог на тему вашего преленда, или писать в том, в котором генерили код.
Через 30 секунд получаем результаты:
Если нас что-то устраивает, то копируем и вставляем в HTML код, в блок <h1>.
Код:
Результат:
Дальше у нас идет картинка и блок с каким-то текстом. По нашему плану — здесь должно быть что-то, что зацепит пользователя за «больное» место. Картинку можно найти в интернете, а вот текст генерируем через ChatGPT:
Текст от ИИ:
Результат:
Дальше — второй заголовок. У нас он не очень яркий, напоминает кнопку, а не отдельный блок. Поэтому сначала находим контейнер этого заголовка в коде и задаем ему новые параметры.
Чтобы найти, какой CSS блок относится к этому тексту, мы ищем в коде наш заголовок и обращаем внимание на <div class=””>:
Затем ищем это название в самом верху, где у нас CSS стили:
И меняем параметры с помощью ChatGPT или справочника стилей.
Важно: всегда следите за тем, чтобы ваши закрывающиеся теги закрывались и внутрь не попадало ничего лишнего. Если вы что-то дописываете в код и понимаете, что под стили попало больше текста, чем нужно, значит где-то вы не закрыли тег или вставили контент не в ту часть кода
Текст вновь генерировал с ChatGPT. Мой запрос:
Результат:
Результат на сайте:
Обратите внимание на списки — каждый пункт должен списка должен находиться между <li><li>, а весь список между <ul> </ul>:
У нас есть место под две картинки, поэтому ищем «до/после»:
Следующая идет кнопка — просим ChatGPT придумать нам CTA:
Копируем понравившийся результат и добавляем ссылку на ленд для покупки:
Переходим к новому блоку. Я решил добавить немного интерактивного элемента — проверку на наличие грибка. Мой запрос для ChatGPT:
HTML-код:
Обратите внимание, я сказал ИИ, что мне нужно, чтобы сайт обрабатывал результат. Если выбрано больше двух чекбоксов, то при нажатии кнопки должно появляться сообщение, что у человека есть грибок. Поэтому ChatGPT написал код на JS:
Просим у ChatGPT симптомы грибка, чтобы заполнить чекбоксы. У нас 8 чекбоксов, поэтому нужно 8 симптомов:
Добавляем полученные симптомы в HTML-код:
Получаем результат на сайте:
Теперь кнопка кажется очень маленькой и незаметной. Нужно это изменить, поэтому пишем ИИ запрос:
Получаем код:
Вставляем его в наш редактор:
Результат:
Сделаем заметными и результаты теста. Сейчас у нас обычный текст, который пользователь может не заметить:
Сделаем два варианта:
- Если симптомов мало: «У вас нет грибка, но не забывайте профилактику»;
- Если симптомов много: «Вам срочно нужно лечить грибок. Купите средство и избавьтесь от проблем за одну неделю [Опасность!]».
Для этого копируем JS код из редактора, вставляем в ChatGPT и просим исправить его.
Результат:
Следующий блок — описание средства. Нам нужен продающий текст продукта. Пишем промт для ChatGPT:
Получаем текст, если устраивает, то переносим в HTML-код:
Результат:
Переходим к отзывам. Просим ChatGPT сгенерировать историю для нашего преленда:
Текст от ChatGPT:
Вставляем полученный текст в HTML-код:
Ищем фотографию «До/после» и добавляем ее. В итоге получаем такой результат:
Осталась последняя кнопка с CTA. Она очень невзрачная и там нехватает стоимости. Поэтому попросим нейросеть написать код для этой кнопки:
Результат:
Итог
За час у нас получился простой прелендинг:
Вы можете сделать его еще лучше, если поиграетесь с запросами, текстом и вручную подредактируете код. Останется залить ленд на хостинг и в трекер и запускать рекламу.
В моем Telegram канале вы найдете и другие советы и идеи по использованию нейросетей для арбитража, а также подборки расширений и софт для работы. До скорых встреч!
В следующем материале я расскажу, как блогерам обезопасить свой Telegram канал от накрутчиков и скамеров.
