Мастер-класс: Оформление 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 из чата ИИ.