В данной заметке будут рассмотрены дополнительные параметры для товаров, которые отображаются внутри главного слайдера тем дизайна семейства Super (Super, Prestige, Special, Sexy, Hand Made и более новых тем).
Дополнительные параметры и файл-менеджер
Все функции управляются при помощи дополнительных параметров.
Если вам не понятно о чём идёт речь, ознакомьтесь со следующими инструкциями:
- Для чего нужны доп. параметры и как их добавлять
- В некоторых случаях нужно будет указывать ссылки на загруженные изображения,
поэтому ознакомьтесь с этой инструкцией тоже: Как пользоваться Файл-менеджером
Начальное состояние слайда товара
В начальном состоянии, когда у товара нет доп. параметров, он отображается примерно так:
Фон сайта, цвет шрифта сайта, изображение товара.
Список всех возможных доп. параметров
Ниже приведён список всех возможных доп. параметром для товаров в слайде.
После списка следует подробный обзор каждого из них.
- slide_bg – изображение фона
- slide_bg_overlay – слой наложения поверх фона
- slide_bg_overlay_op – прозрачность слоя наложения поверх фона
- slide_text_color – цвет шрифта контента слайда
- slide_bg_only – скрытие маленького изображения товара в слайде.
Примеры использования всех доп. параметров:
slide_bg=/wa-data/public/site/images/We-The-Free-Clare-tee-bg.jpg slide_bg_overlay=#000000 slide_bg_overlay_op=0.2 slide_text_color=#ffffff slide_bg_only=1
Фон слайда товара
С фоном товар может выглядеть интереснее.
Это может быть какая-нибудь текстура, которая прибавит товару антуража, либо альтернативное изображение товара.
Для работы с фоном слайда в теме предусмотрены следующие доп. параметры:
- slide_bg – изображение фона
- slide_bg_overlay – слой наложения поверх фона
- slide_bg_overlay_op – прозрачность слоя наложения поверх фона
Для чего нужен слой наложения
Главная задача слоя наложения – обеспечить читаемость текста в слайде.
Если изображение фона слишком тёмное и вы используете тёмный шрифт, или наоборот изображение светлое и вы используете светлый шрифт, то он может быть нечитаемым.
Либо просто "приглушить" фон.
Примеры доп. параметров для фона
slide_bg=/wa-data/public/site/images/We-The-Free-Clare-tee-bg.jpg slide_bg_overlay=#000000 slide_bg_overlay_op=0.2
slide_bg=ссылка на загруженное изображение для фона
Куда загружать изображение и как получить ссылку читайте в заметке: Как пользоваться Файл-менеджером
slide_bg_overlay=#00000 – здесь #000000 – это HEX код чёрного цвета. Подобрать код цвета можно в этом сервисе.
slide_bg_overlay_op=0.2 – 0.2 – это прозрачность слоя наложения, где 1 – это 100% полностью НЕпрозрачный слой (изображения фона будет не видно), а 0 – полностью прозрачный слой (слоя будет не видно).
Промежуточные значения указываются через точку, например 0.2
Цвет шрифта контента слайда
Если вам нужно использовать другой цвет шрифта для заголовка, краткого описания, и цены товара, то можно использовать доп. параметр slide_text_color
Пример доп. параметра:
slide_text_color=#ffffff
Где #ffffff – это HEX код белого цвета. Подобрать код цвета можно в этом сервисе.
Убрать маленькое изображение товара в слайде
Если вы используете в качестве фона слайда изображение товара, то вполне вероятно, что мелкое изображение товара станет лишним. В таких случаях следует использовать доп. параметр slide_bg_only
Это доп. параметр "переключатель", не важно какое значение будет записано внутри параметра. Я обычно ставлю 1.
Пример доп. параметра:
slide_bg_only=1
Выравнивание контента слайда по центру
Если после скрытия изображения товара, вам необходимо, чтобы содержание слайда отображалось по центру, то вам нужно создать блок пользовательских стилей (об этом можно прочитать в этой заметке: Блок theme.user_css) и вставить туда этот код:
.home-slider-product-content.uk-width-1-1 .uk-text-left\@s {
text-align:center !important;
}
.home-slider-product-content.uk-width-1-1 .uk-flex {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
0 комментариев