Popup Maker 팝업 플러그인 사용법

Popup Maker 플러그인은 무료로 다양한 유형의 팝업을 쉽게 생성하고 관리할 수 있는 강력한 도구로 워드프레스에서 인기 있는 팝업 플러그인입니다. 단, 일부 슬라이드 플러그인과 충돌될 수 있다는 점 참고하시기 바랍니다. 이 글에서는 해당 플러그인을 설치하여 팝업을 사이트에 적용하는 방법을 살펴 보겠습니다.

플러그인 사용법

플러그인 설치

popup maker 플러그인

관리자 페이지에서 플러그인 > 새로 추가를 통해 Popup Maker 플러그인을 설치 후 활성화 합니다.

새 팝업 만들기

팝업 만들기

설치 후 왼쪽 사이드 바 메뉴에서 Popup Maker > Create Popup를 클릭합니다.

팝업 만들기2 1

편집기에서 제목을 입력합니다. 제목은 내부에서 관리할 때 사용되며 방문자를 보지 못합니다. 팝업의 내용은 텍스트, 이미지, 버튼 등을 추가할 수 있습니다. 간단한 방법은 배너를 제작하여 이미지로 업로드하는 것이 간편합니다.

팝업 크기

이미지를 업로드 한 후 기본으로 해상도가 낮게 설정되어 있어 이미지 클릭 후 편집 아이콘을 눌러 해상도 크기를 높여줍니다. PC에서는 너비 사이즈는 600 - 800사이를 추천합니다.

팝업 트리거 설정

트리거 설정

트리거는 팝업이 언제 열릴지를 설정하는 것으로 페이지가 로드 될때 자동으로 열리게 하려면 첫번째 옵션인 Time Delay/Auto Open으로 선택하고, 클릭시 오픈될 경우, 두번째 옵션 Click Open을 선택합니다. 하단의 On Popup Close는 팝업이 한번 닫히면 Prevent popup from showing to visitor again using a cookie가 활성화 되어있어 일정시간동안 팝업이 뜨는 것을 자동으로 방지해 줍니다.

트리거 설정2

위 트리거 설정은 페이지 로드 팝업이 자동으로 열리고, 팝업 닫기시 한달 동안 팝업이 나오지 않는 쿠키가 적용되었습니다.

time delay 설정

트리거 Time Delay 설정에서 팝업이 오픈되는 지연 시간과 따로 생성된 쿠키를 연결할 수 있습니다.

팝업 디스플레이 위치

그 외 Display, Close, Advanced 등 다양한 세부 조건들을 커스텀 할 수 있습니다. 이 글에서는 자주 쓰이는 부분만 설명하도록 하겠습니다. Display의 Preset 탭에서는 Center Popup으로 가운데로 위치를 고정합니다.

팝업 디스플레이 사이즈

Display의 Size 탭에서는 위에서 지정한 이미지 사이즈와 동일하게 맞춰줍니다. 위에서 가로, 세로 크기가 600이므로 동일하게 입력합니다.

팝업 닫기

Close에서는 기본 텍스트명이 Close라고 되어있는데요. 이를 닫기 또는 X 표시자로 바꿀 수 있습니다.

Default Theme 편집

팝업 디스플레이 appearance

Display의 Appearance 탭에서 Popup 테마를 선택할 수 있는데요. 기본으로 Default Theme로 적용되어 있습니다. Theme에서는 팝업의 디자인을 커스텀하여 만들 수 있습니다.

팝업 default theme 1

팝업에서 자주 사용할 디자인을 Default Theme에 저장해두고 앞으로 편하게 팝업 콘텐츠만 업로드하여 사용하면 됩니다. 오른쪽 메뉴 Popup Maker > Popup Theme > Default Theme에서 편집으로 들어갑니다.

팝업 테마 세팅1 1
팝업 테마 세팅2

현재 Default Theme에서 아래의 조건으로 변경하는 것을 추천합니다.

  • Overlay: Color를 흰색에서 검정색, Opacity를 50%
  • Container: Padding을 0
  • Close > General: Button Text를 닫기나 X로 Location을 Top, Right 설정 후 각각 10px
  • Close > Background: Color를 흰색으로

그 외의 다른 요소들도 적절한 것으로 커스텀하여 디자인할 수 있습니다.

📚 함께 읽으면 좋은 글

Salient 테마 다른 사이트로 섹션 복제
Elementor 팝업 만들기

ALL RIGHTS ARE RESERVED.
magnifiercrossmenucross-circle