Свойства инфоблока "Выбор цвета" и "Градиент"

Гибкое управление цветом и градиентами прямо в свойствах инфоблока

Работа с визуальным оформлением элементов на сайте часто упирается в технические ограничения. Когда нужно задать фон для блока, кнопки или раздела, приходится либо вручную прописывать CSS-код, либо использовать сторонние редакторы. Этот модуль решает задачу иначе: он встраивает инструмент выбора цвета и настройки градиента прямо в свойства инфоблока. Больше не нужно выходить из административной панели или просить разработчика добавить новый оттенок — всё делается стандартными средствами Битрикса.

Система работает на уровне свойств элемента. Вы добавляете новое свойство, выбираете тип «Цвет» или «Градиент» — и получаете визуальный интерфейс для настройки. Это особенно удобно, когда сайтом управляет контент-менеджер без глубоких технических знаний: он просто кликает на палитру и выбирает нужный тон. Никаких лишних полей, сложных настроек или риска сломать вёрстку случайной строчкой кода.

Точная настройка градиента: от начального цвета до прозрачности

Градиент — мощный инструмент дизайна, но его реализация часто требует возни с CSS-функциями вроде linear-gradient. Модуль превращает эту задачу в наглядную форму. Вы задаёте начальный и конечный цвет градиента — это базовая пара, на которой строится весь переход. Система сама рассчитывает промежуточные оттенки, а вам остаётся лишь выбрать визуально приятное сочетание.

Но на этом возможности не заканчиваются. Для каждого из двух цветов градиента можно отдельно настроить прозрачность. Это позволяет создавать эффекты наложения: например, сделать фон полупрозрачным, чтобы сквозь него проступало изображение или текст. Прозрачность регулируется ползунком, так что вы видите результат сразу, без переключения между вкладками и сохранения черновиков.

Управление направлением и углом наклона градиента

Один и тот же набор цветов может выглядеть совершенно по-разному в зависимости от того, как расположен переход. Вертикальный градиент создаёт ощущение глубины, диагональный — динамики, а горизонтальный — спокойствия. Модуль даёт вам полный контроль над этим параметром: вы можете задать любой угол наклона градиента от 0 до 360 градусов.

На практике это означает, что вы легко адаптируете дизайн под конкретную задачу. Для шапки сайта можно сделать мягкий вертикальный переход сверху вниз, для кнопки действия — резкий диагональный, для фона карточки товара — почти незаметный горизонтальный. Все настройки применяются в реальном времени, поэтому вы сразу видите, как изменение угла влияет на общую картину.

Мгновенный предпросмотр результата при редактировании

Одна из самых раздражающих ситуаций в работе с визуальными элементами — необходимость сохранять изменения, перезагружать страницу и только потом оценивать результат. Этот модуль избавляет от лишних действий. Когда вы редактируете свойство цвета или градиента, система показывает итоговый вид прямо в форме редактирования элемента.

Предпросмотр работает в реальном времени: вы двигаете ползунок прозрачности, меняете угол наклона или подбираете другой оттенок — и сразу видите, как выглядит финальный вариант. Это экономит время и снижает количество ошибок. Вам не нужно держать в голове, как сочетаются цвета, или гадать, какой угол даст нужный эффект. Всё наглядно, как в графическом редакторе, но прямо внутри административной панели Битрикса.

Простая интеграция и реальная польза для контент-менеджеров

Модуль не требует установки дополнительных библиотек или изменения шаблонов сайта. Он добавляет новые типы свойств в инфоблоки, и они сразу становятся доступны для использования. Если у вас уже есть каталог товаров, новостной раздел или портфолио проектов, вы можете добавить свойство цвета или градиента в любую существующую сущность без переписывания кода.

Главное преимущество — скорость работы. Вместо того чтобы открывать дизайн-систему, копировать hex-коды или просить верстальщика поправить стили, вы просто редактируете элемент и меняете его внешний вид за пару кликов. Это особенно ценно для сайтов с часто обновляемым контентом: акции, сезонные предложения, баннеры, карточки категорий. Инструмент делает визуальное оформление гибким и доступным для любого сотрудника, работающего с админкой.