[코드활용팁] 플로팅 액션 버튼 만들기(고급)

캠페이너스는 코드를 쓰지 않아도 다양한 웹사이트, 쇼핑몰을 제작할 수 있도록 고안될 웹 제작 도구입니다. 그렇다고 코드를 완전히 사용하지 못하는 건 아닙니다. 코드를 사용하면 더 다양한 디자인이 가능하며, 아래 그림과 같은 플로팅 액션 버튼을 추가할 수도 있습니다.

이번 도움말에서는 코드를 활용해 플로팅 버튼(퀵바, 퀵메뉴)을 만드는 방법을 알아봅니다.

주의 : 도움말에서 제공하는 소스 코드를 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 불가합니다.

사이트에서 플로팅 버튼 적용 사례 살펴보기 >

파일 다운받기 (67KB)

샘플 플로팅 배너 이미지를 다운로드해 사용할 수 있습니다. 이미지 크기 및 위치 변경은 아래 소스 코드 주석을 참조하세요.

참고

본 도움말에 사용된 코드 및 샘플 배너 이미지를 있는 그대로 사용하려면 본문폭(가로폭)을 1200px로 권장드립니다.

설정방법 : 디자인 모드 > 관리자 모드 > 공통디자인 설정 > 본문폭 조절 > 저장

1단계: 배너 이미지 주소(URL) 획득하기

게시판에 배너 이미지를 올리고, 업로드한 배너 이미지의 주소(URL)를 복사해 활용할 수 있습니다. (사용 중인 자료실 게시판이 있는 경우 이 단계는 건너 뛸 수 있습니다.)

자료실 게시판에 이미지를 추가하고, 이미지 주소를 획득합니다. 게시판 활용방법
복사한 이미지 주소를 메모장에 보관해 둡니다.

2단계: 코드 복사 및 붙여넣기

내 사이트 관리자 페이지에 접속합니다.
왼쪽 메뉴에서 [환경설정 > SEO(검색엔진최적화)]를 클릭합니다.
마우스 휠 스크롤을 내려, 페이지 하단 Footer Code로 이동합니다.
아래의 소스 코드 전체를 복사하여, Footer Code 작성 칸에 붙여넣습니다.

<!-- 플로팅 배너 CSS -->
<style>
/* PC 배너1 스타일 */
.floBanPc1 {
  position: fixed;
  top: 128px; /* 윗쪽 끝에서부터의 거리 */
  right: 0;
  z-index: 99;
}
/* PC 배너2 스타일 */
.floBanPc2 {
  position: fixed;
  top: 204px; /* 윗쪽 끝에서부터의 거리 */
  right: 0;
  z-index: 99;
}
/* 모바일 배너1 스타일 */
.floBanMob1 {
  position: fixed;
  bottom: 130px; /* 아래 끝에서부터의 거리 */
  right: 0; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}
/* 모바일 배너2 스타일 */
.floBanMob2 {
  position: fixed;
  bottom: 80px; /* 아래 끝에서부터의 거리 */
  right: 0; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}
</style>

<!-- 플로팅 배너 HTML -->
<!-- PC 배너1 -->
<div class="floBanPc1 hidden-md hidden-sm hidden-xs">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>
<!-- PC 배너2 -->
<div class="floBanPc2 hidden-md hidden-sm hidden-xs">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>
<!-- 모바일 배너1 -->
<div class="floBanMob1 hidden-lg">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>
<!-- 모바일 배너2 -->
<div class="floBanMob2 hidden-lg">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>

3단계: 코드 수정하기

아래의 설명과 코드 내 주석을 참조하여 각 배너에 맞게 코드를 수정합니다.

1) PC 배너 스타일 수정하기

붙여넣은 코드의 PC 배너 위치를 수정합니다. 작성된 주석을 읽어 보고, 숫자를 변경해 위치를 잡아주세요.

/* PC 배너1 스타일 */
.floBanPc1 {
  position: fixed;
  top: 128px; /* 윗쪽 끝에서부터의 거리 */
  right: 0;
  z-index: 99;
}
/* PC 배너2 스타일 */
.floBanPc2 {
  position: fixed;
  top: 204px; /* 윗쪽 끝에서부터의 거리 */
  right: 0;
  z-index: 99;
}

2) 모바일 배너 스타일 수정하기

붙여넣은 코드의 모바일 배너 위치를 수정합니다. 작성된 주석을 읽어 보고, 숫자를 변경해 위치를 잡아주세요.

/* 모바일 배너1 스타일 */
.floBanMob1 {
  position: fixed;
  bottom: 130px; /* 아래 끝에서부터의 거리 */
  right: 0; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}
/* 모바일 배너2 스타일 */
.floBanMob2 {
  position: fixed;
  bottom: 80px; /* 아래 끝에서부터의 거리 */
  right: 0; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}

3) PC 배너 HTML 수정하기

PC 배너를 페이지에 표시하고, 배너 클릭 시 이동할 링크, 배너 이미지의 주소, 크기를 수정합니다.

참고: 배너이미지주소에는 위 1단계에서 메모한 배너 이미지 링크를 추가해 주세요.

<!-- PC 배너1 -->
<div class="floBanPc1 hidden-md hidden-sm hidden-xs">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>
<!-- PC 배너2 -->
<div class="floBanPc2 hidden-md hidden-sm hidden-xs">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>

4) 모바일 배너 HTML 수정하기

모바일 배너를 페이지에 표시하고, 배너 클릭 시 이동할 링크, 배너 이미지의 주소, 크기를 수정합니다.

참고: 배너이미지주소에는 위 1단계에서 메모한 배너 이미지 링크를 추가해 주세요.

<!-- 모바일 배너1 -->
<div class="floBanMob1 hidden-lg">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>
<!-- 모바일 배너2 -->
<div class="floBanMob2 hidden-lg">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>

(선택 사항) 4단계: 상품 상세페이지 메뉴 예외처리

모바일 상품 상세페이지에서 하단 구매하기 버튼과 플로팅 배너 이미지가 겹칠 수 있습니다. 이에 따라 아래의 도움말을 참고해 상품 상세페이지 메뉴에서 플로팅 배너의 위치가 변경되도록 예외처리합니다. 이 작업은 디자인 모드에서 처리 할 수 있습니다.

디자인 모드에 접속합니다.
왼쪽 상단의 메뉴 관리 ≡ 를 클릭합니다.
글로벌 메뉴에서 상품 상세페이지 메뉴를 클릭합니다.
왼쪽 상단의 위젯 추가 ＋ 버튼을 클릭합니다.
코드 위젯을 클릭합니다.
코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.
아래의 코드를 복사해, 코드 설정에 붙여넣습니다.

참고: 아래 코드는 모든 배너를 숨기는 코드입니다. 특정 배너는 표시하려는 경우, 해당 배너의 클래스를 삭제합니다. 예를 들어, PC 배너1만 표시하려면 .floBanPc1 줄 전체를 삭제합니다.

 <style>
 /* 모바일 버전 플로팅 배너를 위로 50px 올림 */
 .floBanMob1 {bottom: 130px!important;}
 .floBanMob2 {bottom: 80px!important;}
 </style>

저장 버튼을 클릭합니다.

(선택 사항) 5단계: 통합검색 메뉴 예외처리

필요하신 경우 통합검색 메뉴에서 플로팅 배너가 표시되지 않도록 예외처리합니다. 이 작업은 디자인 모드에서 처리할 수 있습니다.

디자인 모드 왼쪽 상단의 메뉴 관리 ≡ 를 클릭합니다.
글로벌 메뉴에서 통합검색 메뉴를 클릭합니다.
왼쪽 상단의 위젯 추가 ＋ 버튼을 클릭합니다.
코드 위젯을 클릭합니다.
코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 코드 설정을 엽니다.
아래의 코드를 복사하고 붙여넣습니다.

참고: 아래 코드는 모든 배너를 숨기는 코드입니다. 특정 배너는 표시하려는 경우, 해당 배너의 클래스는 삭제합니다. 예를 들어, PC 배너1을 표시하려면 floBanPc1 줄 전체를 삭제할 수 있습니다.

 <style>
 /* 플로팅 배너 숨김 */
 .floBanPc1 {display: none!important;}
 .floBanPc2 {display: none!important;}
 .floBanMob1 {display: none!important;}
 .floBanMob2 {display: none!important;}
 </style>

저장 버튼을 클릭해 적용합니다.

(선택 사항) 6단계: 장바구니, 마이페이지, 로그인/가입하기 메뉴 예외처리

필요하신 경우 장바구니 메뉴, 마이페이지 메뉴, 로그인/가입하기 메뉴에도 플로팅 배너가 표시되지 않도록 예외 처리할 수 있습니다.

위 통합검색 메뉴에 사용된 코드를 복사해, 같은 방법으로 나머지 메뉴들도 예외 처리합니다.

참고: 위젯 복사 기능을 활용하시면 더욱 빠르고 간편하게 작업하실 수 있습니다. 위젯 복제방법

7단계: 미리보기 및 게시하기

디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
PC 및 모바일 브라우저에서 플로팅 배너가 작동하는지 확인합니다.
문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.