섹션 반복 기능과 섹션 위치를 브라우저 하단에 고정하는 코드를 활용하여 아래의 애니메이션과 같은 하단 고정 섹션(또는 메뉴)를 제작할 수 있습니다.
페이지 하단에 고정으로 표시할 나만의 섹션을 디자인합니다.
예를 들어, 위 애니메이션과 같이 방문자의 이메일을 받을 수 있는 입력폼이 삽입된 섹션을 만들 수 있으며, 버튼, 메뉴 리스트 위젯을 활용해 메뉴로 디자인할 수도 있습니다.
아무 메뉴에서 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 컨텍스트 메뉴가 나오면 빈 섹션추가 를 클릭합니다.
빈 섹션이 나오면 위젯을 추가하고 배치하여 섹션을 디자인합니다.
위 1단계에서 디자인한 하단 고정 섹션이 모든 메뉴에서 표시되도록 섹션 반복 기능을 활성화 합니다.
컨텍스트 메뉴가 나오면 아래로 이동 을 클릭합니다.
해당 섹션이 페이지 최하단에 위치하게 되면, 섹션의 오른쪽에 섹션 반복 아이콘이 나타납니다.
위 1단계에서 제작한 섹션의 ID 값을 확인 후 복사합니다.
컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.
섹션 설정 창의 오른쪽에 위치한 섹션 ID 를 마우스로 드래그하여 복사 후 메모장 등에 메모해 둡니다. (단축키: CTRL + C)
디자인한 섹션이 페이지 하단에 항상 고정되는 코드를 추가합니다.
아래의 코드를 복사해 붙여넣습니다.
<style> @media (min-width: 992px) { #섹션ID { position: fixed; bottom: 0; width: 100%; z-index: 1040; } } </style>
붙여넣은 코드에서 섹션ID 라 작성된 부분을 위 3단계에서 복사한 섹션ID 값으로 변경합니다.
특정 메뉴에서는 하단 고정 메뉴가 숨겨지도록 설정할 수 있습니다. 만약 상품 상세페이지, 장바구니, 마이페이지 등에서 하단 고정 메뉴가 사이트 이용을 방해하는 경우, 아래의 도움말에서 하단 고정 메뉴를 감춰보세요.