The Фоновое поле вручает вашему пользовательскому виджету ту же фоновую панель, которую используют разделы Elementor: классическую вкладку для сплошных цветов и изображений, вкладку градиента с двумя цветовыми остановками и вкладку видео для фона движения. Внутри главных дополнений Виджет Строитель, вы добавляете поле один раз, указываете его на селектор CSS, и каждое фоновое решение переходит в панель Элементор.
Как и любой элемент управления Widget Builder, Background поддерживает Условия для видимости панели вывод токенов по конструктору проходит через Механизм шаблонов Twig-синтаксиса. Оба руководства объясняют настройку и ограничения.
Фон - это групповой контроль, то же семейство, что и Typography и Border.Это означает, что модель соединения отличается от текстовых или цветовых полей: нет токена, который можно вставить в ваш CSS. Вы заполняете опцию "Выбор", и Elementor записывает фоновые стили в сам этот селектор.
Что делает поле "Фон" #
- Рендерс Контроль фоновой группы Elementor в панели вашего виджета с вкладками для каждого разрешенного типа фона.
- Классическая вкладка: сплошной цвет или изображение с обычным положением, размером и настройками повторения.
- Вкладка Градиент: два цветных упора с элементами управления местоположением, углом и типом.
- Вкладка видео: фон движения за выбранным элементом.
- Пишет сам CSS предоставленному вами селектору без использования токена шаблона.
Первый виджет? Начните с Обзор виджета-строителя перед управлением группой проводки.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - виджет-герой, чей
<div class="hero-box">контейнер должен иметь фон, выбранный редактором.
Как добавить поле "Фон" #
В редакторе Widget Builder прокрутите панель полей слева, пока не найдете Фон поле, указанное вместе с другими групповыми областями стиля, такими как типографика и Box Shadow.
Перетащите его в раздел под Стиль таб, его естественный дом Как только он приземлится, варианты поля открываются слева.
Объяснены параметры фонового поля #
- Этикетка: текст, показанный над элементом управления в Elementor, например “Hero Background”.
- Имя: уникальный идентификатор поля, букв, цифр и подчеркиваний.
- Селектор: селектор CSS, к которому применяется фон Это само соединение, рассмотренное в следующем разделе.
- Типы: какие вкладки показывает управление, из классического, градиент, и видео Обрезка списка держит панель сфокусированной, виджет карты редко нуждается в вкладке видео.
- Исключить: удаляет отдельные подконтрольные элементы из группы, когда требуется уменьшенная версия панели.
- Описание, отображение метки, разделителя и условий ведут себя так же, как и в каждом поле.
Направьте поле на селектор #
Вот та часть, которая сбивает людей с толку, если они привыкли к полям токенов: поле "Фон" не имеет {{shortcode}} для вашего CSS. Фон - это набор свойств, поэтому он не может распечатать через один токен; а {{ token }} для этого поля не выводится ничего полезного. Вместо этого вы заполняете Селектор опция и Элементор генерируют стили.
Для контейнера героя селектором является
{{WRAPPER}} .hero-box
{{WRAPPER}}расшифровывается как собственный контейнер виджета, только на этом виджете, групповые элементы управления используют селектор точно так, как написано, поэтому вы вводите{{WRAPPER}}себя; для тебя ничего не приготовлено..hero-boxявляется ли элемент внутри вашего виджета HTML, который получает фон.
Осторожно: уходите {{WRAPPER}} выкл и селектор совпадает с каждым .hero-box на странице, так что на все они приземляется фон одного виджета, Групповые элементы управления принимают селектор сырым, что делает эту ошибку проще всего отправить.
Сохраните запасной фон на вкладке CSS виджета Это то, что виджет показывает на свежем падении, и значения элемента управления переопределяют его, как только редактор что-то выбирает. сплошной запасной цвет зарабатывает свой запас дважды, так как он также охватывает момент, прежде чем тяжелое фоновое изображение завершит загрузку, которое в противном случае мигает белым на медленных соединениях.
Используйте элемент управления фоном в Elementor #
Добавьте виджет на страницу в Elementor, перезагрузив редактор, если страница уже была открыта. элемент управления отображается под вашей меткой с вкладкой для каждого разрешенного типа.
На классической вкладке выберите цвет или выберите изображение из медиатеки с настройками положения, размера и повторения. переключитесь на вкладку градиента для двух цветовых остановок с углом и местоположением или на вкладку видео для фона движения. предварительный просмотр обновляется по мере продвижения.
Обычные случаи использования #
- Виджеты героев и баннеров где каждый сайт хочет иметь свой собственный имидж или градиент за заголовком.
- Фон карты в таблицах цен, командных сетках и списках функций.
- Полоски призыва к действию это переключение между цветом бренда и фотографией в каждой кампании.
- Видеозаголовки, с включенной вкладкой видео только на виджетах, созданных для него.
- Накладные панели, направляя селектор на внутренний слой над носителем.
Советы по работе с полем Фон #
- Опция "Выбор" - это все соединение. Не ищите фоновый токен на вкладке CSS; нет.
- Всегда запускайте селектор с
{{WRAPPER}}. Групповые элементы управления используют его в сыром виде, поэтому в каждое совпадение на странице просачивается голой селектор классов. - Обрежьте список типов. Предложение только классических и градиентных виджетов карт упрощает и не позволяет редакторам выпускать видео там, где им не место.
- Сохраняйте запасные стили в виджете CSS. Цвет фона по умолчанию в вашей таблице стилей делает виджет презентабельным до того, как кто-либо откроет элемент управления.
- Контраст текста разума. Когда редакторы управляют фоном, соедините виджет с элементами управления цветом текста, расположенного поверх него.
Часто задаваемые вопросы #
Каково поле "Фон" в конструкторе виджетов Master Addons?
Он добавляет управление фоновой группой Elementor в собственный виджет с классическими вкладками цвета и изображения, градиента и видео. Вы указываете его на селектор CSS, такой как {{WRAPPER}} .hero-box, и Elementor записывает выбранные фоновые стили в этот селектор.
Где фоновый короткий код для вкладки CSS?
Нет. Фон - это групповой элемент управления, охватывающий множество свойств CSS одновременно, поэтому он не может печатать через один токен; а {{ token }} для него не выводит ничего полезного Опция Selector заменяет короткий код: установите его и Elementor генерирует CSS для вас.
Почему мне приходится самому набирать {{WRAPPER}}?
Групповые элементы управления используют селектор точно так, как написано, в отличие от полей значений, где оболочка добавляется автоматически. начиная с {{WRAPPER}} переносит стили в этот экземпляр виджета; без него стилизуется каждый соответствующий элемент на странице.
Могу ли я ограничить управление только классическим и градиентным?
Да. опция Типы решает, какие вкладки появляются, поэтому перечисление классических и градиент скрывает вкладку видео. опция Исключить идет дальше и удаляет отдельные подконтрольные элементы из группы.
Что происходит с фоном, который я написал в виджете CSS?
Остается как вид виджета по умолчанию Вывод элемента управления переопределяет его, как только редактор делает выбор, поэтому разумный запасной фон в вашей таблице стилей - это хорошая практика, а не конфликт.
Может ли одно поле "Фон" стилизовать несколько элементов?
Да. Отдельные селекторы с запятыми и начинаем каждый с {{WRAPPER}}, например {{WRAPPER}} .hero-box, {{WRAPPER}} .hero-footer. Оба элемента затем следуют одному и тому же управлению.
Завершая #
Поле "Фон виджета-строителя" переносит редактирование фона на уровне раздела на любой элемент пользовательского виджета: назовите поле, установите значение "Выбор" {{WRAPPER}} плюс ваш класс, и выберите, какие типы видит редактор. Он следует той же модели селектора, что и Типографское поле, так как один групповой контроль щелчок, остальные тоже. Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.
