Основные блоки сайта и способы изменения дизайна

Основные блоки сайта

/*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*/

• Страницы - #hotengine-content-page
• Каталог статей - #hotengine-content-blog
• Каталог товаров - #hotengine-content-shop
• Каталог товаров (производители) - #hotengine-content-shop
• Каталог товаров (коллекции) - #hotengine-content-shop

• Каталог товаров - .hotengine-content-shop-category
• Каталог товаров (коллекции) - .hotengine-content-shop-collection
• Каталог товаров (производителии) - .hotengine-content-shop-producer
• Каталог статей - .hotengine-content-blog-category

Как менять дизайна сайта

Как создать собственный дизайн Шапки сайта?

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

• Иконка Корзины с ее содержимым
• Иконка «Добавить в корзину»
• Иконка «Добавить в избранное»
• Иконка «Сравнение товаров» с ее содержимым
• Виджеты

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

Как сбросить дизайн?

CSS стили

• CSS перевод текстовых значений [RU]
• CSS перевод текстовых значений [EN]
• CSS перевод текстовых значений [UA]
• CSS перевод текстовых значений [DE]
• CSS перевод текстовых значений [ES]
• CSS перевод текстовых значений [FR]
• CSS перевод текстовых значений [KK]
• CSS перевод текстовых значений [BE]
• CSS перевод текстовых значений [RO]
• CSS перевод текстовых значений [TR]
• CSS перевод текстовых значений [IT]
• CSS перевод текстовых значений [SK]
• CSS перевод текстовых значений [DA]
• CSS перевод текстовых значений [PL]
• CSS перевод текстовых значений [ZH]
• CSS перевод текстовых значений [HI]
• CSS перевод текстовых значений [AR]
• CSS перевод текстовых значений [PT]
• CSS перевод текстовых значений [BN]

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

<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>

<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>

Шаблоны

Редактор

Оформление текста на Hotlist.biz с помощью ИИ