모바일 하단 고정 섹션 구현하기 (코드, 고급)

섹션 반복 기능과 섹션의 위치를 수정하는 코드를 활용해, 아래 애니메이션과 같은 하단 고정 메뉴를 제작할 수 있습니다.

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



설정방법


1단계: 모바일 전용 섹션 추가하기

  1. 디자인 모드에 접속합니다. 접속방법
  2. 디자인 모드 상단 중앙의 모니터 아이콘을 클릭하여, 뷰포트를 모바일로 변경합니다. 뷰포트 변경방법
  3. 마우스 휠 스크롤을 내려 페이지 최하단으로 이동합니다.
  4. 위젯이 없는 곳에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
    참고: 위젯에 마우스 포인터를 올리지 마세요.
  5. 컨텍스트 메뉴가 나오면 모바일 전용 섹션추가를 클릭합니다.

  6. 아래 그림과 같이 모바일 전용 섹션이 추가됩니다.



2단계: 모바일 전용 섹션을 페이지 최하단으로 내리기


  1. 추가된 모바일 전용 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
    참고: 위젯에 마우스 포인터를 올리지 마세요.
  2. 컨텍스트 메뉴가 나오면 아래로 이동을 클릭합니다.

  3. (선택 사항) 위 1~2번 과정을 반복하여, 모바일 전용 섹션을 페이지 최하단으로 이동시킵니다.



3단계: 하단 섹션 디자인 및 반복 설정하기


  1. 모바일 전용 섹션에 위젯을 추가하여, 섹션을 디자인합니다. 텍스트 위젯, 이미지 위젯 등을 사용해 방문예약, 전화연결 등의 버튼을 추가할 수 있습니다.

  2. 디자인 완료한 섹션의 오른쪽에 위치한 섹션 반복 설정 아이콘을 클릭합니다. 이제 이 섹션은 모든 메뉴에 표시됩니다.

    참고: 특정 메뉴(예: 로그인, 마이페이지, 장바구니 등)에서는 하단 섹션이 표시되지 않도록 설정하려면 특정 메뉴의 반복 섹션 숨김 처리하기 도움말을 참고해 해제해 주세요.



4단계: 하단 섹션 ID 알아내기


  1. 위 3단계에서 디자인한 하단 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
    참고: 위젯에 마우스 포인터를 올리지 마세요.
  2. 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.
  3. 섹션 설정 창의 오른쪽에 위치한 섹션 ID를 마우스로 드래그하여 복사합니다.



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


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

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

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



(선택) 6단계: 결제하기 페이지 예외 처리하기


쇼핑 기능을 사용할 경우 결제하기 페이지에서 모바일 하단 고정 메뉴가 표시되지 않도록 감출 수 있습니다.

  1. Footer Code 항목에 아래의 소스 코드 전체를 복사하여 추가로 붙여넣습니다.

    <script>      if(.pathname=='/shop_payment/'){          ('<style>#섹션ID{display:none !important;}</style>')      } </script>
  2. 붙여넣은 코드에서 #섹션ID라 작성된 부분을 위 4단계 3번에서 복사한 #섹션ID값으로 변경합니다.



7단계: 동작 확인하기

  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