Кнопки и ссылки нуждаются в большем, чем веб-адрес, Им нужен тумблер открытия в новом окне, опция nofollow, а иногда и пользовательские атрибуты The Поле URL в Мастер Аддоны Виджет Строитель предоставляет вашему пользовательскому виджету тот же элемент управления ссылками, который Elementor использует везде, поэтому редакторы получают знакомый выбор ссылок вместо обычного текстового поля.
Как и каждое поле Widget Builder, поле URL поддерживает Условия. Его ценность проявляется через Механизм шаблонов Twig-синтаксиса с пунктирным доступом, {{ link.url }}, {{ link.is_external }}, так что каждая часть попадает в правильный атрибут. оба руководства охватывают детали.
Вы опускаете поле URL-адреса на панель виджета, выбираете, какие параметры ссылки следует раскрыть, и подключаете его к разметке с помощью короткого кода. Это руководство сосредоточено на поле URL-адреса, но оно также быстро падает Текстовое поле таким образом, вы можете одновременно установить метку кнопки.
Что делает поле URL #
Поле URL отображает управление ссылками Elementor на панели параметров вашего виджета. Редакторы вставляют ссылку, переворачивают нужные им параметры, и ваш виджет выводит правильный тег привязки. Текстовое поле, содержащее необработанный адрес, не может этого сделать. Поле URL-адреса обрабатывает атрибуты target и rel для вас, поэтому внешние ссылки открываются правильно, и nofollow находится в одном клике.
Он естественным образом соединяется с полем Текст для видимой метки В кнопке вызова к действию поле URL несет ссылку, а поле Текст несет слова на кнопке.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Пользовательский виджет, открытый в редакторе Widget Builder. если это ваш первый, прочитайте Обзор виджета-строителя первый.
Как добавить поле URL #
В редакторе Widget Builder найдите панель полей слева и перетащите ее URL поле в раздел под Содержание, Стильили Продвинутый вкладка. элементы управления ссылками обычно находятся в разделе "Содержимое". Как только он появится на месте, параметры поля откроются слева, и его короткий код появится в разделе Документация боковая панель рядом с редактором кода.
Объяснены параметры поля URL #
Выберите поле URL, чтобы открыть его настройки Первые несколько параметров соответствуют другим полям, затем вы получаете набор вариантов выбора, специфичных для ссылки.
- Этикетка: текст, показанный над элементом управления в Elementor, например “Url” или “Button Link”.
- Имя: уникальный идентификатор для поля. буквы, числа, и подчеркивает только. это становится вашим шорткодом, поэтому поле названо
urlдает вам{{url}}. - Описание: дополнительный вспомогательный текст показан под элементом управления.
- Заполнитель: слабый намек отображается в поле ссылки, когда оно пусто.
- Значение по умолчанию: стартовая ссылка, если вы хотите, чтобы кнопка куда-то указывала, прежде чем кто-либо ее отредактирует.
Параметры URL #
The Параметры URL группа решает, какие части управления ссылками появляются в Elementor. Отметьте только то, что нужно виджету:
- Ввод URL: само поле ссылки, куда редактор вставляет адрес.
- Открыть в новом окне: переключатель, который устанавливает
target="_blank"по ссылке. - Добавить nofollow: переключатель, который добавляет
rel="nofollow", полезно для спонсируемых или ненадежных ссылок. - Пользовательские атрибуты: поле для дополнительных атрибутов
key|valueформат, удобный для аналитических крючков или атрибутов данных.
Общие настройки: адаптивные, динамичные и многое другое #
Ниже параметров URL-адреса вы получаете то же самое Общие настройки как каждое поле в конструкторе: Показать метку, блок метки, адаптивный контроль, динамическая поддержка, доступный интерфейс, сепаратор и условия. динамическая поддержка здесь полезна, поскольку она позволяет ссылке извлекать из динамического источника. Документация по текстовому полю подробно объясняет каждый из них.
Подключите поле к вашему коду #
Поле URL дает вам короткий код плюс несколько подтокенов, поэтому вы можете сопоставить каждый вариант ссылки с правильным атрибутом HTML. Для поля с именем url:
{{url.url}}выводит адрес канала дляhrefатрибут.{{url.is_external}}выводит цель, поэтому “Open в новом тумбле window” работает.{{url.nofollow}}выводит значение rel для переключателя “Add nofollow”.
Бросьте их в якорную метку и добавьте a Текстовое поле жетон нравится {{button_text}} для видимой этикетки:
Теперь якорь извлекает свою ссылку, цель и rel из одного элемента управления URL, а поле Текст предоставляет слова Сохраните виджет и кнопку рендеринг с помощью всего, что устанавливает редактор. Стоит знать одну вещь: если вы только размещаете {{url}} вы сами по себе получаете адрес, но не целевое поведение или поведение nofollow, поэтому используйте подтокены, когда эти переключатели имеют значение.
Используйте элемент управления URL-адресом в Elementor #
Перетащите свой пользовательский виджет на страницу и откройте его в редакторе Elementor. поле URL отображается как стандартный элемент управления ссылкой: поле для адреса, плюс включенные вами переключатели. вставьте ссылку, включите “Откройте новое окно”, если необходимо, и кнопка обновляется в реальном времени.
В демо-версии поле Текст, помеченное “Button Text”, устанавливает кнопку “Выберите свой Plan”, а поле URL-адреса указывает на целевую ссылку. Два небольших поля, и у вас есть полностью редактируемая кнопка вызова к действию, которую каждый может обновить с Elementor.
Обычные случаи использования #
- Кнопки призыва к действию с редактируемой ссылкой, текстом и поведением нового окна.
- Цены или кнопки планирования это указывает на выезд.
- Читать далее ссылки на картах и блоках функций.
- Спонсорские или партнерские ссылки где нет следа имеет значение.
- Отслеживаемые ссылки использование пользовательских атрибутов для аналитических данных.
Советы по работе с полем URL #
- Только выставляйте нужные вам варианты. Если кнопка никогда не открывает новую вкладку, оставьте эту опцию выключенной, чтобы элемент управления оставался чистым.
- Используйте подтокены, а не только
{{url}}. Карта{{url.url}},{{url.is_external}}и{{url.nofollow}}таким образом, каждый переключатель действительно что-то делает. - Соедините его с текстовым полем для метки кнопки вместо жесткого кодирования слова в вашем HTML.
- Включите nofollow для спонсируемых ссылок чтобы оставаться на правой стороне правил поиска.
- Создайте поле, прежде чем ссылаться на его короткий код. Токен существует только после того, как поле окажется на панели.
Часто задаваемые вопросы #
Каково поле URL-адреса в конструкторе виджетов Master Addons?
Поле URL добавляет управление ссылками Elementor в пользовательский виджет.Редакторы вставляют ссылку и переключают параметры, такие как "Открыть в новом окне" и "nofollow", а ваш виджет выводит правильный тег привязки, используя короткий код и подтокены поля.
Как сделать так, чтобы переключатель “Open в новом окне” работал в моем пользовательском виджете?
Используйте подтокен в теге якоря. Для поля с именем url, набор target="{{url.is_external}}" по ссылке. когда редактор переворачивает переключатель в Elementor, целевой атрибут обновляется, поэтому ссылка открывается в новой вкладке.
Могу ли я добавить nofollow к ссылке в виджете Widget Builder?
Да. Включить Добавить nofollow в параметрах URL-адреса поля, затем вывести rel="{{url.nofollow}}" на теге якоря Когда редактор включает nofollow в Elementor, атрибут rel добавляется автоматически.
Как мне установить текст кнопки отдельно от ссылки?
Добавить поле Текст рядом с полем URL Поле URL несет ссылку, а поле Текст несет видимую метку Поместите токен поля Текст, как {{button_text}}, между открывающейся и закрывающейся анкерными метками.
Для чего используются пользовательские атрибуты?
Пользовательские атрибуты позволяют редакторам добавлять дополнительные атрибуты HTML по ссылке key|value формат. они полезны для аналитических крючков, атрибутов данных или любого атрибута, который необходим вашим сценариям или инструментам отслеживания на элементе привязки.
Завершая #
Поле URL-адреса Widget Builder превращает простую ссылку в полный элемент управления ссылкой Elementor внутри вашего собственного пользовательского виджета. выберите параметры для экспонирования, подключите подтокены к тегу привязки, соедините его с полем "Текст" для метки, и у вас есть редактируемая кнопка, которая обрабатывает ссылки, новые окна и nofollow без жестко запрограммированной разметки. Взгляните на остальную часть Виджеты и расширения Master Addgetsи проверьте страница ценообразования за то, что включает каждый план.
