Текстовая тень

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

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

Что делает поле "Тень текста" #

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

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

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

• WordPress с установленным и активным элементом Elementor.
• Мастер-аддоны для Elementor и Master Addons Pro, оба активные. The руководство установки настройка обложек.
• Виджет, открытый в Widget Builder Пример в этом руководстве - виджет “Photo Banner”: фоновая фотография с заголовком H2 сверху, который имеет класс banner-title, заполнено из текстового поля с именем banner_title.

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

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

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

Объяснены параметры поля "Текст тени" #

• Этикетка является текстом рядом с элементом управления в Elementor.В примере используется “Title Shadow”.
• Имя является ли поле уникальным идентификатором (только буквы, числа и подчеркивания).Elementor сохраняет значения редактора под этим именем, поэтому установите его один раз и оставьте в покое.
• Описание это заметка для вас внутри строителя Элементор не отображает его под этим контролем.
• Значение по умолчанию не используется этим полем. новая тень всегда начинается с собственных дефолтов Elementor, перечисленных ниже.

Прокрутите вниз на боковой панели, чтобы получить общие настройки и селектор.

• Показать метку скрывает или показывает этикетку на панели.
• Сепаратор рисует разделительную линию до или после управления.
• Условия показывать управление только тогда, когда другое поле имеет определенное значение, например “Показать переключатель теневого” См Условия.
• Селектор является селектором CSS, который получает тень. поле не делает ничего полезного без него, поэтому у него есть свой раздел ниже.

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

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

Селектор сообщает Элементору, какой элемент получает тень. Для заголовка баннера введите

{{WRAPPER}} .banner-title

• {{WRAPPER}} заменяется уникальным классом этого виджета на странице, который удерживает тень внутри этого виджета.
• .banner-title класс в заголовке в HTML вашего виджета.

Поле использует ваш селектор точно так, как было напечатано. Без {{WRAPPER}}, правило становится .banner-title { text-shadow: ... } для всей страницы, и каждый элемент с этим классом берет его вверх, включая заголовки в других виджетах. если вы оставите Селектор пустым, тень перейдет к {{WRAPPER}} .elementor-widget-container, который охватывает весь текст в виджете.

Один элемент управления может стилизовать несколько элементов Разделите селекторы запятыми и начните каждый с {{WRAPPER}}, например {{WRAPPER}} .banner-title, {{WRAPPER}} .banner-subtitle.

На панели "Документация" рядом с редактором кода указан a {{title_shadow}} токен для этого поля. оставьте его вне вашего HTML и CSS. тень хранится как числа и цвет, поэтому у токена нет текста для печати, а селектор уже обрабатывает вывод.

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

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

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

Щелкните карандаш, чтобы открыть popover.That переключает тень на начальные значения Elementor: Blur 10, Horizontal 0, Vertical 0 и черный при непрозрачности 30%.Колнце обновляется, пока вы перетаскиваете ползунки.

• Размытие пробегает от 0 до 100 шт. В 0 вы получаете острую копию букв, а более высокие значения смягчают ее до свечения.
• Горизонтальный и Вертикальный бегите от -100 до 100 пикселей и перемещайте тень влево или вправо и вверх или вниз.

Щелкните Цветовая мазка, чтобы выбрать цвет тени. Сборщик имеет ползунок непрозрачности и принимает значения HEXA, RGBA или HSLA, поэтому вы можете ввести такое значение, как rgba(0, 0, 0, 0.65) непосредственно.

Чтобы удалить тень, щелкните круговую стрелку сброса рядом с карандашом.

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

• Заголовки на фотографиях героев и баннеров с яркими областями за текстом.
• Текст на видеофанах, где мягкая тень сохраняет слова читаемыми при изменении кадра.
• Тип ретро-дисплея, например жесткое смещение с нулевым размытием на больших числах или значки продажи.
• Светящееся на темном фоне светлое теневое окрашивание, большое размытие и отсутствие смещения.

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

• Начните каждый селектор с {{WRAPPER}}. В противном случае тень может просочиться в другие виджеты на странице.
• Поставьте поле рядом с полем Typography, использующим тот же селектор, так что настройки шрифта и тени заголовка располагаются в одном разделе.
• Выберите полупрозрачный цвет. черный при непрозрачности от 40 до 70% выглядит естественно, а сплошной черный имеет тенденцию выглядеть тяжелым.
• Проверьте тень на самом ярком изображении, которое может получить виджет. тень, которая работает на темном фото, может исчезнуть на светлом.
• Если дизайну нужна тень, прежде чем кто-либо коснется элемента управления, добавьте a text-shadow правило для .banner-title во вкладке CSS. значение элемента управления заменяет его, как только редактор устанавливает его.
• Для карт, кнопок и контейнеров используйте Коробка Теневое поле вместо. Текстовая тень следует форме букв.

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

Завершая #

Бросьте поле "Теневая тема текста" в раздел "Стиль", дайте ему метку и имя и установите значение "Выбор" {{WRAPPER}} плюс класс вашего текста. Редакторы затем получают элементы управления цветом, размытием и смещением в Elementor, и тень остается внутри этого виджета. Соедините его с Типографское поле для остальной укладки рубрики, и проверьте ценообразование за то, что включает каждый план.