Мастер-класс Быстрый запуск интернет-магазина

Как вам помочь ?

Шаблон "Piter"

Актуально для версии магазина: 6.0

В данной статье рассмотрим настройку оформления блока на главной странице в шаблоне "Piter".

Внимание!

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

 

 Блок "СБ с некоторыми категориями на главной странице"

Блок "СБ с некоторыми категориями на главной странице"
Рисунок 1.

Баннер на главной странице шаблона "Piter" имеет особенность -  он настраивается в статическом блоке, а не в разделе "CMS - Карусель".

Для редактирования блока перейдите в раздел "CMS - Статические блоки", найдите в списке блок с названием "СБ с некоторыми категориями на главной странице" и с ключом доступа "PiterMainCategories" (рис. 2), после чего перейдите в его редактирование:

Найдите в списке блок с названием "СБ с некоторыми категориями на главной странице" и с ключом доступа "PiterMainCategories"
Рисунок 2.

Нажмите на кнопку "Источник", чтобы перейти в редактирование HTML-кода (рис. 3):

Нажмите на кнопку "Источник", чтобы перейти в редактирование HTML-кода
Рисунок 3.

Теперь рассмотрим, какие параметры Вы можете изменять для настройки блока на главной странице:

1) Скругления углов для блоков

Скругление углов для блоков
Рисунок 4.

2) Прозрачность видео без анимации и без наведения курсора

Прозрачность видео без анимации и без наведения курсора
Рисунок 5.

3) Стили текста, который размещается в блоке

Стили текста, который размещается в блоке
Рисунок 6.

4) Фон на блоке под затемнением

Фон на блоке под затемнением
Рисунок 7.

5) Прозрачность видео с эффектом анимации без наведения курсора

Прозрачность видео с эффектом анимации без наведения курсора
Рисунок 8.

6) Фон поверх видео без наведения

Фон поверх видео без наведения
Рисунок 9.

7) Рамка вокруг блока с текстом без наведения

Рамка вокруг блока с текстом без наведения
Рисунок 10.

8) Стили заголовка и его положение без наведения

Стили заголовка и его положение без наведения
Рисунок 11.

9) Стили и положение рамки блока и текста внутри без наведения

Стили и положение рамки блока и текста внутри без наведения
Рисунок 12.

10) Эффект заголовка при наведении

Эффект заголовка при наведении
Рисунок 13.

11) Эффект и положение рамки блока и текста внутри без наведения

Эффект и положение рамки блока и текста внутри без наведения
Рисунок 14.

12) Фон на видео при наведении

Фон на видео при наведении
Рисунок 15.

13) Прозрачность видео при наведении

Прозрачность видео при наведении
Рисунок 16.

14) Путь к изображению, которое  показывается до наведения на видео и его стили

Путь к изображению, которое  показывается до наведения на видео и его стили
Рисунок 17.

15) Путь к видео, которое отображается после наведения

Путь к видео, которое отображается после наведения
Рисунок 18.

Заметка

Должны быть загружены видео как минимум 3 форматов webm, mp4, ogg. Рекомендуемый размер видео не более 3-5 мб.

16) Надпись заголовка

Надпись заголовка
Рисунок 19.

17) Ссылка на категорию куда переходят по клику

Ссылка на категорию куда переходят по клику
Рисунок 20.

Внимание!

"font-size:0" прописан для валидации, если необходимо использование ссылки, то стиль нужно сохранить.

Важно

Свойство  (рис. 20 п.2) позволяет показывать картинку вместо видео и осуществляет задержку запуска, (рис. 20 п.3) скрипт для проигрывания видео при наведении на блок и остановке, после передвижения курсора за пределы блока. Данные настройки не рекомендуется изменять.

Готово. Мы рассмотрели настройку блоков на главной странице для шаблона "Piter".

Другие статьи по теме

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Благодарим за отзыв.

Как мы можем улучшить статью?

Не нашли нужную статью? Предложить тему

Не нашли нужную статью?

Благодарим за отзыв.

Тэги: шаблон, Питер,видео в подвале сайта, категории на главной, Piter