Добавьте пользовательский JavaScript в Elementor: страница и элемент уровня JS

Расширение Custom JS, часть Master Addons Pro, дает вам поле JavaScript внутри Elementor. добавьте код на целую страницу из настроек страницы или прикрепите его к одному виджету, разделу или контейнеру из его вкладки Advanced. Используйте его для небольших взаимодействий, формируйте настройки или отслеживайте события без редактирования тематических файлов или вставки сценариев в HTML-виджет.

Выделенное кодовое пространство для каждой страницы

Выделенное кодовое пространство для каждой страницы

Прекратите встраивать сценарии в виджеты HTML или разбрасывать их по глобальным файлам. Это расширение добавляет специальное поле Custom JS в Page Settings > Advanced tab. Любой код, который вы здесь пишете, работает только на этой конкретной странице или в сообщении. Это организованный способ обработки разовых сценариев, отслеживания тестов A/B или уникальных интерактивных элементов.

  • Чистое разделение: держите скрипты, специфичные для страницы, изолированными от кода всего сайта. Нет риска взлома других страниц.
  • Легкий доступ: мгновенно найдите свой код на странице. Настройки ♪Не копайте на панели виджетов.
  • Встроенная передовая практика: поле автоматически обрабатывается $(document).ready() для вас, чтобы вы могли написать свою основную логику напрямую.

JavaScript на уровне страницы и элемента

Код уровня страницы живет в Настройках страницы, Расширенный, Пользовательский JS, и запускается только на этой странице Код уровня элемента живет в Расширенный вкладка любого виджета, столбца, раздела или контейнера В коде уровня элемента, слово selector заменяется на CSS-класс этого элемента, поэтому сценарий касается только этого элемента.

  • Нет тегов <script> и нет готовой к документу обертки: код завернут в jQuery(document).ready для вас, и $ работы.
  • Сценарии печатаются в нижнем колонтитуле страницы после загрузки контента.
  • Код запускается на живой странице, а не внутри предварительного просмотра редактора Elementor, поэтому после сохранения проверьте опубликованную страницу.
  • Каждый экземпляр селектора слов заменяется в коде уровня элемента. использовать $('selector') скорее, чем document.querySelector там.

Как добавить собственный JavaScript в Elementor

Эти шаги предполагают, что Master Addons Pro активен, а ваша роль WordPress может публиковать нефильтрованный HTML, который администраторы могут по умолчанию.

  1. На панели управления перейдите в "Мастер-дополнения", откройте вкладку "Расширения", включите "Настраиваемый JS" и сохраните.
  2. Редактируйте страницу с помощью Elementor.
  3. Для всей страницы откройте "Настройки страницы", затем "Дополнительно", затем "Настраиваемый JS". Для одного элемента выберите его и откройте вкладку "Дополнительно".
  4. Вставьте свой код без тегов <script>.
  5. Обновите страницу и протестируйте ее на URL-адресе в реальном времени.

Три примера JS, изготовленных на заказ Elementor

Вставьте любой из них в поле "Настраиваемый JS" и измените названия классов в соответствии с вашей страницей.

1. Добавить класс в заголовок после прокрутки (уровень страницы)

$(window).on('scroll', function () {
  $('.site-header').toggleClass('is-scrolled', $(window).scrollTop() > 80);
});

2. Переключить класс при щелчке элемента (уровень элемента)

$('selector').on('click', function () {
  $(this).toggleClass('is-open');
});

3. Отправляйте событие Google Analytics при нажатии кнопки (уровень страницы)

$('.cta-button a').on('click', function () {
  if (typeof gtag === 'function') {
    gtag('event', 'cta_click', { location: 'pricing' });
  }
});

Способы добавления JavaScript в Elementor сравниваются

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

HTML-виджетПользовательский код Elementor ProМастер-аддоны Custom JS
ПланСвободный ЭлементорЭлементор ПроМастер Аддоны Про
Область примененияСтраница, на которой сидит виджетПо всей площадке, с условиями отображенияОдна страница, или один элемент
Где ты это пишешьВнутри виджета на холстеЭкран пользовательского кода на панели управленияНастройки страницы, или вкладка элемента Дополнительно
Теги сценариевНуженНуженНе нужен
Цель один элементНапишите селектор самостоятельноНапишите селектор самостоятельноИспользуйте ключевое слово селектора

Часто задаваемые вопросы для пользовательских JS

Узнайте о наиболее часто задаваемых пользователями запросах о Custom JS и найдите ответы в одном месте.
Когда мне следует использовать это вместо виджета HTML или функций моей темы.php?

Используйте его для скриптов, которые принадлежат одной странице или одному элементу, как калькулятор, эффект прокрутки или событие щелчка, Для кода, который нужен каждой странице, опция для всего сайта, такая как ваша тема или плагин фрагментов кода, является лучшим домом. виджет HTML тоже работает, но скрипты в конечном итоге разбросаны по холсту и их легко пропустить позже.

Нет. код добавляется по мере его написания, поэтому держите его коротким и аккуратным. единственное изменение, которое вносят Главные Аддоны, - это замена ключевого слова селектора в коде уровня элемента на CSS-класс этого элемента.

Что произойдет, если я напишу сломанный JavaScript? Это сломает всю мою страницу?

Это может. синтаксическая ошибка может остановить запуск других сценариев на этой странице. Сначала протестируйте код в консоли браузера и попробуйте его на промежуточном сайте, если страница имеет значение.

Непосредственно, не в самом JS поле Однако вы можете написать JavaScript, который взаимодействует с элементами на странице, которые населены динамическими данными Например, вы могли бы написать сценарий, который читает текст из динамически заполненного заголовка, Вы бы использовали обычные JavaScript селекторы для таргетинга этих элементов.

Просмотрщик шаблонов
Фейсбук
Твиттер
WhatsApp
Копировать ссылку
Купить сейчас
Пользовательское простое оповещение JS
Пользовательское простое оповещение JS

Виджеты и расширения трендовых элементов

Создавайте сложные веб-сайты за меньшее время.

Элемент стекломорфизма для Elementor от Master Addons

Стекломорфизм

Главная Бесплатный элемент Расширение стекломорфизма: эффект матового стекла в одном переключении Стекломорфизм - это матовый...
Посмотреть детали
Расширьтесь за пределы максимальной ширины

Дополнительные контейнеры

Главная Устали от того, что ваши потрясающие конструкции ограничиваются жесткими ограничениями на контейнеры? Дополнительные контейнеры от...
Посмотреть детали
Расширение шаблона

Шаблоны

Главная Превратите плоские статические контейнеры в визуально привлекательные элементы дизайна с помощью шаблонов главных аддонов...
Посмотреть детали
Точные копии в одном действии

Дубликатор сообщений/страниц

Главная Оптимизируйте рабочий процесс и исключите повторяющуюся настройку с помощью главного дополнения Post/Page Duplicator. Это...
Посмотреть детали
Расширение полосы прогресса чтения

Прогресс-бар чтения

Главная Начните когда-нибудь читать длинную статью и задавайтесь вопросом, сколько еще осталось? Так делать...
Посмотреть детали
Сентябрьская распродажа

40% выключить все

Каждый Мастер Аддоны Про план, годовой и пожизненный Один код, восемь дней.

00дней
00час
00мин
00сек

Заканчивается в понедельник, 14 сентября, 23:59 по восточному времени

  • Личный1 сайт 129 долларов77 ДОЛЛАРОВ
  • Бизнес5 сайтов 199 долларов119 долларов
  • РазработчикНеограниченные сайтыЛучше всего для агентств 599 долларов359 долларов

Платите один раз. Никакого продления никогда.

Код купона МАЛИФЕ40
Получите скидку 40% прямо сейчас
  • Более 30 000 активных установок
  • 4,5/5 из 212 отзывов
  • 14-дневный возврат денег