Elementor를 사용하여 버튼 클릭 시 팝업을 여는 방법은 무엇입니까? [2022]

버튼 클릭 시 팝업이 열리면 웹사이트가 방문자에게 얼마나 매력적으로 보일지 궁금 하십니까? 팝업을 여는 이러한 종류의 대화형 버튼을 원하는 경우 가장 인기 있는 웹 사이트 빌더인 Elementor 에 다양한 방법이 있습니다. 오늘은 코딩 없이 버튼 클릭으로 멋진 팝업을 쉽게 만드는 방법을 보여 드리겠습니다.

Elementor 모달 팝업이 있는 버튼의 5가지 최고의 사용 사례

튜토리얼을 시작하기 전에 버튼 클릭 시 Elementor 모달 팝업을 열어 어떤 이점을 누릴 수 있는지 살펴보겠습니다. 기본적으로 이러한 종류의 대화식 모달 팝업은 웹사이트 마케팅 캠페인 에 사용됩니다. 이 외에도 버튼 클릭 시 팝업을 여는 다용도 사용 사례가 많이 있습니다. 다음은 모달 팝업의 상위 5가지 사용 사례입니다.

1. 비즈니스를 위한 리드 캡처

비즈니스를 원활하게 운영하고 회사 성장을 높이려면 리드가 필요합니다. 리드를 육성하여 일반 고객으로 전환할 수 있습니다. 그리고 웹사이트는 리드를 포착할 수 있는 최고의 매체입니다. 버튼 클릭 시 팝업이 열리도록 하면 리드의 이름, 전화번호, 이메일 및 기타 세부 정보를 쉽게 수집 할 수 있습니다.

2. 이메일 구독 수집

일반적으로 이메일 구독을 수집하는 기본 버튼을 추가하면 사용자가 새 웹페이지로 이동합니다. 이렇게 하는 대신 버튼 클릭 시 팝업이 열리도록 하면 사용자가 현재 웹 페이지를 떠날 필요가 없습니다. 이 연습 은 이메일 구독을 놀랍게 증가시킵니다. 부드럽게 계산합니다.

3. 마케팅 판촉 및 판매

웹사이트를 통해 마케팅 프로모션을 실행할 때 버튼을 클릭하면 팝업이 열리므로 사이트에 인터랙티브한 모습을 제공하고 매출을 높일 수 있습니다. Elementor의 단일 팝업에 이미지, 양식, 특별 할인 쿠폰 등을 추가할 수 있습니다. 프로모션 섹션과 함께 원치 않는 웹사이트를 만들지 않고 버튼 클릭 시 열리는 팝업으로 이를 대체할 수 있습니다.

4. 흥미로운 공지사항 공유

그랜드 릴리스 또는 기타 흥미로운 발표 및 프로모션을 발표 할 계획이라면 버튼 클릭 시 팝업이 열리는 것이 가장 좋은 방법이 될 수 있습니다. 웹사이트에 멋진 모습을 제공하고 가상 색종이 조각 및 기타 축제 장식으로 웹사이트를 꾸밀 수 있습니다. 또한 '곧 출시될' 큰 소식을 발표할 계획이라면 버튼을 클릭할 때 열리는 팝업이 버즈를 만드는 데 도움이 될 수 있습니다 .

5. 콘텐츠 잠금으로 사용

다목적 웹 사이트가 있는 경우 연령, 회원 자격, 구독 등을 기반으로 콘텐츠에 대한 제한을 제공해야 할 수 있습니다. 웹사이트 섹션에서 직접 제한된 콘텐츠를 제공하면 액션당 클릭수가 확실히 줄어듭니다. 대신 버튼 클릭으로 즉시 열리는 매력적인 팝업을 만들 수 있습니다.

Elementor가 버튼에 팝업을 생성하는 최고의 플랫폼인 이유는 무엇입니까?

웹 사이트에는 WordPress의 버튼 클릭 시 열리는 팝업을 만드는 여러 가지 방법이 있습니다. 이를 수행하는 한 가지 방법은 사용자 지정 코딩 또는 전문가를 고용하는 것입니다. 기술에 정통하지 않은 경우 코드를 작성하거나 전문가를 고용하는 데 많은 비용이 들 수 있습니다. 그러나 가장 인기 있는 WordPress 웹 사이트 빌더인 Elementor 를 사용하면 코딩 없이도 할 수 있습니다.

버튼 클릭 시 열리는 팝업을 생성하려면 코딩이 필요하지 않은 드래그 앤 드롭 으로 간단히 할 수 있습니다. 또한 Elementor Popup 빌더 의 도움으로 버튼 클릭 시 열리는 팝업을 만드는 것은 너무 간단하여 스스로 만들 수 있습니다. Elementor는 무제한 사용자 정의 및 개인화 옵션을 제공합니다. 따라서 웹사이트 브랜드 가치에 맞춰 버튼을 클릭하면 즉시 열리는 모든 유형의 팝업을 만들 수 있습니다.

코드 없는 튜토리얼: 버튼 클릭 시 Elementor 모달 팝업을 여는 방법은 무엇입니까?

이제 튜토리얼을 시작하고 버튼 클릭 시 열리는 팝업 만들기를 시작합니다. Elementor 팝업 생성을 시작하기 전에 필요한 것은 5분 동안 집중하고 이 쉬운 튜토리얼을 단계별로 따라하는 것입니다.

1단계: Elementor PRO 시작하기

Elementor를 사용하여 버튼 클릭 시 열리는 모달 팝업을 만들 계획이라면 Elementor PRO 가 있어야 합니다. Elementor PRO의 독점 기능인 Elementor Popup Builder 를 사용하면 버튼 클릭으로 열리는 팝업을 즉시 구축할 수 있습니다. Elementor는 $49부터 시작 하는 다양한 가격 계획과 함께 제공됩니다. Elementor PRO 플러그인을 얻은 후 WordPress 웹 사이트에 설치 및 활성화하십시오.

2단계: Elementor Popup Builder를 사용하여 템플릿 만들기

이제 버튼 클릭으로 팝업 템플릿을 생성할 차례입니다. 이렇게 하려면 WordPress 대시보드로 이동하여 템플릿 → 팝업 으로 이동합니다. 탭을 클릭하면 즉시 Elementor 팝업 빌더로 이동합니다. 그런 다음 '새 팝업 추가' 버튼을 클릭합니다. 팝업이 나타납니다. 템플릿 유형 이 팝업으로 자동 선택됩니다. 원하는 경우 템플릿 이름을 지정한 다음 '템플릿 만들기' 버튼을 클릭할 수 있습니다.

그런 다음 Elementor 템플릿 라이브러리 로 리디렉션됩니다. 다양한 카테고리에서 사용할 수 있는 100개 이상의 팝업 컬렉션이 있습니다. WordPress 웹 사이트 요구 사항에 따라 적절한 Elementor 팝업 템플릿을 선택하십시오. 템플릿을 클릭하면 간략한 미리보기를 볼 수 있습니다. 그런 다음 '삽입' 버튼을 클릭하면 버튼 클릭 시 모달 팝업이 열립니다.

3단계: 팝업 템플릿 구성 및 개인화

그런 다음 왼쪽에 모든 구성 옵션이 있는 Elementor 편집기 패널이 열립니다. 거기에서 버튼 클릭 시 열리는 팝업을 쉽게 사용자 정의할 수 있습니다. Boxed 또는 Full Width 를 사용하여 모달 팝업을 유지할 수 있습니다. 마찬가지로 모달 팝업 높이, 열 간격, 열 위치, 수직 정렬, 오버플로, HTML 태그 등을 구성할 수 있습니다. 다양한 유형의 너비는 다양한 유형의 구성을 제공합니다.

모달 팝업 콘텐츠를 사용자 지정하려면 텍스트, 이미지 또는 버튼을 클릭하기만 하면 됩니다. 즉시 편집 패널이 왼쪽에 열립니다. 팝업 콘텐츠, 글꼴 모음 등을 쉽게 변경할 수 있습니다. 또한 여러 이메일 출력 섹션, 버튼 높이, 너비, 색상, 텍스트 등을 추가합니다. 제출 후 작업 설정, 제출 관리, 사용자 정의 이메일 콘텐츠 추가, 수신자 이메일, 발신자 이메일 ID 등의 옵션을 사용할 수 있습니다. 모든 변경을 완료한 후 '게시' 버튼을 클릭하십시오.

4단계: 조건 및 트리거 설정

전체 WordPress 웹 사이트 또는 선택 페이지에 대한 버튼 클릭으로 팝업을 열 수 있습니다. 선택한 페이지에서도 Elementor 팝업을 포함하거나 제외할 수 있습니다. 이러한 모든 구성은 '조건' 탭에서 사용할 수 있습니다.

'트리거' 탭에서 버튼 클릭 시 팝업이 열리도록 설정해야 합니다. 버튼 클릭을 사용하여 팝업을 미리 보려면 '클릭 시' 를 활성화하도록 토글합니다. '고급 규칙' 에서 팝업 표시 대상, 양식 도착 시 표시 등의 조건을 구성할 수 있습니다. 그런 다음 '저장 및 닫기' 버튼을 클릭합니다. 이것이 Elementor 팝업 템플릿을 만드는 방법입니다. 그런 다음 WordPress 대시보드로 돌아갑니다.

4단계: 필요한 곳에 Elementor 버튼 추가

이제 버튼 클릭 시 팝업이 열리도록 설정하려는 페이지를 엽니다. 새 페이지를 만들려면 페이지 → 새로 추가 로 이동합니다. 이 튜토리얼에서는 팝업 모달을 Elementor 버튼과 연결합니다. 페이지에 Elementor 버튼 을 끌어다 놓습니다.

버튼 모양, 텍스트 등을 개인화하여 웹사이트 브랜드 색상에 맞게 조정하십시오. 다음 단계는 버튼을 팝업 모달과 연결하는 것입니다. 이렇게 하려면 '링크' 필드에서 '동적 유형' 을 클릭하고 작업 에서 팝업 을 선택합니다. 그런 다음 팝업 옆의 '설정' 아이콘을 클릭하고 이전에 생성된 팝업 템플릿을 선택합니다. 그게 다야!

Elementor 버튼 클릭 시 팝업 최종 확인

버튼 클릭 시 열리는 팝업을 쉽게 만들 수 있는 방법입니다. 다른 사용자 정의를 수행한 후 페이지를 게시하십시오. 이제 미리보기로 이동하여 버튼 클릭 시 팝업이 어떻게 열리는지 확인합니다.

다른 페이지에 동일한 버튼을 사용하려면 버튼을 복사하여 새 웹페이지에 붙여넣 습니다. 또한 Elementor 팝업 템플릿 단축 코드 를 복사하여 버튼 클릭 시 열리는 팝업을 추가하려는 모든 위치에 사용할 수 있습니다.

Elementor 사용자를 위한 필수 애드온 보너스

Essential Addons For Elementor 는 100만 명 이상의 활성 사용자 와 85개 이상의 고유 위젯이 있는 가장 강력한 Elementor 라이브러리입니다. 또한 Creative Button 위젯은 고객을 위한 보다 다양한 디자인과 다목적 사용성을 제공합니다. Essential Addons 버튼 위젯을 사용하는 경우 Elementor 버튼과 유사한 방식으로 버튼 클릭 시 팝업이 쉽게 열리도록 할 수 있습니다.

Elementor 는 웹사이트 개발을 더 쉽게 만들었습니다. 버튼을 클릭하면 팝업이 열리는 것처럼 WordPress 웹사이트에 더 놀랍고 다양한 기능을 만들 수 있습니다. 여기까지가 이 튜토리얼의 끝입니다. 이 튜토리얼이 도움이 되었다면 다른 사람들과 공유하는 것을 잊지 마십시오.

Facebook 커뮤니티 에서 Elementor를 사용하여 버튼 클릭 시 열리는 팝업을 만드는 방법을 알려주십시오. 또한, 구독 이러한 종류의 자습서, 팁 및 요령에 대한 최신 정보를 얻으려면 블로그 를 참조하십시오.