Майстер-клас: Оформлення Hotlist.biz за допомогою ШІ
Цей гайд навчить вас створювати професійний дизайн для ваших товарів, використовуючи Штучний Інтелект (Gemini, ChatGPT) та вбудовані інструменти платформи.
1. Теорія: Базові поняття (CSS, Класи, ID)
Перш ніж давати завдання ШІ, потрібно зрозуміти, як браузер сприймає дизайн.
Приклад: #tabs-1
Приклад: .my-price-style
Як знаходити елементи (Інспектор браузера)
Щоб ШІ знав, що саме фарбувати, потрібно знайти ID блоку в Hotlist:
- Відкрийте картку товару на сайті.
- Натисніть правою кнопкою миші на назву вкладки або текст.
- Виберіть «Переглянути код» (або Inspect).
- Відкриється панель. Шукайте рядок, який підсвічує потрібний блок. Наприклад:
<div id="tabs-1">...</div>
Важливо (Принцип вкладеності): На платформі Hotlist.biz бажано використовувати стилі у зв'язці з «батьківським» блоком. Це гарантує, що ваше оформлення застосується саме до потрібної частини сторінки і не «зламає» дизайн в інших розділах сайту.
В інспекторі браузера ви можете побачити ієрархію (дерево) елементів: кожен блок знаходиться всередині іншого, більшого контейнера. Для вкладок у картці товару таким головним контейнером (батьком) є блок з ідентифікатором #hotengine-shop-content-tabs.
Тому, щоб оформити, наприклад, першу вкладку, ваш шлях у CSS має виглядати так:
#hotengine-shop-content-tabs #tabs-1.
Такий запис буквально каже браузеру: «Знайди блок з ID tabs-1, але тільки той, що знаходиться всередині батька hotengine-shop-content-tabs».
Даємо ШІ текст і просимо створити оформлення. Обов'язково вказуємо знайдений ID.
Ви отримали два блоки. Спочатку вставте їх обидва (і Style, і HTML) у товар на сайті, щоб переконатися, що все красиво.
Коли дизайн затверджено:
- Скопіюйте все, що знаходиться між тегами
<style>та</style>(самі теги копіювати НЕ потрібно). - Перейдіть до Панелі управління Hotlist > Дизайн сайту > Редактор дизайну > Вкладка CSS.
- Прокрутіть у самий низ і вставте ваш код. Збережіть. Можна додати коментар:
/*Стиль тексту у вкладці товару*/
Після того як ви зберегли стиль у Редакторі дизайну, його потрібно видалити з тексту товару. Якщо ви цього не зробите, код буде дублюватися, що сповільнить сайт і може створити помилки.
Як це виглядає:
<style> #tabs-1 { background: #000; } </style>
<div class="my-content"> Ваш текст... </div>
// СТАЛО В КАРТЦІ ТОВАРУ (Правильно):
<div class="my-content"> Ваш текст... </div>
(Стиль тепер живе в Редакторі дизайну)
Це дає перевагу: тепер при внесенні будь-яких правок у CSS в Редакторі дизайну, стиль автоматично оновиться в усіх картках товару — це швидко та зручно.
Шпаргалка: Структура та селектори Hotlist.biz
Весь ваш контент створюється всередині елемента #hotengine-content. Використовуйте ці дані для точних запитів у чат ШІ:
Вкладки в картці товару (Tabs)
• Вкладка 1:
#hotengine-shop-content-tabs #tabs-1• Вкладка 2:
#hotengine-shop-content-tabs #tabs-2• Вкладка 3:
#hotengine-shop-content-tabs #tabs-3• Вкладка 4:
#hotengine-shop-content-tabs #tabs-4
Повний опис товару (не у вкладці)
.hotengine-shop-product-desc-block .hotengine-shop-product-description-text
Блог та Статті (Каталог та повна сторінка)
#hotengine-content-blog #page_content .hotengine-blog-page-list-block .contenth .contenth_i• Текст повної статті на окремій сторінці:
#hotengine-content-blog #page_content .contenth .contenth_i
ID та Класи основних розділів
#hotengine-content-page• Каталог статей:
#hotengine-content-blog• Каталог товарів:
#hotengine-content-shopУточнюючі класи (для категорій/колекцій):
• Категорія товарів:
#hotengine-content-shop.hotengine-content-shop-category• Колекції:
#hotengine-content-shop.hotengine-content-shop-collection• Виробники:
#hotengine-content-shop.hotengine-content-shop-producer• Категорія статей:
.hotengine-content-blog-category
Корисна порада: За цією ж аналогією ви можете оформити не тільки описи, а й характеристики, блоки доставки або спеціальні вкладки. Один раз налаштувавши стиль у Редакторі дизайну, ви зможете наповнювати тисячі товарів у єдиному брендовому стилі, просто копіюючи чистий HTML з чату ШІ.