Добавьте пользовательский 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 селекторы для таргетинга этих элементов.

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

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

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

Расширение Master Addons Glassmorphism для Elementor: карты из матового стекла с элементом управления значением размытия, установленным в 20px

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

Главная Бесплатный элемент Расширение стекломорфизма: эффект матового стекла в одном переключении Стекломорфизм - это матовый...
Посмотреть детали
Расширение Master Addons Container Extras для Elementor: контейнер с максимальной шириной 1400px, с регуляторами максимальной ширины, максимальной высоты, минимальной ширины и минимальной высоты

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

Главная Элементор Контейнер Максимальная ширина и максимальная высота Контролирует контейнер Дополнительно является бесплатным Мастер...
Посмотреть детали
Расширение Master Addons Patterns для Elementor: герой со стилем Purple Gradient Grid Left, еще тремя стилями шаблонов и панелью Enable Pattern

Шаблоны

Главная 70+ бесплатных шаблонов фона элементара - это бесплатное расширение Master Addons, которое добавляет...
Посмотреть детали
Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик

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

Главная Дублировать страницы Элементор и сообщения в один клик Пост/Пейдж Дупликатор является бесплатным Мастер...
Посмотреть детали
Расширение Master Addons Reading Progress Bar для Elementor: синяя полоса на 42% заполнена в верхней части страницы политики конфиденциальности с настройками включения, положения, высоты и цвета заполнения

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

Главная Добавить панель прогресса чтения в WordPress (Элементор) Панель прогресса чтения бесплатна...
Посмотреть детали