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

Шаблон "Profit"

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

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

Внимание!

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

 

Блок "Профит карусель (Шаблон Profit)"

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

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

Шаблон "Profit" - 3885
Рисунок 2.

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

Шаблон "Profit" - 3605
Рисунок 3.

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

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

Найдите в коде класс sp-80, затем атрибут src
Рисунок 4.

В какую сторону скрывается текст на слайде при анимации (найдите в коде класс data-hide-transition) (рис. 5). Возможные варианты: up, down, left, right.

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

Из какой стороны появляется текст при анимации (найдите в коде класс data-show-transition) (рис. 6). Возможные варианты: up, down, left, right.

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

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

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

Время задержки анимации на конкретном элементе (в милисекундах), атрибут data-show-delay (рис.8).

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

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

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

Стили:

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

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

 

Блок "Профит преимущества (Шаблон Profit)

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

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

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

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

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

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

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

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

Ссылка на видео (рис.14).

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

Внимание!

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

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

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

Текст блока (рис.16).

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

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

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

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

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

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

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

 

Блок "Профит СБ с некоторыми категориями (Шаблон Profit)"

Шаблон "Profit" - 6592
Рисунок 20.

Для редактирования блока перейдите в раздел "Дизайн" - "Страницы и блоки" - "Блоки", найдите в списке блок с названием "Профит СБ с некоторыми категориями (Шаблон Profit)" и с ключом доступа "ProfitSBwithSomeCategories" (рис.21), после чего перейдите в его редактирование:

Шаблон "Profit" - 3310
Рисунок 21.

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

Шаблон "Profit" - 3018
Рисунок 22.

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

Размер и цвет заголовка в блоке (рис.23).

Шаблон "Profit" - 5482
Рисунок 23.

Размер и цвет текста под заголовком блока (рис.24).

Шаблон "Profit" - 3740
Рисунок 24.

Кнопка "подробнее" - изменить можно размер текста, цвет кнопки, размеры кнопки (рис.25).

Шаблон "Profit" - 2768
Рисунок 25.

Кнопка "подробнее" - при наведении (размер, цвет) (рис.26).

Шаблон "Profit" - 2252
Рисунок 26.

При наведении на блок меняется цвет заголовка и появляется прозрачность блока у картинки (рис.27).

Шаблон "Profit" - 6030
Рисунок 27.

В самом блоке можно изменить заголовок (рис.28 п.1), текст под заголовком (рис.28 п.2), текст кнопки (рис.28 п.3).

Шаблон "Profit" - 2903
Рисунок 28.

Фоновое изображение у блока (рис.29), предварительно загрузите его на сайт.

Шаблон "Profit" - 4490
Рисунок 29.

Ссылка куда ведет кнопка подробнее и весь блок (рис.30).

Шаблон "Profit" - 5507
Рисунок 30.

Внимание!

Описанные статические блоки доступны только для десктопной версии, в мобильной версии шаблон стандартный.

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

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

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

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

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

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

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

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

Мы используем cookies. Подробнее...
0