Elementor 웹사이트에 스크립트를 추가하는 3가지 쉬운 방법(전체 가이드)

게시 됨: 2022-12-14

때로는 JavaScript를 사용하여 Elementor 웹 사이트에 다른 도구와 서비스를 추가해야 합니다. 또는 웹 사이트에서 사용자 지정 JavaScript 기능을 구현하여 더 눈에 띄게 만들 수 있습니다.

하지만 어떻게합니까? Elementor에 JavaScript를 어떻게 추가할 수 있습니까?

이 게시물에서 방법을 보여 드리겠습니다.

기성 스크립트를 추가하거나 Elementor에 사용자 정의 JavaScript 코드를 추가하려는 경우 생각보다 쉽습니다.

이 기사에서는 Elementor에서 스크립트를 추가하는 세 가지 방법을 공유합니다.

언제 Elementor 웹사이트에 JavaScript를 추가해야 합니까?
Elementor에서 스크립트를 추가하는 방법(3가지 간단한 방법)
Elementor에서 스크립트 추가에 대한 FAQ
마무리

언제 Elementor 웹사이트에 JavaScript를 추가해야 합니까?

JavaScript는 클라이언트 브라우저에서 실행되는 프로그래밍 언어입니다. 널리 사용되는 이 스크립팅 언어를 사용하여 웹 사이트에 고급 기능을 무제한으로 추가할 수 있습니다.

Elementor는 웹 사이트 디자인을 쉽게 만들 수 있는 옵션을 제공합니다. 그러나 계산기, 애니메이션 및 기타 멋진 기능과 같은 기능적 기능을 추가하려는 경우 Javascript를 사용할 수 있습니다.

특정 대화형 기능을 추가하는 동안 Elementor 웹 사이트에 타사 JavaScript 라이브러리 또는 프레임워크를 추가해야 할 수 있습니다.

Google 애널리틱스, 애드센스, 태그 관리자 및 기타 서비스를 사용하려면 웹사이트 머리글 또는 바닥글 영역에 활성화 스크립트 태그를 추가해야 합니다.

Elementor에서 스크립트를 추가하는 방법(3가지 간단한 방법)

이제 이 기사의 주요 부분인 Elementor에 JavaScript를 추가하는 방법에 대해 살펴보겠습니다.

다음 3가지 방법을 확인하세요.

엘리멘터 HTML 위젯
Elementor Pro 사용자 정의 코드 기능
무료 플러그인 사용

시작하자.

방법 1: Elementor HTML 위젯

Elementor 편집기 패널 페이지를 엽니다.

여기서는 사용자 지정 JavaScript 코드를 사용하여 맨 위로 스크롤 기능을 구현하겠습니다.

간단한 버튼을 추가하고 CSS 버튼 ID ' back-to-top '을 설정했습니다. 나중에 이 버튼 ID를 사용하여 기능을 처리하겠습니다.

이제 HTML 위젯을 페이지의 원하는 위치로 끌어다 놓습니다.

컨텐츠 영역 내에 JavaScript 코드를 추가하십시오. 내 것을 추가했습니다.

 <script> let mybutton = document.getElementById("back-to-top"); window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } mybutton.addEventListener("click", scrollToTop); function scrollToTop() { window.scrollTo({ top: 0, behavior: "smooth" }); </script>

HTML <script></ script> 태그로 전체 코드를 래핑해야 합니다. 트리거하려는 위치에 버튼 ID를 배치합니다.

마지막으로 녹색 업데이트 버튼을 클릭하여 현재 변경 사항을 저장합니다.

웹사이트를 방문하여 모든 것이 제대로 작동하는지 확인하십시오.

당신은 그것을 가지고 있습니다! 사용자 지정 JavaScript를 사용하여 Elementor 웹 사이트에 멋진 기능을 구현했습니다!

방법 2: Elementor Pro 사용자 지정 코드 기능

Elementor HTML 위젯은 Elementor 웹사이트에 원시 JavaScript 또는 HTML 코드를 추가할 수 있는 옵션을 제공합니다.

그러나 Elementor 사용자 지정 코드 기능에는 더 많은 가능성이 있습니다. 이를 사용하여 웹사이트 머리글 및 바닥글 영역에 스크립트 태그를 추가할 수 있습니다.

Elementor > 사용자 지정 코드 로 이동합니다.

이제 코드 제목을 작성하고 붙여넣습니다. <head> , <body> 시작 및 </body> 끝 을 추가할 코드 위치를 설정할 수 있습니다.

또한 우선 순위를 1에서 10 까지 정의합니다. 낮은 숫자는 높은 우선 순위를 의미합니다.

우선순위를 1로 설정한 경우 사용자가 웹사이트를 방문할 때 스크립트가 처음에 렌더링됩니다.

이제 드롭다운 목록에서 조건을 설정한 다음 저장 버튼을 누르십시오.

수표를 줘. 계획한 대로 정확히 표시되어야 합니다.

방법 3: 무료 플러그인 사용

WPCode는 웹사이트의 머리글 및 바닥글 영역에 사용자 지정 코드 및 스크립트 태그를 추가할 수 있는 무료 플러그인입니다. 웹 사이트에 추가할 수 있는 미리 만들어진 많은 코드 스니펫이 포함된 편리한 라이브러리가 함께 제공됩니다.

Elementor 웹 사이트의 바닥글 부분에 몇 가지 스크립트를 추가해 보겠습니다.

먼저 웹사이트에 플러그인을 설치합니다.

그런 다음 Code Snippets > Header & Footer 로 이동합니다.

이제 적절한 위치에 스크립트 태그를 추가합니다. 머리글, 본문, 바닥글 영역에 추가할 수 있습니다.

바닥글 섹션에 두 개의 타사 라이브러리 스크립트를 추가했습니다.

마지막으로 변경 사항 저장 버튼을 누르십시오.

이제 웹사이트로 이동하여 스크립트가 작동하는지 확인하십시오.

Elementor에서 스크립트 추가에 대한 FAQ

Elementor 페이지에 JavaScript를 추가하는 것과 관련하여 사람들이 자주 묻는 일반적인 질문에 대한 답을 알아봅시다.

내 Elementor 사이트에 무료로 스크립트를 추가할 수 있습니까?

예, 무료로 Elementor에 JavaScript 코드를 추가할 수 있습니다. 그러나 웹사이트 머리글 또는 바닥글 영역에 스크립트 태그를 추가하려면 프리미엄 버전에서만 제공되는 Elementor Custom Code 기능을 사용해야 합니다.

Elementor에 HTML, CSS 및 JavaScript를 어떻게 추가합니까?

Elementor HTML 위젯 을 사용하여 HTML 및 JavaScript를 Elementor에 추가할 수 있습니다. 사용자 정의 CSS 코드를 추가하려면 고급 > 사용자 정의 CSS 로 이동하여 코드를 작성하십시오.

사용자 지정 JavaScript 코드가 내 웹사이트 디자인을 손상시킬 수 있습니까?

설마! 그러나 JavaScript가 어떻게 작동하는지 모른다면 그럴 가능성이 있습니다. 먼저 스테이징 웹 사이트에서 테스트하는 것이 좋습니다. 모든 것이 작동하면 라이브 사이트에 추가할 수 있습니다.

마무리

방법을 알고 있으면 Elementor 웹 사이트에 사용자 정의 JavaScript를 추가하는 것이 쉽습니다. 멋진 이미지 효과를 추가하거나 WordPress 테마 또는 Elementor에서 허용하지 않는 고유한 기능을 구현하려는 경우. 여기서 사용자 지정 JavaScript는 슈퍼 히어로처럼 작동합니다.

JavaScript로 더 나은 사용자 정의를 수행하고 웹 사이트를 방문자에게 더 매력적으로 만들 수 있습니다.

이 가이드에서는 Elementor 웹 사이트에 스크립트를 추가하는 3가지 방법을 공유했습니다.

이 기사를 즐기고 원하는 솔루션을 얻으시기 바랍니다.

이와 같은 더 편리한 팁과 요령을 얻으려면 내 뉴스레터에 가입하세요. 다른 사람들도 배울 수 있도록 게시물을 공유하세요.

좋은 하루 되세요!