Коробка Тень

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

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

Что делает поле Box Shadow #

• Добавляет один элемент управления на вкладку Стиль вашего виджета: метку и значок карандаша, открывающий настройки теней.
• Настройки: цвет, горизонтальный, вертикальный, размытие, раздвигание и положение (контур или вставка).
• Элементор пишет box-shadow CSS к элементу в селекторе, поэтому вам не нужен токен в вашем HTML или CSS.

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

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

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

Как добавить поле Box Shadow #

1. Перейти к Мастер-аддоны > Виджет-строитель и откройте виджет.
2. Нажмите « Стиль вкладка и добавить раздел, например “Card Style”.
3. Тип shadow в поле поиска слева. Box Shadow и Text Shadow подходят.
4. Драг Коробка Тень в раздел Его настройки открываются в левой боковой панели.

Объяснены параметры поля Box Shadow #

• Этикетка является текстом рядом с элементом управления в Elementor, например “Card Shadow”.
• Имя является уникальным идентификатором поля. Буквы, цифры и подчеркивания только.
• Описание это записка для вас внутри строителя.
• Селектор, Тип тени по умолчанию, Теневые значения по умолчанию и Цвет теней по умолчанию отображаться под описанием В наших тестах изменения, введённые в эти поля, не были сохранены и строитель зарегистрировал ошибку, поэтому не полагайтесь пока на них. задайте вместо этого селектор в общих настройках (следующий раздел) и дайте карте начальную тень на вкладке CSS.
• Значение по умолчанию не используется этим полем.

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

Прокрутите до нижней части боковой панели и введите класс элемента в Селектор коробка под контроль Классы. Для свидетельской карточки:

.quote-card

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

После сохранения поле "Выбор" в верхней части боковой панели показывает то же значение.

Добавьте запасную тень #

Поместите начальную тень во вкладку CSS. Она показывается до тех пор, пока редактор не включит управление, и тень элемента управления заменяет его после этого:

.quote-card {
  box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
}

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

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

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

Щелкните карандаш, чтобы открыть popover.That включает тень с начальными значениями Elementor: Horizontal 0, Vertical 0, Blur 10, Spread 0 и черным с непрозрачностью 50%.Regust их и обновления карты при перетаскивании:

• Цвет задает теневой цвет и непрозрачность. тонированный, полупрозрачный цвет выглядит мягче черного.
• Горизонтальный и Вертикальный перемещайте тень вбок и вверх или вниз.
• Размытие смягчает ребро. 0 дает тень жесткую.
• Распространение растет или сжимает тень Небольшое отрицательное значение удерживает большое размытие от выплескивания в стороны.
• Должность переключается между Outline (вне коробки) и Inset (внутри нее).

Установите положение Вставка для вдавленного вида полезно для полей ввода и тихих панелей:

Круговая стрелка рядом с карандашом сбрасывает управление и удаляет тень.

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

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

Советы по работе с полем Box Shadow #

• Используйте селектор внизу боковой панели и введите только класс. {{WRAPPER}} добавляется для вас.
• Сохраните запасной вариант box-shadow на вкладке CSS так что новые виджеты не выглядят плоско.
• Для мягких теней карт попробуйте большое размытие, вертикальное смещение примерно в половину размытия и небольшое отрицательное разворот.
• Дайте элементу радиус границы Тени следуют за углами, поэтому округлые карты получают округлые тени.
• Для теней в тексте используйте Текстовое поле теней вместо.

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

Завершая #

Добавьте поле Box Shadow в раздел Стиль, введите класс вашего элемента в Селектор внизу боковой панели и сохраните легкую запасную тень на вкладке CSS. Затем редакторы контролируют тень от одного всплывающего окна. остальную часть стиля карты см Граница и Размеры поля и проверка ценообразование за то, что включает каждый план.