• 가이드

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

갤러리 이미지 클릭 시 새로운 갤러리가 나타나도록 설정할 수 있습니다. 이를 구현하는 방법은 몇 가지가 있습니다. 이 도움말에서는 갤러리의 이미지마다 링크를 걸 수 있는 기능과 모달을 활용해 갤러리 안에 갤러리를 표시하는 방법을 설명합니다.

설정방법

1단계, 상위 갤러리 만들기

페이지에 대표 이미지 갤러리를 추가하는 과정입니다. 이 갤러리를 통해 방문자는 더 자세히 보고 싶은 갤러리를 선택할 수 있습니다.

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단 메뉴 관리를 클릭해, 상위 갤러리를 추가할 새로운 메뉴를 생성합니다.
  3. 빈 메뉴에 갤러리 위젯을 추가하고, 기타 위젯을 삽입해 페이지를 꾸밉니다. 위젯 추가방법
  4. 추가한 갤러리 위젯의 설정을 켜줍니다. 위젯 설정 열기
  5. 설정 창 정가운데 이미지, 동영상 추가 마우스 포인터를 올립니다.
  6. 이미지 추가를 클릭해 내 PC에서 갤러리 대표 이미지들을 업로드해 줍니다.
    참고: 업로드하는 이미지는 모두 같은 비율로 편집하실 것을 권장합니다. 그렇지 않은 경우 상하, 좌우가 다소 잘려 보일 수 있습니다.
  7. (선택 사항) 설정 창 상단 디자인 탭을 클릭해 이미지 비율, 한 줄 표시, 간격 등 갤러리 모양을 편집합니다.
  8. 갤러리 설정 창 바깥 영역을 클릭해, 설정 창을 닫습니다.
2단계, 모달 하위 갤러리 만들기

위 1단계에서 제작한 갤러리의 각 이미지를 클릭하면 나타날 모달 갤러리 메뉴(들)을 제작합니다.

  1. 왼쪽 상단 메뉴 관리를 클릭합니다.
  2. 모달 항목에서 ⨁를 클릭합니다.

  3. 모달 메뉴의 메뉴명을 입력하고, 확인을 클릭하면, 새로운 모달 메뉴가 생성됩니다.
  4. 왼쪽 상단 위젯 추가를 클릭해, 갤러리 위젯을 추가합니다.
  5. 추가한 갤러리 위젯의 설정을 켜줍니다. 위젯 설정 열기
  6. 설정 창 정가운데 이미지, 동영상 추가에 마우스 포인터를 올립니다.
  7. 이미지 추가를 클릭해 내 PC의 이미지들을 업로드합니다.
  8. (선택 사항) 위 1~7번 항목을 반복하여, 위 1단계에서 추가한 대표 이미지 수 만큼 모달 갤러리를 만듭니다.

3단계, 갤러리에 링크 걸기

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

  1. 위 1단계에서 제작한 메뉴로 이동합니다. 왼쪽 상단 메뉴 관리를 클릭해 이동할 수 있습니다.
  2. 갤러리 설정을 열어 줍니다. 위젯 설정 열기
  3. 업로드된 이미지 중 가장 왼쪽 상단 첫 번째 이미지를 마우스로 클릭합니다.
  4. 이 상태에서 오른쪽 하단 링크 항목의 링크 방식을 모달로 변경하고, 클릭 시 이동할 모달 메뉴를 선택합니다.

  5. 같은 방법으로 남은 대표 이미지도 마우스 클릭 후 링크를 연결해 줍니다.
4단계, 미리보기 및 게시하기
  1. 디자인 모드 오른쪽 상단 미리보기  를 클릭합니다.
  2. 위 3단계에서 모달에 링크 건 대표 이미지를 클릭합니다.
  3. 각 대표 이미지를 클릭할 때마다 정상적으로 모달 갤러리가 표시되는지 확인합니다.
  4. 문제가 없다면 디자인 모드 오른쪽 상단 게시하기 버튼을 클릭해 적용합니다.
목록으로

아임웹 디자이너가 되어주세요!

개인 디자이너, 1인 기업을 위한 아임웹 디자이너 프로그램

리셀러/디자이너 신청

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.

115.6K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

297

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

1.8K

전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 채널, 엑심베이 공식파트너입니다.