PC 하단 고정 섹션 구현하기 (코드, 하단 고정 메뉴)

섹션 반복 기능과 섹션 위치를 브라우저 하단에 고정하는 코드를 활용하여 아래의 애니메이션과 같은 하단 고정 섹션(또는 메뉴)를 제작할 수 있습니다.

주의: 본 튜토리얼에서 제공하는 코드를 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 어려움을 미리 말씀드립니다.


설정방법


1단계: 빈 섹션을 추가하고 디자인하기


페이지 하단에 고정으로 표시할 나만의 섹션을 디자인합니다.

예를 들어, 위 애니메이션과 같이 방문자의 이메일을 받을 수 있는 입력폼이 삽입된 섹션을 만들 수 있으며, 버튼, 메뉴 리스트 위젯을 활용해 메뉴로 디자인할 수도 있습니다.

  1. 디자인 모드에 접속합니다. 접속방법
  2. 아무 메뉴에서 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 컨텍스트 메뉴가 나오면 빈 섹션추가 를 클릭합니다.

    참고:이 과정에서 생성한 섹션은 앞으로 모든 메뉴에서 표시되게 설정할 것이므로 아무 메뉴에서 빈 섹션을 추가해도 무방합니다. 필요한 경우 일부 메뉴(예: 상품 상세페이지, 마이페이지 등)에선 이 섹션이 표시되지 않도록 숨길 수도 있습니다.


  3. 빈 섹션이 나오면 위젯을 추가하고 배치하여 섹션을 디자인합니다.



2단계: 섹션 반복 설정하기


위 1단계에서 디자인한 하단 고정 섹션이 모든 메뉴에서 표시되도록 섹션 반복 기능을 활성화 합니다.

  1. 디자인한 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
    참고: 위젯에 마우스 포인터를 올리지 말고 섹션에 올려주세요.
  2. 컨텍스트 메뉴가 나오면 아래로 이동 을 클릭합니다.

  3. 위 1~2번 과정을 반복하여 섹션을 페이지의 가장 아래로 이동시켜 주세요.
  4. 해당 섹션이 페이지 최하단에 위치하게 되면, 섹션의 오른쪽에 섹션 반복 아이콘이 나타납니다.

  5. 섹션 반복 아이콘을 클릭하면 이 섹션은 이제부터 모든 페이지에 표시됩니다.



3단계: 섹션 ID 알아내기


위 1단계에서 제작한 섹션의 ID 값을 확인 후 복사합니다.

  1. 디자인한 하단 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
    참고: 위젯에 마우스 포인터를 올리지 마세요.
  2. 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.

  3. 섹션 설정 창의 오른쪽에 위치한 섹션 ID 를 마우스로 드래그하여 복사 후 메모장 등에 메모해 둡니다. (단축키: CTRL + C)



4단계: 코드 추가 및 편집하기


디자인한 섹션이 페이지 하단에 항상 고정되는 코드를 추가합니다.

  1. 디자인 모드 오른쪽 상단의 나가기 버튼을 클릭하여 관리자 페이지로 이동합니다.
  2. 왼쪽 메뉴에서 [환경설정 > SEO, 헤더설정]을 클릭해 이동합니다.
  3. 마우스 휠 스크롤을 내려 Footer Code 항목으로 이동합니다.
  4. 아래의 코드를 복사해 붙여넣습니다.

    <style> @media (min-width: 992px) {    #섹션ID {        position: fixed;        bottom: 0;        width: 100%;        z-index: 1040;    } }
    </style>
  5. 붙여넣은 코드에서 섹션ID 라 작성된 부분을 위 3단계에서 복사한 섹션ID 값으로 변경합니다.

  6. 저장 버튼을 클릭합니다.



5단계: 동작 확인하기


  1. 관리자 페이지 왼쪽 상단에 위치한 사이트 바로가기 메뉴를 클릭해 내 사이트에 접속합니다.
  2. 페이지 하단에 하단 고정 메뉴가 정상적으로 표시되고 작동하는지 확인합니다.


(선택 사항) 특정 메뉴에서 하단 고정 메뉴 감추기

특정 메뉴에서는 하단 고정 메뉴가 숨겨지도록 설정할 수 있습니다. 만약 상품 상세페이지, 장바구니, 마이페이지 등에서 하단 고정 메뉴가 사이트 이용을 방해하는 경우, 아래의 도움말에서 하단 고정 메뉴를 감춰보세요.

특정 메뉴의 반복 섹션 숨김 처리하기

섹션 반복 기능을 활용하면, 모든 메뉴마다 페이지 하단에 같은 디자인의 섹션이 표시되도록 설정할 수 있습니다. 다만 특정 메뉴에서는 반복 섹션이 나오지 않도록 숨김 처리해야 하는 경우 다음 방법을 참조할 수 있습니다.

반복 섹션 숨김 방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단 메뉴 관리를 클릭합니다.
  3. 반복 섹션을 해제할 메뉴명 오른쪽 끝 ⓘ 아이콘을 클릭합니다.
  4. 옵션 항목에서 반복 섹션 숨김을 선택합니다.

  5. (선택 사항) 반복 섹션을 숨겨야 하는 모든 메뉴에 해당 옵션을 추가해줍니다.







상호명 : 애드리빙

서울시 마포구 마포대로 63-8 삼창프라자빌딩 1539호

사업자등록번호 : 106-04-80687 조회하기

통신판매업신고번호 : 제 2015-서울용산-00950 호

T.1566-5733  F.02-6499-3299  E.so2815@naver.com

운영시간 : 평일 AM 10:00 ~ PM 18:00(공휴일 휴무)

점심시간 : AM 11:30 ~ PM 1:00