Elementor: Page 및 Element Level JS에 사용자 정의 JavaScript를 추가합니다

마스터 애드온 프로의 일부인 사용자 정의 JS 확장은 Elementor 내부의 JavaScript 필드를 제공합니다. 페이지 설정에서 전체 페이지에 코드를 추가하거나 고급 탭에서 단일 위젯,섹션 또는 컨테이너에 첨부하여 작은 상호 작용,테마 파일을 편집하거나 HTML 위젯에 스크립트를 채우지 않고 양식 조정 또는 이벤트 추적에 사용합니다.

모든 페이지를 위한 전용 코드 공간입니다

모든 페이지를 위한 전용 코드 공간입니다

스크립트를 HTML 위젯에 채우거나 전역 파일에 분산시키는 것을 중지합니다. 이 확장 프로그램은 전용 사용자 정의 JS 필드를 추가합니다 Page Settings > Advanced tab니다. 여기에 작성한 모든 코드는 이 특정 페이지나 게시물에서만 실행됩니다. 일회성 스크립트,A/B 테스트 추적 또는 고유한 대화식 요소를 처리하는 체계적인 방법입니다.

  • 분리 정리: 페이지별 스크립트를 사이트 전체 코드에서 격리합니다. 다른 페이지를 손상시킬 위험이 없습니다.
  • 쉬운 액세스: 페이지 설정에서 즉시 코드를 찾으세요—위젯 패널을 파헤치지 마세요.
  • 내장 모범 사례: 필드가 자동으로 처리됩니다 $(document).ready() 당신을 위해, 그래서 당신은 당신의 핵심 논리를 직접 작성할 수 있습니다.

페이지 수준 및 요소 수준 JavaScript

페이지 수준 코드는 페이지 설정,고급, 사용자 지정 JS 에 있으며 해당 페이지에서만 실행됩니다. 요소 수준 코드는 모든 위젯,열, 섹션 또는 컨테이너의 고급 탭에 있습니다. 요소 수준 코드에서는 단어 selector 는 해당 요소의 CSS 클래스로 교환되므로 스크립트는 해당 요소에만 닿습니다.

  • <script> 태그가 없고 문서 준비 래퍼가 없습니다: 코드가 래핑되어 있습니다 jQuery(document).ready 당신을 위해, 그리고 $ 작동하다.
  • 콘텐츠가 로드된 후 페이지 바닥글에 스크립트가 인쇄됩니다.
  • 코드는 Elementor 편집기 미리 보기 내부가 아닌 라이브 페이지에서 실행되므로 저장 후 게시된 페이지를 확인하세요.
  • 단어 선택기의 모든 인스턴스는 요소 수준 코드에서 대체됩니다. 사용 $('selector') 보다는 document.querySelector 거기.

Elementor 에서 사용자 정의 JavaScript 를 추가하는 방법

이 단계에서는 Master Addons Pro가 활성화되어 있고 WordPress 역할이 필터링되지 않은 HTML을 게시할 수 있다고 가정합니다. 이 HTML은 기본적으로 관리자가 게시할 수 있습니다.

  1. 대시보드에서 마스터 애드온으로 이동하여 확장 탭을 열고 사용자 정의 JS를 켜고 저장합니다.
  2. Elementor 로 페이지를 편집합니다.
  3. 전체 페이지에 대해 페이지 설정, 고급, 사용자 정의 JS를 엽니다. 한 요소에 대해 해당 요소를 선택하고 고급 탭을 엽니다.
  4. 코드를 <script> 태그 없이 붙여넣기.
  5. 페이지를 업데이트하고 라이브 URL에서 테스트합니다.

세 가지 Elementor 사용자 정의 JS 예제

이들 중 하나를 사용자 지정 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' });
  }
});

Elementor에서 JavaScript를 추가하는 방법을 비교했습니다

세 가지 일반적인 경로가 있습니다. 올바른 경로는 스크립트를 실행해야 하는 위치에 따라 다릅니다. 하나의 요소에 범위가 지정된 스타일도 필요한 경우 무료입니다 사용자 정의 CSS 확장 같은 방식으로 작동합니다.

HTML 위젯Elementor Pro 사용자 정의 코드마스터 애드온 사용자 정의 JS
계획프리 엘리멘터엘리멘터 프로마스터 애드온 프로
범위위젯이 있는 페이지입니다디스플레이 조건이 있는 사이트 전체한 페이지, 또는 한 요소
당신이 그것을 쓰는 곳캔버스의 위젯 내부대시보드의 사용자 정의 코드 화면입니다페이지 설정 또는 요소의 고급 탭
스크립트 태그필요한필요한필요하지 않습니다
한 요소를 타겟팅합니다선택기를 직접 작성합니다선택기를 직접 작성합니다선택기 키워드 사용

맞춤 JS에 대해 자주 묻는 질문

사용자가 사용자 정의 JS에 대해 가장 많이 묻는 쿼리를 알아보고 한 곳에서 답변을 찾으십시오.
HTML 위젯이나 테마의 functions.php 대신 언제 이것을 사용해야 합니까?

계산기,스크롤 효과 또는 클릭 이벤트와 같이 한 페이지 또는 한 요소에 속하는 스크립트에 사용하십시오. 모든 페이지에 필요한 코드의 경우 테마 또는 코드 조각 플러그인과 같은 사이트 전체 옵션이 더 나은 집입니다. HTML 위젯도 작동하지만 스크립트는 결국 캔버스 전체에 흩어져 나중에 놓치기 쉽습니다.

아니요. 코드를 작성할 때 추가되므로 짧고 깔끔하게 유지하세요. Master Addons 가 변경하는 유일한 방법은 요소 수준 코드의 선택기 키워드를 해당 요소의 CSS 클래스로 바꾸는 것입니다.

깨진 JavaScript 를 작성하면 어떻게됩니까? 내 전체 페이지가 깨질까요?

할 수 있습니다. 구문 오류로 인해 해당 페이지의 다른 스크립트가 실행되지 않습니다. 브라우저 콘솔에서 코드를 먼저 테스트하고 페이지가 중요한 경우 준비 사이트에서 시도해 보십시오.

JS 필드 자체 내에서가 아니라 직접적으로 말이죠. 하지만 동적 데이터로 채워진 페이지의 요소들과 상호작용하는 자바스크립트를 작성할 수 있습니다. 예를 들어,동적으로 채워진 표제에서 텍스트를 읽는 스크립트를 작성할 수 있습니다. 일반적인 자바스크립트 선택기를 사용하여 해당 요소들을 타겟팅할 것입니다.

템플릿 뷰어
페이스북
트위터
왓츠앱
링크 복사
지금 구매하기
사용자 정의 JS 간단한 경고
사용자 정의 JS 간단한 경고

트렌드 엘리먼트 위젯 및 확장

더 짧은 시간에 정교한 웹사이트를 구축하세요.

Elementor용 Master Addons Glassmorphism 확장: 흐림 값 컨트롤이 20px로 설정된 반투명 유리 카드

유리형성

집 무료 Elementor Glassmorphism 확장: 하나의 토글에서 서리 유리 효과 Glassmorphism 서리입니다...
자세히 보기
Elementor용 마스터 애드온 컨테이너 추가 확장: 최대 너비, 최대 높이, 최소 너비 및 최소 높이 컨트롤이 포함된 컨테이너의 최대 너비는 1400px입니다

컨테이너 엑스트라

홈 Elementor 컨테이너 최대 너비 및 최대 높이 제어 컨테이너 엑스트라는 무료 마스터입니다...
자세히 보기
Elementor용 마스터 애드온 패턴 확장: 보라색 그라데이션 그리드 왼쪽 스타일, 세 가지 패턴 스타일 및 패턴 활성화 패널이 있는 영웅입니다

패턴

홈 70+ 무료 Elementor 배경 패턴 패턴은 추가되는 무료 Master Addon 확장입니다...
자세히 보기
Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안

게시물/페이지 복제기

홈 중복 엘리멘터 페이지 및 게시물 한 번의 클릭으로 게시물/페이지 복제기는 무료 마스터입니다...
자세히 보기
Elementor용 마스터 애드온 읽기 진행률 표시줄 확장: 활성화, 위치, 높이 및 채우기 색상 설정이 포함된 개인 정보 보호 정책 페이지 상단에 파란색 표시줄 42%가 채워져 있습니다

읽기 진행률 표시줄

홈 WordPress (Elementor) 에서 읽기 진행률 표시 줄 추가 읽기 진행률 표시 줄은 무료입니다...
자세히 보기