페이지 비율에 의하여 팝업을 시기를 정하는 것은 당신이 1 개의 정확한 반점에 착륙할 필요가 있을 때까지 괜찮습니다. 어쩌면 당신은 누군가가 당신의 가격 구획,증언 행,또는 행동 밴드에 도달하는 즉시 그것을 원하고,페이지의 아래 모호한 40%가 아닙니다. The 마스터 애드온 팝업 빌더 그것을 처리합니다 요소로 스크롤합니다 트리거. 당신은 팝업에 a 와 CSS ID 를 제공합니다 #, 그런 다음 동일한 ID를 넣습니다 #트리거 역할을 하려는 요소에 대해 설명합니다.
Elementor 용 Master Addons 와 함께 무료로 제공되는 Master Addons Popup Builder 의 전체 설정은 다음과 같습니다. 백분율 기반 트리거가 필요한 모든 경우 팝업 트리거 옵션 가이드 그 하나를 덮는다.
시작하기 전에 #
- Master Addons Popup Builder에 이미 구축된 팝업입니다(참조 팝업 설정 가이드 하나를 만들려면)
- 스크롤 트리거로 사용할 요소가 있는 페이지입니다
- Elementor가 설치되고 활성화되었습니다
- Elementor용 마스터 애드온이 설치되고 활성화되었습니다(설치 가이드)
1단계: 팝업을 요소로 스크롤할 때 열도록 설정합니다 #
Elementor에서 팝업을 열고 다음으로 이동하세요 MA 팝업 설정 패널. 아래에 설정, 스위치 팝업 열기 에 요소로 스크롤합니다. 새로운 필드가 나타납니다: 요소 선택기.
필드 아래의 힌트는 스크롤에서 팝업을 트리거하는 요소에 대한 CSS 선택기 등 원하는 것을 설명합니다 #my-id 또는 .my-class.
2 단계: CSS ID 선택기 (# 기호 포함) 를 입력합니다 #
에서 요소 선택기 필드, 로 시작하는 CSS ID를 입력합니다 #. 여기 있어요 #show-popup. 이름을 짧고 고유하게 유지하여 다른 항목과 충돌하지 않고 페이지에서 재사용할 수 있습니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X # 실제 작업을 하고 있습니다: ID가 있는 요소를 보려면 팝업을 알려줍니다 show-popup. 팝업을 게시 (또는 업데이트) 하여 저장합니다.
3 단계: 대상 요소에 동일한 ID 추가 (# 기호 없음) #
이제 팝업이 실행되어야 하는 페이지를 열고 Elementor 에서 편집합니다. 트리거로 원하는 요소를 클릭하고,여기에 페이지의 섹션 블록이 있고,그것을 엽니다 고급 탭.
찾기 CSS ID 고급 탭에 필드를 입력하고 팝업에서 사용한 것과 동일한 이름을 입력하세요 없이 #, 그래서 그냥 show-popup. 그 작은 차이점 하나가 전체 트릭입니다:
- 팝업 요소 선택기:
#show-popup(해시로) - 엘리먼트의 CSS ID:
show-popup(해시 없음)
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X # 는 ID 의 일부가 아닌 CSS 선택기의 일부이므로 팝업 필드에 속하지만 요소의 CSS ID 필드에는 속하지 않습니다. 저장할 페이지를 업데이트하십시오. 한 가지 지켜봐야 할 점: 이미 앵커 링크 또는 사용자 정의 CSS 에 다른 곳에 연결된 ID 를 재사용하지 마십시오. 그렇지 않으면 놀라움을 얻을 수 있습니다.
4단계: 요소를 미리 보고 스크롤합니다 #
앞쪽 끝에 있는 페이지를 열고 스크롤을 시작합니다. 위쪽에는 아무것도 없습니다. The second the element carrying the show-popup ID가 보기로 스크롤되고 팝업이 페이지 위로 열립니다.
동일한 팝업을 트리거하는 여러 스크롤 포인트를 원하십니까? 각 요소에 동일한 CSS ID 를 부여, show-popup그리고 그들 중 누구라도 그것을 시작할 것입니다.
문제 해결 #
- 팝업은 절대 열리지 않나요? 해시를 확인합니다. 팝업의 Element Selector 가 필요합니다
#show-popup및 요소의 CSS ID가 필요합니다show-popup해시 없음으로. - CSS ID 필드에서 #을 사용했나요? 꺼내십시오. Elementor CSS ID 필드는 일반 이름만 원합니다.
- 동일한 ID를 가진 두 요소가 작동합니까? 트리거링에는 괜찮지만 이미 CSS를 처리하고 있는 ID나 페이지의 앵커 링크를 재사용하지 마세요.
- 팝업이 전혀 표시되지 않습니까? 팝업의 활성화가 켜져 있고 표시 조건에 트리거 요소가 있는 페이지가 포함되어 있는지 확인합니다.
자주 묻는 질문 #
Elementor 에서 특정 요소로 스크롤할 때 팝업을 어떻게 열 수 있습니까?
팝업의 팝업 열기 옵션을 On Scroll to Element 로 설정하고 Element Selector 필드에 #show-popup 같은 CSS ID 를 입력합니다. 그리고 Elementor 의 Advanced 탭에 있는 대상 요소의 CSS ID 필드에 #이 없는 동일한 ID 를 추가합니다.
팝업에는 #을 추가하지만 요소에는 추가하지 않는 이유는 무엇입니까?
Element Selector 필드는 CSS 선택기를 기대하고, #는 ID 선택기를 표시합니다. Elementor CSS ID 필드는 ID 이름만 기대합니다. 따라서 팝업에서는 #show-popup 을 사용하고 요소에서는 show-popup 을 사용합니다.
둘 이상의 요소에서 팝업을 트리거할 수 있나요?
예. 각 요소에 동일한 CSS ID 를 부여하고 방문자가 이들 중 하나로 스크롤하면 팝업이 발생합니다. 모두 동일한 제안을 트리거해야하는 여러 섹션이있는 경우 편리합니다.
On Scroll 과 On Scroll to Element 의 차이점은 무엇입니까?
On Scroll fire 방문자가 페이지의 설정된 비율을 스크롤한 후. On Scroll to Element 는 하나의 특정 요소가 보기에 들어올 때 실행되며,이는 팝업을 정확한 섹션에 묶기를 원할 때 더 정확합니다.
이를 위해 Elementor Pro가 필요합니까?
아니요. Master Addons Popup Builder 는 Elementor 의 무료 버전에서 작동하므로 On Scroll to Element 트리거 및 CSS ID 메서드는 Elementor Pro 없이 작동합니다.
