The Коробка Теневое поле помещает стандартный теневой контроль Elementor в панель вашего пользовательского виджета: горизонтальное и вертикальное смещение, размытие, разворот, цвет с непрозрачностью, переключатель вставки Внутри главных аддонов Виджет Строитель, это поле, которое позволяет редакторам поднять карту со страницы, смягчить кнопку или выключить ввод, не касаясь таблицы стилей.
Управление Box Shadow поддерживает Условия, чистый способ показать это только тогда, когда включен теневой переключатель, а вывод токенов по сборщику обрабатывается Механизм шаблонов Twig-синтаксиса. Оба руководства охватывают настройку и ограничения.
Box Shadow - это групповой элемент управления, то же семейство, что и Typography и Background. Соединение с вашим виджетом - это селектор CSS, а не токен: вы указываете полю, какой элемент он стилизует, и Elementor самостоятельно записывает туда тень.
Что делает поле Box Shadow #
- Рендерс контроль теневой группы коробки Элементора, открывающийся от значка карандаша рядом с этикеткой поля.
- Горизонтальные и вертикальные смещения расположите тень вокруг элемента.
- Размытие и распространение контролируйте мягкость и охват.
- Цвет включает альфа-канал, откуда берется большая часть теневого качества.
- Переключение позиции переключается между внешней тенью и вставкой.
- Пишет сам CSS предоставленному вами селектору; токена шаблона не существует.
Если вы новичок в создании виджетов, Обзор виджета-строителя это место, где можно начать.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - это виджет-свидетельство, чей
<article class="quote-card">должен нести тень, контролируемую редактором.
Как добавить поле Box Shadow #
В редакторе Widget Builder прокрутите панель полей слева, пока не найдете Коробка Тень поле, указанное вместе с другими полями групп стилей, такими как "Фон" и "Текстовая тень".
Перетащите его в раздел под Стиль вкладка, как правило, рядом с полями Граница и Измерения в разделе стиль карты. как только он приземлится, параметры поля открываются слева.
Объяснены параметры поля Box Shadow #
- Этикетка: текст, показанный рядом с элементом управления в Elementor, например “Card Shadow”.
- Имя: уникальный идентификатор поля, букв, цифр и подчеркиваний.
- Селектор: селектор CSS, к которому применяется тень. Это само соединение, описанное далее.
- Параметры полей: переопределяет для подконтрольных элементов внутри группы, например, изменение значения по умолчанию, с которого начинается тень.
- Описание, отображение метки, разделителя и условий - обычные параметры отображения.
Направьте поле на селектор #
Как и любой групповой контроль, поле Box Shadow не имеет {{shortcode}} для вашего CSS. Тень - это несколько значений, свернутых в одно свойство, и a {{ token }} для поля не печатает ничего полезного. The Селектор опция - это вся связь.
Для свидетельской карточки селектором является
{{WRAPPER}} .quote-card
{{WRAPPER}}расшифровывается как собственный контейнер виджета и сохраняет тень scoped к этому виджету, Групповые элементы управления используют селектор точно так, как вы его пишете, поэтому введите{{WRAPPER}}себя..quote-cardявляется ли элемент внутри вашего виджета HTML, на который попадает тень.
Осторожно: селектор без {{WRAPPER}} матчи каждый .quote-card на странице, так что настройки тени одного виджета рестайлингуют все их Ничто не предупреждает вас, стили просто распространяются.
Сохраняйте запасную тень на вкладке CSS виджета, если дизайн зависит от одного. Это взгляд при первом падении, и значения элемента управления берут верх, как только редактор открывает всплывающее окно.
Используйте элемент управления Box Shadow в Elementor #
Поместите виджет на страницу в Elementor, перезагрузив редактор, если страница уже была открыта, Элемент управления показывает вашу метку с карандашным значком; щелчок по ней открывает тень popover.
Установите цвет сначала, затем потяните Blur вверх и держать смещения маленькими для мягкого вида карты, или толкните Вертикаль вверх с нулевым размытием для жесткой графической тени. переверните Позицию для вставки для вжатых полей и лунок. предварительный просмотр отслеживает каждое изменение. одно примечание макета: тени не занимают места в потоке, поэтому щедрый спред может кровоточить в секции выше и ниже, не перемещая ничего, что стоит проверить, когда виджет находится между узкими рядами.
Обычные случаи использования #
- Карты в виджетах отзывов, цен и команд, где мягкая тень отделяет карту от страницы.
- Кнопки это требует глубины состояния по умолчанию.
- Каркасы изображений, придавая фотографиям приподнятый край, похожий на печать.
- Липкие прутки и панели где тень сигнализирует о возвышении над контентом.
- Поля формы вставки, используя переключатель вставки для создания утопленного вида.
Советы по работе с полем Box Shadow #
- Опция "Выбор" - это все соединение. Для вкладки CSS нет теневого токена поля; ожидание, что он станет наиболее распространенным тупиком с групповым управлением.
- Всегда запускайте селектор с
{{WRAPPER}}. Поле использует его необработанным, и его оставление выливает тень на каждый соответствующий элемент на странице. - Сгруппируйте его с рамкой и размерами. Три поля вместе составляют полную часть панели, посвященную стилю карт.
- Налегайте на цвет альфа, а не на темноту. Черная тень при непрозрачности от 10 до 15 процентов читается лучше сплошной серой, и стоит отметить ее в описании вашего поля.
- Сохраните запасной вариант в виджете CSS. Если дизайну по умолчанию нужна тень, отправьте ее в таблицу стилей и позвольте элементу управления переопределить ее.
Часто задаваемые вопросы #
Что такое поле Box Shadow в Master Addons Widget Builder?
Он добавляет элемент управления теневой группой ящика Elementor в пользовательский виджет, покрывая смещения, размытие, распространение, цвет и переключатель вставки. Вы указываете поле на селектор CSS, например {{WRAPPER}} .quote-card, и Элементор записывает тень в этот селектор.
Где находится шорткод тени поля для вкладки CSS?
Нет. Box Shadow - это групповой элемент управления, поэтому его значение никогда не печатается через a {{token}}; токен для него не выводит ничего полезного. Заполните вместо этого опцию "Выбор", и для вас будет сгенерирован CSS.
Почему моя тень появляется и на других виджетах?
Селектор отсутствует {{WRAPPER}}. Групповые элементы управления применяют селектор точно так, как написано, так что .quote-card один стилизует каждый матч на странице. Изменить его на {{WRAPPER}} .quote-card и сохранить.
Могу ли я сделать внутреннюю тень?
Да. тумблер Popover's Position переключает тень на врезку, которая затягивает ее внутрь краев элемента, обычная обработка для утопленных вводов и лунок.
Для чего настроена настройка Параметры полей?
Он переопределяет отдельные подконтрольные элементы внутри группы, например, придавая тени заданное начальное значение, поэтому управление открывается с помощью полезной тени вместо пустой.
Конфликт тени в CSS моего виджета с элементом управления?
Нет. тень таблицы стилей - это вид по умолчанию, и вывод элемента управления переопределяет его, как только редактор устанавливает значения. Там есть запасной вариант рекомендуемой настройки.
Завершая #
Поле Widget Builder Box Shadow дает редакторам реальный контроль над глубиной: одно поле, один селектор, начиная с {{WRAPPER}}, и весь тень поп-овер появляется в панели. Он работает на той же модели селектора, что и Типографское поле, так что установка переносится прямо между групповыми управлениями Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.
