Поддерживаемые темы дизайна: Темы семейства Super – Super, Sexy, Prestige, Special (и другие, вышедшие после 20 ноября 2019 года).
В данном руководстве речь пойдёт об этих баннерах.
Два способа
Для достижения цели в теме предусмотрено два способа:
- Через плагин.
- Через доп. параметр.
Разберём оба способа по отдельности.
Баннер через плагин
Для работы вам понадобится плагин Изображение и баннер для категории.
После установки и активации плагина откройте настройки категории и загрузите изображение типа «Баннер» в специальное поле.
Затем зайдите в настройки темы –> секция Плагины и подключите плагин.
Там несколько режимов, попробуйте каждый из них, чтобы понять, какой лучше вам подойдёт.
Баннер через доп. параметр
Загрузку баннера через плагин я называю способом для ленивых, потому что вариант реализации через доп. параметры требует чуть больше телодвижений.
Перед тем как приступить к работе, вам нужно ознакомиться со следующими руководствами:
Теперь когда вы знаете как работать с доп. параметрами и куда загружать изображения, можно продолжить.
Какие доп. параметры предусмотрены
Для работы с баннерами я предусмотрел в теме следующие доп. параметры (это практически те же самые режимы, что вы могли бы выбирать в первом способе через настройки темы).
- cat_banner_title=ссылка на изображение – баннер заголовком
- cat_banner_title_wide=ссылка на изображение – баннер заголовком во всю ширину
- cat_banner_parallax=ссылка на изображение – баннер с параллаксом
- cat_banner_static=ссылка на изображение – статичный баннер
- cat_banner_color_mode=[empty, light, dark] - цветовая схема баннера
- cat_banner_height=300px - высота баннера
Не пугайтесь обилия доп. параметров. Для работы функционала вы можете использовать только один.
Остальные для продвинутого использования – дополняют возможности.
В демо-версиях я использую доп. параметр cat_banner_title_wide (это аналог режима «Фоном заголовка во всю ширину»).
В данном режиме баннер идёт во всю ширину, над всем остальным контентом, включая сайдбар.
При использовании доп. параметра cat_banner_title баннер будет идти наровне с сайдбаром (если он у вас виден).
Использование доп. параметра
Перейдём к делу.
Загрузите в файл-менеджере изображение для баннера и скопируйте ссылку на него.
Как это сделать, написано в этом руководстве.
Теперь откройте настройки категории и в поле «Дополнительные параметры» вставьте следующий код:
cat_banner_title_wide=ссылка_на_изображение
Где ссылка_на_изображение – это ссылка, которую вы скопировали в файл-менеджере.
Получится что-то типа такого:
Я всегда рекомендую выбрасывать из ссылок протоколы (https:// или http://) и название домена.
Т.е. вместо ссылки на изображение
https://vash-site.ru/wa-data/public/site/man-bag.jpg
У вас должна получиться ссылка
/wa-data/public/site/man-bag.jpg
Служебные доп. параметры
cat_banner_color_mode=[empty, light, dark] - цветовая схема баннера
Если вы вам необходимо, изменить цвет заголовка поверх баннера, то можете использовать этот доп. параметр.
Например:
cat_banner_color_mode=dark
Или
cat_banner_color_mode=light
cat_banner_height=300px - высота баннера
Для изменения стандартной высоты баннера (300px) используйте этот доп. параметр.
11 комментариев
При параметре cat_banner_parallax= баннер остаётся статичным. Так и должно быть?
Да.
Чтобы добавить параллакс эффект, нужно добавить доп. параметр
Стоит вот так:
cat_banner_height=350px
cat_banner_parallax=/wa-data/public/site/banners/gor.jpg
cat_banner_parallax_value=300
Баннер всё равно статичный. Может что-нибудь неправильно?
Кажется я напутал в руководстве.
Я не заносил доп. параметр cat_banner_parallax_value в тему.
Т.е. если вы поставили в настройках parallax_value=1, то он будет статичным.
Ничего не менял, стоит 200 в настройках
С вашими параметрами он не статичный.
Он чуть-чуть «параллаксится».
Всё понял, спасибо за разъяснения, ожидал просто что он будет прям весь двигаться)
Ещё момент с очень заметной подгрузкой баннера при использовании параметра cat_banner_title_wide, при загрузке и переходе на страницу видно, что баннер прыгает, смотрится это не очень (изменение размера баннера ситуацию не меняет):
Это связано как раз с эффектом parallax.
Изначально изображение подключается без скрипта.
Потом когда скрипты подгружаются, они его «параллаксят» – оно смещается чуть выше, чтобы при прокрутке страницы смещаться чуть ниже.
Чтобы отключить эффект параллакса, откройте настройки темы и включите отображение скрытых настроек.
Есть ли возможность выравнивать изображение по левому или правому краю, а не только по центру? И возможно ли это разделять для мобильной и десктопной версий сайта?
Скажите пожалуйста: как можно добавить еще одну строчку текста на этот баннер? Сейчас туда подтягивается название категории по умолчанию, а мне надо еще слоган туда поставить.