Правая панель “Фон контейнера и несколько фонов”

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

Цвет в качестве фона

Что бы задать цвет в качестве фона выберите нужный цвет в палитре или введите его значение вручную. Предварительно включите данную опцию, поставив галку в чекбоксе.

Внимание! Если вы включите цвет у фона, он перекроет все остальные фоны элемента. Если вам необходим определенный цвет в качестве одного из нескольких фонов элемента, создайте его через градиент, выбрав одинаковые цвета у “флажков”.

Палитра

Кнопка “1” сбрасывает значение цвета. Панель слева необходима для выбора нужной цветовой гаммы. Панель справа задает прозрачность цвета. Панель внизу позволяет сохранять часто используемые цвета.

Градиент в качестве фона

Второй вариант фона для блока это градиент. Градиент может состоять из двух и более цветов. Что бы добавить “флажок” с цветом два раза нажмите на полосу с выбором интенсивности цвета.

Что бы удалить “флажок” просто нажмите на него 2 раза и в открывшейся панели нажмите на кнопку “удалить”. Цвета градиента так же могут быть прозрачными.

Градиент может быть линейным и радиальным. Что бы переключаться между режимами используйте кнопки 1 и 2. Каждый тип градиента имеет свои настройки, и вы легко можете с ними экспериментировать.

Так же у градиента есть 2 опции:

  1. - Кнопка поворота градиента, которая при активации будет переворачивать градиент на 180 градусов.
  2. - Кнопка зацикливания градиента. При активации, градиент будет бесконечно повторяться.

Градиент в качестве фона

Одна из самых распространенных функций. Применять данный функционал рекомендуется не только для кнопок, но и для контейнеров. Например, если вы хотите вставить фотографию в качестве фона, а затем разместит ь на ней какой-либо контент. Лучше вставить ее в качестве фона, а не с помощью виджета “картинка”. В случае, когда требуется сделать адаптивный блок с фоновой картинкой, так же лучше использовать данный функционал. При работе с анимацией так же чаще всего пользуются именно фоном, чем виджетом

Ниже подробнее разберем функционал:

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

  1. - Загрузить сразу с ПК
  2. - Загрузить с помощью каталога изображений

После этих действий в зависимости от типа и назначение фонового изображения установите настройки фона.

Выберите положение фона (1) и подкорректируйте его при необходимости с помощью бегунков справа (2). Так же установите правила повторения фона, либо запретите его (3).

Следующим важным функционалом является “размер фона”.

Он может принимать 3 значения:

Auto: Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.

Cover: Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

Contain: Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Следующая полезная функция – это возможность зафиксировать фон. При активации данной опции фон будет зафиксирован при прокрутке страницы. И будет создавать эффект похожий на эффект паралакса. Рекомендуется использовать данный функционал, как альтернативу данному эффекту на мобильных версиях и планшетах для ускорения загрузки страницы.

Внимание! Когда фон один, градиент и картинка не будет работать до тех пор, пока вы не активируете его, нажав на красную иконку с глазом.

Градиент в качестве фона

Создать новый фон вы можете, введя его название в поле и нажав на кнопку “плюс”. Каждый отдельный фон можно включить и отключить с помощью иконки ”глаза” слева.

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

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

Внимание! Цвет не является фоном. При его активации он перекроет все фоны элемента. Если необходимо задать цвет в качестве одного из фонов, сделайте это через градиент. Галку “цвет” в комбинации с другими фонами рекомендуется использовать в случае необходимости из затемнения или осветления цветом. (Выберите цвет и задайте у него прозрачность).

Пример применения нескольких фонов на кнопках: