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

Шаблон "Profit"

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

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

Внимание!

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

 

Блок с баннером

Блок с баннеромРисунок 1. Блок с баннером.

Баннер на главной странице шаблона "Profit" имеет особенность - он настраивается в статическом блоке, а не в разделе "CMS - Карусель". Для редактирования блока перейдите в раздел "CMS - Статические блоки", найдите в списке блок с названием "Профит карусель" и с ключом доступа "ProfitCarousel" (рис.2), после чего перейдите в его редактирование:

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

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

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

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

1. Высота самого баннера (для всех слайдов; в пикселях) (рис. 4, 5):

Высота самого баннера (для всех слайдов; в пикселях)
Рисунок 4. Высота баннера.

Найдите в коде класс slider-pro, затем атрибут style, затем параметр height:

Найдите в коде класс slider-pro, затем атрибут style, затем параметр height
Рисунок 5. Параметр высоты баннера.

2. Настройки отдельного конкретного слайда:

2.1. Ссылка на изображение (рис. 6). Найдите в коде класс sp-image, затем атрибут src.

Найдите в коде класс sp-image, затем атрибут src
Рисунок 6. Ссылка на изображение.

2.2. В какую сторону скрывается текст на слайде при анимации и с какой стороны он появляется (рис.7, 8, 9).

В какую сторону скрывается текст на слайде при анимации и с какой стороны он появляется
Рисунок 7. Текст с анимацией.

2.2.1 В какую сторону скрывается текст на слайде при анимации (найдите в коде класс data-hide-transition) (рис. 8).

В какую сторону скрывается текст на слайде при анимации (найдите в коде класс data-hide-transition)
Рисунок 8. Параметр скрытия текста при анимации.

2.2.2. Из какой стороны появляется текст при анимации (найдите в коде класс data-show-transition) (рис. 9).

Из какой стороны появляется текст при анимации (найдите в коде класс data-show-transition)
Рисунок 9. Параметр появления текста при анимации.

2.3. Расположение элемента с текстом по горизонтали и вертикали (рис. 10, 11, 12).

Элемент с текстом
Рисунок 10. Элемент с текстом.

2.3.1. Расположение элемента с текстом по горизонтали (найдите в коде класс data-horizontal) (рис. 11).

Параметр расположения элемента по горизонтали.
Рисунок 11. Параметр расположения элемента по горизонтали.

2.3.2. Расположение элемента с текстом по вертикали (найдите в коде класс data-vertical) (рис. 12).

Параметр расположения элемента по вертикали.
Рисунок 12. Параметр расположения элемента по вертикали.

2.4. Стиль текстового элемента на конкретном слайде (размер шрифта - font-size, междустрочный интервал - line-height, цвет - color, толщина шрифта - font-weight). Найдите тег h3, затем атрибут style (рис. 13).

Стили текстового элемента.
Рисунок 13. Стили текстового элемента.

2.5. Время задержки анимации на конкретном элементе (в милисекундах). Найдите тег p с классом sp-layer, затем атрибут data-show-delay (рис.14).

Параметр задержки анимации.
Рисунок 14. Параметр задержки анимации.

3. Стили для кнопок на баннере (для всех слайдов) (рис. 15, 16).

Кнопка на баннере.
Рисунок 15. Кнопка на баннере.

Найдите тег style и описание классов .sp-btn и .sp-btn:hover внутри него (рис. 16).

Стили:

  • font-size - размер шрифта
  • color - цвет шрифта
  • height - высота блока
  • line-height - междустрочный интервал
  • width - ширина блока
  • background - цвет фона блока
  • text-align - выравнивание шрифта
  • border - граница блока

Прочие атрибуты не рекомендуется изменять.

Стили кнопки на баннере.
Рисунок 16. Стили кнопки на баннере.

 

Блок с преимуществами (на фоне видео)

Блок с преимуществами.
Рисунок 17. Блок с преимуществами.

Для редактирования блока перейдите в раздел "CMS - Статические блоки", найдите в списке блок с названием "Профит преимущества" и с ключом доступа "ProfitAdvantages" (рис. 18), после чего перейдите в его редактирование:

Редактирование блока.
Рисунок 18. Редактирование блока.

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

Режим "Источник".
Рисунок 19. Режим "Источник".

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

1. Высота самого блока и видео в нём (рис. 20). Вы можете указать свою высоту (рис. 21) и загрузить видео с необходимой высотой. Рекомендуемая минимальная ширина видео - 1920 пикселей (для корректного отображения на большинстве мониторов).

Блок преимуществ с видео.
Рисунок 20. Блок преимуществ с видео.

Найдите класс vide_bg, затем атрибут style, затем параметр height (рис. 21):

Параметр высоты блока.
Рисунок 21. Параметр высоты блока.

2. Ссылка на видео.

Внимание!

Для корректного отображения в большинстве браузеров видео должно быть загружено минимум в 3 форматах - .webm, .mp4, .ogg (рис. 22). Желательно загружать видео размером до 3-5 мегабайт. Если размер видеофайла будет слишком большим, это может значительно замедлить загрузку страницы, что негативно повлияет как на ранжирование в поисковых системах, так и на удобство для пользователей.

Ссылки на видео в разных форматах.
Рисунок 22. Ссылки на видео в разных форматах.

3. Отдельно взятый блок (рис. 23):

Блок.
Рисунок 23. Блок.

3.1. Ссылка на изображение блока (рис. 24).

Ссылка на изображение.
Рисунок 24. Ссылка на изображение.

3.2. Текст блока (рис. 25, 26).

Текст блока.
Рисунок 25. Текст блока.

Редактирование текста.
Рисунок 26. Редактирование текста.

3.3. Стили блока. Найдите класс advantage-main, затем атрибут style (рис. 27)

Стили блока.
Рисунок 27. Стили блока.

3.4. Стили изображения в блоке. Найдите тег img, затем атрибут style (рис. 28)

Стили изображения в блоке.
Рисунок 28. Стили изображения в блоке.

3.5. Стили для текста под изображением. Найдите тег span, затем атрибут style (рис. 29)

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

Всё готово.

На этом настройка двух основных блоков на главной странице шаблона "Profit" завершена.

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

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

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

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

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

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

Тэги: шаблон, профит, profit, оформление, баннер,template, редактирование блоков шаблона, блок с преимуществами,профит, ghjabn

False