모바일 하단 고정 섹션 구현하기 (코드, 하단 고정 메뉴)
섹션 반복 기능과 섹션의 위치를 수정하는 코드를 활용해, 아래 애니메이션과 같은 하단 고정 메뉴를 제작할 수 있습니다.
중요: 캠페이너스에서 제공하지 않는 기능을 코드로 해결하는 도움말입니다. 향후 캠페이너스의 기능 업데이트에 따라 본 도움말에서 안내되는 코드가 동작하지 않을 수 있습니다.
1단계: 모바일 전용 섹션 추가하기
- 디자인 모드에 접속합니다.
- 디자인 모드 상단 중앙의 모니터 아이콘을 클릭하여, 뷰포트를 모바일로 변경합니다.
- 마우스 휠 스크롤을 내려 페이지 최하단으로 이동합니다.
- 위젯이 없는 곳에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
참고: 위젯에 마우스 포인터를 올리지 마세요. - 컨텍스트 메뉴가 나오면 모바일 전용 섹션추가를 클릭합니다.
- 아래 그림과 같이 모바일 전용 섹션이 추가됩니다.
2단계: 모바일 전용 섹션을 페이지 최하단으로 내리기
- 추가된 모바일 전용 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
참고: 위젯에 마우스 포인터를 올리지 마세요. - 컨텍스트 메뉴가 나오면 아래로 이동을 클릭합니다.
- (선택 사항) 위 1~2번 과정을 반복하여, 모바일 전용 섹션을 페이지 최하단으로 이동시킵니다.
3단계: 하단 섹션 디자인 및 반복 설정하기
- 모바일 전용 섹션에 위젯을 추가하여, 섹션을 디자인합니다. 텍스트 위젯, 이미지 위젯 등을 사용해 방문예약, 전화연결 등의 버튼을 추가할 수 있습니다.
- 디자인 완료한 섹션의 오른쪽에 위치한 섹션 반복 설정 아이콘을 클릭합니다. 이제 이 섹션은 모든 메뉴에 표시됩니다.
참고: 특정 메뉴(예: 로그인, 마이페이지, 장바구니 등)에서는 하단 섹션이 표시되지 않도록 설정하려면 특정 메뉴의 반복 섹션 숨김 처리하기 도움말을 참고해 해제해 주세요.
4단계: 하단 섹션 ID 알아내기
- 위 3단계에서 디자인한 하단 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
참고: 위젯에 마우스 포인터를 올리지 마세요. - 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.
- 섹션 설정 창의 오른쪽에 위치한 섹션 ID를 마우스로 드래그하여 복사합니다.
5단계: 코드 추가 및 편집하기
- 디자인 모드 오른쪽 상단의 나가기 버튼을 클릭해, 관리자 페이지로 이동합니다.
- 왼쪽 메뉴에서 [환경설정 > SEO, 헤더설정]을 클릭합니다.
- 마우스 휠 스크롤을 내려 Header Code 항목으로 이동합니다.
- 아래의 코드를 복사해 붙여넣습니다.
<style> @media (max-width: 991px) { #섹션ID { position: fixed; left: 0px; bottom: 0px; z-index: 9999; width: 100%; } } </style> - 붙여넣은 코드에서 섹션ID라 작성된 부분을, 위 3단계에서 복사한 섹션ID 값으로 변경합니다.
- 저장 버튼을 클릭합니다.
6단계: 동작 확인하기
- 스마트폰 또는 태블릿으로 내 사이트에 접속합니다.
- 페이지 하단에 하단 메뉴가 표시 및 정상적으로 작동하는지 확인합니다.