Изменение блоков сайта и редактор дизайна. Основные блоки сайта.

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

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

/*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-news
• Каталог статей - #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
• Каталог новостей - .hotengine-content-news-category

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

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

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

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

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

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

CSS стили

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

<script type="text/javascript">
  $(function(){
  let newproducer = $(".hotengine-shop-product-desc-block .hotengine-shop-product-producer").html();
if(typeof newproducer !== typeof undefined && newproducer !== false && newproducer !='undefined' && newproducer !=''){
  $(".hotengine-shop-product-desc-block .hotengine-shop-product-producer").hide();
  $(".hotengine-shop-product-sku-box").after('<span class="hotengine-shop-product-producer">'+newproducer+'</span>');
 }
});
</script>

<script type="text/javascript">
  $(function(){
  $(".element").wrap("<div class='new'></div>");

});
</script>

Шаблоны

Редактор