Шаблон "ZEN"

В данной статье мы рассмотрим особенности шаблона и оформление блоков на главной странице:

• Особенности шаблона "Zen"
• Статические блоки на главной странице
  • "Статический блок на главной внизу 1(шаблон Zen)"
  • "Статический блок на главной внизу 2(шаблон Zen)"
  • "Блок над футером на главной (шаблон Zen)"
• Рекомендуемые размеры изображений

Внимание!

Шаблон "Zen" может быть установлен только на магазин версии 6.0.7 и выше и выше. Если Ваш магазин версии ниже, пожалуйста, обновите магазин до последней актуальной версии на момент установки шаблона.

Особенности шаблона "Zen"

Стильный и минималистичный дизайн.

Акцент сделан на главную страницу.

Крупные фотографии в карусели на главной странице (рис 1).

Рисунок 1.

Плавное выделение aфотографии товара, при наведении курсора мыши на карточку товара в каталоге (рис 2).

Рисунок 2.

Статические блоки на главной странице

В шаблоне ZEN появилась возможность дополнительно размещать информацию на главной странице магазина, с помощью таких статических блоков как:

"Статический блок на главной внизу 1(шаблон Zen)", ключ доступа: Mainpage-block1 (рис 3).

Рисунок 3.

"Статический блок на главной внизу 2(шаблон Zen)", ключ доступа: Mainpage-block2 ( рис 4).

Рисунок 4.

"Блок над футером на главной (шаблон Zen)", ключ доступа: Mainpage-footer-block (рис 5).

Рисунок 5.

Данные блоки можно редактировать в разделе "Дизайн" - "Страницы и блоки" - "Блоки" (рис 6).

Рисунок 6.

При редактировании данных статических блоков Вы также можете:

• изменять цвет фона
• указать контактные данные
• добавить ссылки на социальные сети

Разберем каждый пункт подробнее.

Изменение цвета фона

Для того, чтобы изменить цвет фона у статического блока, перейдите в редактирование блока - режим "Источник" (рис 7).

Рисунок 7.

Далее необходимо перед закрывающимся </style> добавить соответствующий блоку код:

Для блока "Статический блок на главной внизу 1(шаблон Zen)"

.mainpage-statick1::before {
    content: "";
    display: block;
    position: absolute;
    right: -999999px;
    left: -999999px;
    height: 100%;
    background-color: #f8f8f8;
    z-index: -1;
  }

Для блока "Статический блок на главной внизу 2(шаблон Zen)"

.mainpage-block2::before {
    content: "";
    position: absolute;
    left: -99999px;
    right: -999999px;
    bottom: 0;
    top: 0;
    background: #f8f8f8;
    z-index: -1;
}

Для блока "Блок над футером на главной (шаблон Zen)"

.mainpage-footer-block::before {
        content: "";
    display: block;
    position: absolute;
    right: -999999px;
    left: -999999px;
    height: 100%;
    background-color: #f8f8f8;
    z-index: -1;
  }

background-color: #f8f8f8 - значение #f8f8f8 необходимо изменить на желаемый цвет и сохранить изменения.

Контактные данные

Контактные данные вы можете указать в статическом блоке "Блок над футером на главной (шаблон Zen)". Перейдите в редактирование блока - режим "Источник", далее необходимо найти следующие строки и заменить на свои данные (рис.8).

Рисунок 8.

Ссылки на социальные сети

Ссылки на социальные сети вы можете указать в статическом блоке "Блок над футером на главной (шаблон Zen)". Перейдите в редактирование блока - режим "Источник", далее необходимо найти следующие строки, вместо знака # указать ссылки на свои соц. сети (рис.9).

Рисунок 9.

Рекомендуемые размеры изображений

Для изображений используйте указанные размеры:

Товар. Большая фотография - 1600х2200 px

Товар. Средняя фотография - 620х650 px

Товар. Маленькая фотография - 250х360 px

Товар. Самая маленькая фотография 140х140 px

Готово. Мы рассмотрели основные блоки и особенности шаблона "Zen".