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