• 특징
  • 템플릿
  • 가격 책정
  • Korean
  • 특징
  • 템플릿
  • 가격 책정
  • Korean
Ops! 검색된 위젯을 찾을 수 없습니다! 혹시 알고 계신가요? 그렇다면, 제출 여기

Elementor를 사용하여 팝업을 만드는 방법 | 쉬운 단계

make a pop up using Elementor

Elementor를 사용하여 팝업을 만들 수 있다는 사실을 알고 계셨나요?

예, 팝업을 직접 디자인할 수 있는 Elementor의 고유한 기능 중 하나입니다. 팝업은 알림, 트래픽 유인, 오퍼 표시, 이탈 유도 등의 용도로 사용할 수 있습니다. 최신 버전의 Elementor에서는 사용자 정의 또는 템플릿을 사용하여 팝업을 디자인할 수 있습니다.

Elementor를 사용하여 팝업을 만들려면, 로 이동하여 페이지 >> 팝업 레이아웃 설정 을 클릭하고 텍스트, 이미지, 버튼 등의 요소를 추가합니다. 팝업 템플릿이 준비되면 저장하기만 하면 됩니다. 그런 다음 "모달" 위젯을 클릭하고 팝업 템플릿을 모달에 첨부하여 표시합니다.

이제 Elementor를 사용하여 팝업을 만드는 방법을 보여드리겠습니다.

시작해보자!

Elementor를 사용하여 팝업 만들기 | 7단계

여기에서는 다음을 알아볼 수 있습니다.

  • 팝업 템플릿 만들기
  • 템플릿을 사용하여 팝업 만들기

참고: 팝업 템플릿을 디자인하는 방법은 여러 가지가 있지만 가장 빠른 방법은 배경에 콜투액션 버튼이 있는 이미지를 넣는 것입니다. 이 글에서는 이 방법을 사용합니다.

1단계: 팝업 템플릿 만들기

가장 먼저 해야 할 일은 웹페이지에 표시할 팝업을 만드는 것입니다.

이렇게 하려면 워드프레스 대시보드로 이동하여 페이지 편집기에서 템플릿을 만들어야 합니다.

이제 이 부분은 일반적으로 Elementor 팝업 빌더를 사용하여 많은 단계를 거쳐야 합니다.

그러나 이러한 팝업을 디자인하는 데 대부분 몇 분 정도 걸리는 다른 경로로 이동합니다.

이제 Elementor에 익숙한 방식으로 페이지를 열어 보겠습니다.

design pop up template

새 페이지를 열고 Elementor 페이지 편집기 창으로 이동합니다.

더하기(+) 기호를 클릭하여 빈 섹션을 만듭니다.

2단계: 팝업 디자인

add pop up elements

빈 페이지에 버튼 위젯을 드래그하여 템플릿 만들기를 시작합니다.

Elementor에서 버튼 위젯을 선택하거나 다음 중 하나를 사용할 수 있습니다. Elementor 애드온 라이브러리 -Element Pack.

팝업에는 클릭 유도 문안을 시작하기 위한 버튼이 필요합니다.

3단계: 팝업 창 설정

pop up template layout

Elementor로 만드는 팝업의 크기를 결정해야 합니다.

를 클릭하고 섹션 설정 아이콘으로 이동하여 레이아웃 탭를 클릭하고 콘텐츠 너비를 900.

콘텐츠 폭을 좁게 또는 넓게 선택할 수도 있습니다.

팝업과 함께 전달할 정보의 양을 따라가기만 하면 됩니다.

add padding to pop up in elementor

그런 다음 열 설정 아이콘으로 이동하여 고급 탭로 설정하고 패딩150 모든 방향에 걸쳐 있습니다.

이렇게 하면 배경 이미지를 완벽하게 표시할 수 있는 제한된 영역을 만들 수 있습니다.

4단계: Elementor를 사용하여 팝업 템플릿 스타일 지정하기

Style The Pop up Template Using Elementor

를 클릭하여 팝업에 배경 이미지를 추가합니다. 열 설정 아이콘.

다음에서 이미지를 선택하세요. 스타일 > 배경 를 클릭하고 위치를 센터 센터.

이미지가 너무 큰 경우, 이미지가 너무 크면 사용자 지정 옵션을 크기 를 클릭하고 그에 따라 이미지 너비를 조정합니다.

참고: 원하는 경우 여러 섹션을 사용하여 텍스트와 이미지를 나란히 배치할 수 있습니다. 무엇이든 가능합니다.

pop up background setting

Elementor를 사용하여 팝업을 만들려면 버튼을 특정 위치에 추가해야 합니다.

중요한 클릭 유도 문안으로 팝업에 충분한 흰색 영역이 있는 버튼을 배치합니다.

를 클릭하고 버튼 위젯으로 이동하여 고급 탭를 클릭한 다음 포지셔닝.

pop up position select

이제 위치 기본값에서 절대 를 클릭하고 오프셋 값을 사용하여 조정합니다.

pop up appearance select

색상 등을 사용하여 버튼 스타일을 변경하여 더욱 눈길을 끌도록 만들 수 있습니다.

완벽해요!

방금 Elementor를 사용하여 멋진 팝업을 만들었습니다.

5단계: 템플릿 마무리

이제 팝업 템플릿이 완성되었으니 Elementor에 저장할 차례입니다.

이렇게 하려면 섹션 설정 아이콘을 마우스 오른쪽 버튼으로 클릭하고 템플릿으로 저장.

save pop up template

다음으로 이름 필드저장 버튼을 클릭합니다.

템플릿에 이름을 지정하고 저장 버튼을 누릅니다.

이를 통해 Elementor는 디자인을 템플릿 라이브러리로 가져왔습니다.

6단계: Elementor 팝업 만들기

모달이 포함된 팝업 템플릿을 사용하면 웹페이지 내부에 표시되는 팝업 제작을 완료할 수 있습니다.

make elementor pop up with modal

팝업을 표시할 페이지로 이동해야 합니다.

모달 위젯을 끌어다 놓기 (by Element Pack) 페이지 내부를 클릭합니다.

adjust pop up modal settings

모달은 Elementor 팝업 빌더 도구로, 4가지 설정이 가능한 팝업으로 작동합니다. 기본값 (버튼 작동 팝업), 스플래시 화면 (작동 시간 팝업), 종료 팝업 (종료 의도) 및 사용자 지정 링크.

함께 가자 스플래시 화면 이번엔 

에서 선택합니다. 레이아웃 옵션을 선택합니다.

select modal pop up layout

그런 다음 팝업 시간을 선택합니다.

팝업에는 10초를 사용했습니다.

페이지에 접속하여 10초 동안 머무르는 모든 사용자에게 이 팝업이 페이지에 표시됩니다.

7단계: 모달에 팝업 템플릿 첨부하기

마지막 단계입니다.

템플릿을 모달에 첨부하기만 하면 Elementor를 사용하여 모든 팝업을 만들 수 있습니다.

attach pop up with elementor modal

두 번째 섹션에서는 모달를 클릭하고 Elementor 템플릿을 소스로 선택합니다.

choose template for modal pop up

이제 옵션에서 템플릿 선택를 클릭하고 방금 만든 템플릿을 찾을 때까지 스크롤하여 선택합니다.

팝업이 미리보기로 즉시 표시됩니다.

set header footer of pop up elementor

여기에서 다음을 찾을 수 있습니다. 헤더 & 푸터 텍스트 필드를 템플릿과 함께 입력합니다.

두 가지 모두 기본적으로 표시됩니다.

원하는 경우 텍스트를 표시하거나 간단히 지워서 끌 수 있습니다.

add button to pop up

한 가지 더, 팝업에 닫기 버튼을 그대로 두거나 제거하도록 선택할 수 있습니다.

전적으로 여러분의 선택입니다.

결론

팝업을 만드는 것은 매우 쉽습니다!

최소한의 노력으로 팝업을 스마트하게 사용하여 실제로 많은 트래픽을 얻을 수 있습니다.

최상의 결과를 얻으려면 이 블로그를 참조하세요: 엘리멘터에서 종료 의도 팝업을 만드는 방법

잠재 고객을 구매자 목록으로 끌어들이는 완벽한 팝업을 디자인하는 방법을 알려드립니다.

기사를 읽어 주셔서 감사합니다.

댓글 남기기

목차

Copyright © 2026 Bd테마. 모든 권리 보유.

Money Transfer Logo