가끔 팝업이 저절로 로드되는 것을 원하지 않을 때가 있습니다. 누군가가 버튼이나 링크를 클릭했을 때만 열리기를 원합니다. The 마스터 애드온 팝업 빌더 를 사용하여 이 작업을 수행합니다 클릭 시 트리거 및 CSS ID 선택기. 팝업에서 ID 를 설정한 다음 모든 Elementor 요소에 동일한 ID 를 추가하고 해당 요소를 클릭하면 팝업이 열립니다.
Elementor에서 클릭 시 팝업이란 무엇입니까? #
Elementor 에서 클릭 시 팝업은 방문자가 페이지가 로드될 때 자체적으로 나타나는 대신 특정 요소 — 버튼,링크, 이미지 또는 아이콘 —을 클릭할 때까지 숨겨져 있는 팝업입니다. The 마스터 애드온 팝업 빌더 로 하나를 구축합니다 클릭 시 트리거: 팝업에 CSS를 제공합니다 ID 선택기 등의 #sale-popup그런 다음 동일한 ID를 추가합니다(없음) #) 모든 Elementor 요소의 CSS ID 필드에. 일치가 ID 에서만 이루어지기 때문에 원하는만큼 많은 요소에서 하나의 팝업이 트리거 될 수 있습니다 — 무료 플러그인과 함께 작동하며 Elementor Pro 라이센스 및 사용자 정의 JavaScript 가 없습니다. On-click 팝업은 가격 세부 정보,비디오 데모,로그인 양식 및 쿠폰 코드와 같은 인텐트 기반 콘텐츠에 적합하며 자동 팝업이 도움이되기보다는 중단됩니다. 나머지 부분을 찾아보십시오 마스터 애드온 위젯 및 확장 그 안에 무엇을 더 넣을 수 있는지 알아보려면.
시작하기 전에 #
클릭 시 팝업을 설정하기 전에 세 가지가 준비되어야 합니다: 이미 Master Addons Popup Builder, Elementor 설치 및 활성, Master Addons for Elementor 설치 및 활성에서 구축된 팝업 전체 설정은 두 개의 필드와 약 1 분이 소요됩니다.
- Master Addons Popup Builder에 이미 구축된 팝업입니다(참조 팝업 설정 가이드 하나를 만들려면)
- Elementor가 설치되고 활성화되었습니다
- Elementor용 마스터 애드온이 설치되고 활성화되었습니다(설치 가이드)
1단계: 클릭 시 팝업을 열도록 설정합니다 #
Elementor에서 팝업을 열고 다음으로 이동하세요 MA 팝업 설정 패널. 아래에 설정, 변화 팝업 열기 에 클릭 시. 새로운 필드가 나타납니다: 선택자로 열기.
해당 필드에 CSS ID를 입력합니다 # 표시와예를 들어 #sale-popup. 팝업을 트리거하는 선택기입니다. 이름을 간단하고 고유하게 유지하여 재사용하기 쉽습니다.
2단계: Elementor Element에 CSS ID를 추가합니다 #
이제 트리거를 원하는 페이지로 이동하여 Elementor 에서 편집하십시오. 아무 요소나 선택하면 버튼이 잘 작동하고 해당 요소를 엽니다 고급 탭. 찾다 CSS ID 같은 이름을 입력하고 입력하세요 # 기호 없이 이번엔, 그래서 sale-popup.
그 차이는 사람들을 여행: 팝업의 Open By Selector가 사용합니다 #sale-popup는, 요소의 CSS ID가 사용하는 동안 sale-popup. 그만큼 # 는 ID 의 일부가 아닌 선택기 구문의 일부입니다.
3 단계: 미리보기 및 클릭 #
페이지를 업데이트한 다음 프런트 엔드에서 미리 봅니다. 레이아웃에 앉아 있는 버튼 (여기서는 “팝업 열기 클릭”이라고 표시되어 있음) 이 표시되며 아직 팝업이 보이지 않습니다.
버튼을 클릭하면 팝업이 바로 열립니다. 원하는 만큼의 요소에서 동일한 트리거가 작동하며 각 요소에 동일한 CSS ID 를 부여하면 됩니다.
문제 해결 #
- 클릭하면 아무 일도 일어나지 않습니다? ID가 일치하는지 확인하십시오:
#sale-popup팝업의 Open By Selector 에서,그리고sale-popup요소의 CSS ID 에서 (no #). - 팝업이 활성화되지 않았나요? 팝업의 것을 확인하십시오 활성화 가 켜져 있으며 표시 조건에는 버튼이 있는 페이지가 포함됩니다.
- CSS ID 필드에서 #을 사용했나요? 제거하십시오. Elementor CSS ID 는 일반 이름만 사용합니다.
자주 묻는 질문 #
클릭 시 마스터 애드온 팝업을 어떻게 열 수 있나요?
MA 팝업 설정 패널에서 Open Popup 을 On Click 으로 설정하고 Open By Selector 필드에 #sale-popup 과 같은 CSS ID 를 입력합니다. 그런 다음 Elementor 의 고급 탭에 있는 요소의 CSS ID 필드에 #이 없는 동일한 ID 를 추가합니다.
왜 한곳에는 #을 추가하지만 다른곳은 추가하지 않는걸까요?
Open By Selector 필드는 CSS 선택기를 기대하고, #은 ID 선택기를 표시합니다. Elementor CSS ID 필드는 ID 이름만 기대합니다. 따라서 팝업에서는 #sale-popup 을 사용하고 요소에서는 sale-popup 을 사용합니다.
하나 이상의 버튼에서 팝업을 트리거할 수 있나요?
예. 모든 버튼이나 요소에 동일한 CSS ID 를 부여한 다음 클릭 시 각각 동일한 팝업을 엽니다. 버튼,링크 및 기타 요소를 혼합할 수 있습니다.
버튼 대신 텍스트 링크에서 팝업을 열 수 있습니까?
예. 링크,이미지 또는 아이콘을 포함하여 일치하는 CSS ID 를 가진 모든 요소가 작동합니다. 해당 요소의 고급 탭에 ID 를 추가하면 트리거가 됩니다.
클릭 시 팝업에 Elementor Pro가 필요합니까?
아니요. Master Addons Popup Builder 는 Elementor 무료 버전에서 작동하므로 On Click 트리거 및 CSS ID 메서드는 Elementor Pro 없이 작동합니다.
