Введение панели настроек

The Мастер Аддоны Виджет Строитель превращает ваш собственный HTML, CSS, и JavaScript в настоящий виджет Elementor, с редактируемыми элементами управления в панели Elementor Вы проектируете панель опций, подключаете ее к вашему коду с помощью коротких кодов, и виджет ведет себя как любой собственный элемент Elementor.No PHP, ни шаблон плагина, ни отдельный редактор кода для жонглирования.

Под всем описанным здесь работают две системы: Условия пусть любой контроль покажет или спрячет, исходя из значения другого поля, и Механизм шаблонов Twig-синтаксиса превращает имена ваших полей в токены, {% if %} проверки, и {% for %} циклы на вкладках HTML, CSS и JS. Оба руководства охватывают настройку и ограничения.

Это руководство проходит через панель параметров Widget Builder точно так, как она отображается на экране: добавление нового виджета, перетаскивание полей во вкладки "Контент", "Стиль" и "Дополнительно", запись кода, использование динамических коротких кодов, загрузка библиотек CDN и, наконец, экспорт или импорт виджета в виде файла JSON. Вы можете найти эту функцию на Страница Виджет Строитель и внутри полного виджеты и расширения список.

Что делает Виджет Строитель #

Большинство аддонов дают вам фиксированный набор виджетов. этот дает вам инструменты, чтобы сделать свой собственный. вы собираете панель опций из готовых типов полей (заголовок, текст, цвет, число, размеры, переключатель и многое другое), падение в вашем коде, и привязывать поля к этому коду с помощью простых токенов шорткода. Сохраните виджет и регистры Master Addons как шорткод, так и виджет Elementor, который вы можете перетащить на любую страницу.

Подумайте об этом как о мосте между фрагментом в стиле CodePen и полностью редактируемым виджетом Elementor. После того, как он будет создан, любой член вашей команды сможет настроить цвета, интервалы и текст из редактора Elementor, даже не открывая источник.

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

• WordPress с Элементор конструктор страниц установлен и активен.
• Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Следуйте руководство установки первый.
• Базовый HTML и CSS. JavaScript не является обязательным и нужен только для интерактивных виджетов.

Откройте конструктор виджетов и добавьте новый виджет #

С панели управления WordPress перейдите по адресу Мастер-аддоны → конструктор виджетов. Это открывает Мастер-адреса Виджеты экран, на котором перечислены все пользовательские виджет, который вы построили вместе с его категорией, автором и сгенерированным шорткодом. вверху вы увидите три кнопки: Добавить новый виджет, Импортировать виджети Видео Учебник.

Нажмите Добавить новый виджет. А Создать новый виджет диалог появляется с двумя полями:

• Название виджета (обязательно): описательное имя для вашего виджета, например “Hero Section”.Это то, что вы будете искать на панели Элементор позже, так что сделайте это чем-то, что вы узнаете.
• Категория виджета: категория Элементор, под которой сгруппирован виджет (Избранное по умолчанию). Категории сохраняют ваши пользовательские виджеты в редакторе.

Введите заголовок, выберите категорию и нажмите Сохранить изменения. Master Addons открывает редактор Widget Builder для вашего нового виджета.

Внутри интерфейса Widget Builder #

Строитель разделен на три рабочие зоны слева направо:

• Панель полей (слева): библиотека типов управления с возможностью поиска, которые вы перетаскиваете в свой виджет, таких как заголовок, текст, текстовая область, URL-адрес, цвет, номер, коммутатор, выбор, выбор, WYSIWYG, код и время даты.
• Панель настроек (в центре): the Содержание, Стильи Продвинутый вкладки, на которых вы разбиваете эти поля на разделы. это фактическая панель опций, которую ваши пользователи увидят в Elementor.
• Панель кода (справа): the HTML, CSS, ДЖСи ВКЛЮЧАЕТ вкладки, на которых вы пишете разметку, стили, сценарии и ссылки на библиотеки.

Верхняя панель содержит имя виджета со значком настройки шестерни рядом с ним, плюс Предварительный просмотр и Сохранить настройки кнопки.

Создайте панель опций: вкладки "Содержимое", "Стиль" и "Дополнительно" #

Здесь вы проектируете элементы управления. Выберите поле с левой панели и перетащите его в раздел под Содержание, Стильили Продвинутый вкладка. Следуйте той же логике, которую использует Elementor: текст и ссылки в разделе "Содержимое", "Цвета" и "Типография" в разделе "Стиль", "Место и макет" в разделе "Дополнительно".

В каждом разделе есть Раздел Название (метка показана в заголовке раздела) и a Название раздела, уникальный идентификатор, на который вы будете ссылаться в своем коде Добавьте столько разделов и полей, сколько нужно виджету.

Например, уронить a Цветное поле во вкладку "Стиль", чтобы пользователи могли перекрасить виджет, и a Поле размеров во вкладку Дополнительно для управления заполнением со всех четырех сторон. каждый тип поля имеет свою собственную документацию, если вам нужен полный список параметров.

Динамические короткие коды: подключите поля к вашему коду #

Это та часть, которая связывает все вместе Каждое поле, которое вы добавляете, генерирует a токен шорткода, и эти жетоны появляются в Документация боковая панель рядом с редактором кода. Добавьте поле "Цвет" и получите {{color}}. Добавьте поле "Размеры" и получите {{dimensions}}.

Бросьте эти токены в свой HTML, CSS или JS, где бы вы ни хотели, чтобы значение поля приземлилось. когда пользователь меняет этот элемент управления в Elementor, Master Addons меняет токен на живое значение, чтобы ваш код оставался динамическим. Следует помнить одну вещь: токен существует только после того, как поле сопоставления находится на панели, поэтому сначала создайте поле, а затем обратитесь к его короткому коду.

Добавьте свой HTML, CSS и JS #

Когда панель и короткие коды будут готовы, переключитесь на вкладки кода справа и вставьте разметку, стили и сценарии.

Вкладка HTML: напишите структуру виджета и поместите токены с коротким кодом туда, где принадлежат динамические значения.

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

Вкладка JS: добавьте JavaScript для любого интерактивного поведения, например эффектов наведения или ползунка. работает простой ванильный JS, как и jQuery, загрузив его в раздел "Включения".

Если вам нужно только поле кода внутри панели, а не главного редактора, Поле кода добавляет в элементы управления входные данные, выделенные синтаксисом.

Включает: загрузку CDN CSS и JS библиотек #

Открыть ВКЛЮЧАЕТ вкладка для прикрепления внешних библиотек ваш виджет зависит от. Есть два списка: Библиотеки CSS и Библиотеки JS. Для каждого вы добавляете a Ручка (уникальное имя) и а URL-адрес источника или зарегистрированная ручка, затем нажмите Добавить CSS или Добавить JS.

Вот как вы втягиваете что-то вроде Font Awesome из CDN, или jQuery, без редактирования темы.Master Addons ставит библиотеку в очередь только тогда, когда виджет действительно находится на странице, поэтому остальные ваши страницы остаются чистыми.

Нужны значки внутри виджета? Master Addons также поставляет восемь комплектов библиотеки значков вы можете использовать без внешнего вызова CDN.

Настройки виджета: заголовок, значок, категория и экспорт #

Нажмите « значок шестерни рядом с именем виджета в верхней панели, которую нужно открыть Настройки виджета на левой панели. отсюда вы управляете тем, как виджет представляется внутри Элементора:

• Название виджета: переименовать виджет Это название отображается в списке виджетов Elementor.
• Значок виджета: нажмите Изменить значок чтобы выбрать значок из средства выбора значков Master Addons, вы можете использовать любой включенный значок или класс Font Awesome.
• Категория виджета: выберите категорию Elementor, под которой отображается виджет, чтобы она группировалась со связанными виджетами.
• Экспорт виджета: экспортируйте всю конфигурацию виджета в виде файла JSON, который вы можете сохранить, создать резервную копию или поделиться с кем угодно.

Средство выбора значков группирует тысячи значков в такие категории, как "Все значки", "Значки элементара", "Простые значки строки", "Знаковые значки шрифта", "Линейные значки" и "Значки материала". Отфильтруйте по имени, выберите один и нажмите Вставить.

Импортировать виджет из файла JSON #

Совместное использование работает в обе стороны. Назад Мастер-адреса Виджеты экран, нажмите Импортировать виджет кнопка. Диалоговое окно позволяет перетаскивать a .json файл или просмотр. Только .json поддерживаются файлы, экспортированные из конструктора виджетов.

Любой, у кого есть файл JSON виджета, может импортировать его, панель, код, включает в себя и все такое, а затем использовать его на своем сайте за считанные секунды. Это делает Widget Builder аккуратным способом повторного использования виджетов в проектах или передачи их клиенту.

Советы по созданию надежных виджетов на заказ #

• Четко назовите разделы. Имя раздела попадает в ваш код, поэтому сохраняйте его кратким и значимым.
• Добавьте поле, прежде чем ссылаться на его короткий код. Токены существуют только после того, как поле сопоставления находится на панели.
• Часто используйте предварительный просмотр. Перед сохранением проверьте предварительный просмотр в реальном времени, чтобы заранее поймать отсутствующий токен, а не на странице в реальном времени.
• Загрузить библиотеки через Включает, а не встроенный. Он сохраняет ваш код чистым и загружает сценарии только там, где они необходимы.
• Экспортируйте по ходу дела. Экспорт JSON одновременно служит вашей резервной копией и файлом общего доступа.
• Не вижу своего виджета в Элементоре? Проверьте руководство по устранению неполадок для исправления видимости.

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

Завершая #

Мастер аддонов Виджет Строитель закрывает разрыв между фрагментом кода и производственным виджетом Elementor.Постройте панель, напишите свой HTML, CSS, и JS, провод его с помощью токенов шорткода, загрузите любые библиотеки, которые вам нужны, затем экспортируйте или импортируйте результат как JSON.Посмотрите на остальную часть Библиотека виджетов Master Addgets чтобы посмотреть, что еще можно построить.