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