PC와 모바일에 최적화된 팝업창 만들기

팝업은 웹사이트에서 공지나 이벤트 등을 방문자에게 알리는 수단으로 웹사이트의 마케팅에 중요한 정보를 제공할 수 있습니다.

사이트 주소를 클릭하거나 메인페이지로 들어왔을 시 제일먼저 보게되는 화면이 '팝업'이 될 수 있기 때문에 

두부플러스 팝업앱에서 지원하는 다양한 설정기능을 활용하시어 쉽고 간단하지만 퀄리티 높은 팝업창으로 만드실 수 있도록 안내드리겠습니다.

두부플러스는 반응형 빌더로 제작하는 웹사이트이기 때문에, PC로 제작하면 모바일까지 함께 제작되어집니다.

팝업 또한 처음 제작을 PC로 하셨다면, 모바일 팝업까지 같이 한번에 제작이 되지만, 모바일만 따로 다른 팝업을 노출하고싶으시다면 이것 또한 가능합니다.

팝업설정을 통해 제작하고 싶은 팝업의 사이즈와 기간, 노출영역을 선택하실 수 있습니다.

팝업 형태(레이어팝업, 새창팝업), 노출기간(설정안함, 하루, 일주일, 한달, 직접지정), 창사이즈, 창위치, 창닫기 옵션

팝업설정 활용을 하신다면, 원하시는 방향의 팝업을 쉽게 설정하시어 웹사이트에 노출하실 수 있습니다.

팝업은 생성 후 바로 웹사이트에 노출되기 때문에, 팝업 생성을 완료하신 후 사이트에서 꼭! 확인하시어 수정이 필요한 부분은 빠르게 수정해주시기 바랍니다.

- 팝업은 배경색 + 텍스트를 이용하여 간단하게 제작하실수도 있고

https://master.dubuplus.com/디자인편집/1416267

- 팝업을 설정하시기 전 포토샵으로 이미지를 만들어 두신 후 이미지를 팝업으로 노출할 수도 있습니다.

https://master.dubuplus.com/디자인편집/8271617

- 위치 : 원하는 위치를 9등분하여 점으로 표시

- 비율 : 가로세로 비율 100%, 가운데, 가로 100%, 세로 100% 로 이미지 비율을 선택할 수 있음

- 노출 : 반복안함, 가로반복, 세로반복, 반복으로 이미지를 팝업창안에 노출할 수 있음

팝업디자인을 설정하시려면, [전체영역설정]을 클릭하시어 팝업디자인설정 페이지로 이동합니다.

[전체영역설정] : 파랑색 톱니바퀴버튼

배경이미지의 이미지추가를 하시면, 팝업의 이미지를 위치 지정하여  설정하실 수 있습니다.

이미지 추가를 하시면 [이미지추가]하단에 추가된 이미지를 확인하실 수 있으며, 위치와 반복을 지정하시어 노출되는 팝업을 확인하실 수 있습니다.

아래 이미지는 팝업 전체를 꽉 채운 가로세로 비율 100%로 선택하셨을 경우입니다.

아래 이미지는 세로로 반복되는 이미지를 선택하여, 가운데에만 이미지가 노출되는 형태입니다.

아래 이미지는 가로 100%로 설정 후 배경에 색상을 넣은 팝업입니다.

아래 이미지는이미지 위치를 우상단으로 설정 후 가운데 사이즈로만 설정한 팝업입니다.

아래 이미지는 우하단, 가운데 비율에 이미지를 반복으로 선택한 팝업입니다.

링크는, 팝업을 통해 링크 바로가기도 가능하기때문에 이벤트페이지나 랜딩페이지로 이동시킬 수 있습니다.

팝업 이미지를 클릭하면 이동하기때문에, 따로 버튼을 넣어 링크를 넣지 않고도 쉽게 제작할 수 있습니다. 

위의 이미지들처럼 팝업을 설정 하신 후 PC버전, 모바일 버젼을 필수로 확인해주셔야합니다.

아래 이미지는 모바일 버전으로 변경했을 시 화면이며,

모바일에는 [전체영역설정] : 파랑색 톱니바퀴버튼을 통해 다른 이미지를 넣어 팝업을 생성하였습니다.

팝업 이미지를 배경으로 하고, 요소추가를 통해 텍스트, 그림, 버튼을 넣어 팝업을 구성하실 수 있습니다.

아래 이미지는 모바일에서만 가능한 전화걸기입니다. 

모바일에서 전화걸기 링크를 방문자가 클릭하면, 바로 전화연결이 되기때문에 필수로 입력하시어 사용하시길 권장드립니다.

팝업앱으로 설정한 PC버젼 팝업과 모바일 버젼의 팝업창입니다.

팝업설정을 운영자님께서도 쉽게 하실 수 있는 방법을 설명드렸습니다.

웹사이트나 쇼핑몰, 숙박예약 사이트에서 팝업이 필요하실때 쉽고 간편한 방법으로 팝업을 제작해보시기 바랍니다.

※ 여러개의 팝업을 노출하시면 웹사이트 방문자에게 불편함을 줄 수 있기 때문에, 필요한 팝업만 설정하시어 노출하시기 바랍니다.

※ 여러개의 팝업을 노출하셔야 한다면, 위치를 각각 조절하시어 노출하시는것도 추천드립니다.