[코드활용팁] 플로팅 액션 버튼 만들기(고급)
캠페이너스는 코드를 쓰지 않아도 다양한 웹사이트, 쇼핑몰을 제작할 수 있도록 고안될 웹 제작 도구입니다. 그렇다고 코드를 완전히 사용하지 못하는 건 아닙니다. 코드를 사용하면 더 다양한 디자인이 가능하며, 아래 그림과 같은 플로팅 액션 버튼을 추가할 수도 있습니다.
이번 도움말에서는 코드를 활용해 플로팅 버튼(퀵바, 퀵메뉴)을 만드는 방법을 알아봅니다.
주의 : 도움말에서 제공하는 소스 코드를 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 불가합니다.
파일 다운받기 (67KB)
샘플 플로팅 배너 이미지를 다운로드해 사용할 수 있습니다. 이미지 크기 및 위치 변경은 아래 소스 코드 주석을 참조하세요.
참고
본 도움말에 사용된 코드 및 샘플 배너 이미지를 있는 그대로 사용하려면 본문폭(가로폭)을 1200px로 권장드립니다.
설정방법 : 디자인 모드 > 관리자 모드 > 공통디자인 설정 > 본문폭 조절 > 저장
1단계, 이미지 자료실(게시판) 만들기
게시판에 이미지를 업로드하고, 업로드한 이미지의 주소(URL)를 복사해 활용할 수 있습니다. (기존에 사용하던 자료실 게시판이 있는 경우 이 단계는 건너뜁니다.)
- 이미지 자료실로 활용할 게시판을 추가하고, 이미지 주소를 복사합니다.
- 게시판 활용방법
1) 메뉴 추가 : 디자인 모드 > 새로운 메뉴 추가 > 메뉴 설정 > 메뉴 숨김
2) 게시판 추가 및 권한 설정 : 게시판 위젯 추가 > 게시판 설정 > 권한 설정
3) 이미지 업로드 및 이미지 주소 복사하기
- 디자인 모드 > 게시판 메뉴(페이지) > 사이트 미리보기 > 게시판 글쓰기 버튼 클릭 > 이미지 첨부 클릭 > 이미지 업로드
- 텍스트 편집도구 오른쪽 코드보기 </> 클릭 > https://로 시작하는 이미지 주소(URL, 큰 따옴표 안의 주소만)를 마우스로 드래그 > 단축키(ctrl + c )를 눌러 복사
참고 : 이미지를 게시물에 삽입한 시점에, 해당 이미지는 서버에 업로드 완료됩니다. 따라서 게시물은 등록 완료할 필요 없이 바로 끄셔도 무방합니다.
- 게시판 활용방법
- 복사한 이미지 주소는 메모장에 보관해둡니다.
2단계, SEO 헤더설정 메뉴로 이동하기
- 관리자 메뉴에 접속합니다.
- 왼쪽 관리 메뉴에서 [환경설정 > SEO, 헤더설정]을 클릭합니다.
- 마우스 휠을 스크롤하여 하단 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>
- 후원하기 페이지 주소 : 후원하기 페이지 주소를 입력합니다.(http:// 또는 https://부터 입력)
- 후원하기 버튼 이미지 주소 : 게시판에 올려둔 후원하기 버튼의 이미지 주소(URL)를 입력합니다.
- 후원하기 버튼 이미지 크기 : 이미지의 너비(width)와 높이(height)를 입력합니다.
- 전화번호 : 전화상담 배너 클릭 시 수신 받을 전화번호를 입력합니다.
- 문의하기 페이지 주소 : 전화번호가 아닌 문의 페이지가 있다면 페이지 주소를 입력합니다. (http:// 또는 https://부터 입력)
- 문의하기 버튼 이미지 주소 : 게시판에 올려둔 문의하기 버튼의 이미지 주소(URL)를 입력합니다.
- 문의하기 버튼 이미지 크기 : 문의하기 버튼 이미지의 너비(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>
- 후원하기 페이지 주소 : 후원하기 페이지 주소를 입력합니다.(http:// 또는 https://부터 입력)
- 후원하기 버튼 이미지 주소 : 게시판에 올려둔 후원하기 버튼의 이미지 주소(URL)를 입력합니다.
- 후원하기 버튼 이미지 크기 : 이미지의 너비(width)와 높이(height)를 입력합니다.
- 전화번호 : 전화상담 배너 클릭 시 수신 받을 전화번호를 입력합니다.
- 문의하기 페이지 주소 : 전화번호가 아닌 문의 페이지가 있다면 페이지 주소를 입력합니다. (http:// 또는 https://부터 입력)
- 문의하기 버튼 이미지 주소 : 게시판에 올려둔 문의하기 버튼의 이미지 주소(URL)를 입력합니다.
- 문의하기 버튼 이미지 크기 : 문의하기 버튼 이미지의 너비(width)와 높이(height)를 입력합니다.
5) 저장하기
저장을 클릭해 작업한 코드들을 사이트에 적용합니다.
5단계, 상품 상세페이지 메뉴 예외처리
모바일 상품 상세페이지에서 하단 구매하기 버튼과 플로팅 배너 이미지가 겹칠 수 있습니다. 다음 도움말을 참조해 상품 상세페이지 메뉴에서만 위치가 변경되도록 예외처리합니다. 이 작업은 디자인 모드에서 진행합니다.
- 디자인 모드에 접속합니다.
- 왼쪽 상단 메뉴 관리를 클릭합니다.
- 글로벌 메뉴에서 상품 상세페이지 메뉴를 클릭합니다.
- 왼쪽 상단 위젯 추가 버튼을 클릭합니다.
- 코드 위젯을 클릭합니다.
- 코드 위젯에 마우스 커서를 올리고 마우스 오른쪽 버튼을 클릭합니다.
- 코드 설정을 엽니다.
- 다음 코드를 복사하여 코드 설정에 붙여넣습니다.
- 저장 버튼을 클릭합니다.
<style> /* 모바일 버전 플로팅 배너를 위로 50px 올림 */ .floBanMob1 {bottom: 130px!important;} .floBanMob2 {bottom: 80px!important;} </style>
(선택 사항) 6단계, 통합검색 메뉴 예외처리
필요하신 경우 통합검색 메뉴에서 플로팅 배너가 표시되지 않도록 예외처리합니다.
- 왼쪽 상단 메뉴 관리를 클릭합니다.
- 글로벌 메뉴에서 통합검색 메뉴를 클릭합니다.
- 왼쪽 상단 위젯 추가를 클릭합니다.
- 코드 위젯을 클릭합니다.
- 코드 위젯에 마우스 커서를 올리고 마우스 오른쪽 버튼을 클릭합니다.
- 코드 설정을 엽니다.
- 다음 코드를 복사하여 코드 설정에 붙여넣습니다.
- 저장 버튼을 클릭합니다.
<style> /* 플로팅 배너 숨김 */ .floBanPc1 {display: none!important;} .floBanPc2 {display: none!important;} .floBanMob1 {display: none!important;} .floBanMob2 {display: none!important;} </style>
(선택 사항) 7단계, 장바구니, 마이페이지, 로그인/가입하기 메뉴 예외처리
필요하신 경우 장바구니 메뉴, 마이페이지 메뉴, 로그인/가입하기 메뉴에도 플로팅 배너가 표시되지 않도록 예외 처리할 수 있습니다. 위 통합검색 메뉴에 사용된 코드를 복사해, 같은 방법으로 나머지 메뉴들도 예외 처리합니다.
참고 : 위젯 복사 기능을 활용하시면 더욱 빠르고 간편하게 작업하실 수 있습니다.
8단계, 작동여부 확인하기
- 디자인 모드 오른쪽 상단 미리보기를 클릭합니다.
- PC 및 모바일 브라우저에서 플로팅 버튼이 작동하는지 확인합니다.
9단계, 웹에 게시하기
플로팅 배너가 정상적으로 작동한다면 디자인 모드 오른쪽 상단 게시하기를 클릭해 실제 사이트에 적용합니다.