WordPress 웹사이트에 모달 팝업을 쉽게 추가하는 방법: 3단계 튜토리얼

최근 연구 결과가 나왔다는 사실을 알고 계셨나요? 20억 개의 모달 팝업이 있었습니다. 상위 10% 중 9.28% 전환율은?(1)

예. 팝업은 웹사이트 방문을 사용자 친화적으로 만들고 더 많은 뉴스레터 가입을 빠르게 유도하는 데 도움이 됩니다. 팝업의 모양과 기능이 크게 변경되었습니다. 결과적으로, 그 어느 때보다 최신 웹사이트에서 인기가 높아지고 있습니다.

귀하도 귀하의 웹사이트에 WP 모달을 추가하고 그 이점을 활용하고 싶으십니까?

그렇다면 이 블로그가 바로 당신에게 필요한 것입니다. 이것은 팝업 모달과 WordPress 웹사이트에 쉽게 추가하는 방법. 

출처 : (1) 팝업 통계: 20억 개의 팝업 사례 분석 결과

모달 팝업이란 무엇입니까?

모달 팝업은 매우 일반적이며 이를 접하지 않았을 가능성은 거의 없습니다. 그런데 모달 팝업의 정의를 알고 있나요? 한번 살펴보자.

모달(모달 창 또는 라이트박스라고도 함)은 다른 모든 페이지 콘텐츠 앞에 표시되고 비활성화되는 웹 페이지 요소입니다. 기본 콘텐츠로 돌아가려면 사용자는 작업을 완료하거나 닫아 모달에 참여해야 합니다.

– 허브스팟

모달 창은 이전 모델 대화 상자와 다릅니다. 모덜리스 팝업에서는 팝업이 켜져 있어도 사용자는 전체 창에 접근할 수 있습니다. 따라서 팝업을 무시하고 작업을 계속할 수 있습니다.

반면에 새로운 모달 팝업은 하위 창 형태로 새로운 "모드"를 생성하고 상위 창을 비활성화합니다. 결과적으로 사용자는 어떤 조치를 취하거나 모달 팝업을 닫을 때까지 원래 창에서 작업할 수 없습니다. 

이점은 무엇입니까? 장점은 1~2초라도 웹사이트 방문자의 관심을 끌 수 있다는 것입니다. 그리고 당신의 메시지에 사용자의 초점을 맞추는 것이 당신에게 필요한 것입니다. 그렇죠? 

왜냐하면 그들이 당신이 제공해야 하는 것을 보면 1초 이상 머물면서 당신에게 리드를 보장할 것이기 때문입니다.

WordPress 웹사이트에서 팝업 모달을 사용하는 이유

대부분의 사람들은 팝업이 짜증스럽다고 생각합니다. 물론 나는 그들을 비난하는 것이 아니다. 작업을 위해 사이트에 접속했는데 갑자기 팝업이 나타나서 중단되면 확실히 짜증스럽습니다. 

하지만 사업주라면 팝업을 다르게 보아야 합니다. 믿거나 말거나 이러한 성가신 팝업이 놀라운 효과를 발휘하기 때문입니다. 팝업 모달은 특히 리드 수집에서 매우 성공적인 것으로 입증되었습니다.

스모에 따르면, 팝업 모달을 사용하여 2년 이내에 약 23,645,948개의 이메일 주소를 수집했습니다. 많은 경우 전환율이 50.2%까지 올라갔습니다! 

따라서 이메일 목록을 강화하고 전환율을 높이려는 경우 입증된 리드 자석인 모달 팝이 적합합니다.

게다가 모달은 간단하고 유연하며 작업을 완료하기 위해 사용자를 다른 페이지로 보낼 필요가 없습니다. 더 나은 사용자 경험으로 더 많은 리드를 얻을 수 있습니다. 따라서 모달이 쓸모 없거나 죽었다고 생각하지 말고 오늘부터 사용하십시오.

현대 웹 디자인에서 모달 창의 일반적인 용도

모달은 웹 사이트 방문자가 어떤 조치를 취하거나 중요한 메시지를 확인해야 할 때마다 매우 효과적입니다. 웹 디자인에서 모달 창의 일반적인 용도는 다음과 같습니다.

• 환영 메시지 표시
• 뉴스레터 구독을 위한 이메일 및 리드 수집
• 로그인 양식
• 조치를 취하기 전에 경고 메시지 표시
• 쿠키 정책 표시
• 이미지 갤러리(제품), 영상 등의 디스플레이 미디어  
• 더 나은 사용자 경험을 위한 다단계 양식입니다.

나는 웹 디자인에서 모달을 사용하는 다양한 방법 중 몇 가지만 나열했습니다. WordPress에서 사용자 정의 팝업을 만드는 방법을 알게 되면 최적의 결과를 위해 웹 사이트에서 이를 사용하는 다양한 방법을 찾을 수 있습니다. 

이제 시작하겠습니다.

시작하는 데 필요한 설정

귀하의 웹 사이트에 WordPress가 설치되어 있다고 가정합니다. 그 외에도 웹 사이트에서 모달을 만들려면 페이지 빌더와 WordPress 팝업 플러그인이 필요합니다.

1. 엘레멘터 (무료 버전)
2. ElementsKit (무료 버전과 프로 버전 모두)

Elementor는 무료 페이지 빌더이며 ElementsKit은 최고의 WordPress 모달 팝업 플러그인 중 하나입니다.

설치가 완료되었나요? 이제 WordPress에서 클릭 시 WordPress 사용자 정의 팝업을 생성할 준비가 모두 완료되었습니다! 이제 주요 프로세스를 시작하겠습니다.

ElementsKit을 사용하여 Elementor의 3단계로 WordPress에 모달 팝업을 추가하는 방법

WordPress 사이트에 팝업을 추가하는 것이 어렵다고 생각한다면 놀랄 준비가 되어 있습니다. 아래 단계에 따라 쉽게 wp에서 Elementor 모달 팝업을 쉽게 만드세요. 이것은 WordPress에 팝업을 추가하는 방법에 대한 가장 쉬운 튜토리얼입니다.

1단계: 모달 팝업 위젯 활성화

ElementsKit 플러그인을 설치하면 다음을 활성화할 수 있습니다. Elementor 모달 팝업 위젯 WordPress 대시보드에서

• 이동  ElementsKit  > 위젯 > 켜다 팝업 모드엘 > 클릭 변경 사항을 저장하다

2단계: WP 모달 팝업 위젯 추가 

• 팝업 모달을 검색하고, 끌어서 놓기 위젯 모달을 표시하려는 섹션에

3단계: 완료할 설정 구성

편집 옵션으로 이동하려면 팝업 섹션에서 편집 아이콘을 클릭하세요.

• 버튼 텍스트를 변경하려면 다음으로 이동하세요. 콘텐츠 > 토글 버튼 > 상표 그리고 편집하다

• 변경하려면 제목 그리고 부제 이동 콘텐츠 > 머리글 사용자 정의 텍스트로 옵션을 변경하세요.

• 변경하려면 콘텐츠 본문의 콘텐츠 섹션을 확장하고 편집하다 WordPress 팝업 메시지를 생성하는 텍스트입니다.

• 이동 콘텐츠 > 바닥글 > 버튼 > CTA 그리고 ElementsKit이라는 사용자 정의 팝업 빌더를 사용하여 CTA 라벨과 URL을 변경해보세요.

• 마지막으로 다음을 클릭하세요. 업데이트 저장합니다.

완료. 이제 미리보기 버튼을 클릭하여 결과를 보고 WordPress 팝업 창이 어떻게 보이는지 확인하세요.

잘하셨어요! Elementor 모달 팝업을 만들었습니다.

모달에 대한 추가 설정

이제 사용자 정의할 수 있는 추가 모달 설정을 살펴보겠습니다.

공들여 나열한 것:

토글러 유형, 팝업 위치 및 팝업 표시 옵션을 변경하려면 레이아웃 옵션을 확장하세요.

토글러 유형:

누군가가 버튼을 클릭할 때 트리거되는 모달이 반드시 있을 필요는 없습니다. ElementsKit은 버튼 외에 선택할 수 있는 2가지 옵션을 더 제공합니다.

영상: 모달의 토글러로 버튼 대신 모든 크기의 사용자 정의 이미지를 선택할 수 있습니다. 사용자 정의 이미지를 선택하려면 

• 콘텐츠로 이동 > 토글러 유형 > 이미지 선택
• 토글러 이미지로 이동 > 선택 영상, 이미지 크기 및 정렬

시간: 사용자의 작업 없이 특정 시간 이후에 트리거되도록 모달을 설정할 수도 있습니다. 예를 들어 3초 후에 모달이 나타나도록 설정하려면

• 콘텐츠로 이동 > 토글러 유형 > 시간
• 시간 추가 이후로 전환 (초)

팝업 쇼 유형:

팝업 표시 유형에는 모달과 슬라이드의 두 가지 옵션이 있습니다.

팝업 위치: 

창의 아무 곳에나 팝업을 배치하도록 선택할 수 있습니다. 선택할 수 있는 위치 옵션은 다음과 같습니다.

• 왼쪽 상단
• 상단 중앙
• 맨 위 오른쪽
• 중앙 왼쪽
• 센터
• 중앙 오른쪽
• 왼쪽 하단
• 하단 중앙
• 오른쪽 하단

팝업: 

팝업 옵션을 확장하여 너비와 최소 높이. 여기서는 다음과 같은 옵션도 제공됩니다. 표시 또는 숨기기 그만큼 아이콘, 머리글, 바닥글을 닫습니다. 당신은 또한 수 수평 및 수직 위치 조정 그리고 추가하세요 생기 당신의 소원에 따라.

씌우다: 

사용자가 모달을 클릭하여 닫도록 강요하고 싶지 않은 경우 팝업 OnClick 오버레이 닫기 옵션. 이런 방식으로 사용자는 창의 아무 곳이나 클릭하여 모달을 닫을 수 있습니다.

닫기 아이콘: 

여기서 닫기 아이콘의 위치를 변경할 수 있습니다. 팝업 오른쪽 상단, 팝업 왼쪽 상단, 창 오른쪽 상단, 창 왼쪽 상단을 설정할 수 있습니다. 수직 및 수평 위치를 변경할 수도 있습니다. 또한 라이브러리에서 원하는 아이콘을 선택하거나 SVG 이미지를 아이콘으로 사용할 수 있습니다.

머리글:

제목과 부제를 변경하는 것 외에도 여기에서 구분선을 표시하거나 숨길 수도 있습니다.

보행인:

바닥글 옵션을 확장하여 바닥글 버튼의 레이블, 변형 및 정렬을 변경합니다. 원하는 경우 여기에서 숨길 수도 있습니다. 

이제 알았어요! 이제 웹사이트에서 현대적으로 보이는 매력적인 팝업을 사용할 수 있습니다.

자세한 내용은 설명서를 읽어보세요. Elementor용 ElementsKit 팝업 모달 위젯.

ElementsKit 팝업 빌더를 사용하여 Elementor Modal에 사용자 정의 디자인을 추가하는 방법

이제 WordPress에서 모달 창을 사용자 정의하기 위해 텍스트, 위치, 애니메이션을 변경하는 방법을 알게 되었습니다. 하지만 여전히 약간 지루해 보이지 않나요? 다른 WordPress Elementor 모달 팝업과 마찬가지입니다.

페이지처럼 모달 창에 사용자 정의 이미지, 비디오 또는 기타 위젯을 추가할 수 있다면 정말 멋질 것입니다. ElementsKit을 사용하면 모델에 맞춤형 디자인을 추가할 수 있습니다.

모달에서 원하는 맞춤 디자인을 쉽게 만들려면 다음 단계를 따르세요.

• 콘텐츠 > 콘텐츠 >로 이동하세요. 켜다 템플릿 활성화
• 모달 버튼을 클릭하고 모달이 열리면 편집 옵션 열다 위젯 영역

• 위젯 영역이 열리면 다음을 수행할 수 있습니다. 찾다 모든 위젯에 대해 > 끌어서 놓기 > 업데이트 에게 구하다.

예를 들어 동영상을 추가하려면 위젯 영역에서 동영상을 검색한 후 드래그 앤 드롭하여 모델에 추가하고 업데이트하세요. 이제 비디오가 모달 창에 나타납니다.

아름다운 모달을 위해 미리 만들어진 ElementsKit 섹션 사용

모달 팝업 디자인을 처음부터 만들 시간이 없나요? 걱정하지 마세요. ElementsKit 팝업 빌더는 시청자에게 메시지를 강조하기 위해 매력적인 모달을 만들 수 있는 많은 기본 제공 섹션을 제공합니다.

ElementsKit에 내장된 위젯을 사용하려면 다음 단계를 따르세요.

• 다음을 클릭하세요. 편집 옵션 모달에  열다 위젯 영역
• 미리 만들어진 섹션이 포함된 다른 위젯 창을 열려면 EK 버튼을 클릭하세요.

• > 섹션 >으로 이동 선택하다 당신이 좋아하는 섹션 > 끼워 넣다

• 삽입 후 다음을 수행할 수 있습니다. 변화 귀하의 선호도에 따라 이미지, 텍스트 또는 배경 색상을 선택하고 업데이트.

그리고 여기에 최종 결과가 있습니다!

ElementsKit은 60개 이상의 위젯과 500개 이상의 Ready 섹션을 제공합니다. ElementsKit에 대해 자세히 알아보기 그리고 이를 사용하여 웹사이트를 개선하는 방법을 알아보세요.

ElementsKit을 사용하여 Modal에 문의 양식 7 추가

앞서 말했듯이 모달은 더 많은 뉴스레터 구독을 얻고 사용자 데이터를 수집하는 데 효과적입니다. 하지만 그러려면 모달에 문의 양식을 추가해야 합니다. 그렇죠? 

당황하지 마십시오. 팝업 창에 문의 양식을 추가하기 위해 다른 WordPress 팝업 플러그인이 필요하지 않습니다. ElementsKit WordPress 플러그인은 올인원 팝업 메이커 플러그인입니다.

ElementsKit 팝업 메이커 플러그인을 사용하여 모달에 널리 사용되는 문의 양식 7을 추가하려면 아래 지침을 따르세요.

이 단계를 수행하기 전에 다음을 생성했는지 확인하세요. 문의 양식 7을 사용하여 웹사이트의 문의 양식, Elementor 페이지 빌더 및 ElementsKit.

아래 비디오 튜토리얼을 보고 문의 양식을 만들 수도 있습니다.

시작하자.

• 이동 내용 > 내용 > 켜다 템플릿 활성화
• 다음을 클릭하세요. 편집 옵션 열다 위젯 영역
• 찾다 문의 양식, 끌어서 놓기 추가하려는 섹션에서
• 확장하다 문의 양식 7의 스타일 옵션
• 다음 중에서 선택하세요. 미리 만들어진 형태와 업데이트.

여기에는 이메일 목록을 강화할 수 있는 연락처 양식이 포함된 모달 팝업이 있습니다.

깊은 코딩 지식 없이도 사용자 정의 위젯을 만들 수 있다는 것을 알고 계셨습니까? 빌드 방법을 확인하세요. ElementsKit을 사용하여 코드 없이 쉽게 사용자 정의 위젯.

WordPress Elementor Modal Popup 추가를 위한 효과적인 팁

WordPress 모달 팝업은 사용자 참여를 크게 향상시키고 중요한 메시지를 전달하며 방문자의 특정 작업을 유도할 수 있습니다. 다음은 WordPress 사이트에 영향력 있는 모달 팝업을 구현하기 위한 7가지 효과적인 팁.

1️⃣ 신뢰할 수 있는 플러그인을 선택하세요

웹사이트에 모달 창을 만들려면 Elementor” 또는 “ElementsKit”과 같이 잘 관리되는 WordPress 모달 플러그인을 선택하세요.

2️⃣ 명확한 목표 정의

이메일 수집, 제안 홍보, 중요한 정보 전달 등 WordPress 모달 팝업의 목적을 명확하게 설명하세요.

3️⃣ 타이밍이 중요하다

시간 지연, 스크롤 깊이 또는 종료 의도와 같은 트리거를 사용하여 적절한 순간에 팝업을 표시합니다. 이는 즉각적인 페이지 로드 중단을 방지하는 데 도움이 됩니다.

4️⃣ 모바일 반응성

WordPress 모달 팝업이 모바일 친화적인지 확인하여 다양한 장치에서 긍정적인 경험을 제공하세요.

5️⃣사용자 경험을 위한 디자인

고품질 콘텐츠로 간결하고 시각적으로 매력적인 WordPress 모달 팝업을 디자인하세요. 콘텐츠에 관심이 없는 사용자를 위해 팝업을 닫을 수 있는 쉽게 액세스할 수 있는 옵션을 포함합니다.

6️⃣ 최적화를 위한 A/B 테스트

A/B 테스트를 구현하여 WordPress에서 변형을 만들고 청중에게 가장 효과적인 요소를 식별함으로써 모달을 개선하세요.

7️⃣ 개인정보 보호 규정 준수

귀하의 WordPress 모달 팝업이 개인 정보 보호 정책의 투명한 전달 및 데이터 수집에 대한 명시적인 동의 획득을 포함하여 개인 정보 보호 규정을 준수하는지 확인하세요.

자주 묻는 질문

마무리

축하합니다! 이제 WordPress에서 Elementor 팝업 모달을 만드는 방법을 알게 되었습니다. 엘리멘터 애드온. 간편한 팝업 제작 플러그인인 ElementsKit Pro와 Elementor 페이지 빌더를 사용하여 연락처 양식 팝업을 만들고 WordPress 사이트에서 모든 사용자 정의를 손쉽게 수행하세요.

여기서 멈추지 마세요. 웹사이트에서 WordPress 팝업 모달을 사용할 수 있는 방법에 대해 계속 실험해 보세요. 그리고 ElementsKit을 사용하여 WordPress 팝업을 만드는 데 도움이 필요하면 아래에 댓글을 남겨 주세요.