Зміна блоків сайту та редактор дизайну. Основні блоки сайту.

☰

← Назад

Зміна блоків сайту та редактор дизайну

Основні блоки сайту та способи зміни дизайну

Основні блоки сайту

ID та Class'и основних блоків сайту.

#hotengine-wrapper

#hotengine-header

GRID *

#hotengine-content-container

.hotengine-wrap-container-side-left	.menu_position_top	.hotengine-wrap-container-side-right
	#hotengine-content .hotengine-wrap-container-side-center «тип сторінки»
	.menu_position_buttom

#hotengine-footer

* - Основний внутрішній блок з контентом реалізований за допомогою CSS Grid:

CSS Grid

Code: CSS

/*CONTENT GRID*/

#hotengine-content-container { display: grid;
  grid-template-areas:"container-left container-center container-right";
  grid-template-columns:0% 1fr 0%;
  margin:0 auto; width:100%;
}

#hotengine-content-container[data-hasside="both"]{
  grid-template-areas:"container-left container-center container-right";
  grid-template-columns: auto 1fr auto;
}
#hotengine-content-container[data-hasside="left"]{
  grid-template-areas:"container-left container-center";
  grid-template-columns: auto 1fr;
}
#hotengine-content-container[data-hasside="right"]{
  grid-template-areas:"container-center container-right";
  grid-template-columns: 1fr auto;
}

.hotengine-wrap-container-side-center { grid-area: container-center; vertical-align:top; margin:0 auto; width:100%;}
.hotengine-wrap-container-side-left   { grid-area: container-left; vertical-align:top; margin:0 auto; width:auto; max-width:270px;  }
.hotengine-wrap-container-side-right  { grid-area: container-right; vertical-align:top; margin:0 auto; width:auto; max-width:270px; }

.menu_position_top { display:block;    width:100%;  }
.menu_position_buttom { display:block; width:100%; }

@media (max-width:767px){
#hotengine-content-container[data-hasside="both"]{
  grid-template-areas:"container-center container-left container-right";
  grid-template-columns: 1fr auto auto;
}
#hotengine-content-container[data-hasside="left"]{
  grid-template-areas:"container-center container-left";
  grid-template-columns: 1fr auto ;
}
#hotengine-content-container[data-hasside="right"]{
  grid-template-areas:"container-center container-right";
  grid-template-columns: 1fr auto ;
}
}
/*CONTENT GRID*/

data-hasside - додатковий атрибут елемента #hotengine-content-container, який повідомляє про наявність лівого та правого блоку.

[data-hasside="left"] - присутній лівий блок/меню
[data-hasside="right"] - присутній правий блок/меню
[data-hasside="both"] - присутній лівий та правий блок/меню

Всередині даних блоків буде розташовуватися створений вами контент або меню.
Кожен «тип сторінки» виділений відповідним блоком, з присвоєнням певного ID.
Наприклад:

Сторінки - #hotengine-content-page
Каталог статей - #hotengine-content-blog
Каталог товарів - #hotengine-content-shop
Каталог товарів (виробники) - #hotengine-content-shop
Каталог товарів (колекції) - #hotengine-content-shop

Даний блок створюється всередині елемента #hotengine-content

Крім того, на сторінках категорій, де є дочірній список сторінок, додається class:

Каталог товарів - .hotengine-content-shop-category
Каталог товарів (колекції) - .hotengine-content-shop-collection
Каталог товарів (виробники) - .hotengine-content-shop-producer
Каталог статей - .hotengine-content-blog-category

Для Блоків/Меню списку статей створюється додатковий блок (можна вимкнути в налаштуваннях):
Меню останніх статей - #hotengine-content-menu-lastblogpost

Як змінювати дизайн сайту

Ви можете змінити дизайн сайту в Редакторі дизайну. За його допомогою можна задати основні кольори елементів, розміри та положення деяких елементів, змінити Шапку сайту та інше.
За допомогою вказівника миші ви можете змінити висоту шапки сайту, розмір логотипу, положення головного меню та слогана.

Як створити власний дизайн Шапки сайту?

Створіть Блок/Меню з розташуванням в Header (Шапці сайту) та розмістіть в ньому необхідні елементи. Наприклад, Div з телефоном та Div з написом про компанію (не забудьте присвоїти їм відповідний class або id, для подальшого звернення до них за заданими значеннями).
Відкрийте редактор дизайну, задайте положення та властивості дизайну до створених елементів в CSS стилях.
Таким же чином можна створювати будь-які графічні елементи на сайті та розташовувати їх в потрібних вам місцях.
Використання вбудованих елементів та коротких кодів для верстки.
Крім створення власних елементів, на платформі BooStore.pro існує ряд заздалегідь заданих класів та ID, які дозволяють швидко та зручно використовувати базові елементи магазину без необхідності писати їх з нуля.

Які елементи вже мають вбудовані класи або ID:

Кнопка «Додати в кошик»
Кошик
Іконка «Додати в обране»
Іконка «Додати в порівняння»
Всі базові елементи картки товару: ціна, наявність, характеристики, блок з описом, вкладки в картці товару
Заголовки сторінок
Віджети з товарами
Мобільне меню
Заголовки різновидів товару
Кожна сторінка має унікальний клас або ID, а батьківський елемент id="hotengine-wrapper" містить ідентифікатор поточної відкритої сторінки.

Більшість функціональних елементів на сайті вже мають унікальні ідентифікатори (ID) або класи, які не будуть змінені при оновленнях платформи, і їх можна використовувати при створенні власної верстки або дизайну сторінок.

Як використовувати вбудовані елементи у своєму дизайні:
Для вставки деяких елементів у ваш власний макет або шаблон можна використовувати короткі коди.
Наприклад:

Іконка Кошика з його вмістом
Іконка «Додати в кошик»
Іконка «Додати в обране»
Іконка «Порівняння товарів» з її вмістом
Віджети

Використання коротких кодів дозволяє швидко та коректно інтегрувати стандартні елементи магазину у вашу власну верстку без помилок.

Рекомендації щодо CSS:

Прописуйте CSS-стилі в редакторі дизайну платформи.
Файл автоматично мініфікується (стискається), що прискорює роботу сайту та покращує SEO.
Можна створювати індивідуальні стилі для будь-яких елементів, включаючи вбудовані ID та класи, а також для власних блоків, щоб повністю контролювати зовнішній вигляд сайту.

За допомогою вбудованих класів, ID та коротких кодів ви можете створювати професійні та унікальні макети, комбінуючи свої блоки з готовими елементами платформи. Це дозволяє скоротити час розробки та гарантувати коректне відображення всіх функцій магазину.

Як скинути дизайн?

Для того щоб повернути значення за замовчуванням, відкрийте Редактор дизайну та видаліть поточне значення для потрібного елемента або натисніть кнопку "Повернути значення за замовчуванням".

CSS стилі

Ви можете використовувати CSS для оформлення будь-яких елементів на сайті. Для вибору елемента натисніть правою кнопкою миші по елементу та "Проінспектувати елемент". Скопіюйте ID або Class об'єкта та вставте у вкладку «CSS стилі» в редакторі дизайну.

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

CSS стилі за замовчуванням: CSS файл Основні блоки сайту
CSS стилі текстових значень:

Шаблонізація

На даний момент ми використовуємо спеціальну розмітку для елементів, помічені класи "hotengine-", впорядковану структуру відображення елементів, а також приховані дані. Практично всі написи на сайті реалізовані за допомогою CSS after елементів.
Якщо зміщення та позиціонування елементів не вдається зробити за допомогою CSS, то ви можете використовувати Javascript та переміщати об'єкти по сторінці.
Зміна положення деяких елементів за допомогою Javascript.

Code: html

<script>
document.addEventListener("DOMContentLoaded", () => {
    const el = document.querySelector(`.hotengine-shop-product-desc-block .hotengine-shop-product-producer`);
    const newproducer = el ? el.innerHTML : null;

    if (newproducer && newproducer !== "" && newproducer !== "undefined") {
        el.style.display = "none";
        const skuBox = document.querySelector(`.hotengine-shop-product-sku-box`);
        if (skuBox) {
            skuBox.insertAdjacentHTML("afterend", `${newproducer}`);
        }
    }
});
</script>

В даному прикладі ми перевіряємо, чи вказаний виробник. Якщо виробник вказаний, то приховати його та розмістити після поля "Код товару".

"Обгортання" елементів за допомогою Javascript.

Code: html

<script>
  document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll(`.element`).forEach(el => {
        const wrapper = document.createElement("div");
        wrapper.className = "new";
        el.parentNode.insertBefore(wrapper, el);
        wrapper.appendChild(el);
    });
});
</script>

В результаті об'єкт з класом element буде "обгорнутий" в div з класом new (<div class="new"><span class="element"></span></div>)

Шаблони

Крім базових стилів в редакторі дизайну ви можете встановлювати готові шаблони.
Каталог шаблонів - https://templates.boostore.pro/

Редактор

На платформі передбачений HTML редактор TinyMCE, через який можна здійснювати оформлення сторінок, карток товарів, статей та блоків/меню. В редакторі реалізована вставка зображень та готових «Кодів» для відображення рубрик магазину, списку товарів, списку статей на будь-які сторінки. Вбудовані коди дозволяють вставляти, наприклад, на головну сторінку список певних товарів із заданими параметрами (генератор списку товарів окрема інструкція) або список категорій, у тому числі в Блоки/Меню (Віджет з категоріями магазину).

Демонстрація редактора

Оформлення тексту на BooStore.pro за допомогою ШІ

Оформлення сторінок і стилів за допомогою ШІ

Цей гайд навчить вас створювати професійний дизайн для ваших товарів, використовуючи Штучний Інтелект (Gemini, ChatGPT) та вбудовані інструменти платформи.

1. Теорія: Базові поняття (CSS, Класи, ID)

Перш ніж давати завдання ШІ, потрібно зрозуміти, як браузер сприймає дизайн.

CSS (Cascading Style Sheets) Це «мова краси». Якщо HTML — це скелет сторінки, то CSS — це одяг, макіяж та зачіска. Він каже браузеру: «Зроби цей текст червоним, а цю кнопку круглою».

ID (#) — Ідентифікатор Це унікальне ім'я елемента. Як номер паспорта. На одній сторінці не може бути двох однакових ID. У CSS позначається решіткою.
Приклад: #tabs-1

Class (.) — Клас Це групове ім'я. Як форма у школярів. Можна застосувати один клас до десятків елементів. У CSS позначається крапкою.
Приклад: .my-price-style

Як знаходити елементи (Інспектор браузера)

Щоб ШІ знав, що саме фарбувати, потрібно знайти ID блоку в Hotlist:

Відкрийте картку товару на сайті.
Натисніть правою кнопкою миші на назву вкладки або текст.
Виберіть «Переглянути код» (або Inspect).
Відкриється панель. Шукайте рядок, який підсвічує потрібний блок. Наприклад:
<div id="tabs-1">...</div>

Важливо (Принцип вкладеності): На платформі BooStore.pro бажано використовувати стилі у зв'язці з «батьківським» блоком. Це гарантує, що ваше оформлення застосується саме до потрібної частини сторінки і не «зламає» дизайн в інших розділах сайту.

В інспекторі браузера ви можете побачити ієрархію (дерево) елементів: кожен блок знаходиться всередині іншого, більшого контейнера. Для вкладок у картці товару таким головним контейнером (батьком) є блок з ідентифікатором #hotengine-shop-content-tabs.

Тому, щоб оформити, наприклад, першу вкладку, ваш шлях у CSS має виглядати так: #hotengine-shop-content-tabs #tabs-1.

Такий запис буквально каже браузеру: «Знайди блок з ID tabs-1, але тільки той, що знаходиться всередині батька hotengine-shop-content-tabs».

КРОК 1: Запит до ШІ

Даємо ШІ текст і просимо створити оформлення. Обов'язково вказуємо знайдений ID.

                "У мене є текст опису товару. Оформи його красиво для сайту. Розділи стилі та HTML. Використовуй світлу стилістику. 
                Видай результат у двох блоках коду: стиль всередині тегу <style> для селектора #hotengine-shop-content-tabs #tabs-1 та окремо HTML код самого тексту."
            

КРОК 2: Перевірка та перенесення стилю

Ви отримали два блоки. Спочатку вставте їх обидва (і Style, і HTML) у товар на сайті, щоб переконатися, що все красиво.

Коли дизайн затверджено:

Скопіюйте все, що знаходиться між тегами <style> та </style> (самі теги копіювати НЕ потрібно).
Перейдіть до Панелі управління Hotlist > Дизайн сайту > Редактор дизайну > Вкладка CSS.
Прокрутіть у самий низ і вставте ваш код. Збережіть. Можна додати коментар: /*Стиль тексту у вкладці товару*/

КРОК 3: Очищення тексту (Критично важливо!)

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

Як це виглядає:

// БУЛО В КАРТЦІ ТОВАРУ:
<style> #tabs-1 { background: #000; } </style>
<div class="my-content"> Ваш текст... </div>

// СТАЛО В КАРТЦІ ТОВАРУ (Правильно):
<div class="my-content"> Ваш текст... </div>
(Стиль тепер живе в Редакторі дизайну)

Це дає перевагу: тепер при внесенні будь-яких правок у CSS в Редакторі дизайну, стиль автоматично оновиться в усіх картках товару — це швидко та зручно.

Шпаргалка: Структура та селектори BooStore.pro

Весь ваш контент створюється всередині елемента #hotengine-content. Використовуйте ці дані для точних запитів у чат ШІ:

Вкладки в картці товару (Tabs)

Для кожної вкладки використовуйте зв'язку батька та ID:
• Вкладка 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 з чату ШІ.

← Назад

Короткий огляд можливостей | | Рекомендації з просування | Скрипти для використання на сайтах