Добавьте пользовательский 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, который администраторы могут по умолчанию.
- На панели управления перейдите в "Мастер-дополнения", откройте вкладку "Расширения", включите "Настраиваемый JS" и сохраните.
- Редактируйте страницу с помощью Elementor.
- Для всей страницы откройте "Настройки страницы", затем "Дополнительно", затем "Настраиваемый JS". Для одного элемента выберите его и откройте вкладку "Дополнительно".
- Вставьте свой код без тегов <script>.
- Обновите страницу и протестируйте ее на 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
Когда мне следует использовать это вместо виджета HTML или функций моей темы.php?
Используйте его для скриптов, которые принадлежат одной странице или одному элементу, как калькулятор, эффект прокрутки или событие щелчка, Для кода, который нужен каждой странице, опция для всего сайта, такая как ваша тема или плагин фрагментов кода, является лучшим домом. виджет HTML тоже работает, но скрипты в конечном итоге разбросаны по холсту и их легко пропустить позже.
Код миниатюрный или оптимизированный для производительности?
Нет. код добавляется по мере его написания, поэтому держите его коротким и аккуратным. единственное изменение, которое вносят Главные Аддоны, - это замена ключевого слова селектора в коде уровня элемента на CSS-класс этого элемента.
Что произойдет, если я напишу сломанный JavaScript? Это сломает всю мою страницу?
Это может. синтаксическая ошибка может остановить запуск других сценариев на этой странице. Сначала протестируйте код в консоли браузера и попробуйте его на промежуточном сайте, если страница имеет значение.
Могу ли я использовать это с динамическими данными или переменными Элементора?
Непосредственно, не в самом JS поле Однако вы можете написать JavaScript, который взаимодействует с элементами на странице, которые населены динамическими данными Например, вы могли бы написать сценарий, который читает текст из динамически заполненного заголовка, Вы бы использовали обычные JavaScript селекторы для таргетинга этих элементов.

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

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

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

Шаблоны

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


