섹션 반복 기능과 섹션의 위치를 수정하는 코드를 활용해, 아래 애니메이션과 같은 하단 고정 메뉴를 제작할 수 있습니다.
컨텍스트 메뉴가 나오면 모바일 전용 섹션추가를 클릭합니다.
아래 그림과 같이 모바일 전용 섹션이 추가됩니다.
컨텍스트 메뉴가 나오면 아래로 이동을 클릭합니다.
(선택 사항) 위 1~2번 과정을 반복하여, 모바일 전용 섹션을 페이지 최하단으로 이동시킵니다.
모바일 전용 섹션에 위젯을 추가하여, 섹션을 디자인합니다. 텍스트 위젯, 이미지 위젯 등을 사용해 방문예약, 전화연결 등의 버튼을 추가할 수 있습니다.
디자인 완료한 섹션의 오른쪽에 위치한 섹션 반복 설정 아이콘을 클릭합니다. 이제 이 섹션은 모든 메뉴에 표시됩니다.
섹션 설정 창의 오른쪽에 위치한 섹션 ID를 마우스로 드래그하여 복사합니다.
아래의 코드를 복사해 붙여넣습니다.
<style>
@media (max-width: 991px) {
#섹션ID {
position: fixed;
left: 0px;
bottom: 0px;
z-index: 1040;
width: 100%;
}
}
</style>
붙여넣은 코드에서 #섹션ID라 작성된 부분을 위 3단계에서 복사한 #섹션ID 값으로 변경합니다.
저장 버튼을 클릭합니다.
쇼핑 기능을 사용할 경우 결제하기 페이지에서 모바일 하단 고정 메뉴가 표시되지 않도록 감출 수 있습니다.
Footer Code 항목에 아래의 소스 코드 전체를 복사하여 추가로 붙여넣습니다.
<script>
if(window.location.pathname=='/shop_payment/'){
document.write('<style>#섹션ID{display:none !important;}</style>')
}
</script>
붙여넣은 코드에서 #섹션ID라 작성된 부분을 위 4단계 3번에서 복사한 #섹션ID값으로 변경합니다.
특정 메뉴에서는 하단 고정 메뉴가 숨겨지도록 설정할 수 있습니다. 만약 상품 상세페이지, 장바구니, 마이페이지 등에서 하단 고정 메뉴가 사이트 이용을 방해하는 경우, 아래의 도움말에서 하단 고정 메뉴를 감춰보세요.
특정 메뉴의 반복 섹션 숨김 처리하기