Фон

Поле "Фон" добавляет фоновый элемент управления Elementor в пользовательский виджет, созданный с помощью главных аддонов Виджет Строитель. Редакторы выбирают сплошной цвет, изображение или градиент на панели Элементор, и стили переходят к элементу, на который указывает ваш селектор CSS. Он подходит для баннеров, карточек и любого поля, фон которого должен меняться от страницы к странице.

Фон - это поле Pro. бесплатный плагин включает ограниченный конструктор виджетов, и полный набор полей поставляется с Мастер Аддоны Про.

Что делает поле "Фон" #

• Он добавляет элемент управления типом фона Elementor на вкладку Стиль вашего виджета, с одним значком на каждый тип фона, который вы разрешаете.
• Classic дает цвет и изображение с настройками положения, вложения, повторения и размера после выбора изображения.
• Градиент дает два цвета с указанием их местоположения: линейный или радиальный тип, а также угол или положение.
• Элементор записывает сам CSS в элемент в опции Селектор Вам не нужен токен в вашем HTML или CSS.

Если вы еще не создали виджет, прочтите Обзор виджета-строителя первый.

Прежде чем начать #

• WordPress с установленным и активным элементом Elementor.
• Мастер-аддоны для Elementor и Master Addons Pro, оба активные. The руководство установки настройка обложек.
• Виджет, открытый в Widget Builder Пример в этом руководстве - виджет “Promo Banner”, внешняя коробка которого имеет класс promo-banner.

Как добавить поле "Фон" #

1. Перейти к Мастер-аддоны > Виджет-строитель и откройте виджет.
2. Нажмите « Стиль вкладка и добавить раздел, например “Banner Background”.
3. Тип background в поле поиска слева.
4. Драг Фон в раздел. его настройки открываются на левой боковой панели, а в разделе предварительного просмотра отображаются значки типов.

Объяснены параметры фонового поля #

• Этикетка называет поле в конструкторе, например “Banner Background”.В Elementor редакторы видят заголовок раздела и элемент управления, называемый Фоновым типом.
• Имя является уникальным идентификатором поля. Буквы, цифры и подчеркивания только.
• Описание это записка для вас внутри строителя.
• Типы устанавливает, какие типы фона могут выбрать редакторы: Классика, Градиент, Видео и Слайд-шоу Новое поле показывает Классика и Градиент.
• Включает и Исключает предназначены для добавления или скрытия отдельных настроек внутри элемента управления. в наших тестах ни один из них не изменил панель Элементор. Исключает отображение изображения по умолчанию, однако настройка "Изображение" все еще появлялась, поэтому оставьте оба такими, какие они есть.

Сохранить типы в классическом и градиент. видео и слайд-шоу добавляют свои настройки в панель, но когда мы тестировали их на пользовательском виджете, видео ссылка и слайд-шоу галерея ничего не рисовали за баннером.Elementor только строит дополнительную разметку, которая нужна этим двум типам для своих собственных разделов и контейнеров.

Прокрутите до нижней части боковой панели для Селектора. общие настройки над ним (Показать метку, Сепаратор, Условия а остальные) работают так же, как и на других полях.

Установите селектор #

Селектор сообщает Элементору, какой элемент получает фон Для баннера это класс на внешнем поле:

.promo-banner

Не надо печатать {{WRAPPER}} для этого поля. строитель добавляет его перед вашим селектором, так что .promo-banner становится {{WRAPPER}} .promo-banner и влияет только на этот виджет. с разделенным запятыми списком каждая часть получает свой {{WRAPPER}}. Если Селектор пуст, фон переходит на внешнюю обертку виджета вместо вашего элемента.

Дайте элементу запасной фон на вкладке CSS. Он отображается до тех пор, пока редактор не выберет что-то, и стили элемента управления заменят его после этого:

.promo-banner {
  background-color: #1f1147;
  color: #ffffff;
}

Нажмите Сохранить настройки когда закончишь.

Используйте элемент управления фоном в Elementor #

Добавьте виджет на страницу, или перезагрузите редактор, если страница уже была открыта Выберите виджет и откройте Стиль вкладка. в вашем разделе показан Тип фона со значком для каждого разрешенного типа. баннер сохраняет свой запасной цвет, пока вы не выберете один.

Щелкните значок кисти для Классика и выбрать а Цвет. Баннер сразу обновляется.

Под цветом нажмите Изображение поле для выбора изображения из Медиа Библиотеки. больше настроек появляются после установки изображения: Разрешение изображения, Положение, Вложение, Повторить и отобразить Размер. Центр, Нет повторения и Обложка хорошо работают для большинства баннеров.

Нажмите второй значок для Градиент. Установите первый Цвет и его Расположение, Второй цвет и его местоположение, затем выберите Линейный с ан Угол или Радиальный с позицией.

Обычные случаи использования #

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

Советы по работе с полем Фон #

• Всегда сохраняйте запасной вариант background-color во вкладке CSS. он охватывает новые виджеты и момент перед загрузкой изображения.
• Сохраняйте читаемость текста на фотографиях. баннер примера добавляет темный слой с .promo-banner::before и isolation: isolate на поле белый текст остается разборчивым на ярких изображениях.
• Направьте селектор на один элемент. несколько полей фона на разных селекторах проще для редакторов, чем одно поле, совместно используемое многими частями.
• Придерживайтесь классики и градиента типов для пользовательских виджетов.
• Для одного плоского цвета без изображения или градиента Цветное поле для редакторов проще.

Часто задаваемые вопросы #

Завершая #

Добавьте поле "Фон" в раздел "Стиль", сохраните "Типы" в разделе "Классика" и "Градиент" и установите для селектора элемент, который должен измениться. Поместите запасной цвет на вкладку CSS, и редакторы смогут взять его оттуда. Остальную часть стиля элемента см Граница и Коробка Тень поля и проверка ценообразование за то, что включает каждый план.