Popup Maker 플러그인은 무료로 다양한 유형의 팝업을 쉽게 생성하고 관리할 수 있는 강력한 도구로 워드프레스에서 인기 있는 팝업 플러그인입니다. 단, 일부 슬라이드 플러그인과 충돌될 수 있다는 점 참고하시기 바랍니다. 이 글에서는 해당 플러그인을 설치하여 팝업을 사이트에 적용하는 방법을 살펴 보겠습니다.
관리자 페이지에서 플러그인 > 새로 추가를 통해 Popup Maker 플러그인을 설치 후 활성화 합니다.
설치 후 왼쪽 사이드 바 메뉴에서 Popup Maker > Create Popup를 클릭합니다.
편집기에서 제목을 입력합니다. 제목은 내부에서 관리할 때 사용되며 방문자를 보지 못합니다. 팝업의 내용은 텍스트, 이미지, 버튼 등을 추가할 수 있습니다. 간단한 방법은 배너를 제작하여 이미지로 업로드하는 것이 간편합니다.
이미지를 업로드 한 후 기본으로 해상도가 낮게 설정되어 있어 이미지 클릭 후 편집 아이콘을 눌러 해상도 크기를 높여줍니다. PC에서는 너비 사이즈는 600 - 800사이를 추천합니다.
트리거는 팝업이 언제 열릴지를 설정하는 것으로 페이지가 로드 될때 자동으로 열리게 하려면 첫번째 옵션인 Time Delay/Auto Open으로 선택하고, 클릭시 오픈될 경우, 두번째 옵션 Click Open을 선택합니다. 하단의 On Popup Close는 팝업이 한번 닫히면 Prevent popup from showing to visitor again using a cookie가 활성화 되어있어 일정시간동안 팝업이 뜨는 것을 자동으로 방지해 줍니다.
위 트리거 설정은 페이지 로드 팝업이 자동으로 열리고, 팝업 닫기시 한달 동안 팝업이 나오지 않는 쿠키가 적용되었습니다.
트리거 Time Delay 설정에서 팝업이 오픈되는 지연 시간과 따로 생성된 쿠키를 연결할 수 있습니다.
그 외 Display, Close, Advanced 등 다양한 세부 조건들을 커스텀 할 수 있습니다. 이 글에서는 자주 쓰이는 부분만 설명하도록 하겠습니다. Display의 Preset 탭에서는 Center Popup으로 가운데로 위치를 고정합니다.
Display의 Size 탭에서는 위에서 지정한 이미지 사이즈와 동일하게 맞춰줍니다. 위에서 가로, 세로 크기가 600이므로 동일하게 입력합니다.
Close에서는 기본 텍스트명이 Close라고 되어있는데요. 이를 닫기 또는 X 표시자로 바꿀 수 있습니다.
Display의 Appearance 탭에서 Popup 테마를 선택할 수 있는데요. 기본으로 Default Theme로 적용되어 있습니다. Theme에서는 팝업의 디자인을 커스텀하여 만들 수 있습니다.
팝업에서 자주 사용할 디자인을 Default Theme에 저장해두고 앞으로 편하게 팝업 콘텐츠만 업로드하여 사용하면 됩니다. 오른쪽 메뉴 Popup Maker > Popup Theme > Default Theme에서 편집으로 들어갑니다.
현재 Default Theme에서 아래의 조건으로 변경하는 것을 추천합니다.
그 외의 다른 요소들도 적절한 것으로 커스텀하여 디자인할 수 있습니다.
Salient 테마 다른 사이트로 섹션 복제
Elementor 팝업 만들기
워드프레스에서 엘레멘터 빌더를 사용하여 팝업을 만들고 불러오는 방법을 단계별로 살펴보겠습니다. 참고로 이 기능을 위해서는 Elementor Pro 버전에서만 사용할 수 있습니다. 무료 버전에서는 기본적인 페이지 빌딩 기능만 사용할 수 있기 때문에 프로로 업그레이드 하여 사용하시는 것을 추천드립니다.
알림판에서 템플릿 > 새 템플릿을 추가를 클릭합니다.
템플릿 유형은 옵션에서 Popup으로 선택, 적당한 이름을 작성 후 템플릿 만들기
여러가지 템플릿이 나와 선택하거나 새롭게 디자인할 수 있습니다. 보통 지정된 디자인이 있기 때문에 엘레멘터 편집기를 사용하여 팝업의 내용을 제작할 수 있습니다. 텍스트, 이미지, 버튼 등을 추가할 수 있고, 편집기 상단 가운데의 세팅 아이콘을 선택하여 왼쪽 패널에서 Popup 설정을 변경합니다.
게시 후에 조건 탭에서 팝업을 표시할 특정 페이지나 섹션을 선택하거나 다양한 트리거 옵션을 설정할 수도 있습니다. 예를 들어 페이지 로드 시 트리거를 설정하면 해당 페이지 접근하면 팝업이 자동으로 표시 됩니다. 별도의 옵션 없이 저장 후에는 아래처럼 수동으로 팝업 불러오기를 할 수 있습니다.
팝업 표시를 위해 클릭할 버튼 또는 섹션을 선택 > 왼쪽 패널에서 링크 오른쪽 아이콘 선택 > Popup 선택
Popup을 클릭한 후 아래 설정 섹션에서 팝업 템플릿 이름을 검색하여 선택합니다. 이렇게 하면 엘레멘터 빌더로 팝업을 만들고 원하는 방식으로 불러올 수 있습니다.
