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

주의: 아임웹에서 제공하지 않는 기능을 코드로 해결하는 도움말입니다. 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 불가하며, 향후 아임웹 업데이트에 따라 정상적으로 작동하지 않을 수 있습니다.

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

설정방법

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

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

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

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

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

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

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

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

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

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

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

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

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

  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. 저장 버튼을 클릭합니다.
  1. 관리자 페이지 왼쪽 상단에 위치한 사이트 바로가기 메뉴를 클릭해 내 사이트에 접속합니다.
  2. 페이지 하단에 하단 고정 메뉴가 정상적으로 표시되고 작동하는지 확인합니다.

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

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

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

목록으로