Создание продающих лендингов — пошаговое руководство

Введение

Хотели бы вы создавать красивые, адаптивные секции лендинга — без единой строки кода? С Selldone Plugin in ChatGPT эта мечта становится реальностью.

В этом руководстве вы пошагово узнаете, как из изображения-вдохновения получить готовую, полностью адаптивную секцию внутри Page Builder от Selldone — всё это с поддержкой ИИ.

К концу у вас будет профессионально оформленная секция, готовая к публикации на вашем сайте Selldone.

💡 Примечание: Page Builder Selldone построен на Vuetify (Vue 3) — поэтому каждая секция, сгенерированная плагином, полностью совместима с современным адаптивным фронтендом Selldone.

Шаг 1 — Подготовьте изображение-вдохновение

Для начала найдите дизайн секции, который вас вдохновляет. В этом уроке мы используем секцию с домашней страницы Ozon в качестве эталона — чистая, современная верстка с яркими изображениями товаров и понятными призывами к действию.

Сделайте скриншот этой секции Ozon — он послужит визуальным ориентиром в ChatGPT при генерации кастомного дизайна с помощью Selldone Plugin.

💡 Совет: Выбирайте секцию со структурированной и визуально сбалансированной композицией. Чем яснее дизайн, тем лучше ChatGPT сможет его проанализировать и воспроизвести.

⚠️ Уведомление об ограниченном использовании: Скриншот Ozon, приведённый в примере, используется исключительно в образовательных целях и в роли визуального вдохновения. Все товарные знаки, изображения и макеты принадлежат Ozon — это руководство не связано с компанией и не одобрено ею.

Шаг 2 — Откройте ChatGPT с активированным Selldone Plugin

Убедитесь, что у вас включён Selldone Plugin в ChatGPT:

1. Перейдите в ChatGPT → Settings → Beta Features → Plugins и включите поддержку плагинов.
2. Посетите Plugin Store и установите Selldone Plugin.
3. Начните новый чат с активным плагином.

Рядом с полем чата вы должны увидеть логотип Selldone — это означает, что всё готово к работе.

Шаг 3 — Загрузите референс-изображение

Загрузите ваш скриншот и напишите понятный запрос, например:

В верхнем меню убедитесь, что вы используете последнюю версию ChatGPT.

«Я хочу создать секцию как на этом изображении, с адаптивными размерами шрифтов, настраиваемыми шрифтами и цветами карточек, а также с карточками, которые могут быть круглыми или скруглёнными квадратами.»

ChatGPT (с Selldone) проанализирует изображение и сгенерирует код на базе Vuetify (Vue 3), полностью совместимый с Page Builder Selldone.

Создайте новый лендинг в Selldone

Прежде чем добавлять свою секцию, давайте сначала создадим пустую страницу-лендинг в Selldone для её размещения.

1. В верхнем меню магазина откройте Pages → Landing → Add New Landing.
   
2. На экране вы увидите три шаблона лендинга по умолчанию.
3. Кликните любой из них, чтобы выбрать и войти в Landing Page Designer. Внутри конструктора откройте левую панель, найдите элемент «Code» и перетащите его в область Page Builder. Этот элемент «Code» — место, куда вы вставите или импортируете секцию, сгенерированную ChatGPT через Selldone Plugin.
4. Кликните внутри поля Code, чтобы активировать панель инструментов — сверху появится тулбар, которым вы будете часто пользоваться.

- Первая иконка (<>) открывает Code Editor, где вы можете вставить или отредактировать HTML и Vue-код, сгенерированный ChatGPT.- Вторая иконка открывает Properties, где вы можете настроить компоновку секции, отступы и визуальные параметры.

Шаг 4 — Вставьте первоначальный код от ChatGPT в редактор

Возможно неверная версия

Скопируйте первую версию кода, которую сгенерировал ChatGPT.
Как видно на скриншоте, результат может отличаться от вашего референса — это значит, что ChatGPT сгенерировал некорректную версию секции. Это нормально, не переживайте.Чтобы исправить это, отправьте референс-изображение ещё раз и попросите повторно сгенерировать, например, так:

«Сосредоточься на изображении, которое я отправил выше. Я отправляю его снова.»

Теперь ChatGPT начнёт заново и сгенерирует новый код. Эта версия не будет финальной — вы, возможно, захотите добавить дополнительные запросы и корректировки.Теперь скопируйте код и вставьте его в редактор кода, затем нажмите Apply:

Важное примечание: по умолчанию режим редактора кода — HTML. Вы должны переключиться на опцию Vue — иначе вы получите пустой результат.

Теперь вы увидите первую корректную версию секции, сгенерированную ChatGPT. Нажмите вторую кнопку на тулбаре (как описано выше), чтобы открыть меню Properties для донастройки. Как видите, доступно множество параметров, которые помогут адаптировать секцию под ваш бизнес.

Опция RESET TO DEFAULT:

Иногда при вставке обновлённой версии кода вы можете не увидеть видимых изменений. Это может происходить, если правки затрагивают базовую структуру. В таких случаях нужно нажать Reset to Default. Учтите, что при этом будут удалены все ваши настройки: тексты, цвета, размеры шрифтов и даже загруженные изображения — это фактически сброс к заводским настройкам 🙂.Используйте эту опцию только если ваши изменения действительно не применяются.

Шаг 5 — Настройте секцию

ChatGPT, опираясь на опыт других пользователей, генерирует более полные макеты — вам не нужно запрашивать каждый элемент по отдельности. Главное преимущество — чем дольше и яснее вы общаетесь, тем лучше ChatGPT понимает ваши предпочтения и выдаёт более завершённые и точные результаты.Сгенерированный код по умолчанию уже довольно адаптивен, но вы всё равно можете подправить детали: размеры шрифтов, толщину шрифта, высоту секции и карточек, ширину и другие визуальные элементы по своему вкусу.
Например, здесь можно задать отображение 8 карточек в ряд на больших десктопах, 4 на планшетах и 2 на мобильных устройствах.
Посмотрим, как ChatGPT воспримет и применит эти настройки — возможно, потребуется ещё несколько правок или запросов на следующем этапе.В данном случае рекомендуется изменить Section Max Width на 1400px для лучшей компоновки. Вы также можете настроить количество карточек в ряд: 8, 4 и 2 для десктопа, планшета и мобильных устройств соответственно.
Чтобы точнее настроить отступы, уменьшите Cards Gap (Desktop) примерно до 12px. Кроме того, можно уменьшить высоту карточки с 180px до 160px или подогнать размер изображения под дизайн.

Важно помнить: вы легко можете изменить внешний вид, экспериментируя с этими настройками — просто поиграйте с числами и найдите то, что лучше всего подходит вашему стилю.

Чтобы лучше представить результат, загрузите свои изображения. Рекомендуем использовать изображения с прозрачным фоном, чтобы опция Card Background Color равномерно применялась ко всем карточкам и придавала секции аккуратный и профессиональный вид.После загрузки изображений, редактирования текстов и окончательной доработки нажмите кнопку Сохранить или используйте Ctrl + S на Windows для мгновенного сохранения.
Теперь откройте Live Page и посмотрите секцию в работе.
Для просмотра вживую вы можете воспользоваться опцией Live Preview или нажать кнопку рядом с названием лендинга — это откроет страницу в режиме просмотра для покупателей, так как её увидят ваши посетители. Однако я не рекомендую полагаться только на Live Preview при проверке финальной версии, так как он не всегда точно отражает адаптивность на разных устройствах — об этом подробнее ниже.Это результат работы кода. Теперь нужно протестировать его на разных размерах экрана, чтобы убедиться, что всё отображается корректно.
Чтобы открыть инструменты разработчика в браузере на Windows, нажмите F12.
Этот инструмент позволяет посмотреть страницу в различных размерах экрана, не тестируя отдельно мобильные, планшетные и другие устройства.Теперь в верхнем меню выберите Responsive, чтобы посмотреть, как секция выглядит на разных экранах.Как видите, мобильная версия выглядит аккуратно и полностью адаптивна.В режиме планшета — например, на iPad Pro 11-inch — наши настройки (4 карточки в ряд на планшете) могут не применяться, и показываться только 2. В этом случае нужно попросить ChatGPT исправить код.

Шаг 6 — Итерации и доработка

Не останавливайтесь на первой версии — здесь начинается настоящее творчество. Продолжайте общаться с ChatGPT, чтобы подправить такие вещи, как:

• сделать секцию адаптивной на всех экранах.
• добавить анимацию при наведении.
• использовать градиентные кнопки.

Каждая итерация мгновенно обновляет секцию.

💡 Профи-совет: чем больше и точнее вы описываете желаемое, тем лучше ChatGPT понимает ваш стиль и со временем выдаёт более качественные и точные результаты.
Здесь важно чётко объяснять проблему, чтобы ChatGPT понял её правильно.
Он не читает мысли — опишите проблему подробно, как в примере ниже:

Я выбрал 4 карточки в ряд для планшета, но на iPad Pro 11-inch отображаются 2 карточки в ряд. Исправьте. Для мобильных я выбрал 2 в ряд.

Когда ChatGPT отвечает на ваш запрос, он иногда даёт только фрагменты кода, которые нужно вручную заменить или добавить. Чтобы упростить задачу, просто попросите «Отправить полный код» (Send the full code).Часто в конце ответа ChatGPT советует дополнительные настройки, которые вы могли упустить — например, добавить ссылки на карточки, что важно для функциональности секции.Почти готово! Скопируйте и вставьте обновлённый код в редактор, сохраните изменения и посмотрите в Live Mode, чтобы убедиться, что всё отображается правильно.
Как видно, теперь секция корректно показывает 4 карточки в ряд в версии для планшета.

Шаг 7 — Финализация кода и сохранение секции

Когда дизайн готов, имеет смысл дать ChatGPT подробное описание структуры и требований к секции. Используйте следующий запрос для генерации финального кода:

Добавьте блок с концептуальным описанием над