Masterclass: Projektowanie Hotlist.biz z pomocą AI

Ten poradnik nauczy Cię tworzyć profesjonalny design dla Twoich produktów, korzystając ze Sztucznej Inteligencji (Gemini, ChatGPT) oraz wbudowanych narzędzi platformy.

1. Teoria: Podstawowe pojęcia (CSS, Klasy, ID)

Zanim dasz zadanie AI, musisz zrozumieć, jak przeglądarka interpretuje wygląd strony.

CSS (Cascading Style Sheets) To „język piękna”. Jeśli HTML to szkielet strony, CSS to ubranie, makijaż i fryzura. Mówi przeglądarce: „Zrób ten tekst czerwonym, a ten przycisk okrągłym”.

ID (#) — Identyfikator Unikalna nazwa elementu. Jak numer PESEL. Na jednej stronie nie mogą istnieć dwa identyczne ID. W CSS oznaczane kratką.
Przykład: #tabs-1

Class (.) — Klasa Nazwa grupowa. Jak mundurki w szkole. Można przypisać jedną klasę do wielu elementów. W CSS oznaczane kropką.
Przykład: .my-price-style

Jak znajdować elementy (Inspektor przeglądarki)

Aby AI wiedziało, co dokładnie ostylować, musisz znaleźć ID bloku w Hotlist:

Otwórz kartę produktu na stronie.
Kliknij prawym przyciskiem myszy na nazwę zakładki lub tekst.
Wybierz „Zbadaj” (lub Inspect).
Otworzy się panel. Szukaj linii podświetlającej odpowiedni blok. Przykład:
<div id="tabs-1">...</div>

Ważne (Zasada zagnieżdżania): Na platformie Hotlist.biz warto używać stylów w połączeniu z blokiem „rodzicem”. Gwarantuje to, że styl zadziała tylko w wybranym miejscu i nie zepsuje wyglądu innych sekcji strony.

W inspektorze zobaczysz hierarchię (drzewo) elementów: każdy blok znajduje się wewnątrz innego, większego kontenera. Dla zakładek produktu takim rodzicem jest blok o ID #hotengine-shop-content-tabs.

Dlatego Twoja ścieżka CSS powinna wyglądać tak: #hotengine-shop-content-tabs #tabs-1.

Taki zapis mówi przeglądarce: „Znajdź blok o ID tabs-1, ale tylko ten wewnątrz rodzica hotengine-shop-content-tabs”.

KROK 1: Zapytanie do AI

Podaj AI tekst i poproś o ostylowanie, wskazując odpowiednie ID.

                "Mam tekst opisu produktu. Ostyluj go ładnie. Rozdziel CSS i HTML. Użyj jasnej stylistyki. Wygeneruj wynik w dwóch blokach: CSS wewnątrz <style> dla selektora #hotengine-shop-content-tabs #tabs-1 oraz osobno kod HTML tekstu."
            

KROK 2: Test i przeniesienie stylu

Wstaw oba bloki (Style i HTML) do produktu, aby sprawdzić efekt.

Gdy design jest gotowy:

Skopiuj zawartość pomiędzy znacznikami <style> (samych znaczników NIE kopiuj).
Przejdź do Panelu Hotlist > Design strony > Edytor designu > Zakładka CSS.
Wklej kod na samym dole. Możesz dodać komentarz: /*Styl tekstu w zakładce produktu*/

KROK 3: Czyszczenie tekstu (Bardzo ważne!)

Gdy zapiszesz styl w Edytorze designu, usuń go z opisu produktu. Inaczej kod będzie się dublował, co spowolni stronę.

Jak to wygląda:

// BYŁO W PRODUKCIE:
<style> #tabs-1 { background: #000; } </style>
<div class="my-content"> Twój tekst... </div>

// JEST W PRODUKCIE (Poprawnie):
<div class="my-content"> Twój tekst... </div>
(Styl znajduje się teraz w Edytorze designu)

Dzięki temu każda zmiana w CSS w Edytorze automatycznie zaktualizuje wszystkie karty produktów — to szybkie i wygodne.

Ściąga: Struktura i selektory Hotlist.biz

Treści tworzone są wewnątrz elementu #hotengine-content. Używaj tych danych w AI:

Zakładki w produkcie (Tabs)

Ścieżka rodzic + ID:
• Zakładka 1: #hotengine-shop-content-tabs #tabs-1
• Zakładka 2: #hotengine-shop-content-tabs #tabs-2
• Zakładka 3: #hotengine-shop-content-tabs #tabs-3
• Zakładka 4: #hotengine-shop-content-tabs #tabs-4

Pełny opis produktu (nie w zakładce)

Główny blok opisu:
.hotengine-shop-product-desc-block .hotengine-shop-product-description-text

Blog i Artykuły

• Krótki opis w katalogu:
#hotengine-content-blog #page_content .hotengine-blog-page-list-block .contenth .contenth_i

• Pełny tekst artykułu:
#hotengine-content-blog #page_content .contenth .contenth_i

ID i Klasy sekcji

• Strony: #hotengine-content-page
• Blog: #hotengine-content-blog
• Sklep: #hotengine-content-shop

Klasy szczegółowe:
• Kategorie: #hotengine-content-shop.hotengine-content-shop-category
• Kolekcje: #hotengine-content-shop.hotengine-content-shop-collection
• Producenci: #hotengine-content-shop.hotengine-content-shop-producer

Wskazówka: W ten sam sposób możesz stylizować nie tylko opisy, ale też parametry czy sekcje dostawy. Raz skonfigurowany styl pozwoli Ci tworzyć tysiące spójnych produktów.

Zarządzanie stroną
Product Widget
Formularze