안녕하세요. 린치핀소프트 한광희입니다.

Scroll Triggered Boxes 플러그인은 홈페이지 방문자가 포스트나 페이지를 읽을때 스크롤 된 특정 시점 이후에 팝업창을 생성하는 플러그인입니다.

예를 들어 블로그 구독이나 블로그나 페이지와 관련된 이벤트 또는 행사등을 팝업창으로 보여주고 싶을때 유용한 플러그인입니다. 쿠키의 설정이 가능하여, 방문자가 팝업창을 꺼버리면 지정한 일수만큼 해당 팝업창이 다시 생성되지 않는 기능과 팝업창의 생성 위치와 팝업창 생성 스크롤 높이 등도 조정 할 수 있는 추천하는 플러그인입니다.

 

screenshot-newtab 2016-03-07 17-46-14

린치핀소프트에서도 이 플러그인을 이용하여 방문자분들께 블로그 구독을 권유하는 팝업창을 생성하고 있습니다. 오늘은 이 스크롤 팝업창(Scroll Triggered Boxes)에 대해서 소개합니다.

 

Scroll-triggered-boxes 플러그인은 https://wordpress.org/plugins/scroll-triggered-boxes/ 이곳에서 다운로드 받을 수 있습니다.

 

screenshot-wordpress.org 2016-03-07 17-49-20

Scroll Triggered Boxes 플러그인은 블로그 작성 시점에서 최신인 워드프레스 4.4.2버전과 호환됩니다. 플러그인을 활성화한 이용자가 만명 이상으로 집계되는 많은 이용자가 사용하는 플러그인입니다. 팝업창 설정과 제작도 아주 간단합니다.

 

1.팝업창 생성 및 내용 입력

Scroll Triggered Boxes(이하 스크롤 박스라고 하겠습니다) 플러그인을 설치합니다. 설치 후에는 관리자 페이지에서 Scroll Triggered Boxes 라는 메뉴가 생성됩니다.

Scroll Triggered Boxes 메뉴를 클릭하여 Add New 버튼을 통해 새로운 팝업창을 생성합니다.

screenshot-www.linchpinsoft.com 2016-03-07 17-41-57

팝업창 작성의 스크린샷 입니다. 워드프레스에서 제공하는 텍스트 편집기를 이용하여 팝업창에 들어갈 내용을 입력합니다. Shortcode(쇼트코드) 도 적용이 되니 콘택트폼이나 별도의 플러그인에서 제공하는 쇼트코드를 활용해 볼 수도 있습니다. 이 예제에서는 구독신청 및 관리를 담당하는 별도의 플러그인에서 제공하는 쇼트코드를 활용하는 예제입니다.

 

 

2.팝업창 디자인 설정

screenshot-www.linchpinsoft.com 2016-03-07 17-41-572

Box Apperance 창은 팝업창의 디자인을 변경 할 수 있습니다.

  • Background color : 팝업창의 배경색
  • Text color : 팝업창 내의 텍스트 색
  • Box width : 팝업창의 너비(PX 기준)
  • Border color : 팝업창 경계선의 색
  • Border width : 팝업창 경계선의 너비
  • Border style : 팝업창 경계선의 스타일(대시/솔리드 등)

 

 

3.팝업창 설정

Box Options는 팝업창의 생성 시점 또는 생성되어야 하는 페이지등을 조정할 수 있는 중요한 옵션 화면 입니다.

screenshot-www.linchpinsoft.com 2016-03-07 17-41-573

 

  • Load this box if = 어느 조건에서 팝업창이 생성되도록 할지에 대해서 설정할 수 있습니다. 예를 들어 포스트(블로그 포스트)에서만 팝업창이 생성되게 할 경우(페이지가 아닌)” if post type is  = post”로 지정합니다. 이와 같은 규칙등을 복수로 적용 할 수 있으므로 특정 팝업창을 특정 페이지나 포스트에서 노출되도록 하는 등 다양한 커스텀이 가능할 수 있습니다.
  • Box Position = 팝업창이 생성되는 위치로 화면 가운데/ 화면 좌측 하단/ 화면 우측 하단 등으로 팝업창이 생성되는 위치를 지정 할 수 있습니다.
  • Animation = 팝업창이 생성될때의 애니메이션입니다.
  • Auto-show box? = “Yes, When At [] of page Height” 라디오 박스를 체크하고 해당 공란에 숫자(%)를 입력하세요. 입력된 숫자만큼 스크롤이 되면 그때 팝업창이 생성됩니다. 그외의 옵션에서는 페이지 로드시 또는 특정 엘리먼트 요소의 위치만큼 스크롤 되었을때 팝업창이 생성되게끔 지정하는 옵션입니다.
  • Cookie expiration days = 이 부분은 쿠키값을 지정하여 팝업창을 종료하고 난뒤 지정할 일 수 만큼 팝업창이 생성되지 않도록 하는 옵션입니다. “0”으로 설정하면 팝업창이 한번 닫은 적이 있더라도 그후 접속하면 계속 팝업창이 생성됩니다.( 입력한 “일”수 만큼 팝업창은 생성되지 않습니다)
  • do not auto-show box on small screens? = 스마트폰이나 태블릿PC같은 해상도가 작은 디바이스 환경에서 팝업창을 생성시킬지를 지정하는 옵션입니다.
  • Auto-hide? = 이용자가 스크롤을 다시 위로 올릴경우 생성된 팝업창을 숨길지 지정합니다.

 

 

위의 설명한 부분을 살펴보시고 직접 팝업창을 만들고 테스트해보세요- Scroll triggered Boxes의 플러그인은 이처럼 다양한 옵션과 설정을 통해 만족스러은 스크롤 팝업창을 생성 할 수 있도록 도와줄겁니다.