알림
뒤로

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

도움말

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

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



설정방법


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. (선택 사항) 반복 섹션을 숨겨야 하는 모든 메뉴에 해당 옵션을 추가해줍니다.








 

PC 하단 고정 섹션 구현하기 (코드, 하단 고정 메뉴) 구글에서 거절 사유로 ‘앱 검토에 로그인 사용자 인증 정보 필요’ 안내를 받은 경우
목록

상호명 : 애드리빙

서울시 마포구 마포대로 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

test