ИИ помогает многим специалистам в работе. Пишет тексты, рисует картинки, генерирует код. Я хочу рассказать о том, как с помощью базовых знаний и ИИ собрать прелендинг за пару часов.
2 часа
Если зайти на 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 — это то, что пишет нейронка в между . 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> — нижний индекс;
- — цвет.
Например, если посреди текста, вам нужно что-то выделить жирным, то вы просто ищете этот текст в коде и обрамляете его в <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 канал от накрутчиков и скамеров.
Комментарий недоступен
Вот именно, куча конструкторов, куча генераторов и онлайн сервисов. которые сделают все намного красивее. А тут вообще уровень того чо тупо вставили из ворда в визуальный редактор и скопировали код, тут по сути текст да картинки.
Комментарий недоступен
Лендинг выглядит отвратительно по дизайну будто это страничка каких-то мошенников.
Это преленд, а не ленд. Он используется как прокла, чтобы сегментировать и догреть аудиторию, которая перешла с креатива. Я показал то, что можно собрать за 1,5-2 часа не имея каких-то особых навыков. Если потратить 3-4 часа, то результат будет намного лучше. И с каждым новым прелендом он будет лучше, т.к. будут подробнее промпты, можно будет редачить что-то руками.
Догреть этим? Серьёзно?
Да.
🤦♂️
Ну как бы..все конечно хорошо, но я кушал. Не надо так делать, пожалуйста.
:с Зато больше места останется для обеда)
Ээээм, тупо страница с текстом? мне кажется быстрее изучить верстку и сделать самому, а еще есть визуальный редактор в любом конструктере.
Чёт мне кажется фигня какая-то даже для преленда получилась. На таплинк сделать было бы быстрее, проще и получилось бы симпатичнее
Вот кажется, что всё сложно, а когда текст статьи перед глазами, то процесс в разы упрощается. Очень подробная инструкция получилась. И понятно, что лендинг простенький, но те, кому надо разобраться в теме и сделать ленд, а бюджета почти нет, и из помощников — ты сам и твой мозг — эта инструкция незаменима. Не знаю, пригодится ли, но ссылку сохраню.
Советую освоить Wodrpress + Elementor. ChatGPT подскажет как.. и время на создание простых сайтов сократится радикально: займет минут 30. Большая часть времени будет потрачена на настройку сайта.
а можно помочь с вордпресс? ТГ@geni _ al
без пробелов
можно еще раз попросить мне написать?. контакт тот же. есть проект
От этих фотографий ногтей меня начало тошнить
Спасибо большое за такую подробную статью, полезно!
Автор молодец, но блин, пока что выдавить нормальный визуал из ChatGPT - анрил
Подобный сайт можно собрать за час посмотрев предварительно 30-минутный урок по HTML/CSS
Более того, ChatGPT нагенерирует такой дичи, что её фиксить будешь дольше, чем с нуля верстать.
Комментарий недоступен
Комментарий удален модератором
Ну зато ChatGPT не всех лишит работы пока. Наверное. Судя по комментариям