갤러리 클릭 시 새로운 갤러리가 나오게 하는 방법 (모달 활용)

갤러리 이미지를 클릭하면 새로운 갤러리가 표시되도록 메뉴를 구성할 수 있습니다. 이 구성은 주로 여러 개의 포트폴리오 또는 제품을 전시할 때 유용하며, 장소를 소개할 때도 사용할 수 있습니다.

갤러리 이미지 클릭 시 새로운 갤러리가 나오게 구성하는 방법은 여러 가지가 있지만, 이 도움말에서는 갤러리와 링크, 모달을 사용해 구현하는 방법을 설명합니다.

설정방법

갤러리를 클릭하면 나타날 상세 갤러리 모달(들)을 만듭니다.

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  3. 모달 항목에서 ⨁ 를 클릭합니다.
  4. 모달 메뉴명을 입력하고, 확인을 클릭합니다.
  5. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭하고, 갤러리 위젯을 선택합니다.
  6. 추가된 갤러리 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  7. 컨텍스트 메뉴가 나오면 갤러리 설정을 클릭합니다.
  8. 갤러리 설정 창 왼쪽 상단의 + 이미지, 동영상 추가 에 마우스 포인터를 올립니다.
  9. 이미지 추가를 클릭해 내 PC의 갤러리 이미지들을 올려줍니다.

  10. 갤러리 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
  11. (선택 사항) 위 2~10번 항목을 반복해, 필요한 만큼 모달을 만들고, 갤러리 이미지를 추가합니다.

위 1단계에서 제작한 갤러리 모달로 이동하기 위한 갤러리 홈 메뉴를 만듭니다.

  1. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  2. 상단 메뉴 항목의 오른쪽 끝에 위치한 ⨁를 클릭합니다.
  3. 메뉴명을 작성하고 확인을 클릭합니다.
  4. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭하고, 갤러리 위젯을 선택합니다.
  5. 추가된 갤러리 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  6. 컨텍스트 메뉴가 나오면 갤러리 설정을 클릭합니다.
  7. 갤러리 설정 창 왼쪽 상단의 + 이미지, 동영상 추가 에 마우스 포인터를 올립니다.
  8. 이미지 추가를 클릭해 갤러리 대표 이미지들을 올려줍니다.

    참고: 갤러리에 사용할 이미지는 모두 같은 비율로 편집하실 것을 권장합니다. 그렇지 않은 경우 상하, 좌우가 잘려 보일 수 있습니다.

  9. (선택 사항) 갤러리 설정 창 상단의 디자인 탭을 클릭해 이미지 비율, 한 줄 표시, 간격 등 옵션을 변경해 갤러리 모양을 편집합니다.

  10. 갤러리 설정 창 바깥 영역을 클릭해 설정을 완료합니다.

1단계에서 제작한 갤러리 이미지 클릭 시, 2단계에서 제작한 하위 갤러리 모달이 나타나도록 설정하는 단계입니다.

  1. 위 1단계에서 제작한 메뉴로 이동합니다. (왼쪽 상단의 메뉴 관리를 클릭해 이동할 수 있습니다.)
  2. 갤러리 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  3. 컨텍스트 메뉴가 나오면 갤러리 설정을 클릭합니다.
  4. 갤러리 설정에 있는 이미지 중 가장 왼쪽 상단의 첫 번째 이미지를 마우스로 클릭합니다.

  5. 이미지를 선택한 상태에서, 왼쪽 하단의 링크 항목의 링크 타입을 모달로 변경합니다. 그리고 해당 이미지 클릭 시 이동할 모달 메뉴를 선택합니다.

  6. 같은 방법으로 남은 대표 이미지도 마우스 클릭 후 모달 링크를 연결해 줍니다.
  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 대표 이미지를 클릭 후 정상적으로 모달이 열리는지 확인합니다.
  3. 문제가 없다면 디자인 모드 오른쪽 상단의 게시하기 버튼을 클릭해 적용합니다.
목록으로