Створення продаючих лендинг-розділів — покроковий посібник

Вступ

Чи мріяли ви коли-небудь створювати красиві, адаптивні розділи лендинг-сторінок — без написання жодного рядка коду? З плагіном Selldone у ChatGPT ця мрія стає реальністю.

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

Наприкінці у вас буде професійно оформлений розділ, готовий до публікації на вашому сайті Selldone.

💡 Примітка: Page Builder від Selldone побудований на Vuetify (Vue 3) — отже кожен розділ, згенерований плагіном, повністю сумісний із сучасним та адаптивним фронт-енд фреймворком Selldone.

Крок 1 — Підготуйте натхнення

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

Зробіть скріншот цього розділу Rozetka; ми використаємо його як візуальний орієнтир у ChatGPT при генерації вашого кастомного дизайну за допомогою плагіна Selldone.

💡 Порада: Обирайте розділ із чіткою і збалансованою структурою. Чим простіший і зрозуміліший дизайн, тим краще ChatGPT зможе його проаналізувати та відтворити.

⚠️ Заява про добросовісне використання: Скриншот Rozetka, показаний тут, використовується виключно в освітніх та ілюстративних цілях як джерело натхнення. Усі торгівельні марки, зображення та макети належать Rozetka.ua — цей посібник не пов’язаний з Rozetka і не схвалений нею.

Крок 2 — Відкрийте ChatGPT з плагіном Selldone

Переконайтеся, що у вас увімкнений плагін Selldone у ChatGPT:

1. Перейдіть у ChatGPT → Settings → Beta Features → Plugins і увімкніть плагіни.
2. Відкрийте Plugin Store та встановіть плагін Selldone.
3. Розпочніть новий чат із активованим плагіном.

Ви маєте побачити логотип Selldone поруч із вікном чату — це означає, що все готово до роботи.

Крок 3 — Завантажте еталонне зображення

Завантажте свій скріншот і напишіть чітку підказку, наприклад:

Зверніть увагу вгорі меню, що використовується остання версія ChatGPT.

«Хочу побудувати розділ за прикладом цього зображення: адаптивні розміри шрифтів, можливість змінювати шрифт і кольори карток, а картки можуть бути круглими або з округленими кутами.»

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

Створіть новий лендинг у Selldone

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

1. У верхньому меню магазину перейдіть у Сторінки → Лендинг → Додати новий лендинг.
   
2. На екрані ви побачите три стандартні шаблони лендингу.
3. Клікніть на будь-який із них, щоб вибрати шаблон і перейти в дизайнер лендингу. У дизайнері відкрийте ліву панель, знайдіть елемент «Code» і перетягніть його у поле Page Builder. Саме в цьому блоці «Code» ви вставите або імпортуєте розділ, згенерований ChatGPT за допомогою плагіна Selldone.
4. Клікніть всередині блоку Code, щоб активувати панель інструментів — зверху з’явиться тулбар, яким ми будемо користуватися часто.

- Перший значок (<>) відкриває Редактор коду, де ви можете вставити або відредагувати HTML та Vue-базований код розділу, згенерований ChatGPT.- Другий значок відкриває «Властивості» (Properties), де можна коригувати компоновку розділу, відступи та візуальні налаштування.

Крок 4 — Скопіюйте початковий код від ChatGPT у редактор

Може бути неправильна версія

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

«Сфокусуйся на зображенні, яке я надіслав вище. Я надсилаю його ще раз.»

Тепер ChatGPT почне заново і згенерує новий код. Ця версія також може не бути остаточною — ймовірно, ви захочете додати ще запитів та правок.Тепер скопіюйте код і вставте його в редактор коду, після чого натисніть Apply:

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

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

Опція RESET TO DEFAULT:

Іноді, коли ви вставляєте оновлену версію коду, зміни можуть не відобразитися. Це може статись, якщо правки суттєві. У таких випадках потрібно натиснути «Reset to Default». Пам’ятайте, що використання цієї опції видалить усі ваші налаштування, включно з новими текстами, кольорами, розмірами шрифтів і навіть завантаженими зображеннями — це фактично скидання до заводських налаштувань 🙂.Тож використовуйте цю опцію лише тоді, коли зміни не застосовуються належним чином.

Крок 5 — Налаштуйте розділ

ChatGPT, виходячи з досвіду інших користувачів, які використовували цей метод для створення розділів, тепер генерує більш комплексні макети — тому вам не потрібно запитувати кожен елемент окремо. Це реальна перевага тривалого діалогу: чіткіший і довший опис допомагає ChatGPT краще зрозуміти ваші вподобання та створювати більш повні та точні результати.За замовчуванням згенерований код досить адаптивний, але ви можете ще коригувати деталі, такі як розміри шрифтів, товщини шрифтів, висота секцій або карток, ширини та інші візуальні елементи відповідно до вподобань.
Наприклад, тут ви можете налаштувати Selldone так, щоб на великому екрані відображалося 8 карток у ряд, на планшеті — 4, а на мобільному — 2 картки.Подивимось, як ChatGPT інтерпретує і застосує ці налаштування — можливо, доведеться зробити ще декілька правок або додаткових запитів.У цьому прикладі рекомендовано змінити максимальну ширину секції на 1400px для кращої компоновки. Також ви можете налаштувати кількість карток у ряд — 8, 4 і 2 відповідно для десктопа, планшета та мобільних пристроїв.
Щоб удосконалити відступи, спробуйте зменшити Cards Gap (Desktop) до приблизно 12px. Крім того, можна зменшити висоту картки з 180px до 160px або підлаштувати розмір зображення під ваш дизайн.

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

Щоб краще візуалізувати результат, завантажте власні зображення. Рекомендуємо використовувати зображення з прозорим фоном, щоб опція Card Background Color рівномірно застосовувалась — це додасть вашому розділу більш чистого та професійного вигляду.Після завантаження зображень, редагування текстів і фіналізації натисніть кнопку Зберегти або натисніть Ctrl + S у Windows, щоб миттєво зберегти.
Тепер час подивитися на сторінку в режимі Live.
Для перегляду в реальному часі ви можете скористатися опцією Live Preview або натиснути кнопку поруч із назвою лендингу — це відкриє сторінку в режимі покупця, так як її бачать відвідувачі. Проте не рекомендую покладатися виключно на Live Preview для фінальної перевірки, оскільки він не завжди повністю відображає адаптивність сторінки на різних пристроях — про це поговоримо детальніше нижче.Ось результат коду. Тепер потрібно протестувати його в різних розмірах екранів, щоб переконатися, що все працює правильно.
У браузерах Windows відкрийте Web Developer Tools, натиснувши F12.
Цей інструмент дозволяє переглядати сторінку в різних розмірах екранів — без необхідності тестувати на реальних мобільних чи планшетах.Тепер у верхньому меню виберіть Responsive, щоб переглянути, як ваш розділ виглядає на різних розмірах екранів.Як бачите, мобільна версія виглядає чисто і повністю адаптивно.У режимі планшета — зокрема на iPad Pro 11‑дюймів — наші налаштування (4 картки в ряд на планшеті) можуть не застосовуватися, і відображається лише 2 картки. Треба попросити ChatGPT виправити це та перекодувати.

Крок 6 — Ітерації та доопрацювання

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

• зробити секцію адаптивною на всіх екранах.
• додати анімацію при наведенні.
• використати градієнтні кнопки.

Кожен раунд оновлює вашу секцію миттєво.

💡 Порада профі: чим більше ви спілкуєтесь і чіткіше описуєте бажане, тим краще ChatGPT розуміє ваш стиль дизайну. З часом він «вчиться» вашим вподобанням і генерує точніші, якісніші результати.
Тут потрібно чітко пояснити проблему, щоб допомогти ChatGPT краще її зрозуміти.
Пам’ятайте, він не читає думки — опишіть проблему детально, як у цьому прикладі:

Я вибрав 4 картки в ряд для розміру планшета, але на iPad Pro 11 дюймів показує лише 2 картки в ряд. Виправте, будь ласка. Для мобільного я обрав 2 в ряд.

Коли ChatGPT відповідає на ваш запит, іноді він надає тільки конкретні фрагменти коду, які потрібно вручну замінити або додати, як на прикладі нижче.Щоб спростити процес, просто попросіть «Надішліть повний код».Часто в кінці свого повідомлення ChatGPT рекомендує додаткові налаштування, які ви могли пропустити — наприклад, додати посилання до карток, що є важливим для секції.Майже готово! Скопіюйте й вставте оновлений код у редактор, збережіть зміни та перегляньте в Live Mode, щоб переконатися, що все виглядає правильно.
Як бачите,

Крок 7 — Остаточний код і збереження секції

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

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