Позволить редактору перекрасить виджет, не открывая CSS, - одна из самых полезных вещей, которые может сделать пользовательский виджет.The Цветное поле в Мастер Аддоны Виджет Строитель опускает средство выбора цвета Elementor на панель виджетов, дополненную глобальными цветами и дополнительным альфа-каналом. вы называете поле, выбираете, где оно живет, и его шорткод поступает прямо в ваш CSS.
Как и в каждом поле Widget Builder, поле "Цвет" поддерживает Условия для видимости панели. Его токен отображается Механизм шаблонов Twig-синтаксиса, что позволяет вам печатать выбранный цвет в любом месте вашего CSS. Оба руководства охватывают настройку и ограничения.
Это контроль стиля, поэтому в демо-версии он находится под Стиль вкладка. поле работает одинаково, независимо от того, в какую вкладку вы его поместите, хотя. Где оно живет, это ваш звонок, и он сводится к тому, как вы хотите организовать управление вашим пользовательским виджетом.
Что делает поле Цвет #
Поле Цвет отображает собственный выбор цвета Elementor на панели опций вашего виджета Редакторы нажимают на swatch, выбирают цвет (или глобальный цвет из темы), и ваш виджет выводит это значение везде, где вы поместили соответствующий шорткод. большую часть времени это означает свойство CSS, подобное color, backgroundили border-color.
Поскольку он использует собственный подборщик Elementor, редакторы получают элементы управления, которые они уже знают: образец, окуляра, последние цвета и глобальную палитру цветов. Включите альфа-канал, и они также смогут установить прозрачность.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- В редакторе Widget Builder открывается собственный виджет. Первый? Начните с Обзор виджета-строителя.
Как добавить поле Цвет #
В редакторе Widget Builder найдите панель полей слева и перетащите ее Цвет поле в раздел. Поскольку цвет - это выбор стиля, Стиль таб - естественный дом, но Содержание и Продвинутый вкладки принимают его так же хорошо. как только поле на месте, его параметры открываются слева, и его короткий код появляется в Документация боковая панель рядом с редактором кода.
Объяснены параметры цветового поля #
Выберите поле Цвет, чтобы открыть его настройки. Большинство параметров соответствуют другим полям, плюс один, который специфичен для цвета.
- Этикетка: текст, показанный над сборщиком в Elementor, например “Text Color”.
- Имя: уникальный идентификатор для поля. буквы, числа, и подчеркивает только. это становится вашим шорткодом, поэтому поле названо
colorдает вам{{color}}. - Описание: дополнительный вспомогательный текст показан под элементом управления.
- Альфа: включите это, чтобы обеспечить прозрачность в сборщике. с его выключением редакторы могут выбирать только сплошные цвета. Включите его, когда вам нужны значения rgba, как полупрозрачное наложение.
- Значение по умолчанию: начальный цвет как значение шестнадцатеричного, например
#FFFFFF. Установите это так, чтобы виджет выглядел готовым, прежде чем кто-либо к нему прикоснется.
Общие настройки: адаптивные, динамичные и многое другое #
Ниже значения по умолчанию вы получаете то же самое Общие настройки как и каждое поле в конструкторе: Показать метку, блок метки, адаптивный контроль, динамическая поддержка, доступный интерфейс, сепаратор и условия. здесь удобен адаптивный контроль, если вы хотите другой цвет для каждого устройства. The Документация по текстовому полю подробно охватывает каждый из них.
Подключите поле к вашему коду #
Цветное поле с именем color производит токен {{color}} на боковой панели Документация.Drop it in your CSS как значение любого свойства цвета Например, чтобы раскрасить текст героя:
В редакторе CSS вы бы написали что-то вроде .hero-content { color: {{color}}; }. Когда редактор выбирает цвет в Elementor, Master Addons меняет токен на это значение, и текст перекрашивается в реальном времени. Тот же токен работает для background, border-color, или что-либо, что принимает цвет, и вы можете повторно использовать его в таком количестве правил, как вам нужно. одно, что нужно смотреть: сохранить токен как целое значение, так что color: {{color}};, не завернутый в кавычки, или CSS не будет применяться.
Используйте элемент управления цветом в Elementor #
Перетащите свой пользовательский виджет на страницу и откройте его в редакторе Elementor. под вкладкой, где вы разместили поле, элемент управления цветом отображается как стандартный образец с кнопкой глобальных цветов рядом с ним. Нажмите на него, выберите цвет и виджет обновляется на холсте.
Редакторы могут выбрать разовый цвет или щелкнуть значок глобуса, чтобы извлечь его из глобальных цветов сайта, который сохраняет пользовательские виджеты на бренде. если вы включили динамическую поддержку, значок динамических тегов появится и здесь.
Обычные случаи использования #
- Цвет текста для заголовков и абзацев.
- Цвет фона для разделов, карточек и кнопок.
- Цвета границ и акцентов привязан к палитре бренда.
- Накладывать оттенки использование альфа-канала для прозрачности.
- Государства наведения при сопряжении со вторым Цветовым полем.
Советы по работе с полем Цвет #
- Поместите его туда, где подходит ваш виджет. Стиль - это соглашение, но поле работает под любой вкладкой, поэтому организуйте элементы управления так, как это имеет для вас смысл.
- Включайте Альфу только тогда, когда вам нужна прозрачность. Для однотонных цветов бренда его удаление упрощает сборщик.
- Установите разумное значение по умолчанию. Хороший дефолт означает, что виджет выглядит правильно в тот момент, когда он падает на страницу.
- Опирайтесь на глобальные цвета. Поощряйте редакторов выбирать из глобальной палитры, чтобы виджеты оставались единообразными на всем сайте.
- Создайте поле, прежде чем ссылаться на его короткий код. Токен существует только после того, как поле окажется на панели.
Часто задаваемые вопросы #
Что такое поле "Цвет" в конструкторе виджетов Master Addons?
Поле Цвет добавляет выбор цвета Elementor в пользовательский виджет.Вы называете поле, помещаете его шорткод в свой CSS, и любой цвет, который редактор выбирает в Elementor, применяется к вашему виджету. Он поддерживает глобальные цвета и дополнительный альфа-канал.
Как использовать короткий код {{color}} в моем пользовательском виджете?
Добавьте поле цвета с именем color, то в редакторе CSS используйте токен как значение свойства, например .hero-content { color: {{color}}; }. Master Addons заменяет токен выбранным цветом, поэтому виджет перекрашивается по выбору редактора.
Поддерживает ли поле Цвет прозрачность?
Да. включите опцию Альфа в настройках поля и сборщик Элементор позволяет редакторам устанавливать прозрачность, производя значения rgba. с выключением Альфа сборщик разрешает только сплошные цвета. используйте его для наложений или полупрозрачного фона.
Могу ли я разместить поле "Цвет" за пределами вкладки "Стиль"?
Да. поле Цвет работает под вкладкой Контент, Стиль, или Расширенный Стиль является обычным выбором для управления стилем, но куда вы его поместите зависит от того, как вы хотите организовать ваши пользовательские параметры виджета.
Может ли поле Цвет использовать глобальные цвета сайта?
Да. поскольку он использует собственный сборщик Elementor, редакторы могут нажать кнопку глобальных цветов и выбрать из палитры темы. Выбор глобальных цветов сохраняет пользовательские виджеты соответствующими остальному брендингу сайта.
Завершая #
Поле Widget Builder Color превращает жестко закодированный цвет в редактируемый сборщик внутри вашего собственного пользовательского виджета. назовите его, выберите, разрешить ли альфа, установите по умолчанию и прослушку {{color}} в ваш CSS. после этого любой может перекрасить виджет от Elementor, с глобальными цветами и прозрачностью на тапе. взгляните на остальную часть Виджеты и расширения Master Addgetsи проверьте страница ценообразования за то, что включает каждый план.
