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

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

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

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

파일 다운받기 (67KB)

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

참고
본 도움말에 사용된 코드 및 샘플 배너 이미지를 있는 그대로 사용하려면 본문폭(가로폭)을  1200px로 권장드립니다. 
설정방법 : 디자인 모드 > 관리자 모드 > 공통디자인 설정 > 본문폭 조절 > 저장

1단계, 이미지 자료실(게시판) 만들기

게시판에 이미지를 업로드하고, 업로드한 이미지의 주소(URL)를 복사해 활용할 수 있습니다. (기존에 사용하던 자료실 게시판이 있는 경우 이 단계는 건너뜁니다.)

  1. 이미지 자료실로 활용할 게시판을 추가하고, 이미지 주소를 복사합니다.
    1. 게시판 활용방법 
      1) 메뉴 추가 : 디자인 모드 > 새로운 메뉴 추가 > 메뉴 설정 > 메뉴 숨김
      2) 게시판 추가 및 권한 설정 : 게시판 위젯 추가 > 게시판 설정 > 권한 설정
      3) 이미지 업로드 및 이미지 주소 복사하기
      1. 디자인 모드 > 게시판 메뉴(페이지) > 사이트 미리보기 > 게시판 글쓰기 버튼 클릭 > 이미지 첨부 클릭 > 이미지 업로드
      2. 텍스트 편집도구 오른쪽 코드보기 </> 클릭 > https://로 시작하는 이미지 주소(URL, 큰 따옴표 안의 주소만)를 마우스로 드래그 > 단축키(ctrl + c )를 눌러 복사

      참고 : 이미지를 게시물에 삽입한 시점에, 해당 이미지는 서버에 업로드 완료됩니다. 따라서 게시물은 등록 완료할 필요 없이 바로 끄셔도 무방합니다.

  2. 복사한 이미지 주소는 메모장에 보관해둡니다.

2단계, SEO 헤더설정 메뉴로 이동하기

  1. 관리자 메뉴에 접속합니다.
  2. 왼쪽 관리 메뉴에서 [환경설정 > SEO, 헤더설정]을 클릭합니다.
  3. 마우스 휠을 스크롤하여 하단 Footer Code 항목으로 이동합니다.

3단계, 소스 코드 복사 및 붙여넣기

다음 플로팅 배너 소스 코드 전체를 복사하여,  Footer Code에 붙여넣습니다.

<!-- 플로팅 버튼 CSS 스타일 -->
<style>
/* PC 후원하기 버튼 스타일 */
.floBanPc1 {
  position: fixed;
  top: 128px; /* 윗쪽 끝에서부터의 거리 */
  right: 50%;
  margin-right: -683px; /* 가운데를 기준으로 오른쪽 거리 */
  z-index: 99;
}
/* PC 문의하기 버튼 스타일 */
.floBanPc2 {
  position: fixed;
  top: 204px; /* 윗쪽 끝에서부터의 거리 */
  right: 50%;
  margin-right: -683px; /* 가운데를 기준으로 오른쪽 거리 */
  z-index: 99;
}
/* Mobile 후원하기 버튼 스타일 */
.floBanMob1 {
  position: fixed;
  bottom: 130px; /* 아래 끝에서부터의 거리 */
  right: 15px; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}
/* Mobile 문의하기 버튼 스타일 */
.floBanMob2 {
  position: fixed;
  bottom: 80px; /* 아래 끝에서부터의 거리 */
  right: 15px; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}
</style>

<!-- 플로팅 버튼 HTML 표시 -->
<!-- PC 후원하기 버튼 -->
<div class="floBanPc1 hidden-md hidden-sm hidden-xs">
  <a href="후원하기 페이지 주소" target="_blank">
    <img src="후원하기 버튼 이미지 주소" width="76px" height="76px">
  </a>
</div>
<!-- PC 문의하기 버튼 -->
<div class="floBanPc2 hidden-md hidden-sm hidden-xs">
  <a href="tel:전화번호" 또는 "문의하기 페이지 주소">
    <img src="문의하기 버튼 이미지 주소" width="76px" height="76px">
  </a>
</div>
<!-- Mobile 후원하기 버튼 -->
<div class="floBanMob1 hidden-lg">
  <a href="후원하기 페이지 주소" target="_blank">
    <img src="후원하기 버튼 이미지 주소" width="50px" height="50px">
  </a>
</div>
<!-- Mobile 문의하기 버튼 -->
<div class="floBanMob2 hidden-lg">
  <a href="tel:전화번호" 또는 "문의하기 페이지 주소">
    <img src="문의하기 버튼 이미지 주소" width="50px" height="50px">
  </a>
</div><br>

4단계, 사이트에 맞게 코드 수정하기

코드 내 주석을 참조하여 내 사이트에 맞게 코드를 수정합니다.

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

붙여넣은 코드의  PC 배너 스타일을 수정합니다. 주석이 작성된 부분의 숫자만 변경해주세요.

/* PC 후원하기 버튼 스타일 */
.floBanPc1 {
  position: fixed;
  top: 128px; /* 브라우저 윗쪽 끝에서부터의 거리 */
  right: 50%; /* 왼쪽에 배치하려면 right를 left로 변경 */
  margin-right: -683px; /* 왼쪽에 배치하려면 margin-right를 margin-left로 변경  */
  z-index: 99;
}
/* PC 문의하기 버튼 스타일 */
.floBanPc2 {
  position: fixed;
  top: 204px; /* 브라우저 윗쪽 끝에서부터의 거리 */
  right: 50%; /* 왼쪽에 배치하려면 right를 left로 변경 */
  margin-right: -683px; /* 왼쪽에 배치하려면 margin-right를 margin-left로 변경  */
  z-index: 99;
}
2) Mobile 배너 스타일(CSS) 수정하기

붙여넣은 코드의  모바일 배너 스타일을 수정합니다. 주석이 작성된 부분의 숫자만 변경해주세요.

/* Mobile 후원하기 버튼 스타일 */
.floBanMob1 {
  position: fixed;
  bottom: 130px; /* 아래 끝에서부터의 거리 */
  right: 15px; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}
/* Mobile 문의하기 버튼 스타일 */
.floBanMob2 {
  position: fixed;
  bottom: 80px; /* 아래 끝에서부터의 거리 */
  right: 15px; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}
3) PC 플로팅 배너(HTML) 설정하기

PC 플로팅 배너를 페이지에 표시하고, 링크 및 배너 이미지 크기를 수정합니다.

<!-- PC 후원하기 버튼 -->
<div class="floBanPc1 hidden-md hidden-sm hidden-xs">
  <a href="후원하기 페이지 주소" target="_blank">
    <img src="후원하기 버튼 이미지 주소" width="76px" height="76px">
  </a>
</div>
<!-- PC 문의하기 버튼 -->
<div class="floBanPc2 hidden-md hidden-sm hidden-xs">
  <a href="tel:전화번호" 또는 "문의하기 페이지 주소">
    <img src="문의하기 버튼 이미지 주소" width="76px" height="76px">
  </a>
</div>
  1. 후원하기 페이지 주소 : 후원하기 페이지 주소를 입력합니다.(http:// 또는 https://부터 입력)
  2. 후원하기 버튼 이미지 주소 : 게시판에 올려둔 후원하기 버튼의 이미지 주소(URL)를 입력합니다.
  3. 후원하기 버튼 이미지 크기 : 이미지의 너비(width)와 높이(height)를 입력합니다.
  4. 전화번호 : 전화상담 배너 클릭 시 수신 받을 전화번호를 입력합니다.
  5. 문의하기 페이지 주소 : 전화번호가 아닌 문의 페이지가 있다면 페이지 주소를 입력합니다. (http:// 또는 https://부터 입력)
  6. 문의하기 버튼 이미지 주소 : 게시판에 올려둔 문의하기 버튼의 이미지 주소(URL)를 입력합니다.
  7. 문의하기 버튼 이미지 크기 : 문의하기 버튼 이미지의 너비(width)와 높이(height)를 입력합니다.
4) Mobile 플로팅 배너(HTML) 설정하기

모바일 플로팅 배너를 페이지에 표시하고, 링크 및 배너 이미지 크기를 수정합니다.

<!-- Mobile 후원하기 버튼 -->
<div class="floBanMob1 hidden-lg">
  <a href="후원하기 페이지 주소" target="_blank">
    <img src="후원하기 버튼 이미지 주소" width="50px" height="50px">
  </a>
</div>
<!-- Mobile 문의하기 버튼 -->
<div class="floBanMob2 hidden-lg">
  <a href="tel:전화번호" 또는 "문의하기 페이지 주소">
    <img src="문의하기 버튼 이미지 주소" width="50px" height="50px">
  </a>
</div>
  1. 후원하기 페이지 주소 : 후원하기 페이지 주소를 입력합니다.(http:// 또는 https://부터 입력)
  2. 후원하기 버튼 이미지 주소 : 게시판에 올려둔 후원하기 버튼의 이미지 주소(URL)를 입력합니다.
  3. 후원하기 버튼 이미지 크기 : 이미지의 너비(width)와 높이(height)를 입력합니다.
  4. 전화번호 : 전화상담 배너 클릭 시 수신 받을 전화번호를 입력합니다.
  5. 문의하기 페이지 주소 : 전화번호가 아닌 문의 페이지가 있다면 페이지 주소를 입력합니다. (http:// 또는 https://부터 입력)
  6. 문의하기 버튼 이미지 주소 : 게시판에 올려둔 문의하기 버튼의 이미지 주소(URL)를 입력합니다.
  7. 문의하기 버튼 이미지 크기 : 문의하기 버튼 이미지의 너비(width)와 높이(height)를 입력합니다.
5) 저장하기

저장을 클릭해 작업한 코드들을 사이트에 적용합니다.

5단계, 상품 상세페이지 메뉴 예외처리

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

  1. 디자인 모드에 접속합니다. 
  2. 왼쪽 상단 메뉴 관리를 클릭합니다.
  3. 글로벌 메뉴에서 상품 상세페이지 메뉴를 클릭합니다.
  4. 왼쪽 상단 위젯 추가 버튼을 클릭합니다.
  5. 코드 위젯을 클릭합니다.
  6. 코드 위젯에 마우스 커서를 올리고 마우스 오른쪽 버튼을 클릭합니다. 
  7. 코드 설정을 엽니다.
  8. 다음 코드를 복사하여 코드 설정에 붙여넣습니다. 
  9. 저장 버튼을 클릭합니다. 
 <style>
 /* 모바일 버전 플로팅 배너를 위로 50px 올림 */
 .floBanMob1 {bottom: 130px!important;}
 .floBanMob2 {bottom: 80px!important;}
 </style>

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

필요하신 경우 통합검색 메뉴에서 플로팅 배너가 표시되지 않도록 예외처리합니다.

  1. 왼쪽 상단 메뉴 관리를 클릭합니다.
  2. 글로벌 메뉴에서 통합검색 메뉴를 클릭합니다.
  3. 왼쪽 상단 위젯 추가를 클릭합니다.
  4. 코드 위젯을 클릭합니다.
  5. 코드 위젯에 마우스 커서를 올리고 마우스 오른쪽 버튼을 클릭합니다.
  6. 코드 설정을 엽니다. 
  7. 다음 코드를 복사하여 코드 설정에 붙여넣습니다.
  8. 저장 버튼을 클릭합니다. 
 <style>
 /* 플로팅 배너 숨김 */
 .floBanPc1 {display: none!important;}
 .floBanPc2 {display: none!important;}
 .floBanMob1 {display: none!important;}
 .floBanMob2 {display: none!important;}
 </style>

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

필요하신 경우  장바구니 메뉴, 마이페이지 메뉴, 로그인/가입하기 메뉴에도 플로팅 배너가 표시되지 않도록 예외 처리할 수 있습니다. 위 통합검색 메뉴에 사용된 코드를 복사해, 같은 방법으로 나머지 메뉴들도 예외 처리합니다.

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

8단계, 작동여부 확인하기

  1. 디자인 모드 오른쪽 상단 미리보기를 클릭합니다.
  2. PC 및 모바일 브라우저에서 플로팅 버튼이 작동하는지 확인합니다.

9단계, 웹에 게시하기

플로팅 배너가 정상적으로 작동한다면 디자인 모드 오른쪽 상단 게시하기를 클릭해 실제 사이트에 적용합니다.