The Текстовое поле тот, к которому вы тянетесь в любое время пользовательский виджет нуждается в строке текста, которую кто-то может редактировать: заголовок, метка, короткая подпись, слово кнопки Внутри главных аддонов Виджет Строительвы опускаете текстовое поле на панель виджета, даете ему имя, и это имя становится коротким кодом, который вы помещаете в свой HTML, CSS или JS. Что бы пользователь ни вводил в Elementor, оно печатается прямо в вашу разметку.
Как и в каждом поле Widget Builder, поле Текст поддерживает Условия, так что вы можете показать или скрыть управление по значению другого поля Его выход также проходит через строителя Механизм шаблонов Twig-синтаксиса, что позволяет завернуть токен {% if %} проверяет или применяет фильтры, например |upper. Оба руководства охватывают настройку и ограничения.
Однако он не просто печатает обычную строку. Текстовое поле подключается к адаптивным элементам управления и динамическим тегам Elementor, поэтому одно поле может удерживать на мобильном телефоне другой заголовок, чем на рабочем столе, или извлекать его значение из динамического источника, такого как заголовок сообщения.
Что делает поле Текст #
Текстовое поле отображает однострочный текстовый ввод на панели параметров виджета Когда кто-то редактирует ваш пользовательский виджет в Elementor, он видит этот ввод, вводит значение, и ваш виджет выводит его везде, где вы поместили совпадающий шорткод.
Он хорошо сочетается с другими полями ввода в конструкторе. Для более длинного многострочного контента обратитесь к Поле "Текстовая область". Для контента в богатом формате используйте Поле WYSIWYG. Текстовое поле - это правильный выбор для коротких простых строк. Если вы новичок в создании виджетов, прочтите Обзор виджета-строителя первый.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Пользовательский виджет, открытый в редакторе Widget Builder.
Как добавить поле Текст #
В редакторе Widget Builder найдите панель полей слева, затем перетащите ее Текст поле в раздел под Содержание, Стильили Продвинутый вкладка Большинство текстовых входов принадлежат Content. Как только он будет на месте, параметры поля откроются слева, и его короткий код появится в Документация боковая панель рядом с редактором кода.
Объяснены параметры текстового поля #
Выберите поле Текст, чтобы открыть его настройки. эти параметры управляют тем, как выглядит и ведет себя ввод на панели Элементор.
- Этикетка: текст, который появляется над полем в Elementor.Keep его коротким и ясным, как “Heading” или “Button Text”.
- Имя: уникальный идентификатор для поля. Он должен содержать только буквы, цифры и подчеркивания, поэтому никаких пробелов или тире. это имя становится вашим шорткодом, поэтому поле именовано
headingдает вам{{heading}}. - Описание: дополнительный вспомогательный текст, показанный под полем Используйте его, чтобы объяснить, что управляет ввод.
- Заполнитель: намек на серый цвет, показанный, когда поле пусто, например “Напишите заголовок”. Он направляет пользователя, не устанавливая реального значения.
- Значение по умолчанию: значение, с которого начинается поле Установите что-то вроде “Build Better Experiences”, чтобы виджет выглядел законченным, прежде чем кто-либо его отредактирует.
Общие настройки: адаптивные, динамичные и многое другое #
Прокрутить вниз до Общие настройки для органов управления, которые решают, насколько гибким является поле. здесь вы включаете адаптивные значения и динамические теги.
- Показать метку: переключить, появляется ли метка над полем.
- Блок этикеток: отображение метки в отдельной строке над входом, а не рядом с ним.
- Адаптивный контроль: включите это, чтобы пользователи могли установить другое значение для настольных компьютеров, планшетов и мобильных устройств. Хорошо подходит для заголовков, которые должны быть короче на небольших экранах.
- Динамическая поддержка: включите это, чтобы включить динамические теги Elementor, чтобы поле могло извлекать свое значение из источника, такого как заголовок сообщения или имя автора, а не из статического текста.
- Доступен интерфейс: сделать доступным значение элемента управления для внешнего JavaScript.Включите его, когда JS вашего виджета необходимо прочитать значение.
- Сепаратор: установите место, где вокруг элемента управления появляется разделительная линия (нет, до, после, по умолчанию).
- Условия: показывать или скрывать это поле на основе значения другого элемента управления. щелкните Добавить условие чтобы установить правило.
Подключите поле к вашему коду #
Каждое поле Текст генерирует короткий код из своего Имени Добавить поле с именем heading и жетон {{heading}} отображается на боковой панели "Документация". Бросьте этот токен в свой HTML, где бы ни находился текст.
Для заголовка героя изменение невелико:
- Замените статический текст внутри себя
<h1>с{{heading}}. - Сохранить виджет. Теперь
<h1>печатает любое значение, которое пользователь устанавливает в Elementor.
Поскольку шорткод - это всего лишь токен, вы можете повторно использовать то же значение поля в CSS или JS тоже. Одно поле, много мест.
Используйте элемент управления "Текст" в Elementor #
Перетащите свой пользовательский виджет на страницу и откройте его в редакторе Elementor. текстовое поле отображается как обычный элемент управления с уже имеющимися значением метки, заполнителя и значения по умолчанию. Рядом с входом расположены два маленьких значка: a значок устройства для адаптивных значений и a значок динамических тегов когда вы включили эти параметры.
Введите новое значение и виджет обновляется в прямом эфире В приведенном ниже примере изменение поля заголовка перезаписывает заголовок героя на странице Тот же тип поля работает так же хорошо для абзаца, метки кнопки или любой другой короткой строки. в этом вся суть поля Текст: где бы виджет ни нуждался в печати текста, это элемент управления, который вы используете.
Вытащите текст из динамического тега #
С включенной динамической поддержкой щелкните значок динамических тегов и выберите источник. Главные дополнения и список Элементор сгруппировали теги, такие как Название архива, Имя автора, Информация об авторе и Номер комментариев. Выберите один, и поле вытягивает живые данные вместо статического текста, что избавляет вас от редактирования одного и того же названия в десятках сообщений.
Установите другое значение для каждого устройства #
При включенном адаптивном управлении щелкните значок устройства, чтобы переключаться между рабочим столом, планшетом и мобильным устройством, затем введите отдельное значение для каждого. длинный заголовок рабочего стола может стать более коротким на телефонах, не касаясь версии для рабочего стола. Стоит знать: если вы оставите значение планшета или мобильного телефона пустым, оно вернется к тексту рабочего стола, поэтому вы переопределите только точки останова, которые действительно в нем нуждаются.
Обычные случаи использования #
- Заголовки героев редакторы могут меняться, не открывая код.
- Раздел абзацы и краткие описания.
- Кнопка и этикетки CTA привязан к ссылке виджета.
- Значки, бирки и маленькие подписи где форматирование не нужно.
- Динамические названия это извлечение из публикации или архива для многоразовых шаблонов.
Советы по работе с полем Текст #
- Значительно назовите поля. Имя становится вашим шорткодом, так что
headingчитает лучше в коде, чемfield_1. - Всегда устанавливайте значение по умолчанию. Он сохраняет виджет полным в редакторе и при первой же передаче.
- Включайте адаптивный и динамический только тогда, когда они вам нужны. Дополнительные элементы управления загромождают панель для простого текста.
- Используйте Placholder в качестве руководства, а не контента. Он никогда не печатается на странице, поэтому не полагайтесь на него для получения реального текста.
- Создайте поле, прежде чем ссылаться на его короткий код. Токен существует только после того, как поле окажется на панели.
Часто задаваемые вопросы #
Каково поле "Текст" в конструкторе виджетов Master Addons?
Поле Текст добавляет однострочный ввод текста в пользовательский виджет Элементор Вы называете поле, помещаете его короткий код в свой код, и все, что пользователь вводит в Elementor печатает в ваш виджет, Он поддерживает адаптивные значения и динамические теги.
Как сделать пользовательский текст виджета отзывчивым в Elementor?
Откройте Общие настройки поля Текст и включите адаптивное управление Вернувшись в редактор Elementor, щелкните значок устройства рядом с полем и установите отдельное значение для Рабочего стола, Планшета и Мобильного устройства Каждое устройство хранит свой текст.
Может ли текстовое поле использовать динамические теги Elementor?
Да. включите динамическую поддержку в общих настройках поля. в элементоре щелкните значок динамических тегов рядом с элементом управления и выберите источник, например "Заголовок архива" или "Имя автора", чтобы поле извлекало живые данные вместо статического текста.
В чем разница между меткой, именем и заполнителем?
Метка - это текст, показанный над полем Имя - уникальный идентификатор кода, который становится шорткодом поля Заполнитель - это слабый подсказ, показанный, когда поле пусто Только значение, которое вводит пользователь, или Значение по умолчанию, фактически печатает на странице.
Должен ли я использовать поле Текст или поле Текстовая область?
Используйте поле Текст для коротких однострочных строк, таких как заголовки и метки. Используйте поле "Текстовая область" для многострочного контента и поле WYSIWYG, когда вам нужно форматирование, такое как жирный шрифт, ссылки и списки внутри значения.
Завершая #
Поле Widget Builder Text - это самый простой способ сделать пользовательский виджет Elementor редактируемым. назовите его, опустите его короткий код в свой код, установите по умолчанию и включите адаптивную или динамическую поддержку, когда проект потребует этого. После этого любой может обновить текст с Elementor, не касаясь строки кода. взгляните на остальную часть Виджеты и расширения Master Addgetsи проверьте страница ценообразования за то, что включает каждый план.
